css盒子模型

1.内联元素和块级元素

• 块级元素：div、p、h1~h6、ol、ul、dl、li、dd、table、form
• 内联元素：a、br、i、img、input、label、select、span、textarea
• 内联块元素（内联元素，但是可以设置width、height）：img input

1.什么元素可以设置width和height

• 只设一个的话，相当于另一个是auto
• 只有块级元素，和内联块元素可以设置宽度和高度

2.border元素

1. border-color:颜色|transparent(透明)
2. border-style: none|solid|dashed
3. border-width

边框缩写: border: 宽度|样式|颜色

不同方向：border-top、border-left....

3.padding 内边距

• padding会改变盒子的宽度和高度，不可为负值

内边距属性的缩写

    padding: 值1                 // 4个方向都是值1
    padding: 值1 值2             // 上下=1 左右=2
    padding: 值1 值2 值3         // 上=1 左右=2 下=3
    padding: 值1 值2 值3 值4     // 上=1 右=2 下=3 左=4

4.margin

    margin: 值1                 // 4个方向都是值1
    margin: 值1 值2             // 上下=1 左右=2
    margin: 值1 值2 值3         // 上=1 左右=2 下=3
    margin: 值1 值2 值3 值4     // 上=1 右=2 下=3 左=4

默认情况下，html块级元素存在外边距 body，h1~h6、p.... 可以声明margin，覆盖默认样式

margin:auto

• 实现水平方向居中显示的效果，
• 浏览器来计算外边距，
• 相对于父元素的居中

5.盒子计算

margin+border+padding+width/height

6.display

inline： 内联元素有空格解决办法

• 元素之间不换行
• 在最外添加一个父元素div font-size:0

block:元素变成块级元素，可以设置width，height

区别

• inline:元素显示为内联元素，元素前后没有换行符
• block:元素显示为块级元素，元素前后有换行符
• inline-block:行内块元素，元素呈现为inline,但具有block相应特性
• none:此元素不会被显示

7.继承

对于样式属性，通过设置值为inherit，指定从父元素继承相对属性的值