6.水平布局
元素的水平方向的布局
元素在其父元素中水平方向的位置由一下几个属性共同决定
margin-left border-left padding-left width padding-right border-right margin-right
一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
=父元素内容区的宽度（必须满足）
举例：子元素 inner七个元素的值如下
0 +0 + 0+ 200 + 0 + 0 + 0 =600 ？？不成立
以上等式必须满足，如果相加结果等式不成立，则称为过度约束，则浏览器会让等式自动调整
-调整的情况
1:如果七个值中没有auto情况，则浏览器会调整margin-right值以使等式满足
0 +0 + 0+ 200 + 0 + 0 + 400 =600
2:这7个值中width，margin-left，margin-right，这三个值可以设置auto
如果有设置auto，则浏览器会自动调整auto的值，以使等式成立
0 +0 + 0+ auto + 0 + 0 + 0 =600 auto=600
0 +0 + 0+ auto + 0 + 0 + 200 =600 auto=400
3:如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大
4:如果三个值都是auto，也只会调整宽度
5:如果将两个外边距设为auto，宽度固定，则两侧外边距会设置为相同的值
会使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
7垂直布局
默认情况下，块元素宽高是被内容撑开的，如果自定义，那就听你设置的宽高
如果父元素宽高设置，小于内容区，则内容就会溢出
overflow属性设置
可选值：
visible 默认值 内容正常显示
hidden 裁剪多余的内容
scroll 生成双侧的滚动条
auto 按实际情况生成滚动条
overflow-x: ; 单独设置水平方向的溢出内容
overflow-y: ; 单独设置垂直方向的溢出内容
8.外边距的折叠
垂直外边距的重叠
-兄弟元素
如果外边距都是正值的话，外边距设置谁大听谁的
如果一正一负，外边距的设置，两者相加的和
如果两个都是负值，外边距的设置，绝对值大的听谁
注意：兄弟元素的外边距重叠问题，一般不需要额外做处理，他是有助于我们开发
-父子元素
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素，从而导致页面布局混乱
所以必须要处理
解决方案：
1、隔开父子相邻的外边距 用边框
但边框会影响到盒子的大小，也会改变页面的布局
2、开启元素BFC属性：overflow：非visible的值；
9.内联元素的盒子
从这几点分析：内容区、内边距 、边框 、外边距
行内元素的盒模型：
1、内容区：
默认情况下，不可以自定义内容区的大小
2、内边距
默认情况下，可以正常设置内边距，但垂直方向内边距，但它不影响整个页面的布局
3、边框：
默认情况下，可以正常设置边框，但垂直方向边框大小，不影响整个页面的布局
4、外边距
默认情况下，垂直方向的外边距，不可设置，水平方向可以设置，且水平方向的外边距不会重叠
display 设置元素的类型
可选值
none：隐藏元素（真正的消失，元素的位置不会保留）
block 将元素转成块元素
inline 将元素转成行内元素
inline-block 将元素转成行内块元素
table 将元素转成表格
flex 将元素转成弹性元素
visibility: ; 设置元素隐藏
可选值：
visible 默认值，元素正常显示（元素的位置还是会被保留）
hidden 设置元素隐藏
725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
