1.css所有标记（元素）都是盒子

2.盒模型的概念

content--一个元素中所有东西（包括这个元素中所有子标记及文字）

padding--内容content距离边框内边缘的距离

margin--盒子之间距离

border--盒子的边框

3.元素分类:

行内元素（内联元素）：

----display:inline；

-----内容多大，盒子多大，不可以设置width和height，元素会一个挨着一个的排列

如：a span img

---- 按行内显示的块元素： display:inline-block;

------可以设置width和height，元素会一个接着一个排列，自己不占一行

如：浮动后的元素（块/行内元素浮动都是） 、input

块级元素：

----块元素： display:block;

------不管内容多大，自己占一行；可以设置width和height.

如：p h1-6 ul li ol div table

----列表元素： display：list-item;

-----不管内容多大，自己占一行；可以设置width和height.

注意：块元素div不设置width，默认width为父元素（body）宽度，margin、padding、border均为0；若设置了width：100px，则宽度变为100，padding和border为0，剩下的部分是margin.

如：<li>

注：----块元素只是块级元素中的一个，块级元素包括块元素。

控制台没有display属性，默认就是inline

----IE6/7没有display：inline-block;这一属性，其他的display样式存在

CSS display:none和visibility:hidden的区别

visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！

Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度（width）和高度（height）。二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。

CSS display:none;

使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

4.元素之间距离计算:

(1)行内元素之间的距离=左边元素的margin-right+右边元素的margin-left和。

(2)块级元素之间的距离=上面元素的margin-bottom和下面元素的margin-top之间取大着

5.一个盒模型的实际宽度=margin-left+border-left+padding-left+width(content)+padding-right+border-right+margin-right

易混知识点：

说明：width只是content内容区域宽度

在特定情况下给元素设置background-color背景色时，浏览器作用区域都是content+padding+border.

border可以单独border-bottom/top/left/right设置使用，粗细默认值是medium,一般浏览器都将其解析为2px宽。

小知识：字体名中间有空格，使用时用“”括起来。

给某个元素内容设置水平对齐，给其父元素设置水平对齐方式即可。且这个父元素只能是块级元素（行内元素没有左中右方式）,行内元素不支持设置宽高（有内置宽高除外img），行内元素的宽高根据content自动设置，支持设置border.padding、margin.

块元素设置的宽高都是content的宽高，不是盒子整体的宽高

不能用行内元素包含块元素，也不能用<p></p>标记包含<div></div>标记

---行内元素设置paddind-top/bottom和margin-top/bottom，从content向上下两个方向伸缩，内容不上下移动，块级元素设置则是从上边框单向向下伸缩，上边框不上下移动，内容上下移动；

---行内元素和块级元素设置padding-left/bottom和margin-left/bottom，就是通用设置；

---若子元素为行内元素，无论父元素是否设置宽高，子元素的margin与padding都不会将父元素盒子撑开。子元素的width和height一直为auto.

---若子元素为块级元素，若父元素设置了宽高，子元素的padding和margin不可以将父元素盒子撑开；若父元素没有设置宽高，子元素的padding和margin可以将其撑开。

margin和padding属性写法：

pasdding/margin：12px(上下) 20px（左右）；

上 右 下 左；

上 左右 下；

margin控制的是块与块之间的距离。

子块的margin是以父块的content做参考

1.css所有标记（元素）都是盒子

2.盒模型的概念

content--一个元素中所有东西（包括这个元素中所有子标记及文字）

padding--内容content距离边框内边缘的距离

margin--盒子之间距离

border--盒子的边框

3.元素分类:

行内元素（内联元素）：

----display:inline；

-----内容多大，盒子多大，不可以设置width和height，元素会一个挨着一个的排列

如：a span img

---- 按行内显示的块元素： display:inline-block;

------可以设置width和height，元素会一个接着一个排列，自己不占一行

如：浮动后的元素（块/行内元素浮动都是） 、input

块级元素：

----块元素： display:block;

------不管内容多大，自己占一行；可以设置width和height.

如：p h1-6 ul li ol div table

----列表元素： display：list-item;

-----不管内容多大，自己占一行；可以设置width和height.

注意：块元素div不设置width，默认width为父元素（body）宽度，margin、padding、border均为0；若设置了width：100px，则宽度变为100，padding和border为0，剩下的部分是margin.

如：<li>

注：----块元素只是块级元素中的一个，块级元素包括块元素。

控制台没有display属性，默认就是inline

----IE6/7没有display：inline-block;这一属性，其他的display样式存在

CSS display:none和visibility:hidden的区别

visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！

Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度（width）和高度（height）。二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。

CSS display:none;

使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

4.元素之间距离计算:

(1)行内元素之间的距离=左边元素的margin-right+右边元素的margin-left和。

(2)块级元素之间的距离=上面元素的margin-bottom和下面元素的margin-top之间取大着

5.一个盒模型的实际宽度=margin-left+border-left+padding-left+width(content)+padding-right+border-right+margin-right

易混知识点：

说明：width只是content内容区域宽度

在特定情况下给元素设置background-color背景色时，浏览器作用区域都是content+padding+border.

border可以单独border-bottom/top/left/right设置使用，粗细默认值是medium,一般浏览器都将其解析为2px宽。

小知识：字体名中间有空格，使用时用“”括起来。

给某个元素内容设置水平对齐，给其父元素设置水平对齐方式即可。且这个父元素只能是块级元素（行内元素没有左中右方式）,行内元素不支持设置宽高（有内置宽高除外img），行内元素的宽高根据content自动设置，支持设置border.padding、margin.

块元素设置的宽高都是content的宽高，不是盒子整体的宽高

不能用行内元素包含块元素，也不能用<p></p>标记包含<div></div>标记

---行内元素设置paddind-top/bottom和margin-top/bottom，从content向上下两个方向伸缩，内容不上下移动，块级元素设置则是从上边框单向向下伸缩，上边框不上下移动，内容上下移动；

---行内元素和块级元素设置padding-left/bottom和margin-left/bottom，就是通用设置；

---若子元素为行内元素，无论父元素是否设置宽高，子元素的margin与padding都不会将父元素盒子撑开。子元素的width和height一直为auto.

---若子元素为块级元素，若父元素设置了宽高，子元素的padding和margin不可以将父元素盒子撑开；若父元素没有设置宽高，子元素的padding和margin可以将其撑开。

margin和padding属性写法：

pasdding/margin：12px(上下) 20px（左右）；

上 右 下 左；

上 左右 下；

margin控制的是块与块之间的距离。

子块的margin是以父块的content做参考