布局

布局

文档流

定义：网页是一个多层的结构，一层摞着一层，用户只能看到最上面一层，即俯视图，最下一层则称作文档流，我们创建的元素默认都是在文档流中进行排列

元素在文档流的特点

块元素

1.块元素会在页面中独占一行(自上向下垂直排列)

2.默认宽度是父元素的全部（会把父元素撑满）

3.默认高度是被内容撑开（子元素）

行内元素

1.行内元素不会独占页面的一行，只占自身的大小

2.行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列

3.则元素会换到第二行继续自左向右排列（书写习惯一致）

盒模型

结构：CSS将所有元素都设置为了一个矩形的盒子，由content，padding，border，margin组成

内容区（content）：元素中的所有的子元素和文本内容都在内容区中排列，内容区的大小由width 和 height两个属性来设置

边框（border）：边框属于盒子边缘，边框里属于盒子内部，边框的大小会影响到盒子的大小。补充：要想设置边框，至少需要三个属性，border-width，border-color，border-style

内边距（padding）：内容区和边框之间的距离是内边距，内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上， 盒子的可见框的大小，由内容区 内边距 和 边框共同决定

外边距（margin）：外边距不会影响盒子可见宽的大小，而影响盒子的位置。

属性	作用
margin-top	上外边距，设置一个正值，元素会向下移动
margin-right	默认情况下无效果
margin-bottom	下外边距，设置一个正值，其下边的元素会向下移动
margin-left	左外边距，设置一个正值，元素会向右移动

补充：1.Margin也可以设置负值，如果是负值则元素会向相反的方向移动

2.box-sizing用来设置盒子尺寸的计算方式（设置width和height）

属性值	作用
content-box	默认值，宽高用来设置内容区的大小
border-box	宽高用来设置整个盒子可见宽的大小

补充

margin，padding，border都有简写属性，遵循上右下左的顺序

盒子的布局

水平布局

元素在其父元素中水平方向的位置由以下几个属性共同决定，且需要符合等式 margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）

等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整（只有width，margin-left，margin-right可设置为auto）：

1.如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足

2.如果某个值为auto，则会自动调整为auto的那个值以使等式成立

3.如果将一个宽度和一个或两个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0

4.如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值，则可实现水平居中

垂直布局

1.默认情况下父元素的高度被内容撑开

2.子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出，使用 overflow 属性来设置父元素如何处理溢出的子元素，同时也有overflow-x，和overflow-y属性

属性值	作用
visible	默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden	溢出内容将会被裁剪不会显示
scroll	生成两个滚动条，通过滚动条来查看完整的内容
auto	根据需要生成滚动条

垂直外边距的折叠

1.相邻的垂直方向外边距会发生重叠现象

2.兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值），一正一负则取和，同为负则取较小值。

3.父子元素间相邻外边距，子元素的会传递给父元素（上外边距），会影响到页面的布局

行内元素的盒模型

1.行内元素不支持设置宽度和高度

2.行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

3.行内元素可以设置border，垂直方向的border不会影响页面的布局

4.行内元素可以设置margin，垂直方向的margin不会影响布局

补充：display属性值可设置元素的类型，visibility可用来设置元素的显示状态

display	作用
inline	将元素设置为行内元素
block	将元素设置为块元素
inline-block	将元素设置为行内块元素，即可设设置宽高又不独占一行
table	将元素设置为一个表格
none	元素不在页面中显示

visibility	作用
visible	默认值，元素在页面中正常显示
hidden	元素在页面中隐藏，但是依然占据页面的