1、css的盒子模型?
盒子模型分为两种 一种是W3C标准盒子模型 另一种是IE盒子模型 (ie6版本以下)
- W3C标准盒子模型是 元素所占空间大小 = 内容+padding + border+margin 对应的是box-sizing:content-box
- ie盒子模型元素所占空间大小 = 内容 + margin 其中内容包含了padding border以及内容 对应的是box-sizing:border-box
2、CSS选择器有哪些,哪些可以继承。
- 标签选择器
- class选择器
- id选择器
- 后代选择器
- 子代选择器
- 交际选择器
- 并集选择器
可以继承的属性有 font-开头的 text-开头的 line-开头的;
不可以继承的样式有 width margin padding border background等等
3、CSS优先级如何计算
- 标签选择器权重为1
- class选择器权重为10
- id选择器权重为100
- important是最大权限
5、如何剧中div?
-
给body设置text-align:center 缺点要将div元素转换成行内元素,并且会影响到body内的很多元素;
body { text-align: center; } div { background-color: pink; }
-
给盒子一个固定定位 缺点就是要写position属性
div { position: fixed; left: 50%; margin-left: -150px; background-color: pink; }
-
直接给div元素一个margin:auto;缺点要给元素设置宽高。
div { margin: 0 auto; width: 300px; height: 300px; background-color: pink; }
-
通过单行flex布局来实践 ,缺点就是要支持h5属性
div { display: flex; justify-content: center; align-items: center; }
6、如何居中一个浮动的元素。
居中一个浮动元素(套一个大盒子给它margin:0px auto。)
也可以给给他一个定位
div {
position: relative;
left: 50%;
margin-left: -150px;
float: left;
width: 300px;
height: 300px;
background-color: pink;
}
5、display属性有哪些值分别有什么作用?
display:none;可以隐藏一个元素。
display:block:可以显示一个元素, 也可以把行内元素装换成块级元素
display:inline-block;装换成行内快元素。
display:iniline:把其他元素转成行内元素;