CSS学习笔记——布局之盒子模型

一. 文档流

1. 文档流

• 网页是一层一层摞起来的，用户只能看见最上面的一层，网页最底层称为文档流，我们创建的元素都默认放置在文档流中。
• 元素有两种状态：
  在文档流中
  不在文档流中（脱离文档流）

2.元素在文档流中的特点

• 块元素
  - 独占一行，自上而下垂直排列
  - 默认宽度为父元素的100%
  默认高度被内容和子元素撑开
• 行内元素
  - 只占自身实际的大小，从左向右排列，一行满后自动换行
  - 默认高度和默认宽度都被内容撑开

二.盒子模型

1.简介

盒子模型也称为盒模型，边框模型。CSS将页面中的元素都设置成了矩形的盒子，每个盒子都由以下几部分组成：

• 内容区（content），元素中的内容和子元素都排列在其中
• 边框（border）
• 内边距（padding），内容区与边框之间的距离
• 外边距（margin），与其他盒子之间的距离

内容区，边框和内边距为盒子的可见框，外边距看不见

2.盒子的大小

width属性和height属性用来设置盒子的大小，box-sizing用来指定width和height的作用范围。

box-sizing 取值	作用
content-box	width和height只设置内容区的大小
border-box	width和height设置整个盒子可见框的大小（包括内容区，内边距和边框）

3.盒子的各个部分

1 > 内容区（content）

• 元素中的内容和子元素都排列在内容区
• 默认情况下，内容区的大小用width属性和height属性设置
  width 宽度，height 高度

2 > 边框（border）

边框会影响盒子的大小，要设置边框，必须要有以下三个属性：

属性	说明
border-width	边框的宽度
border-color	边框的颜色
border-style	边框的样式

边框的宽度

1.border-width，默认值一般为3px，用来设置四个边框的宽度

border-width：10px 20px 30px 40px;   /* 上  右  下  左 */
border-width: 10px 20px 10px;  /* 上  左右  下 */
border-width: 10px 20px ;   /* 上下  左右 */
border-width: 10px;  /* 上下左右 */

2.border-xx-width，xx可以为top，right，bottom，left，用来单独设置一个边的边框宽度

border-top-width：10px; /* 设置上边框的宽度*/
border-right-width：10px; /* 设置右边框的宽度*/
border-bottom-width：10px; /* 设置下边框的宽度*/
border-left-width：10px; /* 设置左边框的宽度*/

边框的颜色

1.border-color，默认值为color属性的值，用来设置四个边框的颜色（用法同宽度）

border-color：red green black blue;   /* 上  右  下  左 */
border-color: red green black;  /* 上  左右  下 */
border-color: red green ;   /* 上下  左右 */
border-color: red ;  /* 上下左右 */

2.border-xx-width，xx可以为top，right，bottom，left，用来单独设置一个边的边框颜色

border-top-color：red; /* 设置上边框的颜色*/
border-right-color：red; /* 设置右边框的颜色*/
border-bottom-color：red; /* 设置下边框的颜色*/
border-left-color：red; /* 设置左边框的颜色*/

边框的样式

1.border-style，默认值为none，用来设置四个边框的样式

• solid 实线
• dashed 虚线
• dotted 点状虚线
• double 双实线

border-style：solid dashed dotted double;   /* 上  右  下  左 */
border-style: solid dashed dotted ;  /* 上  左右  下 */
border-style: solid dashed ;   /* 上下  左右 */
border-style: solid ;  /* 上下左右 */

2.border-xx-style,单独设置一个边样式

border-top-style：solid; /* 设置上边框样式*/
border-right-style：solid; /* 设置右边框的样式*/
border-bottom-style：solid; /* 设置下边框的样式*/
border-left-style：solid; /* 设置左边框的样式*/

边框的简写

1.border，可以同时设置四个边框的各个属性，没有顺序

border:solid 10px red;  /* 四个边都为10px宽的红色实线边框 */

2.border-xx，单独设置一个边框的各个属性

border-left:solid 10px red;/* 给左边框设置10px宽的红色实线边框 */

3 > 内边距（padding）

内边距是盒子的内容区与边框之间的距离，内边距会影响盒子的大小。

1.padding，用来设置四个方向的内边距

padding:10px 20px 30px 40px;/* 上  右  下  左 */
padding:10px 20px 10px; /* 上  左右  下 */
padding:10px 20px;  /* 上下  左右 */
padding:10px;  /* 上下左右 */

2.padding-xx，用来单独设置一个方向的内边距，xx可取top，right，bottom，left

padding-left:10px; /* 左内边距 10px */

4 >外边距（margin）

外边距简介

外边距是当前盒子与其他盒子之间的距离，外边距不会影响盒子可见框的大小，但会影响盒子的位置和占地大小。
1.margin-xx，单独设置一个方向的外边距

• margin-top
  设置正值，盒子向下移动
  设置负值，向相反方向移动
• margin-right
  默认情况下不起作用
• margin-bottom
  设置正值，将其下边的元素向下移动
  设置负值，其下边的元素向相反方向移动
• margin-left
  设置正值，盒子向右移动
  设置负值，向相反方向移动

margin，外边距的简写，同时设置四个方向的外边距

margin:10px 20px 30px 40px;/* 上  右  下  左 */
margin:10px 20px 10px; /* 上  左右  下 */
margin:10px 20px;  /* 上下  左右 */
margin:10px;  /* 上下左右 */

外边距的折叠

垂直方向上相邻的外边距会发生折叠

垂直相邻的兄弟元素之间

– 两个元素外边距都为正值，取较大的一个

– 一个正值一个负值，取两外边距之和

– 两个负值，取绝对值较大的一个
（在开发中是有利的，不需要解决）

父子元素之间

子元素的上外边距会传递给父元素
（需要解决）

4.水平的布局

1.水平方向的布局由以下几个属性决定：

• 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 = 父元素的宽度

2.上述等式不成立时，称为过度约束，这时浏览器会自动调整以使等式成立。

• 没有auto值存在时
  默认调整margin-right
• 有auto值存在时，调整值为auto的属性

width为auto

调整width为父元素的100%

margin-left为auto

调整margin-left

margin-right为auto

调整margin-right

margin-left与margin-right都为auto

将左右边距设置成相同的值
我们经常利用这一点将元素水平居中

width，margin-left和margin-right都为auto

width设置为父元素的100%，左右边距都为0

5.垂直的布局

子元素排列在父元素的内容区，当子元素的大小超过了父元素的大小时，子元素会从父元素中溢出。

使用overflow属性来处理子元素的溢出

overflow: visible;  /* 默认值，子元素显示在父元素外部 */
overflow: hidden;  /* 溢出的部分隐藏 */
overflow: scroll;  /* 生成两个方向的滚动条 */
overflow: auto;  /* 根据情况自动生成滚动条 */

6.行内元素的盒模型

行内元素的盒模型

• 行内元素不独占一行
• 可以设置padding，border和margin，不影响垂直方向上的布局

display属性与visibility属性

• display，设置元素显示的类型，可以用来转换元素类型

取值

inline 以行内元素显示

block 以块元素显示

inline-block 以行内块元素显示

none 元素不显示，并且不占位置

• visibility，用来设置元素显示的状态

取值

visible 默认值，元素正常显示

hidden 元素不显示，但是占位置

7.浏览器的默认样式

浏览器会默认为元素设置样式，默认样式会影响布局，所以通常情况下需要去除。

• 使用通配选择器

*{
	margin: 0;
	padding: 0;
}

• 使用重置样式表（专门用来处理默认样式）
  reset.css 去除所有默认样式
  normalize 将默认样式进行统一

8.轮廓，阴影和圆角

1> 轮廓（outline）

outline属性用来设置元素的轮廓，用法与border相同，但outline不会改变盒子的大小，不会影响布局。

outline: 10px solid red;

2> 阴影（box-shadow）

box-shadow用来设置元素的阴影

取值

• 第一个值：水平方向上的偏移量，设置正值向右移动，设置负值向左移动。
• 第二个值：垂直方向上的偏移量，设置正值向下移动，设置负值向上移动。
• 第三个值：阴影的模糊半径，值越大越模糊。
• 第四个值：阴影的颜色。

box-shadow: 10px 10px 10px red;

3> 圆角（border-radius）

border-radius用来设置元素的圆角

border-radius的取值

• 圆角

border-radius:10px 20px 30px 40px; /* 左上 右上 右下 左下 */
border-radius:10px 20px 30px ; /* 左上  右上左下  右下 */
border-radius:10px 20px; /* 左上右下   右上左下 */
border-radius:10px; /* 四个角 */

• 椭圆角

border-radius:10px/20px;