CSS

盒模型

IE 盒子模型、W3C 盒子模型
盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)
区别： IE的content部分把 border 和 padding计算了进去;

BFC

BFC （块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响，它属于定位方案的普通流。
只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- overflow 除了 visible 以外的值 (hidden、auto、scroll)的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
同一个 BFC 下外边距会发生折叠
BFC 可以包含浮动的元素（清除浮动）
作用：
- 阻止元素被浮动元素覆盖
- 可以包含浮动元素（清除浮动）
- 阻止相邻元素的margin合并

CSS选择符有哪些？哪些属性可以继承

1. id选择器（ # myid）
2. 类选择器（.myclassname）
3. 标签选择器（div, h1, p）
4. 相邻选择器（h1 + p）
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（ * ）
8. 属性选择器（a[rel = "external"]）
9. 伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color
不可继承的样式：border padding margin width height

css 的基本语句构成是什么

选择器、属性和属性值

position 跟 display、overflow、float 这些特性相互叠加后会怎么样

display 属性规定元素应该生成的框的类型
position 属性规定元素的定位类型
float 属性是一种布局方式，定义元素在哪个方向浮动
类似于优先级机制：position：absolute / fixed 优先级最高，有它们在时，float 不起作用，display 值需要调整。float 或者 absolute 定位的元素，只能是块元素或表格

style 标签写在 body 后与 body 前有什么区别

页面加载自上而下

写在 body 标签后，由于浏览器以逐行方式对 HTML 文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在 windows 的 IE 下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）

什么是FOUC?如何避免

Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁
解决方法：把样式表放到文档的head

水平居中的方法

元素为行内元素，设置父元素text-align:center
如果元素宽度固定，可以设置左右margin为auto;
如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;
使用flex-box布局，指定justify-content属性为center
display设置为tabel-ceil

code

水平居中：给div设置一个宽度，然后添加margin:0 auto属性

div{
 	width:200px;
 	margin:0 auto;
  }

让绝对定位的div居中

div {
 	position: absolute;
 	width: 300px;
 	height: 300px;
 	margin: auto;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	right: 0;
 	background-color: pink;	/* 方便看效果 */
 }

垂直居中的方法

将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
使用flex布局，设置为align-item：center
绝对定位中设置bottom:0,top:0,并设置margin:auto
绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
文本垂直居中设置line-height为height值

如何垂直居中一个

#container     /**<img>的容器设置如下**/
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

css 垂直水平居中

已知宽高:

background: red;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;

不知宽高用定位+transform

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

flex

display: flex;
align-items: center;
justify-content: center;

清除浮动

.clearfix:after { 
    /*生成内容作为最后一个元素*/ 
    content: ""; 
    /*使生成的元素以块级元素显示,占满剩余空间*/ 
    display: block; 
    /*避免生成内容破坏原有布局的高度*/ 
    height: 0; 
    /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/ 
    visibility: hidden; 
    /*清除浮动元素对当前元素的影响*/ 
    clear: both; 
} 
.clearfix { 
    /*用于兼容IE, 触发IE hasLayout*/ 
    *zoom:1; 
}

css3有哪些新特性

圆角 border-radius
阴影和反射
文字特效text-shadow
线性渐变
旋转transform

CSS3新增伪类有那些

p:first-of-type 选择属于其父元素的首个元素的每个 元素。
p:last-of-type 选择属于其父元素的最后  元素的每个 元素。
p:only-of-type 选择属于其父元素唯一的 元素的每个  元素。
p:only-child 选择属于其父元素的唯一子元素的每个  元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个  元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容。
:enabled 已启用的表单元素。
:disabled 已禁用的表单元素。
:checked 单选框或复选框被选中。

display有哪些值？说明他们的作用

block 转换成块状元素

inline 转换成行内元素

none 设置元素不可见

inline-block 像行内元素一样显示，但其内容像块类型元素一样显示

list-item 像块类型元素一样显示，并添加样式列表标记

table 此元素会作为块级表格来显示

inherit 规定应该从父元素继承 display 属性的值

display:none、visibility：hidden和opacity: 0的区别

display:none （不占空间，不能点击）（回流+重绘）
visibility:hidden （占据空间，不可点击）（重绘）
opacity:0（占据空间，可以点击）（重建图层，性能较高）

rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

overflow: scroll 时不能平滑滚动的问题怎么处理

一个div使用了overflow:scroll; ，在移动端可以滚动，但是无法平滑滚动（就像浏览网页那样）
开启滚动硬件加速：

-webkit-overflow-scrolling: touch;

左边宽度固定，右边自适应

左侧固定宽度，右侧自适应宽度的两列布局实现

html结构:

<div class="outer">
    <div class="left">固定宽度</div>
    <div class="right">自适应宽度</div>
</div>

方法1：左侧div设置成浮动：float: left，右侧div宽度会自拉升适应

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.right {
    height: 200px;
    background-color: blue;
}

方法2：对右侧div进行绝对定位，然后再设置right=0，即可以实现宽度自适应

绝对定位元素的第一个高级特性就是其具有自动伸缩的功能，当我们将 width设置为 auto 的时候（或者不设置，默认为 auto ），绝对定位元素会根据其 left 和 right 自动伸缩其大小

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    position: absolute;
    left: 200px;
    top:0;          
    right: 0;
}

方法3：将左侧div进行绝对定位，然后右侧div设置margin-left: 200px

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
}
.right {
    height: 200px;
    background-color: blue;
    margin-left: 200px;
}

方法4：使用flex布局

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    display: flex;
    flex-direction: row;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    flex: 1;
}

文本超出部分显示省略号

单行

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;

利用伪元素画三角

.info-tab {
    position: relative;
}
.info-tab::after {
    content: '';
    border: 4px solid transparent;
    border-top-color: #2c8ac2; //修改top值改变箭头方向
    position: absolute;
    top: 0;
}

已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形

需要用到css的object-fit属性

div {
    width: 200px;
    height: 200px;
}
img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

如何修改chrome记住密码后自动填充表单的黄色背景

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
  }

← HTML JavaScript →