CSS基础知识

╰+攻爆jí腚メ 2022-07-12 10:37 241阅读 0赞

### 选择器 ###

1.  标签选择器：选中所有标签（div,span,p等）
2.  id选择器：\#id（id区分大小写）
3.  类选择器：.classname（同时属于多个类用空格隔开，如：`<p class="title0 title2">music</p>`）
4.  后代选择器：用空格隔开（选中的是所有后代，不止儿子），语法：`.div1 p{ color: red; }`
5.  交集选择器：中间用.隔开，一般以标签开头，语法：p.yi\{font-size: 50px;\}
6.  并集选择器：中间用,隔开
7.  通配符\*：所有  
    CSS层面尽量不要用id，id留给js用

### CSS3选择器 ###

1.  儿子选择器：中间用>隔开，语法：div>p\{color:blue;\}
2.  序选择器：冒号后面加first-child/last-child/nth-child(2n)，语法：ol li:first-child\{color: red;\}
3.  兄弟选择器：中间用+号隔开，表示紧跟着的那个元素，没多大用

### 常见属性 ###

1.  字体颜色：color:red
2.  字体大小：font-size:60px
3.  背景颜色：background-color:
4.  加粗：font-weight: bold
5.  斜体：font-style: italic
6.  下划线：text-decoration: underline
7.  去除列表样式：list-style:none

### 继承性 ###

1.  不是所有的属性都能继承
2.  能继承的属性：color,text,line,font开头的（和文字相关的）

### 层叠性 ###

1.  当多个样式作用到同一个标签时只有一个样式会生效
2.  权重：id选择器>类选择器>标签选择器（255进位，即255个标签选择器等于1个类选择器）
3.  如果权重一样，以后出现的为准
4.  如果不能直接选中，继承的影响为0
5.  如果没有一个样式能直接选中该标签，但有多个父标签有样式，则继承最近的父标签的样式
6.  可以在单个属性（而不能是整个选择器）后面加上!important提供权重，提高后该属性的权重为无穷大，语法：`dd{color: blue !important;}`
7.  添加!important只对直接选中的元素有效，而对继承性和就近原则没有影响

### 盒模型 ###

1.  width,heigth,padding,border,margin的示例如下图：  
    ![这里写图片描述][SouthEast]
2.  背景颜色会填充border以内的区域
3.  padding的顺序：上右下左，示例：padding:10px 20px 10px 100px: 后面的四个值的顺序为上右下左
4.  border示例：div\{border: 10px,dashed,red;\}，3个属性可拆开成border-width/style/color，也可按上右下左的顺序拆开成bordet-top/right/bottom/left，还能拆成border-top-width的形式  
    第二个属性的所有样式参考：[http://www.w3school.com.cn/tiy/t.asp?f=csse\_border-style][http_www.w3school.com.cn_tiy_t.asp_f_csse_border-style]

### 标准文档流 ###

1.  空白折叠现象：多个空白折叠成一个
2.  元素按顺序从头到尾显示
3.  高矮不齐，底边对齐：多种高矮不同的图片显示时，都会向底边对齐
4.  一行写不满，自动换行
5.  标签分为两种等级：块级元素和行内元素
6.  块级元素：霸占一行，不能与其它元素并列；能设置宽和高，不设置默认等于父亲的宽高
7.  行内元素：与其它行内元素并排；不能设置宽高，宽度即为文字的宽度
8.  所有文本级标签处理p以外都是行内元素，所有容器级标签都是块级元素
9.  块级转为行内元素：div\{ display: none; \}
10. 行内元素转为块级：span\{ display: block; \}
11. 标准流中会出现margin塌陷的现象，即垂直方向的两个盒子同时设置了margin，两个盒子之间的margin以大的那个为准，水平方向不存在这个问题，不是标准流也不会有这个问题
12. margin的值为auto时表示根据情况尽可能设到最大，左右都设置则居中，左右居中上下0可简写为margin:0 auto，只在标准流中能用，且必须明确设置width
13. margin本质上是用来描述兄弟之间的距离，最好不要用来处理父子之间的距离，父子之间的距离用padding
14. 首行空两个文字的格：text-indent:2em;

### 脱离标准流的三种方式 ###

#### 浮动 ####

1.  浮动让块级元素可以并排，让行内元素可以设置宽高，实际上设置了浮动以后元素就不分块级元素和行内元素了，即该元素脱离了标准流
2.  浮动的元素会相互贴靠，浏览器装不下时会尝试贴靠上一个元素
3.  浮动的元素挡住不浮动的元素中的字体时，会有字体环绕效果
4.  浮动元素的宽高不能超过其父元素
5.  语法：float:left/right
6.  清除浮动：让浮动不影响其他盒子的浮动
7.  清除浮动方法①：给祖先加高度。但实际工作中很少用高度width属性，因为盒子能够被内容自动撑高，但浮动的元素不会撑高盒子
8.  清除浮动方法②：给盒子加上clear:both属性，表示自己盒子内的浮动不受其他盒子浮动的影响，但由于盒子没有高，使用margin属性会受影响
9.  清除浮动方法③：隔墙法。在两个盒子中间放置一个空白的盒子作为墙，给墙设置clear:both属性清除浮动，设置width属性作为两个盒子的间距
10. 清除浮动方法③的变种：内墙法。把墙放到盒子的最后一个元素中去，不仅可以清除浮动，还可以让浮动的元素把盒子的高撑起来
11. 清除浮动方法④：使用overflow:hidden。给盒子添加overflow:hidden属性后盒子也可以被浮动的子元素撑高，这是浏览器的一种渲染机制，没有为什么，这种方法最好用
12. 清除浮动总结：只要盒子有高，浮动就不会相互影响。但不用显示地设置盒子的高，可以利用以上几个方法让浮动的子元素把盒子的高撑起来

### IE6兼容问题 ###

1.  加了下划线的属性只有IE6能识别，可用于针对IE6做兼容
2.  IE6，7不支持小于12px的小盒子，小于12px的盒子都会有12px那么大，设置\_font-size=0可以解决这个问题
3.  IE6不支持用overflow:hidden来清除浮动,解决：添加\_zoom:1
4.  双倍margin：当出现连续浮动的元素时，margin的方向和浮动的方向相同时队首元素会出现双倍margin，解决：margin和浮动方向相反，然后用padding

### 文字属性 ###

1.  line-height：设置行高，文字在自己的行高中的居中的，但如果不能被2整除，则下面的空白会比上面的空白多1像素，所以行高，字号最好都设置为偶数，这样就能保证一定能被2整除，行高可以用百分比设置，表示为字号的百分之几，一般都大于100%
2.  行高设置为盒子高时可以实现单行文字的居中效果，多行文字的居中只能用padding
3.  font:12px/24px 宋体;等价于font-size:12px; line-height:24px; font-family:宋体;
4.  系统默认会有的中文字体：微软雅黑(Microsoft YaHei)，宋体(SimSun)，黑体，英文一般用：Arial，Times New Roman
5.  font-family:”Arial”,”宋体”;中间的逗号表示备选字体，一般把英文字体写在前面

### 其他 ###

1.  伪类：同一个标签，根据状态不同有不同的样式，伪类用:号隔开
2.  a标签的4个伪类：link,visited,hover,active,并且必须按这个顺序书写
3.  伪类用于设置文字的样式，背景
4.  颜色的rgb表示法：rgb(58,58,58)，十六进制表示法：\#223344，可简化为\#234

[SouthEast]: /images/20220710/1aa7671c9c79495eb320dd3232b69b3c.png
[http_www.w3school.com.cn_tiy_t.asp_f_csse_border-style]: http://www.w3school.com.cn/tiy/t.asp?f=csse_border-style