4.CSS盒子模型

一、盒子模型的概念：

• 用来放网页中的各种元素
• 网页设计中内容，如文字、图片等元素，都可是盒子

二、盒子模型属性：

1.宽度和高度：

1.宽度：

宽度：
width：长度值|百分比|auto
最大宽度：
max-width：长度值|百分比|auto
最小宽度：
min-width：长度值|百分比|auto

.one{max-width: 300px;}

2.高度：

高度：
height：长度值|百分比|auto
最大高度：
max-height：长度值|百分比|auto
最小高度：
min-height：长度值|百分比|auto

• 只适用于块级元素和替换元素。

3.哪些HTML元素可设置高和宽属性：

4.总结：

2.边框：

• 边框的四个方向样式一样。

1.边框宽度

border-width:thin | medium | thick | 长度值

2.边框颜色

border-color:颜色 | transparent

3.边框样式

• 边框的四个方向样式一样。
• 想要四个方向不同，则：
• border-[left | right|top|bottom]-width
• border-[left | right|top|bottom]-color
• border-[left | right|top|bottom]-style

4.边框缩写：

border : [宽度]|[样式]|[颜色]

5.不同方向缩写

border-top : [宽度]|[样式]|[颜色]
border-left: [宽度]|[样式]|[颜色]
border-right: [宽度]|[样式]|[颜色]
border-bottom: [宽度]|[样式]|[颜色]

• 空格分隔

3.内边距属性：

设置元素的内容与边框之间的距离（内边距或填充），分四个方向（上下左右）

• padding-top:长度值|百分比
• padding-right:长度值|百分比
• padding-bottom:长度值|百分比
• padding-left:长度值|百分比
• 说明：值不能为负。
  
  
  盒子在网页中占的空间，不单单和width和height有关，还和padding有关。

4.外边距属性：

设置元素与元素之间的距离（外边距），4个方向（上下左右）

• margin-top:长度值|百分比|auto
• margin-right:长度值|百分比|auto
• margin-bottom:长度值|百分比|auto
• margin-left:长度值|百分比|auto
  
• 默认情况下，相应HTML块级元素存在外边距：body,h1~h6,p…
• 声明margin属性，覆盖默认样式
• margin值为auto，实现水平方向居中显示效果
• 由浏览器计算外边距
• 垂直方向上，两个相邻元素都设置外边距，外边距会发生合并，其值为两个发生外边距合并的高度的较大值，

三、应用：

1.HTML元素分类：

1.display属性

• inline元素显示为内联元素，元素前后没有换行符
• block元素将显示为块状元素，元素前后带有换行符
• inline-block行内块元素，元素呈现为inline，具有block相应特性
• none不会被显示

display:inline

1. 内联元素或者设置成内联元素的元素之间会有缝隙，解决办法：删去相隔的空格或者换行or在外部添加div块级元素
2. 行内元素没有宽、高的属性

a:hover span{display:block;}

当鼠标经过链接时，span中的内容将会以块级元素的样式出现。

2.样式继承关系