CSS学习笔记（七）盒子模型

网页中盒子模型

1、宽度和高度

（1）宽度属性
width：长度值|百分比|auto
max-width：长度值|百分比|auto
min-width：长度值|百分比|auto
若元素高度在min-width和max-width之间，则最终高度=元素高度；若元素高度>max-width，则最终高度=max-width；若元素高度<min-width，则最终高度=min-width。
（2）高度属性
同宽度。

只有块级元素和替换元素能设置宽度和高度。

• 块级元素

<p>,<div>,<h1>~<h6>,<ul>,<li>,<ol>,<dl>,<dt>,<dd>等

• 替换元素

<img>,<input>,<textarea>等

2、边框属性

• border-width：thin|medium|thick|长度值
• border-color：颜色|transparent
• border-style：none（默认）|值
  
  分别定义上下左右边框：
  
  例如：

p{border-left-width:10px;
border-left-color:#ececec;
border-left-style:solid;}

简写格式：

例如：

p{border:10px #0099ee solid;}

3、内边距属性

注：padding值不能为负值

内边距属性简写：

4、外边距属性

1）外边距属性简写与内边距类似。
2）默认情况下，HTML块级元素存在外边距（body、h1~h6、p…），需要声明margin属性，覆盖默认样式：

body,h1,p{margin:0;}

或

*{
margin:0;
padding:0;
}

3）margin值为auto，可实现水平方向居中显示效果。由浏览器计算外边距。
4）垂直方向，两个相邻元素设置外边距，外边距会发生合并。
合并后的外边距高度=两个发生合并外边距的高度重的最大值。

5、盒子模型计算

设置内容的宽度和高度时要通过计算求得。

6、标准盒子模型和IE盒子模型

上文提到的即是标准盒子模型，IE盒子模型见下：

7、HTML元素分类

1）块级元素，每个元素占一行

<p>、<div>、<h1>~<h6>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>等

2）行内元素（内联元素），所有元素在一行显示，排满则换行

<span>、<a>、<em>、<strong>、<i>等

3）块级元素和行内元素转换：display属性

• inline
  元素将显示为内联元素，元素前后没有换行符。

• block
  元素将显示为块级元素，元素前后会带有换行符。

• inline-block
  行内块元素，元素呈现为inline，具有block响应特性

• none
  此元素不会被显示

例如：块级元素转化为内联元素

div{display:inline;}

注意点：

8样式继承关系