一、盒模型包括哪些属性
盒模型包括哪些属性
- margin:外边距,控制元素周围空间的间隔,它永远是透明的。
- border:边框。
- padding:内边距,用来使元素与内容有一定的间隔。
- content:内容。
在网页中,每个元素都被认为是一个矩形的盒子。
CSS3中新增了一种盒模型计算方式:box-sizing熟悉。盒模型默认的值是content-box, 新增的值是padding-box和border-box,几种盒模型计算元素宽高的区别如下:
content-box(默认)
布局所占宽度 = width + padding-left + padding-right + border-left + border-right
布局所占高度 = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
布局所占宽度= width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度= height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
布局所占宽度 = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度 = height(包含padding-top + padding-bottom + border-top + border-bottom)
二、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
作用是使得文本或img标签等内联元素(或与之相似元素)水平居中,其可作用在块级元素中的文本或img标签等行内元素中,使其在其父元素中居中
三、如果遇到一个属性想知道兼容性,在哪查看?
想要知道一个属性的兼容性,可以在Can I Use上面查看。比如说输入text-align,就可以知道它的兼容性。
四、IE 盒模型和W3C盒模型有什么区别?
- 早期的IE(5.5版本)用的是IE盒模型。
- IE678怪异模式(不添加 doctype)使用IE盒模型。
- chrome, ie9+, ie678(添加 doctype) 使用标准盒模型。
W3C盒模型:总宽度=margin-left + border-left + padding-left + width +padding-right +borer-right + margin-right.
IE盒模型:总宽度=margin-left + width(padding和border的值算在width里) +margin-right.
五、以下代码的作用?兼容性?
*{ box-sizing: border-box;}
作用:
使设置的元素的宽度=border-right+padding-right+实际内容的宽度+padding-left+border-left。
设置的元素的高度=border-top+padding-top+实际内容的高度+padding-bottom+border-bottom。-
兼容:
使用:
box-sizing:border-box;/Internet Explorer、Opera、Chrome/
-moz-box-sizing:border-box; /* Firefox /
-webkit-box-sizing:border-box; / Safari */