盒子模型

宽度属性

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

高度属性

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

哪些html元素可以设置宽高？

块级元素：
    <p>,<div>,<h1>~<h6>,<ul>,<li>,<ol>,<dl>,<dt>,<dd>等
替换元素：(浏览器根据其标签的元素与属性来判断显示的具体内容)
    <img>,<input>,<textarea>等

边框属性

边框宽度(border-width)

边框颜色(border-color)
边框样式(border-style)

设置元素边框宽度 border-width: thin| medium| thick| 长度值 设置元素边框颜色 border-color: 颜色|transparent(全透明) 设置元素边框样式 border-style: 值

四个不同方向来表示（上 下 左 右）

border-[left | right | top | bottom]-width
border-[left | right | top | bottom]-color
border-[left | right | top | bottom]-style

边框缩写

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

不同方向

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

内边距属性

设置元素的内容与边框之间的距离(内边距或填充),分四个方向(上右下左) padding-top: 长度值 | 百分比 padding-right: 长度值 | 百分比 padding-tottom: 长度值 | 百分比 padding-left: 长度值 | 百分比 说明:值不能为负值

盒子在网页中占的空间不单单与width和height有关，还与padding有关

内边距属性缩写

• padding: 值1; //四个方向都为值1
• padding: 值1 值2; //上下=值1 左右=值2
• padding: 值1 值2 值3; //上=值1 左右=值2 下=值3
• padding: 值1 值2 值3 值4; //上 右 下 左（顺时针）

外边距属性

• margin-top: 长度值 | 百分比 | auto
• margin-right: 长度值 | 百分比 | auto
• margin-bottom: 长度值 | 百分比 | auto
• margin-left: 长度值 | 百分比 | auto 说明:值可以为负

设置元素与元素之间的外边距(外边距),四个方向(上右下左)

• margin: 值1; //四个方向都为值1
• margin: 值1 值2; //上下=值1 左右=值2
• margin: 值1 值2 值3; //上=值1 左右=值2 下=值3
• margin: 值1 值2 值3 值4; //上 右 下 左（顺时针）

默认情况下,相应块级元素存在外边距

声明margin属性,覆盖默认样式
body,h1,h2,h3,h4,h5,h6,p{ margin : 0 };

margin值为auto,实现水平方向居中效果(由浏览器计算外边距)

外边距属性

• 垂直方向,两个相邻元素都设置外边距，外边距会发生合并
• 合并后外边距高度 = 两个发生合并的外边距的最大值

HTML元素分类

块级元素，占一行

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

行级元素(内联元素)，一行显示

<span>,<a>,<em>  等

display属性

inline
元素将显示为内联元素,元素前后没有换行符**
block
元素将显示为块级元素,元素前后带有换行符**
inline-block
行内块元素,元素显示为inline，具有block相应特性**
none
此元素不会被显示**