CSS选择器
标签选择器
id选择器 #pink
类选择器
交集选择器(p.red 既是p标签 又是 .red 类选择器的关系)
相邻选择器（li+li）
子选择器（ul>li）
后代选择器(ul li)
并集选择器（p,
span,
）
通配符选择器（*）
属性选择器（）
伪类选择器（a:hover li:nth-child）
伪元素选择器
目标伪类选择器
字体综合设定
font:font-style font-weight font-size font-family
结构伪类选择器
li:first-child
li:last-child
li:nth-child(even,odd,n,)
目标伪类选择器
:target {
color: red;
font-size: 100px;
}
间距
字间距 letter-spacing
英文字母间距 word-spacing
行高 line-height
首行缩进 text-indent
文字样式
文字半透明
color: rgba(255,0,0,0.2);
文字阴影
text-shadow: 1px 2px 3px red;
背景简写
/*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/
background：#ccc url no-repeat fixed center top
background-color
background-image
background-repeat
background-attachment
background-position
background: #000 url(王者荣耀.png) no-repeat fixed center;
背景半透明 background: rgba(0,0,0,0.5)
多背景图片 background: url(哥.png) no-repeat left top,
hotpink url(美女.png) no-repeat left bottom;
块级元素 与行内元素 行内块元素
块级元素的特点
（1）独占一行
（2）高度，宽度、外边距以及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素。
- 注意：
- 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
- 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
行内元素的特点：
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）**行内元素只能容纳文本或则其他行内元素。**
- 行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
行高与高度的三大关系
如果 行高 等 高度 文字会 垂直居中
- 如果行高 大于 高度 文字会 偏下
- 如果行高小于高度 文字会 偏上
border-collapse
padding
padding不撑开盒子大小 不给盒子宽度
块级盒子水平居中
文字水平居中与行内元素水平居中
插入图片与背景图片的区别
清除元素默认内外边距
*{
margin: 0
padding: 0
}
外边距合并
盒子模型
## 盒子模型 box-sizing
1、W3C标准盒子模型 （content-box）
盒子真正的宽度=content+padding+border
padding和border会撑大盒子
2、box-sizing：border-box
盒子的宽度就是 content 内边距和边框被移到盒子里面了
PS基本操作
去掉默认样式
1、li标签前面会有小点
```css
li {
list-style:none
}
2、a标签会有下划线
a {
text-decoration:none
}
`
圆角边框
border-radius
1、百分之50 会变成圆形
``
盒子阴影
box-shadow：水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内阴外阴
CSS书写规范
box-sizing属性
```css
用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
``
盒子阴影
box-shadow: 3px 2px 3px 1px rgba(0,0,0,0.5) inset;
默认外阴
CSS书写顺序
浮动
浮动与父盒子的关系 浮动不会越过内边距
浮动与定位的盒子会默认转换为行内块元素 行内元素只要浮动 就可以给宽度和高度
一个行内的盒子，如果加了**浮动**、**固定定位**和**绝对定位**，
不用转换，就可以给这个盒子直接设置宽度和高度等。
可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
清除浮动的三种方式
1、/*声明清除浮动的样式*/
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
2、/*声明清除浮动的样式*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
3、
overflow：hidden
定位
注意：
1. **边偏移**需要和**定位模式**联合使用，**单独使用无效**；
2. `top` 和 `bottom` 不要同时使用；
3. `left` 和 `right` 不要同时使用。
4. top优先级要高于bottom
5. 定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。
绝对定位水平垂直居中
先走父盒子宽度与高度的一半 再往反方向走自身的 高度与宽度
固定定位是相对于浏览器的
定位之z-index
叠加次序 越是在后面的越是在前面！！！
z-index 默认值为0 数值越大就显示在前面
`z-index` 只能应用于**相对定位**、**绝对定位**和**固定定位**的元素，
其他**标准流**、**浮动**和**静态定位**无效。
为什么使用定位
标准流的盒子在最底层 ----- 浮动的盒子在最中间 -----定位的盒子在最上面
绝对定位 相对定位 静态定位 固定定位
固定定位
凹凸文字
凸起的文字 text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff ;
凹下的文字 text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
元素的显示与隐藏之display
元素的显示与隐藏-visibility
overflow(溢出）
显示与隐藏总结
鼠标样式
轮廓线
input有轮廓线
input {
/*取消轮廓线*/
outline: none;
}
防止文本框拖拽
vertical-align 控制文字与图片对齐
只针对行内元素与行内块元素
通常用来控制图片/表单与文字的对齐
去除图片底侧空白间隙
```css
1、vertical-align
2、display:block
`
溢出的文字省略号显示
white-space：normal 换行
white-space: nowrap 强制在同一行显示所有文本，直到文本结束或者遭遇br标签对象才换行
text-overflow 文字溢出
text-overflow：clip 不显示省略标记（...）,而是简单的裁切
text-overflow：ellipsis 当对象内文本溢出时显示省略标记
文字一行显示三部曲
1、首先是强制一行显示
white-space:nowrap
2、超出的部分隐藏
over-flow： hidden
3、文字用省略号代替超出的部分
text-overflow：ellipsis
CSS精灵技术
CSS实现最大正方形
section {
width：100%；
padding-bottom：100% ；
background：#333
}
标准模型与IE模型的区别
可以设置box-sizing：border-box；设置为IE盒子模型，来避免盒子被padding撑破
1、W3C标准盒模型
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋内距＋边框＋外距
element空间宽度＝内容宽度＋内距＋边框＋外距
内盒尺寸计算（元素大小）
element高度＝内容高度＋内距＋边框（height为内容高度）
element宽度＝内容宽度＋内距＋边框（width为内容宽度）
2、IE传统下盒模型（IE6 以下，不包含IE6版本或”QuirksMode下IE5.5+”）
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）
内盒尺寸计算（元素大小）
element高度＝内容高度（height包含了元素内容宽度、边框、内距）
element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）
元素水平方向居中
1、对块级元素 margin：0 auto
PS： auto是基于总宽度-已知固定宽度获得取值的，inline-block元素水平方向的7大属性没有总宽度的限制，所以margin设置为auto时，不知道如何取值，所以默认为0，于是便没有起到我们想要的居中的效果。（了解即可）
2、对行内元素和行内块元素： 给父元素添加 text-align：center 即可
3、绝对定位的盒子：先走父盒子宽度与高度的一半，再往回走自己本身高度与宽度的一半
4、display：flex
元素垂直方向居中
1、方法一：使用css3弹性盒子（兼容IE10及以上浏览器,firefox,chrome,safari 5.1.7不支持）
```css
#main div {
width: 40px;
height: 40px;
display: flex;
display:-webkit-flex;
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
-webkit-align-items:center;
}
2、使用display：table-cell（不确定高度的容器中垂直居中）
兼容性：IE8及以上浏览器，chrome,firefox
3、利用vertical-align属性特性
.box p, .box i {
display: inline-block;
vertical-align: middle;
overflow: hidden;
*display:inline;
*zoom:1;
}
多行文字转换为行内块 一个整体
一行水平居中，多行居左
<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。
我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div>
<div><span>我是一行文字</span></div>
<style>
div{text-align: center;}
div span{display: inline-block;text-align: left;}
</style>
水平垂直居中
贴上腾讯大佬的一篇文章：16种方式实现水平居中垂直居中
https://juejin.im/post/6844903474879004680
两栏布局，左边固定，右边自适应，左右不重叠
flex做自适应布局很容易，但兼容性不好，这里统一不用flex布局
.left{
float:left;
width:300px;
margin-right: 10px;
background: red;
}
.right{
overflow: hidden; /* 创建BFC */
background: yellow;
}
如何实现左右等高布局
table布局兼容性最好，当然flex布局的align-items: stretch;也行
```css
<div class="layout">
<div class="layout left">left</div>
<div class="layout right">center</div>
</div>
<style>
.layout{
display: table;
width: 100%;
}
.layout div{
display: table-cell;
}
.layout .left{
width: 50%;
height: 200px;
background: red;
}
.layout .right{
width: 50%;
background: yellow;
}
</style>
display有哪些值？说明他们的作用?
block 转换为块级元素 显示元素
none 隐藏元素
table 表格显示
inline-block 行内块元素
inline 默认 -内联
list-item–项目列表
position的值
static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。
CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。
阐述一下CSS Sprites
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，
background- repeat，background-position 的组合进行背景定位。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；
CSS Sprites能减少图片的字节
style标签写在body后与body前有什么区别？
页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，
当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，
等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.
优点是：压缩比高，色彩好。 大多数地方都可以用。
jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
外层div使用position：relative；
高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0
display:inline-block 什么时候会显示间隙？
有空格时候会有间隙 解决：移除空格
margin正值的时候 解决：margin使用负值
使用font-size时候 解决：font-size:0、letter-spacing、word-spacing
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，
占据空间，所以会有间隔，把字符大小设为0，就没有空格了
解决方法：
可以将<li>代码全部写在一排
浮动li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
position:fixed;在android下无效怎么处理？
<
meta name ="viewport"
content =
"width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=no"
/
>
让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing在window系统下没有起作用，
但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
怎么让Chrome支持小于12px 的文字？
p
{
font
-
size
:
10px
;
-
webkit
-
transform
:
scale
(
0.8
)
;
}
//0.8是缩放比例
你对line-height是如何理解的？
行高是指一行文字的高度，具体说是两行文字间基线的距离。
CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。
::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。
并不存在于dom之中，只存在在页面之中。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
margin和padding分别适合什么场景使用？
何时使用margin：
需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。
何时使用padding：
需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。
兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。
通过改变padding或者指定盒子的display：inline解决。
在网页中的应该使用奇数还是偶数的字体？为什么呢？
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。
Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，
而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
浏览器是怎样解析CSS选择器的？
CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
若从右向左匹配，先找到所有的最右节点，对于每一个节点，
向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，
是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），
而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，
最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），
浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。
CSS优化、提高性能的方法有哪些？
避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免！important，可以选择其他选择器
尽可能的精简规则，你可以合并不同类里的重复规则
使用 CSS 预处理器吗？
Less sass
移动端的布局用过媒体查询吗？
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
<head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css”
media=”only screen and (max-device-width:480px)”>
CSS : @media only screen and (max-device-width:480px) {/css样式/}
设置元素浮动后，该元素的display值是多少？
自动变成display:block
上下margin重合的问题
在重合元素外包裹一层容器，并触发该容器生成一个BFC。
<div class ="aside"></div>
<div class='text'>
<div class='main'></div>
</div>
CSS代码：
.aside {
margin-bottom: 100px;
}
.main {
margin-top：100px;
}
/*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，
以此来阻止margin重叠*/
//此时已经触发了BFC属性。
.text {
overflow: hidden
}
为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
浮动带来的问题：
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
父级div定义height
最后一个浮动元素后加空div标签 并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom
对BFC规范(块级格式化上下文：block formatting context)的理解？
BFC规定了内部的Block Box如何布局。
定位方案：
内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边，与包含块border box的左边相接触。
BFC的区域不会与float box重叠。
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也会参与计算。
满足下列条件之一就可触发BFC
根元素，即html
float的值不为none（默认）
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
position跟display、overflow、float这些特性相互叠加后会怎么样？
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；
float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，
有他们在时，float不起作用，display值需要调整。
float 或者absolute定位的元素，只能是块元素或表格。
display:none与visibility：hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？
当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，
如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
div块级盒子居中 margin：0 auto（一定要给宽度）
浮动的div盒子上下水平居中
```css
div {
float:left;
width:200px;
height:100px;
left:50%;
right:50%;
margin:-50px 0 0 -100px
}
为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，
如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
CSS之引入样式
<link rel='stylesheet' href='style.css' />
在一个标签里面只能有一个css
<span class='blue font100'>G</span>
高度剩余法与宽度剩余法
浮动与定位都不会触发外边距合并的问题
网页布局总结
微信滑动门
压住盒子相邻边框 解决盒子相邻边框重叠变粗的问题
margin负值之美-鼠标突出显示某个盒子
标准流在最下面 浮动在中间 定位的盒子在最上面
margin负值之美-鼠标突出显示某个盒子 两个盒子都有定位的话
利用CSS创建一个三角形
div{
width：0；
height：0；
border: 10px solid transparent;
border-top-color:red;
font-size:0;
line-height:0;
}
2446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
