以下内容来自于爱奇艺知识-Web前端开发之HTML CSS精英课堂
一、CSS权重
- 1.1）权重大小
| 选择器 | 权重值 |
|---|---|
| !important | Infinity |
| 行间样式 | 1000 |
| id | 100 |
| class|属性|伪类 | 10 |
| 标签|伪元素 | 1 |
| 通配符 | 0 |
- 1.2）权重大小说明：
1.2.1） 每1代表225;
1.2.2）!important虽然是无限大但是跟数学中的无穷大不一样，可以叠加，下面两段虽然都是!important，但是第二段的权重要高于第一段的。
* {
background:#f40 !important
}
div {
background:#f40 !important
}
二、css基础样式
- 单行文本垂直居中：
div {
height: 16px;
line-height: 16px;
}
- 一段文本首行缩进：
- em单位：相对单位 1em=1 font-size
- 像素px：一个像素只展示一个颜色点，是相对的。一个英寸能容纳多少个像素点
div {
text-indent: 2em
}
行为js 样式css 结构html 相分离
cursor：pointer、help、e-resize等
hover伪类选择器
三、display元素类别特征
- inline、block、inline-block
| display类别 | 特征 | 标签例子 |
|---|---|---|
| inline | 内容决定元素所在位置 不可以通过css改变宽高 |
span strong em a del |
| block | 独占一行 可以通过css改变宽高</br> |
div p ul li ol form address |
| inline-block | 内容决定大小 可以改变宽高</br> |
通过设置标签的display样式为‘inline-block’ |
四、标签选择器-样式初始化
- 标签选择起的目的是要-初始化这些标签
例如：
- a标签，默认会有下划线蓝色的，但是现在基本上不需要这种样式因此需要做以下初始化：
a {
text-decoration: none;
color: #424242
}
- ul li标签，li标签默认会有一个黑色圆点在前面，不需要这个样式，就可以做如下初始化：
ul {
list-style: none;
padding: 0;
margin: 0;
}
- 通配符*，初始化所有标签，默认margin 8px
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
五、盒子模型
5.1）盒子三大组成部分
盒子壁-border
内边距-padding
-
盒子内容-width+height
margin + border + padding + content(height or width)
盒子模型 padding magin border-width 顺序
- 四个值：上右下左
- 三个值：上（左右）下
- 两个值：（上下）（左右）
六、定位
- 绝对定位 absolute
脱离原来位置进行定位。最近的有定位的父级元素进行定位，如果没有，那么相对于文档进行定位 - 相对定位 relative
保留原来位置进行定位。相对自己原来的位置进行定位 - 固定定位 fixed-相对可视区域固定
滚动条怎么动，都不动 - 块级元素居中-相对文档居中
div {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
background-color: red;
}
七、CSS特殊问题
7.1.两个已知BUG
7.1.1 margin塌陷
- 父子嵌套的元素，垂直方向的margin会粘合在一起，使用较大的margin值，解决办法：
1、给父盒子设置边框——一般不使用
2、BFC-Block Format Context块级格式化上下文，给父盒子设置以下4种属性，4种视具体情况选择一种均可解决BFC问题position: absolute; display: inline-block; float: left/right; overflow: hidden;
7.1.2.margin合并问题
- 兄弟块级元素的上下margin被合并，使用较大一个值。
7.2.特殊点
知识点：
- 行级元素只能嵌套行级元素
- 块级元素可以嵌套任何元素
但是，P标签虽然是块级元素，里面不可以嵌套div，如果嵌套，P标签就会被分割成两个P标签；
a标签内部不可以嵌套a标签
八、浮动模型
8.1.浮动元素产生了浮动流
- 所有产生了浮动流的元素，块级元素看不到他们
- 触发了BFC的元素、文本类属性的元素以及文本都能看到浮动元素
8.2.以上第一个知识点会产生这样一个问题：
- 子元素设置浮动属性，父盒子会感知不到子元素的高度，即高度不可以被子元素撑开
方案一：清除浮动
这就又带来了一个问题：清楚浮动，解决办法：
- 最后一个浮动子元素之后，增加一个P标签，且含有以下类；（一般不使用，因为这个方法改变了结构html）
{
border: 0 solid green;
clear: both;
}
- 伪元素-知识点：伪元素天然存在，行级元素，想要改变其宽高的话，需要通过display，改变成行级块元素可以通过css改变其内容
span::before {
position: absolute;
left: 0;
top: 100px;
display: inline-block;
height: 100px;
width: 100px;
background: red;
content: "";
}
最佳方案：有了伪元素知识点， 解决办法：就产生了，给父盒子的伪元素after设置属性（能使用clear: both清除浮动的，必须是块级元素）
.wrapper::after {
display: block;
content: "";
clear: both;
}
方案二：给父盒子触发BFC
.wrapper {
float: left;
}
.wrapper {
display: inline-block;
}
.wrapper {
position: absolute;
}
使用以上方式，父盒子会紧紧包住子元素，因为内部把元素转换成inlien-block，所以父盒子如果不设置宽高的话，父盒子的宽高自动变成子元素的宽高了。
8.3.浮动元素产生的原始目的：为了使网页中产生报纸布局，即文本环绕图片。
- 将图片设置float:left即可
九、文字溢出处理
- 单行文本
p {
width: 300px;
height: 20px;
line-height: 20px;
border: 1px solid black;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
- 多行文本——没法使用css2实现，需要返回文本直接就是“...”，前端工程师：容器宽高度、每个文字宽度算好传给后台，后台工程师计算文本多少，将多余的采用...返回
但是，css3可以实现
div {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; //行数
-webkit-box-orient: vertical;
}
十、背景图片
- 引申问题：浏览器采取默认加载策略，这个网页仍旧可以使用。即css、js全部失效的情况下，html仍可以是这个网页正常运行。
html:
<a href="http://www.taobao.com" target="_blank">淘宝网</a>
方法一：
a {
display: inline-block;
text-decoration: none;
color: #424242;
width: 190px;
height: 90px;
border: 1px solid black;
background-image: url(https://gw.alicdn.com/tfs/TB176rg4VP7gK0jSZFjXXc5aXXa-286-118.png);
background-size: 190px 90px;
text-indent: 190px;
white-space: nowrap;
overflow: hidden;
}
方法二：
a {
display: inline-block;
text-decoration: none;
color: #424242;
width: 190px;
border: 1px solid black;
background-image: url(https://gw.alicdn.com/tfs/TB176rg4VP7gK0jSZFjXXc5aXXa-286-118.png);
background-size: 190px 90px;
height: 0px;
padding-top: 90px;
overflow: hidden;
}
