盒模型基本概念

认识盒模型

image.png
image.png

height、width不是盒子总宽高

image.png
image.png

width属性和weight属性

image.png
image.png

padding属性

image.png

padding是四个方向的

image.png
image.png

padding的四数值写法

image.png

padding的三数值写法

image.png

padding的二数值写法

image.png

灵活设置padding属性

image.png
image.png

marging属性详解

margin是盒子的外边距

image.png

margin也有四个方向

image.png

margin的塌陷

image.png

一些元素有默认的margin

image.png

盒子的水平居中

image.png
盒子的垂直居中，需要使用绝对定位技术实现

盒模型计算

image.png
image.png

box-sizing属性

image.png
image.png
box-sizing属性兼容到lE9

行内元素和块级元素

display属性

image.png
image.png

行内元素和块级元素的相互转换

image.png
image.png
image.png
image.png