持续更新......
1. 标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
- 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
- IE的content部分把 border 和 padding计算了进去;
无论是哪种盒子模型，子元素相对于父元素content定位。
改变盒子模型的属性为 box-sizing: border-box/content-box;。
2. CSS选择符有哪些？哪些属性可以继承？
- id选择器（ # myid）
- 类选择器（.myclassname）
- 标签选择器（div, h1, p）
- 相邻选择器（h1 + p）
- 子选择器（ul > li）
- 后代选择器（li a）
- 通配符选择器（ * ）
- 属性选择器（a[rel = "external"]）
- 伪类选择器（a:hover, li:nth-child）
-
可继承的样式： font-size font-family color, UL LI DL DD DT;
-
不可继承的样式：border
3. CSS选择器优先级算法如何计算？
!important > id > class > tag
important 比 内联优先级高
4. CSS选择器的权重
/*权重为1*/ div{ }
/*权重为10*/ .class1{ }
/*权重为100*/ #id1{ }
/*权重为100+1=101*/ #id1 div{ }
/*权重为10+1=11*/ .class1 div{ }
/*权重为10+10+1=21*/ .class1 .class2 div{ }
5.display有哪些值
| 属性 | 说明 |
|---|---|
| block | 像块类型元素一样显示 |
| none | 隐藏元素，并且不占位 |
| inline-block | 像行内元素一样显示，但其内容象块类型元素一样显示 |
| list-item | 像块类型元素一样显示，并添加样式列表标记 |
| table | 此元素会作为块级表格来显示 |
| inherit | 从父元素继承 display 属性的值 |
6. position属性值
-
absolute
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。 -
fixed
（老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 -
relative
生成相对定位的元素，相对于其正常位置进行定位。 -
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。 -
inherit
规定从父元素继承 position 属性的值
7. CSS3有哪些新特性？
新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （Shadow\Reflect）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
增加了旋转,缩放,定位,倾斜,动画，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation
8. 如何用CSS创建一个三角形？
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
9. 块元素水平垂直居中
<div id="container">
<div id="box">
元素水平居中
</div>
</div>
<style>
/* 利用transform */
#container {
position: relative;
width: 500px;
height: 500px;
background: #0099cc;
}
#box {
width: 100px;
height: 200px;
border: 2px solid blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 或者利用flex*/
#container {
position: relative;
width: 500px;
height: 500px;
background: #0099cc;
display: flex;
justify-content: center;
align-items: center;
}
#box {
width: 100px;
height: 200px;
border: 2px solid blue;
}
</style>
10. px，em和rem的区别
- px像素是相对于屏幕分辨率的相对长度单位。比较精准
- em是相对文本字体尺寸的相对单位（
1em = 16px）。当改变浏览器设置里的字体大小时，em值也会相应改变。
em会继承父级元素的大小，类似百分比。所以，它的值并不固定。 - rem（font size of the root element）是相对HTML根元素的相对单位，和px之间的转换规则和rem一样。它的优势在于不会继承父级元素，所以值固定。
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。从上面的计算结果，使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。
11. 如何清除浮动
最常用的两种方法如下（应用在父元素上面）：
<div id="box" class="clear">
<div id="child">a float box</div>
</div>
<style>
body {
padding: 100px;
}
#box {
border: 2px solid red;
}
#child {
float: left;
width: 100px;
height: 100px;
border: 2px solid green;
}
/*方法一*/
.clear {
overflow: hidden;
}
/*方法二*/
.clear:after {
display: block;
content: '';
clear: both;
}
</style>
网友评论