一. CSS的基本选择器，优先级和权重
- ID选择器 > class选择器 = 伪类(:hover)，伪元素(::after)选择器 > 标签选择器 > 全局选择器 > 继承
- !important本身不属于选择器，只是为了提高当前选择器的权重。
- 选择器是可以组合的，组合之后的权重是各个选择器权重之和。
- 内联样式的权重最高，其次是ID选择器，再次是类和伪类，然后是标签选择器，最后是全局选择器。
- 其他选择器
- 子代选择器：A > B
- 后代选择器：A B
- 兄弟选择器：A + B
- 通用选择器：A ~ B
二. CSS的引入方式
内联式 > 嵌入式(通过在head标签中引入style标签) = 外部式(通过link标签引入)
三. link和@import的区别
- 兼容性：link标签属于html范畴不存在兼容性问题，@import存在兼容性问题不适合低版本浏览器（i5以下）。
- 加载方式：通过link标签引入的css文件，会在页面载入的同时进行加载，而通过@import引入的css文件在页面载入之后在进行加载。
- DOM可控性：可以通过js操作DOM的方式来插入link标签，不可以插入@import。
- 加载资源：link标签除了引用css文件还可以引用别的资源，@import只能用于引用css文件。
- 权重不同：link引入的样式权重大于@import引入的样式
- 语法不同：
<link href=“CSS url路径” rel=“stylesheet” type=“text/css” />
@import CSS url路径
四. position的取值
- relative：相对定位，元素出现在自身应当出现的地方，占据空间。
- absolute：绝对定位，元素脱离文档流，不占据空间，子绝父相。
- fixed：固定定位，相对于浏览器窗口定位，脱离文档流不占据空间。
- static：默认定位，没有定位，元素正常的出现在文档流中
五. absolute和float的区别
- 相同点：都是
脱离文档流 - 不同点：
- 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
- 使用absolute 脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
六. css的继承
- 可继承：
- display：规定元素应该生成的框的类型
- 文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向 - 盒子模型的属性：width、height、margin、border、padding
- 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
- 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
- 生成内容属性：content、counter-reset、counter-increment
- 轮廓样式属性：outline-style、outline-width、outline-color、outline
- 页面样式属性：size、page-break-before、page-break-after
- 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
- 不可继承：padding,margin,border。
七. 盒子水平垂直居中
- 绝对定位法 +
margin: auto法：子绝父相，给子元素的top,bottom,left,right都设置为零同时加上margin:auto。这种方法不需要知道子元素的宽高。
.father{
width:200px;
height:200px;
background: skyblue;
position:relative
}
.son{
width:100px;
height:100px;
background:orange;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto
}
- 绝对定位法 +
负margin 法：子绝父相，给子元素的top和left方向设置为50%，此时会多偏移子元素宽高的一半，必须向上和左两个方向移动回去。这种方法需要知道子元素的宽高
.father{
width:200px;
height:200px;
background: skyblue;
position:relative
}
.son{
width:100px;
height:100px;
background:orange;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
- 绝对定位法 +
transform法：子绝父相，给子元素的top和left方向设置为50%，此时会多偏移子元素宽高的一半，设置X和Y两个方向上的偏移距来解决。这种方法不需要知道子元素的宽高，不适合低版本浏览器
.father{
width:200px;
height:200px;
background: skyblue;
position:relative
}
.son{
width:100px;
height:100px;
background:orange;
position:absolute;
top:50%;
left:50%;
transform(-50%,-50%);
}
- flex弹性布局：父元素设置display:flex属性，水平和垂直方向都设置为居中。不适合低版本浏览器
.father{
display:flex;
justify-content:center;
algin-items:center
}
- grid网格布局：将页面划分成若干个网格，通过对网格之间的组合对页面进行布局。不适合低版本浏览器
.father{
display:grid;
justify-items:center;
algin-items:center
}
注：更多flex和grid布局的内容后面会专门介绍
八. display:none,visibility:hidden,opacity=0之间的区别
- display:none 是一种完全意义上的隐藏，相当于删除，被隐藏的元素会脱离文档流，不占据空间，会改变页面布局。
- visibility:hidden 是一种视觉上的隐藏，被隐藏的元素不会脱离文档流，会占据空间，不改变页面布局，不触发该元素绑定的事件。
- opacity=0 是一种透明度渐变的过程，也是视觉上的隐藏，会占据空间，不会改变页面布局，会触发该元素绑定的事件。
九. 如何将文字超出的部分设置为省略号
{
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis
}
十. px,em,rem,%,vw,vh的区别
- px：像素，相对于显示器屏幕分辨率而言，例如分辨率1920x1080表示高为1920个像素、宽为1080个像素。像素值越大越清晰。一般被视为绝对长度。
- em：相对单位，相对于父元素字体的大小，一般情况下1em = 16px。如果父元素没有设置字体大小，则相对于浏览器的默认字体尺寸（16px）。
- rem：相对单位，相对于根元素的字体大小。
- %：相对于父元素大小，如果父元素没有设置宽高，子元素设置百分比没有意义，会按照子元素的实际宽高。
- vw：视口宽度，100vw将代表视口宽度的 100%，或屏幕的整个宽度。
- vh：视口高度，100vh 将代表视口高度的 100%，或屏幕的整个高度。
十一. BFC
- 说明：块级格式化上下文，创建一个独立的区域，有一套独立的约束规则，与外界元素无关。
- 作用：可解决margin塌陷。
- 创建BFC的方法：
- 浮动float不取值none
- 绝对定位取值absolute或者fixed
- display取值为inline-block、table-caption、flex、inline-flex之一，不为块级盒子
- overflow 除了 visible 以外的值（hidden，auto，scroll）
十二.margin塌陷
- 两个同级元素垂直排列，上面的盒子给 margin-bottom 下面的盒子给 margin-top，那么他们两个的间距会重叠，以大的那个计算。例如上面盒子的marign-top设置为100px，下面盒子的margin-bottom设置为150px则他们之间的间距为150px。
- 父子元素：给子元素设置margin-top的时候会带着父元素一起移动。
- 解决办法：触发BFC，给父元素设置其中之一的属性即可：
- position:absolute
- display:inline-block
- float:left/right
- overflow:hidden（推荐）
- 示例：
<!--1.同级元素，上面margin-bottom设置为100px，下面margin-top设置为150px。可以看到最终两者的间距取margin较大的值为150px-->
.box1{
width: 100px;
height: 100px;
background: skyblue;
margin-bottom: 100px;
}
.box2{
width: 100px;
height: 100px;
background: orange;
margin-top: 150px;
}
<!--2.父子元素，给子元素设置了margin-top为50px,发现子元素并没有相对父元素向下移动50px而是带着父元素一起向下移动了50px -->
.box3{
width: 200px;
height: 200px;
background: skyblue;
}
.box4{
width: 100px;
height: 100px;
background: orange;
margin-top: 50px;
}
<!--3.父子元素margin塌陷解决办法-->
.box3{
width: 200px;
height: 200px;
background: skyblue;
overflow:hidden
}
十三.如何增加或者减少字符之间的间距
letter-spacing属性，正值表示增加，负值表示减少
十四.CSS3新增属性
- 圆角 border-radius
- 阴影 box-shadow
- 文字特效 text shadow
- 线性渐变 gradient
- 变换 transform
- 更多的选择器
- 多背景设置
- 媒体查询
- 多栏分布
十五. CSS3新增伪类
- p:first-of-type 匹配属于父元素的第一个p元素
- p:last-of-type 匹配属于父元素的最后一个p元素
- p:first-child 匹配属于父元素的第一个元素,如果第一个不是p元素则匹配不到
- p:last-child 匹配属于父元素的最后一个元素,如果最后一个不是p元素则匹配不到
- p:nth-child(n) 匹配属于父元素的第n个元素,如果第n个不是p元素则匹配不到
- p:only-child 如果p元素是父元素的唯一一个子元素则匹配它
十六.transition和animation
- 相同点：都是随着时间的改变来改变元素的属性，实现动画效果
- 不同点：transition侧重于开始和结束的变化，不能实现复杂的动画效果。animation侧重于中间过程，每一帧的变化
- transition：name duration 变换类型 延迟时间
- animation：name duration 变换类型 延迟时间 播放次数 循环播放
- 利用animation创建一个动画
@keyframes name{
0%/from{
css样式
}
任意一个百分比{
css样式
}
100%/to{
css样式
}
}
- 调用动画：animation：name duration(这两个属性是必选的)
十七. 盒模型和怪异盒模型
- 组成：content+padding+border+margin
- 盒模型：width=content的宽度，height=content的高度
- 怪异盒模型：width=content+padding+border,height=content+padding+border
- 将怪异盒模型转化为盒模型：box-sizing:border-box
十八.当class创建多个类名，优先级
- 说明：与标签中类名的先后顺序无关，而与样式中类名的先后顺序有关，谁在后面显示谁。
- 示例
<!-- 这里的最终样式和class中 a b c 的先后顺序无关，和样式书写中a b c的顺序有关，例如下面a样式写在最后面，因此最终background的样式由a决定 -->
.b {
background: blue;
}
.c {
background: aqua;
}
.a {
background: red;
}
class="a b c"
十九.浮动引起的问题和解决办法
- 引起的问题：
- 父元素的高度得不到撑开，造成高度塌陷
- 未浮动元素会紧随浮动元素排列，造成遮盖现象。
- 造成串行现象
- 解决办法：
- 给父元素设置固定的高度
- 给受影响元素设置overflow:hidden
- 在父元素内部浮动元素后面设置一个空元素，给这个空元素添加一个类，并且在这个类当中添加clear:both属性
- 给浮动元素的容器也添加浮动，会使整体浮动，影响布局，不推荐使用
- 给父元素添加伪类:after并设置{content:‘’;display:block;clear:both;}
643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
