小知识点总结

了解哪些块级元素，行级元素？

CSS规范规定，每个网页元素都有一个display属性，用于确定该元素的类型，每个元素都有默认的display属性值，

比如div元素，它的默认display属性值为block，成为块级元素；而span元素的默认display属性值为inline，称为行内元素。

div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整矩形的样子。

span、a等行内元素没有自己的空间，是依附于其他块级元素存在的，因此设置高度、宽度等属性都是无效的。

常见的行内元素有a、br、em、input、span、strong、textarea、select、sub等等

常见的块级元素有div、form、h1-6、hr、ol、ul、p、table、dd、dl、dt、td、tr、th

可变元素可根据上下文语境决定该元素为块元素或行内元素

applet、button、del（删除文本）、iframe、ins（插入文本）、map、object、script

display有哪些属性值？

none、block、inline、inline-block、inherit（从父元素继承）

position有哪些属性值？

absolute、fixed、relative、static、inherit

Doctype有哪些类型？

过渡类型、严格类型（不能使用任何表现层的标识和属性）、框架类型（页面中包含框架）

如何清除浮动？

方法一：在父级元素添加overflow：hidden；

方法二：统一样式，新建一个样式选择器CSS命名为".clear"，样式为clear：both；

在父级</div>结束前加此div引入class=“clear”样式，即可清除浮动。

方法三：使用伪元素来清除浮动

.clearfix:after{

　　　　　　content:"";//设置内容为空

　　　　　　height:0;//高度为0

　　　　　　line-height:0;//行高为0

　　　　　　display:block;//将文本转为块级元素

　　　　　　visibility:hidden;//将元素隐藏

　　　　　　clear:both//清除浮动

　　　　　}

　　　　.clearfix{

　　　　　　zoom:1;为了兼容IE

　　　　}

画出盒模型？CSS3哪个属性可以改变盒模型？

CSS3的box-sizing：content-box || border-box ||  inherit

在网页排版设计中最经常用到的是，ul li,在ul li中我们为了好看往往会加边框，这样显的工整。

加上box-sizing：border-box以后，border和padding则是被包含在宽高之内的，哪怕padding和border加很多他也不会变行。