常见盒模型区域
书写元素内容区域：width+height
盒子可以实体化的区域：width+height+padding+border (背景可显示)
盒子实际占位的位置：width+height+padding+border+margin
宽度 width
!注意:
如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度.
<div> 元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 区域
<span> 元素等不需要独占一行的，其 width属性的值是内部元素内容自动撑开的宽度。
<body> 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度。
百分比
高度 height
与宽度类似
但如果一个元素不添加 height 属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。
边框的线条形状border-style
可以根据属性值类型进行单一属性划分border-方向-类型
细分时必须先写方向划分再写类型划分，否则属性名错误
p{border-right-color: pink;}
清除默认样式
大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。
盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，或通配符清除。
<ul> 和 <ol> 两种列表有默认的列表前缀：清除 list--style 属性。
<a> 标签的默认样式，设置页面中常用的a的公共样式：设置 color 和 text-decoration。
清除默认加粗效果：设置font-weight。(标题)
设置公共样式
给 <body> 标签设置整体文字样式，让大部分后代标签全部去继承。
overflow 属性
设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。
margin实现元素水平居中
针对类似 <div> 样式上必须独占一行的盒子，如果 子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto。
原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。
.box{ width:300px; height:300px; margin: 0 auto;}
margin 塌陷现象
margin 塌陷现象：标准流布局中 垂直方向如果有两个元素的外边距相遇，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。
- 同级元素塌陷
上面的元素有下边距 下面的元素有上边距 两边距相遇，真正盒子间距离是较大边距值。
- 父子元素塌陷
父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生margin 塌陷。
本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。
- 解决方法
①同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
②父子元素：
让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；
!更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。
!注意：水平方向的 margin 没有塌陷现象
浮动的元素也没有margin塌陷现象
盒模型自动内减
父子盒模型中，只有一个子元素，且子元素是类似 <div> 标签必须占一行的。不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。
如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减，子元素的 width 会自动收缩尺寸。
子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。
扫一扫
720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
