大家好，我是讯享网，很高兴认识大家。



文章目录

• CSS

• CSS介绍
• CSS的引入方式
• 选择器

• 基本选择器
• 高级选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器

• CSS的继承性和层叠性
• 盒模型
• 块级与行内相互转换
• 浮动

• 浮动的元素脱标
• 浮动元素互相贴靠
• 浮动元素字围效果
• 浮动元素紧凑效果
• 清除浮动

• margin的用法
• 定位

• 相对定位
• 绝对定位
• 固定定位

• z-index

CSS

CSS介绍

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

• HTML的缺陷：
  不能够适应多种设备
  要求浏览器必须智能化足够庞大
  数据和显示没有分开
  功能不够强大
  
  
  
  
  
  
  
  
  
  
  
• CSS的优点：
  使数据和显示分开
  降低网络流量
  使整个网站视觉效果一致
  使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）
  
  
  
  
  
  
  
  
  
  
  

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

CSS的引入方式

1. 行内式(不推荐使用)

1. 内接样式(页面比较小,)

1. 外接样式–链接式()

必须要写一个css 文件.()

1. 外接样式–导入式
   不建议使用,加载延迟
   
   

讯享网

选择器

css优先级,指的是浏览器加载css样式的先后顺序.

基本选择器

• 标签选择器(标签名称)
  标签选择器可以选中所有的标签元素，比如，，，等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 “共性” 而不是 ”特性“。
  
  

• 类选择器(.+类名)
  加选中名称
  所谓类：就是class.
  class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
  
  
  
  
  
  
  
  

• id选择器(#+id名称)
  加选中名称
  同一个页面中不能重复。
  任何的标签都可以设置
  
  
  
  
  
  
  
  

高级选择器

1. 后代选择器(空格)
   顾名思义，父元素的后代（包括儿子，孙子，重孙子）
   
   
2. 子代选择器()
   使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子…)元素p。
   
   
3. 并集选择器()()
   多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器
   
   
4. 交集选择器(两个选择器连着写)()
   两个选择器没有连接符号表示交集选择器。
   比如有一个这样的标签。
   
   
   
   
   

属性选择器

• 属性名称匹配
• 完整匹配()
• 以什么开头()
• 以什么结尾()
• 包含什么()
• 指定标签的属性

伪类选择器

()鼠标悬浮时,触发

伪元素选择器

• first-letter 首字母设置样式
• before 在什么之前设置样式,结合content(了解)
• after 在什么之后设置样式,结合content(. 结合清除浮动使用)

CSS的继承性和层叠性

• 继承性
  面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。
  继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
  记住：有一些属性是可以继承下来 ： 、 、 、 。主要是文本级的标签元素。
  但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
  
  
  
  
  
  
  
  
  
  
  
• 层叠性
  层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
  权重： 谁的权重大，浏览器就会显示谁的属性
  谁的权重大？ 非常简单就是小学的数数。
  数：的数量 的数量 标签的数量，顺序不能乱
  
  
  
  
  
  
  
  
  
  
  

加深难度

先看HTML代码结构：

再看下CSS代码：

答案：绿色。哈哈，是不是感觉快懵掉了。其实大家只要记住这点特性就可以。第一条css设置的属性值，是通过继承性设置成的红色，那么继承来的属性，它的权重为0。它没有资格跟我们下面选中的标签对比。

那大家猜想一下如果都是被继承来的属性，那么字会显示什么颜色呢？

小案例证明：权重都是0:那么就是”就近原则” ： 谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层的距离越近。

• 总结：
  先看标签元素有没有被选中，如果选中了，就数数 （,,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
  如果没有被选中标签元素，权重为0。
  如果属性都是被继承下来的 权重都是0 。权重都是0 : “就近原则” ： 谁描述的近，就显示谁的属性
  
  
  
  
  
  
  
  

注意：的使用。

!important:设置权重为无限大

!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局。切记！

盒模型

：内容的宽度

: 内容的高度

：内边距，边框到内容的距离

: 边框，就是指的盒子的宽度

：外边距，盒子边框到附近最近盒子的距离

• padding（内边距）
  ：就是内边距的意思，它是边框到内容之间的距离
  
  

• 写小属性,分别设置不同方向的padding

• 写综合属性，用空格隔开

• 注意：一些标签默认有。
  比如标签，有默认的值。
  那么我们一般在做站的时候，是要清除页面标签中默认的和。以便于我们更好的去调整元素的位置。
  
  
  
  
  

• border（边框）
  :边框的意思，描述盒子的边框
  边框有三个要素： 粗细 线性样式 颜色
  
  
  
  
  

• margin（外边距）
  ：外边距的意思。表示边框到最近盒子的距离。
  
  

块级与行内相互转换

从HTML的角度来讲，标签分为：

• 文本级标签：、、、、、、。
• 容器级标签：、系列、、、。

从CSS的角度讲，CSS的分类和上面的很像，就不一样：

• 行内元素：除了之外，所有的文本级标签，都是行内元素。是个文本级，但是是个块级元素。
• 块级元素：所有的容器级标签都是块级元素，还有标签。

特殊的行内块级标签:和

1. 行内转换成块级:
2. 块级转换成行内:
3. 转换成行内块:

浮动

：表示浮动的意思。

: 表示不浮动，默认

: 表示左浮动

：表示右浮动

浮动的元素脱标

脱标：就是脱离了标准文档流
什么叫标准文档流:

• 空白折叠现象
• 高矮不齐，底边对齐
• 自动换行写，一行写不了，换行写

设置浮动的元素,不管是块级还是行内,都可以设置宽高.

• 效果：红色盒子压盖住了黄色的盒子，一个行内的span标签竟然能够设置宽高了。
• 原因1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。
• 原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高。

浮动元素互相贴靠

• 如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
• 如果没有足够的空间，那么3哥就会自己靠边，如果再没有足够的空间靠着1哥，2哥也会往边靠。

浮动元素字围效果

• 所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。

浮动元素紧凑效果

收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

• 关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动。

清除浮动

• 给父盒子设置高度
  这个方法使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏
  
  

• ：意思就是清除的意思。

：当前元素左边不允许有浮动元素

：当前元素右边不允许有浮动元素

：当前元素左右两边不允许有浮动元素

给浮动元素的后面加一个空的，并且该元素不浮动，然后设置。

• 伪元素清除法(常用)
  给浮动子元素的父盒子，也就是不浮动元素，添加一个的类，然后设置
  
  

• (常用)
  给浮动子元素的父盒子，也就是不浮动元素，设置
  
  

属性规定当内容溢出元素框时发生的事情。

说明：

margin的用法

• margin塌陷问题

当给两个标准流下兄弟盒子 设置垂直方向上的时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候主要margin的用法。

使用注意点：

1. 使用水平居中盒子必须有，要有明确
2. 只有标准流下的盒子 才能使用 当一个盒子浮动了，固定定位，绝对定位(后面会讲)，不能用了
3. 居中盒子。而不是居中文本，文字水平居中使用

另外大家一定要知道属性是描述兄弟盒子的关系，而描述的是父子盒子的关系

• 善于使用父亲的padding
  我们要善于使用父亲的padding，而不是margin。
  
  

定位

相对定位

相对定位:相对于自己原来的位置定位

现象和使用：

1. 如果对当前元素仅仅设置了相对定位，那么与标准流的盒子没什么区别。
2. 设置相对定位之后，我们才可以使用四个方向的属性： 、、、

用途：

1. 微调元素位置
2. 做绝对定位的参考（父相子绝）绝对定位会说到此内容。

参考点：自己原来的位置做参考点。

绝对定位

特性：

1. 脱标
2. 做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

参考点(重点)：

• 单独一个绝对定位的盒子

1. 当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2. 当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

• 以父辈盒子作为参考点

3. 父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
4. 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
5. 不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
   注意，绝对定位的盒子无视父辈的padding
   
   

作用：页面布局常见的“父相子绝”，一定要会！！！

固定定位

固定当前的元素不会随着页面滚动而滚动

特性:

1. 脱标
2. 遮盖，提升层级
3. 固定不变

参考点：

1. 设置固定定位，用描述。那么是以浏览器的左上角为参考点
2. 如果用描述，那么是以浏览器的左下角为参考点

作用：

1. 返回顶部栏
2. 固定导航栏
3. 小广告

z-index

• 值表示谁压着谁，数值大的压盖住数值小的。
• 只有定位了的元素，才能有,也就是说，不管相对定位，绝对定位，固定定位，都可以使用，而浮动元素不能使用。
• 值没有单位，就是一个正整数，默认的值为如果大家都没有值，或者值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
• 从父现象：父亲怂了，儿子再牛逼也没用。