程序媛老张前端Day3———CSS盒子模型

Day4——css盒子模型

网页中的布局可以看成事一个一个盒子组成，排在网页中。

属性：

宽度：width：px、%、auto（%是该元素相对于父级盒子宽度的%）
高度：height：px、%、auto
边框：border-width（边框宽度）：thin | medium | thick | 长度值
border-color（边框颜色）：颜色 、 transparent（透明）border-style（边框样式）

外边距margin（距离上一盒子的边距)

margin-left：左边距
margin-right：右边距
margin-top：上
margin-bottom：下

说明：值可以为任意，px，%，负值。

margin也可以缩写（padding也是）
margin：a 上下左右的距离a
margin：a b 上下a，左右b
margin：a b c 上a，左右b，下c
margin：a b c d 上a，右b，下c，左d

内边距padding（文本距离边框）同margin

块级元素和行内元素

块级元素：独占一行：p、div、h1~h6、ul、li、ol、dl、dt、dd等等
行内元素（内联元素）：一行显示：span、a、em等等，br可转行。

display属性（用来设置元素的显示方式）

属性值：

• none：不显示
• block：块显示 元素将显示为块级元素，元素前后会带有换行符
• inline：行内显示 元素将显示为内联元素，元素前后没有换行符
• inline-block：块级元素转换行内，行内转块级，中间有默认间隔 元素呈现为inline，具有block相应特性