CSS基础知识总结

一个人至少拥有一个梦想,有一个理由去坚强。

总结了CSS相关的知识点，🙅‍不对的地方还请告诉我哦

1、引入CSS样式表（书写位置）

1.1 行内式（内联样式）

其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

如下👇所示：

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

注意：
- style其实就是标签的属性
- 样式属性和值中间是:
- 多组属性值之间用;隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
缺点：
- 没有实现样式和结构相分离

1.2 内部样式表（内嵌样式表）

其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>
<style>
     div {
         color: red;
         font-size: 12px;
     }
</style>

注意：
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type="text/css" 在html5中可以省略。
- 只能控制当前的页面

1.3 外部样式表（外链式）

其基本语法格式如下：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

注意：
- link 是个单标签
- link标签需要放在head头部标签中，并且指定link标签的三个属性

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

CSS选择器分为基础选择器和复合选择器：

2、基础CSS选择器

2.1 标签选择器：

标签选择器可以把某一类标签全部选择出来比如所有的div标签和所有的 span标签，但是缺点是不能差异化设置样式。

2.2 类选择器：

可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签

语法：

类名选择器

.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}

标签

<p class='类名'></p>

注意
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名，尽量使用英文字母来表示。

2.3 id选择器：

元素的id值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

其基本语法格式如下：

id选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签
```
<p id="id名"></p>
```

2.4 通配符选择器：

通配符选择器用*号表示， * 就是选择所有的标签他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距，一般设置在CSS文件的开头，但是现在也有使用body，都可以的😀

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

3、复合CSS选择器

3.1 后代选择器

作用：选择元素或元素组的子孙，写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，如下👇所示（可以选择class后面的所有h3标签）：

3.2 子元素选择器

子元素选择器只能选择作为某元素子元素的元素。
注意哦，这里的子元素，简单的说就是亲儿子😄，不包括孙子、重孙子之类的哈

3.3 属性选择器

选择带有特殊属性的标签的选择器
例：

<div>
      <input type="text" name="" id="" value="" />
</div>

div [type="text"]{
    background-color: chartreuse;
}

如👆所示：此时我们选择的是div下面的type属性等于text的内容，所以input框会改变颜色。

3.4 交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如div.p。

例：

<div class="int">
    <span>交集选择器</span>
</div>

div.int{
    background-color: #00FFFF;
}

如👆所示：此时我们选择的是div下面的类名称为int的元素，会改变元素的背景颜色。（一般实际中很少使用）

3.5 并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

例：.one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。

3.6 链接伪类选择器

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。链接伪类选择器如下👇:

a:link / 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标移动到链接上 /
a:active / 选定的链接 /

实际工作开发中，我们很少写全四个状态，一般我们写法如下：

a {   /* a是标签选择器  所有的链接 */
    font-weight: 700;
    font-size: 16px;
    color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
    color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

4、块级元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点

（1）比较霸道，自己独占一行📌

（2）高度，宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器及盒子，里面可以放行内或者块级元素。

注意：
- 只有文字才能组成段落，因此 p 里面不能放块级元素，特别是p不能放div
- 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

5、行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

链接里面不能再放链接。
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

6、行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

7、标签显示模式转换 display

块转行内：display:inline;
行内转块：display:block;

块、行内元素转换为行内块： display: inline-block; < a >元素一般利用display转换成display:inline-block

8、css背景

background-color: transparent;设置背景为透明色。

引入图片：background-image: url(../img/index.png);url后不加引号。

9、css背景位置定位

background-position: x坐标 y坐标;

一般超大背景的图片采用的是水平居中对齐，纵向不用对齐。如👇代码所示：

body{
    background-image: url(../img/sms.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    }

小图标在盒子内的定位：

实现的效果图：这里最重要的一句图标定位代码background-position: 10px center;x轴上距离为10px，y轴垂直居中

10、背景附着

背景附着就是解释背景是滚动的还是固定的,默认是滚动的

background-attachment : scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

11、背景简写

background: 背景颜色背景图片地址背景平铺背景滚动背景位置

background: transparent url(image.jpg) repeat-y  scroll center top ;

12、背景半透明

alpha是透明度参数，取值范围在0-1之间

在工作中适用范围较广，需要牢记的

<div class="alpha"></div>

.alpha{
    width: 200px;
    height: 200px;
    background: rgba(0,0,0,0.2);
    }

13、CSS三大特性

层叠性

< div>长江后浪推前浪，前浪死在沙滩上< /div>

给以上文字设置两个color样式：此时显示出来的属性是black颜色属性，pink会被覆盖掉。

继承性

继承性即子承父业，子标签会继承父标签的样式

<div>
    <p>CSS继承性</p>
</div>

div{
    color: pink;
}

如👆所示，我们并未设置div下的p的样式，仅设置了父级标签div的颜色为pink，此时p继承父级元素div的样式，颜色也会表现为pink

优先级`重点`

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

权重计算示例：

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1

这里需要注意的一点是：继承的权重是0

修改样式，一定要看该标签有没有被选中hin重要

1）如果选中了，那么以上面的公式来计权重。谁大听谁的。

2）如果没有选中，那么权重是0，因为继承的权重为0.

这一点看似简单，很容易绕晕哈，我们看下面这个例子：😄

此时我们需要判断的是p元素的内容是什么样式，p会继承父级元素的样式，但是继承的权重是0，标签的权重是1，另外由于p标签并未被选择，所以会表现出标签的样式。

如果p标签被选中了，则id+标签选择器的权重为：0101，大于p标签的权重：0001，所以会显示为pink样式

下面有一套综合题，可以检验一下是否掌握了这个知识点哈

如👆所示，文字会展现什么颜色呢
css的权重依次为：0021，0101，0101，那就排除了蓝色，

第二个和第三个权重一样的情况下，我们会采取就近原则，pink离的更近一些，则上图样式会表现为pink，如果调换yellow和pink的css样式位置，则表现为yellow。

还有一道特别容易混淆的题哦，

很多时候，我们看到有个！important 会自然的觉得权重最高，所以上述文字会显示绿色，但是是不对的哈，

第一步我们需要看文字是否被选中，如果未被选中则是继承，继承的权重是0，我们可以看到前三个均选中了文字的，但是最后一个未选中，所以排除绿色green，前三项的权重分别为：0200，0111，0022，所以颜色应该为蓝色。很重要的一点，不能混淆

14、盒子模型（CSS重点）

盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

内盒尺寸计算：

宽度
Element Height = content height + padding + border （Height为内容高度）
高度
Element Width = content width + padding + border （Width为内容宽度）
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

下面我们我们通过这个题来计算一下盒子实际的宽度和高度，加油呀😉

div {

    width: 200px;

        height: 200px;

    border: 1px solid #000000;

    border-top: 5px solid blue;

    padding: 50px;

    padding-left: 100px;

     }

小伙伴们有结果了吗，我们来分析一下哦，

实际宽度 = width（200px）+ border（2px） + padding（50px）+padding-left（100px）= 352px。

实际高度 = height（200px）+ border（1px） + border-top（5px）+ padding（100px）= 306px。

肯定有小伙伴会疑惑😵，为什么宽度里面算的内边距是150呢，这里有一个坑哈，因为单独设置了左内边距为100px，所以宽度里面内边距是150px，同理计算高度的时候，边框是一样的为6px。

15、块级盒子水平居中

可以让一个块级盒子实现水平居中：

盒子必须指定了宽度（width）
给左右的外边距都设置为auto

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ 
       width:960px; 
       margin:0 auto;
}

常见的写法，以下三种都可以。

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

16、CSS布局的三种机制

普通流

块级元素会独占一行，从上向下顺序排列；

 - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；

 - 常用元素：span、a、i、em等

浮动

浮动最主要的价值是可以让多个块级元素在同一行内展示出来。

元素的浮动是指设置了浮动属性的元素会

脱离标准普通流的控制
移动到指定位置。

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

我们使用浮动的核心目的——让多个块级盒子在同一行显示。这个也是我们最常见的一种布局方式
一个完整的网页，是标准流 + 浮动 + 定位一起完成的。

浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流，每个标准流单独占一行。

如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，避免引起其他的问题哈。

下面我们来看以下👇几种情况：

以下所说的div结构均为此：

<div>
     <div class="a"></div>
     <div class="b"></div>
</div>

当a盒子浮动，b盒子也浮动的时候，a、b两盒子会显示在同一行。
当a盒子不浮动，b盒子浮动的时候，a盒子即是标准的文档流，是很霸道的哈，他会单独占据一行，所以b盒子会依照a盒子为参考，b盒子浮动。

清除浮动

我们为什么要清除浮动呢 ❓

父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，注意哦，浮动的盒子不占位置。最后父级盒子高度为0，就影响了下面的标准流盒子，下面的标准流盒子会覆盖原本想展示的内容。

总结：
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
- 准确地说，并不是清除浮动，而是清除浮动后造成的影响。

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的方法

如下图所示，若父元素nav盒子没有设置高度，子元素均设置浮动，则会导致子元素浮动在正常文档流之外，父元素的高度为：0，影响之后正常的文档流，所以此时我们会清除浮动。

以下👇所示的四种清除浮动的方式，均以此案例为参照

1.额外标签法(隔墙法)

注意此处说的浮动元素是指浮动的最后一个元素哈

W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 < div style=”clear:both”>< /div>。

2.父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。

一般我们会在父级元素样式后加：overflow：hidden。

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3.使用after伪元素清除浮动

此方式虽然代码多一点，但是不会改变html的结构

:after相当于在结构后用css添加了一个新的标签。

/*声明清除浮动的样式 */
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.clearfix{
    *zoom:1; /* ie6，7专门清除浮动的样式*/
}

4.使用双伪元素清除浮动
跟第三种方式差不多哈，在盒子的前后插入一个盒子

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

需要清除浮动的场景：

清除浮动说了这么多，那我们时候什么需要清除浮动呢😄，以下是需要清除浮动的场景

父级元素没有高度
子元素盒子有浮动
影响下面元素的布局