CSS面试常见知识点
原文->最近刚弄的个人博客：
http://hellopan.top/2017/10/15/css-knowledge-points/
intro
因为篇幅问题，把CSS和HTML的内容分开了…
css
a元素各种伪类的正确使用
- link:连接平常的状态
- visited:连接被访问过之后
- hover:鼠标放到连接上的时候
- active:连接被按下的时候
定义顺序:“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
zoom:1
Zoom属性是IE浏览器的专有属性， 它可以设置或检索对象的缩放比例。
产生BFC
清楚浮动产生的影响，与overflow:hidden;作用类似，使元素产生包裹性 。
标准和低版本IE盒子模型
- 有两种， IE 盒子模型、W3C 盒子模型；
- 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
- 区 别： IE的content部分把 border 和 padding计算了进去;
CSS选择符
- id选择器（ # myid）
- 类选择器（.myclassname）
- 标签选择器（div, h1, p）
- 相邻选择器（h1 + p）
- 子选择器（ul > li）
- 后代选择器（li a）
- 通配符选择器（ * ）
- 属性选择器（a[rel = “external”]）
- 伪类选择器（a:hover, li:nth-child）
css属性继承
- 可继承的样式： font-size font-family color, UL LI DL DD DT;
- 不可继承的样式：border padding margin width height ;
CSS优先级算法
- 按CSS代码中出现的顺序决定，后者CSS样式居上；（近水楼台 先得月）
- !important声明specificity值优先级最高
- 同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
- 权重: id(100) > class(10) > tag(1)
居中div
- 水平居中
div{
width:200px;
margin:0 auto;
}- 水平垂直居中
/* 第一种 */
div{
position: relative; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */
background-color: pink; /* 方便看效果 */
}
/* 第二种 */
div{
position: absolute; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
/* 第三种 */
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
/* 第四种 */
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}position
- absolute
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。- fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。- relative
生成相对定位的元素，相对于其正常位置进行定位。- static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。- inherit
规定从父元素继承 position 属性的值。
em rem
- 1em等于当前的字体尺寸，数值的改变意味着字体大小的调整。em 有继承这个特性，也就是说，外部父元素定义了字体的em大小，内部子元素会继承这一属性的样式。
- rem = root em 。顾名思义，root即根部的，顶部的。也就是根部的em，这个根部指的是HTML根元素。所以rem的大小是针对HTML根元素的大小做字体的相对大小的调整。
:before和:after
:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。
- 伪类对象要配合content属性一起使用
- 伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
- 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
- 双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，
比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
以下的代码将会在页面中展现的是”HelloWorld”。
<style>
p:before{
content: "H" /*:before和:after必带技能，重要性为满5颗星*/
}
p:after{
content: "d" /*:before和:after必带技能，重要性为满5颗星*/
}
style>
<p>ello Worlp>我们通过浏览器的”审查元素”看到的内容是：
<p>
::before
"ello Worl"
::after
p>平常该怎么使用 eg:作为内容的半透明背景层
<style>
body{
background: url(img/1.jpg) no-repeat left top /*这里加了个图片背景，用以区分背景的半透明及内容的完全不透明*/
}
.test-div{
position: relative; /*日常相对定位(重要，下面内容也会介绍)*/
width:300px;
height: 120px;
padding: 20px 10px;
font-weight: bold;
}
.test-div:before{
position: absolute; /*日常绝对定位(重要，下面内容也会略带介绍)*/
content: ""; /*:before和:after必带技能，重要性为满5颗星*/
top:0;
left: 0;
width: 100%; /*和内容一样的宽度*/
height: 100%; /*和内容一样的高度*/
background: rgba(255,255,255,.5); /*给定背景白色，透明度50%*/
z-index:-1 /*日常元素堆叠顺序(重要，下面内容也会略带介绍)*/
}
style>
<div class="test-div">
<table>
<tr>
<td>Nametd>
<td><input placeholder="your name" />td>
tr>
<tr>
<td>Passwordtd>
<td><input placeholder="your password" />td>
tr>
<tr>
<td>td>
<td><input type="button" value="login" />td>
tr>
table>
div>CSS3新特性
- @Font-face
@font-face {
font-family: iconfont;
src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
} - CSS选择器
- E:last-child 匹配父元素的最后一个子元素E。
- E:nth-child(n)匹配父元素的第n个子元素E。
- E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
- :not(.input)：所有 class 不是“input”的节点
- 圆角 （border-radius）
- 多列布局 （multi-column layout）
- 阴影和反射 （Shadow\Reflect）
- 文字特效 （text-shadow）
- 文字渲染 （text-decoration）
- 线性渐变 （gradient）
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));Flexbox
一个完整的Flexbox指南
Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/a-guide-to-flexbox.html © w3cplus.com
多列等高
首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。
<style>
body{
padding:0; margin:0; color:#f00;}
.container{
margin:0 auto; width:600px; border:3px solid #00C;
overflow:hidden;
/*这个超出隐藏的声明在IE6里不写也是可以的*/
}
.left{
float:left; width:150px; background:#B0B0B0;
padding-bottom:2000px;
margin-bottom:-2000px;
}
.right{
float:left; width:450px; background:#6CC;
padding-bottom:2000px;
margin-bottom:-2000px;
}
style>
<div class="container">
<div class="left">我是leftdiv>
<div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度div>
<div style="clear:both">div>
div>css浏览器兼容问题
- margin加倍
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline;
例如：
<#div id=”iamfloat”>
相应的css为
#IamFloat{
float:left; margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}- min-width和min-height
IE 不认得min-这个定义,如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
要解决这个问题，可以这样：
#box{
width: 80px; height: 35px;
}
html>body #box{
width: auto; height: auto;
min-width: 80px; min-height: 35px;
}- 无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,
例如:
overflow:hidden | zoom:0.08 | line-height:1px- 渐进识别ie的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{
background-color:red;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}- IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。- Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。visibility:collapse;仅在Firefox下起作用,IE会显示元素,Chrome会将元素隐藏,但是占据空间.
初始化CSS样式
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
- 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化
淘宝的样式初始化代码：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin:0; padding:0;
}
body, button, input, select, textarea {
font:12px/1.5tahoma, arial, \5b8b\4f53;
}
h1, h2, h3, h4, h5, h6{
font-size:100%;
}
address, cite, dfn, em, var {
font-style:normal;
}
code, kbd, pre, samp {
font-family:couriernew, courier, monospace;
}
small{
font-size:12px;
}
ul, ol {
list-style:none;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
sup {
vertical-align:text-top;
}
sub{
vertical-align:text-bottom;
}
legend {
color:#000;
}
fieldset, img {
border:0;
}
button, input, select, textarea {
font-size:100%;
}
table {
border-collapse:collapse;
border-spacing:0;
}内容超过长度后以省略号显示
{
width: 160px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
- white-space: nowrap 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。
- overflow: hidden 隐藏超出单元格的部分。
- text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
visibility
- visible 默认值。元素是可见的。
- hidden 元素是不可见的。
- collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
- inherit 规定应该从父元素继承 visibility 属性的值。
visibility:collapse;仅在Firefox下起作用,IE会显示元素,Chrome会将元素隐藏,但是占据空间.
BFC
块级格式化上下文：block formatting context
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
BFC生成
- float的值不为none；
- overflow的值不为visible；
- display的值为inline-block、table-cell、table-caption；
- position的值为absolute或fixed；
约束规则
- 内部的BOX会在垂直方向上一个接一个的放置；
- 垂直方向上的距离有margin决定。（完整的说法是：属于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。）
- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。（这说明BFC中的子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界）；
- BFC的区域不会与float的元素区域重叠；
- 计算BFC的高度时，浮动子元素也参与计算；
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
浮动与BFC
- 使得父元素包含子元素，常见的方式是为父元素设置overflow：hidden或者浮动父元素。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。
多栏布局与BFC
- 上文提到的一条规则：与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式。
- 这种布局的特点在于左右俩栏的宽度固定，中间栏可以根据浏览器宽度自适应。
——BFC部分来自原文☞我对BFC的理解