1. 介绍一下标准的 CSS 的盒子模型? 低版本的 IE 的盒子模型有什么不同?
有两种: IE 盒子模型, W3C 盒子模型;
盒模型: 内容(content), 填充(padding), 边界(margin), 边框(border);
区别: IE 的 content 部分吧 border 和 padding 计算进去; 在 CSS3 中引入了 box-sizing 属性, 它可以允许改变默认的 CSS 盒模型对原宿宽高的计算方式.
共包括两个选项:
content-box: 标准盒模型, CSS 定义的宽高只包括 content 的宽高.
border-box:IE 盒模型, CSS 定义的宽高包括了 content,padding 和 border.
在标准模式下, 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右)
在怪异模式下, 一个块的总宽度 = width+margin(左右)(即 width 已经包括了 padding 和 border 值)
2.CSS 优先级算法如何计算?
优先级就近原则, 同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准
优先级为:
!important>id>class>tag
important 比内联优先级高
3. 如何居中 div?
水平垂直居中问题, 在 CSS 中 margin:0 auto; 可以实现水平居中, 但是在垂直中方面一直没有特定的属性, 知道 CSS3 的出现, 有了弹性盒, 可以通过设置弹性和直接设置居中位置, 做浏览器兼容的话可以通过使用一些 hack 处理负 margin 方法, table-cell 方法, 位移方法.
负 margin 方法
CSS 代码:
- .container{
- width:500px;
- height:400px;
- border:2px solid red;
- position:relative;
- }
- .inner{
- width:480px;
- height:380px;
- background-color:green;
- position:absolute;
- top:50%;
- left:50%;
- margin-top:-190px;
- margin-left:-240px;
- }
html 代码:
- <div class="container">
- <div class="inner"></div>
- </div>
这里, 我们首先用 top:50% 和 left:50% 让 inner 的坐标原点 (左上角) 移动到 container 的中心, 然后再利用负 margin 让它往左偏移自身宽的一半, 再往上偏移自身高的一半, 这样 inner 的中心点就跟 container 的中心点对齐了.
table-cell 方法
CSS 代码:
- div{
- width:300px;
- height:300px;
- border:3px solid red;
- display:table-cell;
- vertical-align:middle;
- text-align:center;
- }
- img{
- vertical-align:middle;
- }
HTML 代码:
<div> <img src="love.jpg"> </div>
通过将盒子转换为 table 元素, table 元素本身是可以通过属性控制位置, div 上面的 vertical-align:middle 是控制垂直方向上的居中的, 而 text-align:center 是控制水平方向的.
弹性盒子法
CSS 代码:
- .container{
- width:300px;
- height:200px;
- border:3px solid red;
- display: -webkit-flex;
- display: flex;
- -webkit-align-items: center;
- align-items: center;
- -webkit-justify-content: center;
- justify-content: center;
- }
- .inner{
- border: 3px solid #458761;
- padding: 20px;
- }
HTML 代码:
- <div class="container">
- <div class="inner">
我在容器中水平垂直居中
</div>
</div>
align-items 控制垂直方向的居中, justify-content 控制水平方向的居中. 这是 CSS3 的新方法.
位移方法
位移方法和 margin 定位方法一样, 只不过把 margin 改成了位移不需要计算一半是多少, 直接 transform:translate(-50%,-50%)
- div{
- width:200px;
- height:200px;
- background:green;
- position:absolute;
- left:50%;
- top:50%;
- transform:translate(-50%,-50%);
- }
div 绝对定位水平垂直居中(margin:auto 实现绝对定位元素的居中)
- div{
- width:200px;
- height:200px;
- background:green;
- left:0;
- top:0;
- bottom:0;
- right:0;
- margin:auto;
- }
4.position 的值 relative 和 absolute 定位原点是?
absolute 生成绝对定位的元素, 相对于值不为 static 的第一个父元素进行定位.
fixed (老 IE 不支持)生成绝对定位的元素, 相对于浏览器窗口进行定位.
relative 生成相对定位的元素, 相对于其正常位置进行定位.
static 默认值. 没有定位, 元素出现在正常的流中(忽略 top,bottom,left,right,z-index 声明).
inherit 规定从父元素继承 position 属性的值.
5.CSS 定义的权重
以下是权重的规则: 标签的权重为 1,class 的权重为 10,id 的权重为 100, 以下例子是演示各种定义的权重值:
- / 权重为 1/ div{
- }
- / 权重为 10/ .class1{
- }
- / 权重为 100/ #id1{
- }
- / 权重为 100+1=101/ #id1 div{
- }
- / 权重为 10+1=11/ .class1 div{
- }
- / 权重为 10+10+1=21/ .class1 .class2 div{
- }
如果权重相同, 则最后定义的样式会起作用, 但是应避免这种情况出现.
6. 请解释一下为什么会出现浮动和什么时候需要清除浮动? 清除浮动的方式?
浮动元素脱离文档流, 不占据空间. 浮动元素碰到包含他的边框或者浮动元素的边框停留.
1. 使用空标签清除浮动
这种方式是在所有浮动标签后面添加一个空标签定义 CSS clear:both; 弊端就是增加了无意义标签.
2. 使用 overflow
给包含浮动元素的父标签添加 CSS 属性 overflow:autozoom:1;zoom:1 用于兼容 IE6.
3. 使用 after 伪对象清除浮动
该方法只适用于非 IE 浏览器.
来源: http://www.jianshu.com/p/7f88eba5026d