CSS基本知识点总结

编程语言 2023-07-01 13:40:12 阅读次数: 0

1、CSS简介

1.1、CSS是什么？

  • CSS指的是层叠样式表（Cascading Style Sheets）
  • CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素
  • CSS节省了大量工作。它可以同时控制多张网页布局。

1.2、CSS引入方式

引入方式 书写位置 作用范围 使用场景
内嵌式 CSS写在style标签中。style标签通常放在head中 当前页面 小案例
外联式 CSS写在单独的CSS文件中，通过link标签引入 多个页面 项目中
行内式 CSS写在标签的style属性中 当前标签 配合js使用

2、CSS选择器

2.1、CSS基础选择器

2.1.1 ID选择器
  • 结构：#id属性值 { css属性名: 属性值; }
  • 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

  1. 所有标签上都有id属性
  2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
  3. 一个标签上只能有一个id属性值
  4. 一个id选择器只能选中一个标签
2.1.2 类选择器
  • 结构：.class { css属性名: 属性值; }
  • 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

  1. 所有标签上都有class属性，class属性的属性值成为类名
  2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
  3. 一个标签可以同时有多个类名，类名之前以空格隔开
  4. 类名可以重复，一个类选择器可以同时选中多个标签
2.1.3 通配符选择器
  • 结构：* { css属性名: 属性值; }
  • 作用：找到页面中所有的标签，设置样式

注意点：默认去除浏览器自带属性margin和padding

2.1.4 标签选择器
  • 结构：标签名 { css属性名: 属性值; }
  • 作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

  1. 标签选择器选择的是一类标签，而不是单独某一个
  2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
2.1.5 属性选择器
属性 说明
[attribute] 选择多有带 attribute 属性的元素
[attribute=value] 选择 attribute=value的所有元素
[attribute~=value] 选择 attribute属性包含单词 value的所有元素
[attribute^=value] 选择其attribute属性值以value开头的所有元素
[attribute$=value] 选择其attribute属性值以 value结束的所有元素
[attribute*=value] 选择其attribute属性中包含value子串的每个元素
  • 结构：标签名 { css属性名: 属性值; }
  • 作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

  1. 标签选择器选择的是一类标签，而不是单独某一个
  2. 标签选择器无论嵌套关系有多深，都能找到对应的标签

2.2、组合选择器

选择器 作用 格式 示例
后代选择器 找后代 选择器之间通过空格分隔 .father .son { css }
子代选择器 找儿子 选择器之间通过 >分隔 .father > .son { css }
并集选择器 找到多类元素 选择器之间通过,分隔 div,p,span { css }
交集选择器 找同时满足多个选择器的元素 选择器之间紧挨着 p.red { css }
兄弟选择器 匹配p标签后的所有span元素 选择器之间通过 ~ 分隔 p ~ span
相邻选择器 匹配p标签的第一个span元素 选择器之间通过 + 分隔 p + span

2.3、伪类选择器

伪类：将特殊的效果添加到特定的选择器上，不会产生新元素

选择器 功能描述
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E:nth-child(n) 作为父元素的第n个子元素E
E:nth-last-child(n) 选择父元素的倒数第n个子元素
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个元素
E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type 选择父元素内具有指定类型的倒数第n个E元素
E:root 选择匹配元素E所在文档的根元素，也就是html
E:only-child 选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type 选择父元素只包含一个同类型的子元素，且该子元素匹配E元素
E:empty 选择没有子元素的元素，且该元素也不包含任何文本节点
E:link 选择所有未被访问的链接
E:active 选择活动状态的a链接元素
E:visited 选择已经访问过的元素
E:hover 选择鼠标悬停状态的元素
E:checked 选择<input type="checkbox" checked>的元素

2.4、伪元素选择器

伪元素：在内容元素的前后插入额外的元素或样式，这些元素不在html文档中生成，只在外部可见。

选择器 功能描述
::before 创建一个伪元素放在选中元素前
::after 创建一个伪元素放在选中元素后
::first-letter 选各种元素第一行第一个字母
::first-line 选中元素的第一行
::selection 选中鼠标点击拖动选中的高亮部分

2.5、伪类和伪元素区别

  1. 伪元素只能在选择器中出现一次，而且只在末尾出现
  2. 伪类只设置样式，不会创建新元素。而伪元素会创建新元素
  3. 伪类的效果可以通过添加实际的类来实现；伪元素也可以通过添加元素来实现

3、字体和文本样式

3.1、字体样式

属性名 样式 属性值
font-size 字体大小 数字+px
font-weight 字体粗细 正常：normal或数字400; 加粗：bold或数字700
font-style 是否倾斜 正常（默认值）：normal; 倾斜：italic
font-family 字体系列 sans-serif（无衬线字体）; serif（衬线字体）; monospace（等宽字体）
font 字体连写 style weight size family

3.2、文本样式

属性名 样式 属性值
text-indent 文本缩进 数字+px; 数字+em（推荐：1em = 当前标签的font-size的大小）
text-align 对齐方式 left: 左对齐; center: 居中对齐; right: 右对齐
text-decoration 文本修饰 underline: 下划线; line-through: 删除线; overline: 上划线; none: 无装饰线
line-height 文本行高 数字+px; 倍数（当前标签font-size的倍数）

4、背景相关属性

4.1、背景颜色

属性名：background-color

属性值：

颜色取值 示例
关键字 red、green、yellow等
rgb表示法 rgb(255,255,255)
rgba表示法 rgba(255,255,255,1)
十六进制 #ffffff;

注意点：

  • 背景颜色默认值是透明的：rgba(0,0,0,0)或transparent
  • 背景颜色不会影响盒子大小，一般在布局中使用，方便看清盒子大小和位置

4.2、背景图片

属性名：background-image

扫描二维码关注公众号，回复： 15526094 查看本文章

属性值：background-image: url(‘图片的路径’)

注意点：

  • 背景图片默认实在水平和垂直方向平铺的
  • 背景图片仅仅是指给盒子起到装饰效果，类似于背景不能撑开盒子

4.3、背景平铺

属性名：background-repeat

属性值：

取值 效果
repeat （默认值）水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿水平方向（x轴）平铺
repeat-y 沿垂直方向（y轴）平铺

4.4、背景位置

属性名：background-position

属性值：background-position: 水平方向位置 垂直方向位置

4.5、img标签和背景图片的区别

  • img标签是一个标签，不设置宽高默认会以原来尺寸显示
  • 背景图片只是装饰的CSS样式，不能撑开元素的宽高

5、元素的显示模式

5.1、块级元素

属性：display: block
特点：

  1. 独占一行（一行只能显示一个）
  2. 宽度默认是父元素的宽度，高度默认由内容撑开
  3. 可以设置宽高

代表标签：

  • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer等

5.2、行内元素

属性：display: inline
特点：

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高

代表标签：

  • a、span、b、u、i、s、strong、ins、em、del等

5.3、行内块元素

属性：display: inline-block
特点：

  1. 一行可以显示多个
  2. 可以设置宽高

代表标签：

  • input、textarea、button、select等
  • 特殊情况：img标签有行内块元素特点，但在谷歌浏览器中显示的是inline

6、CSS三大特性

6.1、继承性

特点：子元素有默认继承父元素样式的特点（子承父业）

继承属性：

  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-align
  4. line-height

应用场景：

  1. 可以直接给ul设置list-style:none属性，从而去除列表默认的小圆点样式
  2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

继承失效情况：被浏览器默认样式给覆盖了

6.2、层叠性

特性：

  1. 给同一个标签设置不同的样式 -> 此时样式会层叠叠加 -> 会共同作用在标签上
  2. 给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效
  3. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断

6.3、优先级

选择器 示例 权重值
!important background-color: #fff !important; 正无穷
内联选择器 <span style='color: #333;'>样式作用元素</span> 1000
ID选择器 #id 100
类选择器、属性选择器、伪类选择器 .class 10
标签选择器、伪元素选择器 div、p 1
通配符选择器 * 0
继承属性 <div style='color:#333;'><span>样式作用元素</span></div> -1

说明

  1. 权重值是256进制的
  2. 同一行的选择器权重值相加，权重值高的样式生效，如果权重值相同，后面写的覆盖前面
  3. 不是同一行的直接找按权重值相加计算，权重值高的样式生效

7、盒子模型

7.1、盒子模型介绍

盒子的概念：

  1. 页面中的每一个标签都可以看做是一个盒子；通过盒子的视角，可以更方便的进行布局
  2. 浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域，我们也形象称之为盒子

盒子模型：CSS中规定盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成

7.1.1 内容的宽度和高度

作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小

属性：width / height

常见取值：数字 + px

7.1.2 边框 (border)

作用：设置边框粗细、边框样式、边框颜色效果

属性：

作用 属性名 属性值
边框粗细 border-width 数字 + px
边框样式 border-style 实线 solid、虚线 dashed、点线 dotted
边框颜色 border-color 颜色取值

边框连写形式：边框粗细 边框样式 边框颜色

例如：border: 1px solid #333;

单方向设置：border-方位名词: 1px solid red;

7.1.3 内边距 (padding)

作用：设置边框与内容区域之间的距离

属性名：padding

常见取值：

取值 示例 含义
一个值 padding: 10px; 上下左右都设置为10px
两个值 padding: 10px 20px; 上下设置为10px、左右设置为20px
三个值 padding: 10px 20px 30px 上设置为10px、左右设置为20px、下设置为30px
四个值 padding: 10px 20px 30px 40px 上设置为10px、右设置为20px、下设置为30px、左设置为40px

单方向设置：padding-方位名词: 10px;

7.1.4 外边距 (margin)

作用：设置边框以外，盒子与盒子之间的距离

属性名：margin

常见取值：

取值 示例 含义
一个值 margin: 10px; 上下左右都设置为10px
两个值 margin: 10px 20px; 上下设置为10px、左右设置为20px
三个值 margin: 10px 20px 30px 上设置为10px、左右设置为20px、下设置为30px
四个值 margin: 10px 20px 30px 40px 上设置为10px、右设置为20px、下设置为30px、左设置为40px

单方向设置：margin-方位名词: 10px;

7.1.5 盒子实际大小计算公式
  • 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
  • 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

问题：当盒子被border和padding撑大后，如何解决？

  1. 手动内减：手动计算多余大小，在内容中减去
  2. 自动内减：给盒子设置属性 box-sizing: border-box;
7.1.6 相邻盒子之间margin计算规则
  1. 水平方向的盒子，两者距离为margin之和
  2. 垂直方向的盒子，两者距离为margin的最大值
7.1.7 塌陷现象

场景：互相嵌套和块级元素，子元素的magin-top会作用在父元素上

结果：导致父元素一起往下移动，引起父元素塌陷

解决方式：

  1. 给父元素设置border-top或者padding-top（分割父子元素的margin-top）
  2. 给父元素设置overflow: hidden;
  3. 转换成行内块级元素 display: inline-block;
  4. 设置浮动 float: left;
  5. 添加伪类

常用清除浮动和父元素塌陷伪类：

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

8、 标准流

标准流：又称文档流，是浏览器在渲染元素时默认采用的一套排版规则，规定了该以何种方式排列元素

排版规则：

  1. 块级元素：从上到下，垂直布局，独占一行
  2. 行内元素 或 行内块元素：从左到右，水平布局，空间不够自动换行

9、 浮动

9.1、浮动的特点

  1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
  2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
  3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
  4. 浮动元素会受到上面块级元素边界的影响
  5. 浮动元素有特殊的显示效果
  • 一行可以显示多个
  • 可以设置宽高

注意点：浮动元素不能通过父元素设置text-align:center;或本身设置margin: 0 auto;让浮动元素本身水平居中

9.2、浮动的作用

  1. 图文环绕
  2. 网页布局，让垂直布局的盒子变成水平布局

9.3、浮动的代码

属性：float

  1. 左浮动： float: left;
  2. 右浮动： float: right;

9.4、浮动带来的影响

影响：子元素设置浮动，此时子元素脱离标准流无法撑开父元素，会影响页面其他元素的布局

9.5、清除浮动的方法

  1. 直接设置父元素高度
  • 优点：简单直接，方便
  • 缺点：有些元素无固定高度，无法设置高度
  1. 在父元素内容的最后添加一个块级元素，并给块级元素添加属性 clear: both;
  • 缺点：会在页面中添加额外的标签，会让页面结构变得复杂难以阅读
  1. 单伪元素清除法

基本写法：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

补充写法：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    /* 在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}
  • 优点：直接给标签添加类即可清除浮动

  1. 双伪元素清除法

    .clearfix::before,
    .clearfix::after {
    content: “”;
    display: table;
    }
    .clearfix::after {
    clear: both;
    }

  • 优点：直接给标签添加类即可清除浮动
  1. 给父元素设置overflow: hidden;
  • 优点：简单直接，方便

10、 BFC

10.1、BFC介绍

  • 块格式化上下文（Block Formatting Context）是web页面的可视CSS渲染的一部分，是块盒子的布局过程中发生的区域，也是浮动元素与其他元素交互的区域。

10.2、创建BFC的方法

  1. html标签是BFC盒子
  2. 浮动元素是BFC盒子
  3. 行内元素是BFC盒子
  4. overflow属性值不为visible是BFC盒子
  5. position: absolute或fixed

10.2、BFC盒子特点

  1. BFC盒子会默认包裹住内部子元素（标准流、浮动流）-> 应用场景：清除浮动
  2. BFC盒子本身与子元素之间不存在margin的塌陷现象 -> 应用场景：解决margin的塌陷

11、定位

11.1、定位的应用场景

  1. 可以解决盒子与盒子之间的层叠问题
  • 定位之后的元素层级最高，可以层叠在其他盒子之上
  1. 可以让盒子始终固定在屏幕中的某个位置

11.2、使用定位的步骤

11.2.1 设置定位方式

属性名：position

定位方式：

定位方式 属性值 相对于谁移动 是否占位置
静态定位 static 不能通过方位属性移动 占位置
相对定位 relative 相对于自己原来的位置 占位置
绝对定位 absolute 相对于最近的且有定位的祖先元素移动 不占位置（脱标）
固定定位 fixed 相对于浏览器可视区域 不占位置（脱标）
11.2.2 设置偏移值
  • 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
  • 选取的原则为就近原则
方向 属性名 属性值 含义
水平 left 数字+px 距离左边的距离
水平 right 数字+px 距离右边的距离
垂直 top 数字+px 距离上边的距离
垂直 bottom 数字+px 距离下边的距离

11.3、定位方式

11.3.1 静态定位

介绍：静态定位是默认值，就是标准流，不能通过方位属性进行移动
代码：position: static;

11.3.2 相对定位

介绍：相对于之前的位置进行位移
代码：position: relative;
特点：

  1. 需要配合方位属性实现移动
  2. 相对于原来的位置进行移动
  3. 在页面中占位置,没有脱离标准流

应用场景：

  1. 配合绝对定位（子绝父相）
  2. 小范围移动
11.3.3 绝对定位

介绍：相对于之前的位置进行位移
代码：position: absolute;
特点：

  1. 需要配合方位属性实现移动
  2. 默认相对于浏览器可视区域进行移动
  3. 在页面中不占位置,脱离标准流
  4. 相对于最近的有定位（非static）的祖先元素进行移动

应用场景：

  1. 配合相对定位（子绝父相）

     <!DOCTYPE html>
 <head>
     <meta charset="UTF-8">
     <title>水平垂直居中</title>
     <style>
         /* 相对于浏览器可视区域进行移动 */
         .father {
             position: absolute;
             top: 50%;
             left: 50%;
             width: 500px;
             height: 500px;
             background-color: pink;
             transform: translate(-50%, -50%);
         }
         /* 相对于最近的有定位（非static）的祖先元素进行移动 */
         .son {
             position: absolute;
             top: 50%;
             left: 50%;
             width: 200px;
             height: 200px;
             background-color: red;
             transform: translate(-50%, -50%);
         }
     </style>
 </head>
 <body>
     <div class="father">
         <div class="son"></div>
     </div>
 </body>
 </html>
11.3.3 固定定位

介绍：相对于浏览器进行定位
代码：position: fixed;
特点：

  1. 需要配合方位属性实现移动
  2. 相对于浏览器可视区域进行移动
  3. 在页面中不占位置,脱离标准流
  4. 相对于最近的有定位（非static）的祖先元素进行移动

应用场景：

  1. 让盒子固定在屏幕中的某个位置

12 元素层级（z-index）

12.1、 元素层级关系

  1. 不同布局方式的层级关系
  • 标准流 < 浮动 < 定位
  1. 不同定位之间的层级关系
  • 相对、绝对、固定默认层级相同
  • 在HTML中写在下面的元素层级更高，会覆盖上面的元素

12.2、 改变层级的方式

  • 给元素添加属性z-index;属性值越大，层级越高

13、 装饰

13.1、 基线

介绍：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

13.2、 文字对齐

属性名：vertical-align
属性值：

属性值 效果
baseline 默认，基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐

应用场景：

  1. 解决文本框和表单按钮无法对齐问题、
  2. 解决input和img无法对齐问题
  3. 解决div中的文本框无法贴顶问题
  4. 解决div不设置高度时，img标签下会存在额外间隙问题
  5. 使用line-height让img标签垂直居中问题

13.3、 光标类型

介绍：设置鼠标光标在元素上时显示的样式
属性名：cursor
属性值：

属性值 效果
default 默认值，通常是箭头
pointer 小手效果，提示用户可以点击
text 工字型，提示用户可以选择文字
move 十字光标，提示用户可以移动

13.4、边框圆角

介绍：让盒子四角变得圆润，增加页面细节，提高用户体验
属性名：border-radius
取值：数字+px、百分比

13.5、 overflow

介绍：控制溢出部分的显示效果

属性值 效果
visible 默认值，溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出，都显示滚动条
auto 根据是否溢出，自动显示或隐藏滚动条

13.6、元素隐藏

介绍：让元素本身在浏览器中不可见

属性：

  1. visibility: hidden;
  2. display: none;

区别：

  1. visibility: hidden;隐藏元素本身，并且在网页中占位置
  2. display: none;隐藏元素本身，并且在网页中不占位置

13.6、元素透明度

介绍：让元素整体（包括内容）一起变透明
属性名：opacity
属性值：0 ~ 1之间的数字

  • 1：表示完全不透明
  • 0：表示完全透明

猜你喜欢

转载自blog.csdn.net/qq_40046544/article/details/126066028
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022