菜单 搜索
首页 前端知识 保姆级教程 CSS 知识点梳理大全，超详细！！！

保姆级教程 CSS 知识点梳理大全，超详细！！！

2024-08-18 00:08:52 前端知识 前端哥 17 308 我要收藏
  • 在HTML标签就可以“则需选择”它的类名，这样可以非常快速的添加一些常见的样式

请添加图片描述

在这里插入图片描述

好好学习 天天向上

好好学习 天天向上

好好学习 天天向上

好好学习 天天向上

好好学习 天天向上

在这里插入图片描述

（五）、复合选择器

在这里插入图片描述

后代选择器

在这里插入图片描述

在这里插入图片描述

交集选择器

在这里插入图片描述

并集选择器

并集选择器也叫做分组选择器，逗号表示分组

在这里插入图片描述

（六）、伪类选择器

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊的状态

在这里插入图片描述

a 标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效的问题

在这里插入图片描述

百度

京东

淘宝

慕课

![在这里插入图片描述](https://img-blog.csdnimg.cn/866c6e88022c4c288f3ee78a8b74c6e0.png?x-oss-process=image/watermark,type_ZHJ

（七）、元素关系选择器

在这里插入图片描述

（七）、子选择器

当使用 >符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系

在这里插入图片描述

在这里插入图片描述

（八）、相邻兄弟选择器

  • 相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟着第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

  • 说白了，a+b就是选择紧跟在a后面的一个b

请添加图片描述

(九）、通用兄弟选择器（~）

通用兄弟选择器（~）,a~b选择a元素之后所有同层级b元素请添加图片描述

（十）、序号选择器

（十一）、：first-child

first-child表示选择第一个子元素，比如下面的例子就是表示选择.box盒子中的第一个p

在这里插入图片描述

(十二)、：last-child

：last-child表示选择最后一个子元素，比如下面的例子

在这里插入图片描述

（十二）、： nth-child()

： nth-child()可以选择任意序号的子元素

在这里插入图片描述

：nth-child()可以写成 an+b的形式，表示从b开始每个a选一个

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

在这里插入图片描述

（十三）、序号选择器的兼容性

在这里插入图片描述

（十四）、属性选择器

在这里插入图片描述

在这里插入图片描述

Document 北京故宫 北京鸟巢 北京十七孔桥 参赛作品-无锡体育场 手机拍摄 无锡太湖 无锡美景 无锡夜景

在这里插入图片描述

（十五）、CSS3新增伪类

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十六）、伪元素

CSS3新增了伪元素特性，顾名思义，表示虚拟动态创建的元素

伪元素用双冒号表示，IE8可以兼容单冒号

：：before

：：after

请添加图片描述

在这里插入图片描述

在这里插入图片描述

（十七）、：：selection

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十八）、：：first-letter和：：first-line

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

三、层叠性和选择器权重的计算

  • CSS全名叫做“层叠样式表”，层叠性是他很重要的性质

  • 层叠性：多个选择器可以同时作用于同一个标签，效果叠加

在这里插入图片描述

如果多个选择器的定义有冲突呢？CSS有严密的处理规则

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

复杂选择器的计算

复杂选择器可以通过（ID的个数，class的个数，标签的个数）的形式，计算权重

请添加图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

四、文本与字体属性

（一）、常用的文本字体属性

  • color属性可以设置文本内容的前景色

  • color属性主要用于英语单词、十六进制、rgba()、rgb() 等表示方法

  • 用英语单词表示法，比如：color：red；仅仅用于学习时临时设置一下颜色，工作时不用这样的形式，因为追求精确。

（二）、十六进制表示法

十六进制表示法是所有设计软件中常用的颜色表示方法，设计师给我们的设计上面标注的图标颜色，通常为十六进制

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（三）、rgb() 表示法

在这里插入图片描述

（四）、rgba()表示法

颜色可以使用rgba（） 表示法，最后一个参数表示透明度，介于0-1之间，0表示纯透明，1表示纯实心

（五）、font-size属性

font-size属性用来设置字号，单位为px 后面还会说到em和rem

网页文字正文字号通常是16px浏览器最小支持10px

在这里插入图片描述

（六）、font-weight属性

  • font-weight属性设置字体的粗细程度，通常就用normal和bold两个值

在这里插入图片描述

（七）、font-style属性

作用：设置文字的倾斜

在这里插入图片描述

（八）、text-decoration属性

text-decoration属性用于设置文本的修饰外观的（下划线，删除线）

在这里插入图片描述

（九）、font-family属性

  • font-family属性用于设置字体的属性

  • 字体可以是列表的形式，一般英语字体放到前面，后面的字体是前面的字体的后备字体

  • 字体名称中有空格，必须要用引号来包裹

font-family：" 微软雅黑";

font-family: serif,“Times New Roman”,“微软雅黑”;

在这里插入图片描述

中文字体也可以称呼他们的名字

字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体的较多，设置成其他字体的较少

在这里插入图片描述

问题一：如何设置为用户电脑中没有的字体呢？那就必须自己定义新的字体，这就需要我们有字体文件，当用户加载网页的时候，会同时下载这些字体

定义字体，当我们拥有以下字体文件之后，就可以使用@font-face定义字体

在这里插入图片描述

在这里插入图片描述

（十）、阿里巴巴普惠体

阿里巴巴提供了一套免费商用授权的普惠字体，网址 https://www.iconfont.cn/webfont#!/webfont/index

使用阿里巴巴普惠字体也省去了下载的麻烦

在这里插入图片描述

使用步骤：

下载字体—使用font-face声明字体—定义使用 webfont 的样式—为文字加上对应的样式

第一步：下载字体

在这里插入图片描述

第二步：使用font-face声明字体（注意：在引用的时候要注意引用的路径哦）

在这里插入图片描述

第三步：定义使用 webfont 的样式

在这里插入图片描述

第四步：为文字加上对应的样式

在这里插入图片描述

在这里插入图片描述

（十一）、text-indent属性

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十二）、 line-height行高

  • line-height属性的单位可以是px为单位的数值

line-height：30px;

  • line-height属性的单位可以是 没有单位是数值，表示字号的倍数，这是最推荐的写法

line-height：1.5;

  • line-height属性也可以是百分数，表示字号的倍数

line-height：150%;

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十三）、单行文本垂直居中

行高等于盒子的高度，设置单行文本垂直居中对齐

在这里插入图片描述

设置text-align：center，即可实现文本水平居中

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十四）、font合写属性

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十五）、继承性

  • 文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有的标签中生效。

  • 因为文字相关的属性都有继承性，所以通常会设置body标签的字号、颜色、行高等、这样就能当做整个网页的默认样式了。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十五）、继承性的就近原则

在继承的情况下，选择器权重计算失效，就近原则

在这里插入图片描述

在这里插入图片描述

五、盒子模型

（一）、什么是盒子模型

所有的HTML标签都可以看成矩形盒子，由width，height，padding、border构成，称为盒子模型

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（二）、width属性

  • width属性表示盒子内容的宽度

  • width属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位

  • 当块级元素（div 、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承

在这里插入图片描述

在这里插入图片描述

（三）、height属性

  • height属性表示盒子内容的高度

  • height属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位

  • 盒子的height属性如果不设置的话，它将自动被内容撑开，如果没有内容，默认是0

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（四）、padding属性详解

  • padding属性是盒子的内边距，即盒子边框内壁到文字的距离

  • padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding

  • padding属性如果用数值以空格隔开进行设置，分别表示 上、左右、下的padding

  • padding属性如果要用二个数值以空格隔开进行设置，分别表示上下、左右的padding

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（五）、margin属性详解

margin是盒子的外边距，即盒子与其他盒子的距离

在这里插入图片描述

margin的塌陷问题

竖直方向的margin有塌陷的现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准

请添加图片描述

（六）、一些元素有默认的margin

一些元素（比如body、ul、p等)都有默认的margin，在开始制作网页的时候，要将他们清除

在这里插入图片描述

在这里插入图片描述

（七）、盒子的水平居中

将盒子的左右两边的margin都设置为0，盒子将水平居中

文本居中是text-align：center; 和盒子水平居中是两个概念

盒子的垂直居中 我们需要使用绝对定位来实现 后面我们细说

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（八）、盒模型的计算

在这里插入图片描述

（九）、box-sizing属性

给盒子添加了box-sizing：border-box属性之后，盒子的width、height数字就表示盒子实际占有的宽高（不包含margin）了，即padding、border变为内缩，不再外扩。

box-sizing属性大量用于移动网页的制作中，因为它结合百分比布局，弹性布局等非常好用，在PC页面中使用较少。

在这里插入图片描述

（十）、行内元素和块级元素

在这里插入图片描述

（十一）、行内块

img和表单元素是特殊的行内块，他们既能设置宽度和高度，也能够并排显示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十二）、行内元素和块级元素的相互转换

  • 使用display：block；可以将元素转换为块级元素

  • 使用display：inline；可以将元素转换为行内元素，将元素转换为行内元素的不多见

  • 使用display：inline-block；可以将元素转换为行内块元素

在这里插入图片描述

在这里插入图片描述

（十三）、元素的隐藏

  • 使用display：none；可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样

  • 使用visibility：hidden；也可以将元素隐藏，但是元素不放弃自己的位置

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

六、浮动与定位

（一）、浮动

  • 浮动的本质：用来实现并排的效果

  • 浮动使用的要点：要浮动，并排的盒子都实现浮动

  • 父盒子要有足够的宽度，否则子盒子会掉下去

在这里插入图片描述

（二）、浮动的顺序贴靠特性

子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素

如下图所示：3号盒子会掉到2号盒子的下面

在这里插入图片描述

（三）、浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档，一律能够设置宽度和高度，即使他是a标签或span标签

在这里插入图片描述

在这里插入图片描述

（四）、右浮动

在这里插入图片描述

（五）、使用浮动的注意事项

  • 垂直显示的盒子，不要设置浮动、只有并排显示的盒子才要设置浮动

  • “大盒子带着小盒子跑”，一个大盒子中、又是一个小天地，内部可以继续使用浮动

  • div是免费的，不要节约盒子

在这里插入图片描述

（六）、BFC规范

BFC规范（Box-Formatting Context 块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

观察下面的例子

在这里插入图片描述

在这里插入图片描述

出现以上问题的原因

  • 一个盒子不设置height，当内容子元素都浮动时，无法撑起自身

  • 这个盒子没有形成BFC

解决办法

在这里插入图片描述

在这里插入图片描述

（七）、如何创建BFC？

在这里插入图片描述

（七）、清除浮动

清除浮动：浮动一定要封闭到一个盒子中，否则会对页面后续元素产生影响

举例说明

在这里插入图片描述

来猜一下页面中会出现什么样的效果？

大家应该都会说两行两列？然而没有清除浮动就成行显示了！出现以下这种情况是没有清除浮动

在这里插入图片描述

清除浮动的方法一：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

清除浮动的方法二：

在这里插入图片描述

使用方法二的副作用：margin会失效

在这里插入图片描述

清除浮动的方法三：

在这里插入图片描述

在这里插入图片描述

清除浮动的方法四：

在这里插入图片描述

（八）、相对定位

相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位

在这里插入图片描述

位置词描述：值可以是负数，即往规定方向相反移动

在这里插入图片描述

相对定位的性质：相对定位的元素，会在老家留坑，本质上任然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成影子，不会对页面元素产生任何影响。

（九）、相对定位的用途

  • 相对定位用来微调元素位置

  • 相对定位的元素，可以当做绝对定位的参考盒子

在这里插入图片描述

在这里插入图片描述

（十）、绝对定位

绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置

在这里插入图片描述

绝对定位的位置描述词

在这里插入图片描述

绝对定位的元素脱离标准文档流

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖

绝对定位的参考盒子

  • 绝对定位的盒子并不是永远以浏览器作为基点

  • 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子通常是相对定位的，所以这个性质也叫做子绝父相

绝对定位的盒子垂直居中

绝对定位的盒子垂直居中是一个非常实用的技术

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

堆叠顺序 z-index属性

z-index属性是一个没有单位的正整数，数值大的能够压住数值小的

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十一）、绝对定位脱离标准文档流

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖

脱离标准文档流的方法：浮动、绝对定位、固定

定位

（十二）、绝对定位的用途

  • 绝对定位用来制作压盖、遮罩的效果

  • 绝对定位用来结合CSS精灵使用

  • 绝对定位可以结合JS实现动画

在这里插入图片描述

Document

<

>

    • （十一）、固定定位

      固定定位：不管页面如何滚动、他都永远固定在那里

      固定定位脱离标准文档流

      在这里插入图片描述

      固定定位的用途：“返回顶部”、“楼层导航”

      Document

      在这里插入图片描述

      （七）、边框与圆角

      （一）、border属性的三要素

      在这里插入图片描述

      （二）、线型

      在这里插入图片描述

      Document
    转载请注明出处或者链接地址：https://www.qianduange.cn//article/15913.html
    标签
    上一篇：HTML基本结构及基本标签
    评论
    相关文章

    前端哥

    前端哥

    发布的文章

    **让数据呈现更简单 —— json2html 开源项目**

    2024-08-23 21:08:35

    XML与JSON的使用

    2024-08-23 21:08:27

    Amazon OpenSearch Service 现在支持 JSON Web Token（JWT）身份验证和授权

    2024-08-23 21:08:16

    Java最全JSON解析教程（Gson、FastJson、Jackson），spring的设计模式面试题

    2024-08-23 20:08:51

    uniapp 动态生成page.json，自动拆分页面及自动注册页面

    2024-08-23 20:08:50

    Delphi使用SuperObject和使用SuperArray创建JSon

    2024-08-23 20:08:47

    4.postman批量运行及json、cvs文件运行

    2024-08-23 20:08:30

    Java学习｜JSON 处理库：Gson、FastJson、Jackson的比较与使用指南

    2024-08-23 20:08:29

    解决com.alibaba.fastjson.JSONException: default constructor not found的问题

    2024-08-23 20:08:27

    npm i 常见问题

    2024-08-23 20:08:23

    大家推荐的文章
    1

    【Echarts系列】—— 实现电池图、3D立体圆形柱状图

    2024-03-03 11:03:011001
    2

    小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

    2024-08-19 22:08:161000
    3

    《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

    2024-08-19 22:08:121000
    4

    npm的使用

    2024-08-18 00:08:131000
    5

    JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

    2024-07-30 22:07:311000
    6

    在HTML和CSS当中运用显示隐藏

    2024-06-17 09:06:541000
    7

    成为优秀的TS体操高手 之 TS 类型体操前置知识储备

    2024-06-10 11:06:351000
    8

    django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

    2024-06-06 10:06:201000
    9

    html简单网页代码：基于html关爱空巢老人网页设计与实现

    2024-06-04 10:06:181000
    10

    jquery实现注册表单验证（仅供参考）

    2024-06-07 00:06:411000

    rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

    Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

    讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

    前端技术交流源码工具分享网站

    会员中心 联系我 留言建议 回顶部
    复制成功！