CSS学习笔记

CSS（Cascading Style Sheet 层叠样式表）

1.目前主流浏览器及其内核

成为主流浏览器的条件:在市场上有一定份额，*有自己的内核

浏览器由shell和内核(渲染引擎)构成

shell为外壳、外观部分;

内核更为重要，它决定浏览器的运转快慢，识别代码的路径问题等等。

目前的主流浏览器 2021-7-12	内核
IE	trident
Firefox 火狐	Gecko
Google Chrome 谷歌	Webkit/blink
Safari 冲浪	Webkit
Opera 欧朋	presto

2.引入CSS的三种方式

(1)行间样式：直接写在属性style里

(2)页面级CSS：写在head里的style里

(3)外部CSS文件：使用link标签在head里引入css文件中的代码

3.选择器

css的代码精确作用于html部分

(1)id选择器：一一对应

<div id="selector"></div>

#selector {
    /*
     填写css代码
    */
}

(2)class选择器：多对多

<div class="selector1 selector2"></div>
<div class="selector1"></div>
<div class="selector2"></div>

.selector1 {
    /*
     填写css代码
    */
}
.selector2 {
    /*
     填写css代码
    */
}

(3)标签选择器：作用于该标签

div {
    /*
     填写css代码
    */
}
span {
    /*
     填写css代码
    */
}

(4)通配符选择器：作用于所有标签

* {
    /*
     填写css代码
    */
}

(5)属性选择器：作用于有该属性的标签

[id] {
    /*
     填写css代码
    */
}
[id="test"] {
    /*
     填写css代码
    */
}

(6)父子选择器/派生选择器

<div>
    <span></span>
</div>

<span></span>

div span {  // 寻找顺序为自右向左    /*     填写css代码    */}

↑结果为div里的span受到css作用

(7)直接子元素选择器

<div>    <span>111</span>    <strong>    	<span>222</span>    </strong></div><span></span>

div > span {    /*     填写css代码    */}

↑结果为只有111受到css作用

(8)并列选择器

<div id="id" class="class"></div>

div.class#id {  // 但是注意标签要写在最前    /*     填写css代码    */}

(9)分组选择器

<div id="id" class="class"></div><span></span>

div#id.class,span {    /*     填写css代码    */}

两个标签均被作用

(10)伪类选择器

<div id="id"></div>

#id: hover {    // 最常用的一种, 当鼠标移动到范围内时css代码生效    /*     填写css代码    */}

(11)伪元素选择器

伪元素存在于每个标签的最前和最后，没有html结构，但可以通过css改变样式

伪元素的初始样式为行级元素，不能改变宽高，所以要先改为块级元素

<div id="id"></div>

#id::before {    content: "内容";}#id::after {    content: "内容";}

选择器优先级（重要）

!important > id > class = 属性 > 标签选择器 > 通配符选择器

选择器	css权重(256进制)
!important	Infinity(无穷)
行间样式	1000
id	100
class | 属性 | 伪类	10
标签 | 伪元素	1
通配符	0

<div id="id" class="class"></div>

权重相加1  +  10div .class { /*  填写css代码 */}1 + 100   div #id { /*  填写css代码 */}

两种选择方式都可以将上面的div选择出来，但下面的选择器权重大于上面的选择器，所以下面的优先级更高

4.CSS属性

(1)font（常用）

font-size：用于设置字体大小，作用于字体高度

font-weight：用于设置字体粗细，lighter normal bold bolder / 100 - 900

font-style：用于设置字体样式，italic(斜体)

font-family：用于设置字体

5.标签分类

(1)行级元素/内联元素 display: “inline”

内容决定元素所占位置，不可通过css改变宽高

span strong em a del

(2)块级元素 display: “block”

独占一行，可以通过css改变宽高

div pul li ol from address

(3)行级块元素 display: “inline-block”

内容决定大小，可以改变宽高

img

6.position定位

(1)absolute

脱离原来的位置进行定位，层级发生变化最近的有定位的父级进行定位，如果没有则相对于文档进行定位

(2)relative

保留原来的位置进行定位，相对于自己原来的位置进行定位

margin塌陷问题

子集设置位置时在垂直方向上不相对于父级顶部，而是相对于浏览器顶部

解决方法:

bfc(block format context) 块级格式化上下文

作用：更改渲染规则，几乎可以说是专为解决margin塌陷问题而存在的

将盒子改变为bfc模式的方法：position: absolute; display: inline-block; overflow: hidden; float: left/right;

margin合并问题

两个并列的块在垂直方向上面的margin会合并，可以用bfc规则解决，但需要在其之上加父级，改变了html结构，所以一般不解决此bug。

float浮动元素产生浮动流

所有产生了浮动流的元素，块级元素看不到他们

产生了bfc属性的元素和文本类属性(inline)的元素以及文本都能看到浮动元素

清除浮动的方法：

(1)在最后加一个p标签，并使用clear清除其左右浮动流

(2)使用后面的伪元素清除浮动流，需要注意只有块级元素才可以清除浮动流，而伪元素为行级元素，需要先将其改为块级元素

.class::after {	claer: both;    display: block;}