跳至主要內容

CSS

Xankon2022/5/5大约 17 分钟
#一段CSS代码
<style>
    h1{
        color:red;
        background-color:lightblue;
        text-align:center;
    }
</style>

1.选择器

CSS（Cascading Style Sheets）层叠样式表

1.1 选择器

帮助你精准的选中想要的元素(花括号前的内容)

  1. ID 选择器：选中的是对应 id 值的元素
#test{
    ...
}
  1. 元素选择器 用的少
  2. 类选择器
.red {
            color: red;
        }

  1. 通配符选择器 *{...}: 选中所有元素

  2. 属性选择器 根据属性名和属性值选中元素

  3. 伪类选择器a:hover{color:red} 选中某些元素的某种状态 书写顺序： 1）link: 超链接未访问时的状态 2）visited: 超链接访问过后的状态 3）hover: 鼠标悬停状态 4）active：激活状态，鼠标按下状态 爱恨法则：love hate

  • first-child，选择第一个子元素
  • first-of-type，选中子元素中第一个指定类型的元素
  • last-child
  • nth-child，选中指定的第几个子元素
  • nth-of-type，选中指定的子元素中第几个某类型的元素

    even：关键字，等同于 2n odd: 关键字，等同于 2n+1

  1. 伪元素选择器 p::before{}
  • before: 在第一位生成一个无名子元素
  • after: 在最后一位生成一个无名子元素
  • first-letter：选中元素中的第一个字母
  • first-line：选中元素中第一行的文字
  • selection：选中被用户框选的文字

1.1.1 选择器的组合

  1. 并且 连写.xxx.xxx
  2. 后代元素 —— 空格
  3. 子元素 —— >
  4. 相邻兄弟元素 —— +
  5. 后面出现的所有兄弟元素 —— ~

1.1.2 选择器的并列

多个选择器, 用逗号分隔 语法糖

1.2 声明块

花括号中的内容 声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式

2. CSS 代码书写位置

  1. 内部样式表 书写在 style 元素中（开头）
  2. 内联样式表，元素样式表 直接书写在元素的 style 属性中 <p style=...>
  3. 外部样式表 将样式书写到独立的 css 文件中。 <link rel="stylesheet" href="css/index.css"> 1). 外部样式可以解决多页面样式重复的问题 2). 有利于浏览器缓存，从而提高页面响应速度 3). 有利于代码分离（HTML 和 CSS），更容易阅读和维护

3. 常见样式声明

  1. color 元素内部的文字颜色 预设值：定义好的单词 三原色，色值：光学三原色（红、绿、蓝），每个颜色可以使用 0-255 之间的数字来表达，色值。 rgb表示法：(red green blue) rgb(0, 255, 0) hex（16进制）表示法： #红绿蓝 #008C8C 淘宝红：#ff4400, #f40 黑色：#000000，#000 白色：#ffffff, #fff 红：#ff0000, #f00 绿：#00ff00, #0f0 蓝：#0000ff, #00f 紫：#f0f 青：#0ff 黄：#ff0 灰色：#ccc

  2. background-color 元素背景颜色

  3. font-size 元素内部文字的尺寸大小 1）px：像素，绝对单位，简单的理解为文字的高度占多少个像素 2）em：相对单位，相对于父元素的字体大小，最终都会换算成数值。 每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。

    user agent，UA，用户代理（浏览器）

  4. font-weight 文字粗细程度，可以取值数字，可以取值为预设值

    strong，默认加粗。语义上表示强调不可忽略。

  5. font-family 文字类型 必须用户计算机中存在的字体才会有效。 使用多个字体，以匹配不同环境（用户电脑中应该会下载一种字体） sans-serif，非衬线字体-字体边缘无修饰（通用写法，应对用户电脑版本旧） consolas

  6. font-style 字体样式，通常用它设置斜体

    i 元素，em 元素，默认样式，是倾斜字体; 实际使用中，通常用它表示一个图标（icon）；em 表示强调

  7. text-decoration 文本修饰，给文本加线。

    a 元素 del 元素：错误的内容 s 元素：过期的内容

  8. text-indent 首行文本缩进

  9. line-height 每行文本的高度，该值越大，每行文本的距离越大。 设置行高为容器的高度，可以让单行文本垂直居中。 行高可以设置为纯数字，表示相对于当前元素的字体大小。

  10. width 宽度

  11. height 高度

  12. letter-space 文字间隙

  13. text-align 元素内部文字的水平排列方式

3.1 更多的样式

透明度

  1. opacity，它设置的是整个元素的透明，它的取值是 0 ~ 1
  2. 在颜色位置设置 alpha 通道 rgba(0, 0, 0, 0.5)

鼠标

使用 cursor 设置 pointer/ .ico 替换指针图标

盒子隐藏

  1. display:none，不生成盒子
  2. visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。

背景图

和 img 元素的区别

img 元素是属于 HTML 的概念 背景图属于 css 的概念

  1. 当图片属于网页内容时，必须使用 img 元素
  2. 当图片仅用于美化页面时，必须使用背景图
涉及的 css 属性

  1. background-image

  2. background-repeat 默认情况下，背景图会在横坐标和纵坐标中进行重复

  3. background-size 设置 size 前，要先写 position 再写尺寸 预设值：contain、cover，类似于 object-fit 数值或百分比 强制拉伸填充图片background-size: 100% 100%;

  4. background-position 设置背景图的位置。 预设值：left、bottom、right、top、center 数值或百分比 雪碧图（精灵图）（spirit）

  5. background-attachment 通常用它控制背景图是否固定。

  6. 背景图和背景颜色混用

  7. 速写（简写）background 百分比先写位置再写尺寸

4. 层叠

声明冲突：同一个样式，多次应用到同一个元素（并不是一定要避免） 层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

4.1 判断步骤：

第一步：比较重要性

重要性从高到底： 1） 作者样式表中的!important 样式（尽量不要加）

  1. 作者样式表中的普通样式
  2. 浏览器默认样式表中的样式

    作者样式表：开发者书写的样式

第二步：比较特殊性

看选择器 总体规则：选择器选中的范围越窄，越特殊（class比<a>窄） 具体规则：通过选择器，计算出一个 4 位数（x x x x）

  1. 千位：如果是内联样式，记 1，否则记 0 （<a href="" style="color:red"></a> style 为内联样式）
  2. 百位：等于选择器中所有 id 选择器的数量
  3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
  4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量

第三步：比较源次序

代码书写靠后的胜出

4.2 层叠在开发中的应用

  1. 重置样式表 书写一些作者样式，覆盖浏览器的默认样式 重置样式表 -> 浏览器的默认样式 常见的重置样式表：normalize.css、reset.css、meyer.css
  2. 爱恨法则（源次序-靠后的胜出） link > visited > hover > active

5. 继承

子元素会继承父元素的某些 CSS 属性 通常，跟文字内容相关的属性都能被继承

6. 属性值的计算过程

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行 渲染每个元素的前提条件：该元素的所有 CSS 属性必须有值

一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程

  1. 确定声明值 参考样式表（作者/浏览器样式表）中没有冲突的声明，作为 CSS 属性值
  2. 层叠冲突 对样式表有冲突的声明使用层叠规则，确定 CSS 属性
  3. 使用继承 对仍然没有值的属性，若可以继承，则继承父元素的值
  4. 使用默认值 对仍然没有值的属性，使用默认值（MDN 可查）

举例

<style>
  div {
    color: red;
  }
</style>
.........
<body>
  <div>
    <a href=""> a元素不会是红色，因为第一步浏览器样式表给了紫色 举个例子 </a>
    <p>p元素是红色 p元素</p>
  </div>
</body>

特殊的两个 CSS 取值：

  • inherit：手动（强制）继承，将父元素的值取出应用到该元素
  • initial：初始值，将该属性设置为默认值

7. 盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子） 盒子类型：

  1. 行盒，display 等于 inline 的元素
  2. 块盒，display 等于 block 的元素 行盒在页面中不换行、块盒独占一行

display 默认值为 inline

浏览器默认样式表设置的块盒：容器元素、h1~h6、p

常见的行盒：span、a、img、video、audio

7.1 盒子的组成部分

无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：

  1. 内容 content width、height，设置的是盒子内容的宽高 内容部分通常叫做整个盒子的内容盒 content-box

  2. 填充(内边距) padding 盒子边框到盒子内容的距离 padding-left、padding-right、padding-top、padding-bottom

padding: 简写属性 padding: 上 右 下 左 （顺时针） 填充区+内容区 = 填充盒 padding-box

  1. 边框 border 边框 = 边框样式 + 边框宽度 + 边框颜色 边框样式：border-style (默认为 none) 边框宽度：border-width （默认为 0） 边框颜色：border-color border: 4px dashed red; 边框+填充区+内容区 = 边框盒 border-box

  2. 外边距 margin 边框到其他盒子的距 margin-top、margin-left、margin-right、margin-bottom 速写属性 margin

7.2 盒模型应用

  1. 改变宽高范围 默认情况下，width 和 height 设置的是内容盒宽高

    页面重构师：将 psd 文件（设计稿）制作为静态页面 衡量设计稿尺寸的时候，往往使用的是边框盒，但设置 width 和 height，则设置的是内容盒

  • 精确计算
  • CSS3：box-sizing box-sizing: border-box

  1. 改变背景覆盖范围 默认情况下，背景覆盖边框盒 可以通过 background-clip 进行修改

  2. 溢出处理 overflow，控制内容溢出边框盒后的处理方式 sroll, hidden, auto

  3. 断词规则 word-break，会影响文字在什么位置被截断换行 normal：普通。CJK（中日韩）字符（文字位置截断），非 CJK 字符（单词位置截断） break-all：截断所有。所有字符都在文字处截断 keep-all：保持所有。所有文字都在单词之间截断

  4. 空白处理 white-space: nowrap 不换行

    <!-- 显示不完来显示三个点，只能控制显示单行文本 -->
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

white-space: pre 不会折叠

8. 行盒的盒模型

常见的行盒：包含具体内容的元素 span、strong、em、i、img、video、audio

8.1 行盒的显著特点

  1. 盒子沿着内容延伸

  2. 行盒不能设置宽、高 调整行盒的宽、高，应该使用字体大小、行高、字体类型，间接调整内容大小。

  3. 内边距（填充区） 水平方向有效，垂直方向不会实际占据空间（不会挤走别的文字）。

  4. 边框 水平方向有效，垂直方向不会实际占据空间。

  5. 外边距 水平方向有效，垂直方向不会实际占据空间。

8.2 行块盒

display：inline-block 的盒子

  1. 不独占一行
  2. 盒模型中所有尺寸都有效

8.3 空白折叠

空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间

8.4 可替换元素 和 非可替换元素

大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素 少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素 可替换元素：img、video、audio 绝大部分可替换元素均为行盒。 可替换元素类似于行块盒，盒模型中所有尺寸都有效。 object-fit: contain/cover/fill

9. 视觉格式化模型：常规流、浮动和定位

盒模型：规定单个盒子的规则 视觉格式化模型（布局规则）：页面中的多个盒子排列规则 视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

  1. 常规流
  2. 浮动
  3. 定位

9.1 常规流布局

常规流布局，或者叫做常规流、文档流、普通文档流、常规文档流。 所有元素，默认情况下，都属于常规流布局。 总体规则：块盒独占一行，行盒水平依次排列 包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。 绝大部分情况下：盒子的包含块，为其父元素的内容盒

9.1.1 块盒

  1. 每个块盒的总宽度，必须刚好等于包含块的宽度 宽度的默认值是 auto margin 的取值也可以是 auto，默认值 0 auto：将剩余空间吸收掉 width 吸收能力强于 margin 吸收：因为每个块盒的总宽度必须刚好等于包含块的宽度，假如我们的块盒大小远小于包含块，剩余空间需要被“吸收”。 若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被 margin-right 全部吸收。

在常规流中，块盒在其包含块中居中，可以定宽、然后左右 margin 设置为 auto。

  1. 每个块盒垂直方向上的 auto 值 height:auto， 适应内容的高度 margin:auto， 表示 0

  2. 百分比取值 padding、宽、margin 可以取值为百分比 以上的所有百分比相对于包含块的宽度（margin-top 也要按宽度来）。 高度的百分比： 1）包含块的高度是否取决于子元素的高度，设置百分比无效 2）包含块的高度不取决于子元素的高度，百分比相对于父元素高度 父元素有高度，子元素百分比才有效

  3. 上下外边距的合并（margin 塌陷） 两个常规流块盒，上下外边距相邻，会进行合并。 两个外边距取最大值。

9.2 常规流练习

  1. 公司的重置样式 reset.css link 导入(先重置，再导入我们的 css)
  2. 给 reset.css 加一个 a 样式
  3. 1713/1902 = 90%，不设置 body 的宽高，直接设置 article 宽度的百分比。
  4. margin: 0 auto;块盒居中
  5. 所有文字行高都为 2 - 行高代码写在 body 里
  6. link div 的 margin-bottom 和

9.2 浮动

9.2.1 应用场景

  1. 文字环绕
  2. 横向排列

9.2.2 浮动的基本特点

修改 CSS 的 float`属性值为：

  • left：左浮动，元素靠上靠左
  • right：右浮动，元素靠上靠右 默认值为 none
  1. 当一个元素浮动后，元素必定为块盒(更改 display 属性为 block)
  2. 浮动元素的包含块，和常规流一样，为父元素的内容盒

9.2.3 盒子尺寸

  1. 宽度为 auto 时，适应内容宽度（无内容且不设置宽度就为 0）
  2. 高度为 auto 时，与常规流一致，适应内容的高度
  3. margin 为 auto，相当于为 0.
  4. 边框、内边距、百分比设置与常规流一样，相对于包含块，父元素的内容盒

9.2.4 盒子排列

  1. 左浮动的盒子靠上靠左排列
  2. 右浮动的盒子靠上靠右排列
  3. 浮动盒子在包含块中排列时，会避开常规流块盒
  4. 常规流块盒在排列时，无视浮动盒子
  5. 行盒在排列时，会避开浮动盒子
  6. 外边距合并不会发生

    如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。

9.2.5 高度坍塌

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子（浮动盒子脱离了常规流） 清除浮动，涉及 css 属性：clear

  • 默认值：none
  • left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
  • right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
  • both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方 解决方法：写一个空元素/.clearfix::after

9.2.6 浮动的练习

  1. 激活后 hover 不变 需要写.mian .nav a.active
  2. 给浮动元素的子、父元素加上.clearfix::after来避免所有的高度坍塌
  3. ......

9.3 定位

手动控制元素在包含块中的精确位置 涉及的 CSS 属性：position

9.3.1 position 属性

  • 默认值：static，静态定位（不定位）
  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位 一个元素，只要 position 的取值不是 static，认为该元素是一个定位元素。 定位元素会脱离文档流（相对定位除外）

一个脱离了文档流的元素：

  1. 文档流中的元素摆放时，会忽略脱离了文档流的元素
  2. 文档流中元素计算自动高度时，会忽略脱离了文档流的元素

9.3.2 相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。 可以通过四个 CSS 属性对设置其位置：(离原来上下左右位置的偏移量)

  • left
  • right
  • top
  • bottom 盒子的偏移不会对其他盒子造成任何影响。

9.3.3 绝对定位

  1. 宽高为 auto，适应内容
  2. 包含块变化：找祖先中第一个定位元素，该元素的填充盒（padding-box）为其包含块（content-box）。若找不到，则它的包含块为整个网页（初始化包含块） left：元素左边离包含块左边的距离

9.3.4 固定定位

包含块不同：固定为视口（浏览器的可视窗口） 其他情况和绝对定位完全一样。

9.3.5 定位下的居中

某个方向居中：

  1. 定宽（高）
  2. 将左右（上下）距离设置为 0
  3. 将左右（上下）margin 设置为 auto

绝对定位和固定定位中，margin 为 auto 时，会自动吸收剩余空间

9.3.6 多个定位元素重叠时

堆叠上下文 设置 z-index，通常情况下，该值越大，越靠近用户 只有定位元素设置 z-index 有效 z-index 可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖

9.3.7 补充

  • 绝对定位、固定定位元素一定是块盒（相对定位不会改变之前的状态inline/block）
  • 绝对定位、固定定位元素一定不是浮动
  • 没有外边距合并

9.3.8 定位的练习

二级菜单
  1. 边框不改变盒子的尺寸：box-sizing: border-box;
  2. 设置行高后，hover 加边框会将文字挤下去，需要在 hover 里同时修改行高为减去边框大小
  3. display: none;隐藏一个盒子
弹出层
  1. 希望包含块是视口，选固定定位。
轮播图

box-sizing:border-box会导致其他高度改变，可以用outline: 1px solid...将边框直接加在外面

10. 美化表单元素

10.1 新的伪类

  1. focus 元素聚焦时的样式

  2. checked 单选或多选框被选中的样式 input:checked+label实现选中文字样式改变

10.2 常见用法

  1. 重置表单元素样式
  2. 设置 textarea 是否允许调整尺寸

css 属性 resize：

  • both：默认值，两个方向都可以调整尺寸
  • none：不能调整尺寸
  • horizontal: 水平方向可以调整尺寸
  • vertical：垂直方向可以调整尺寸
  1. 文本框边缘到内容的距离 /* 方式1：padding 左边始终会有空隙*/ input { padding:0 10px; } /* 方式2：text-indent 首行缩进 文本超过文本框长度后就会填满空隙 */ input, textarea { text-indent: 1em; }
  2. 控制单选和多选的样式 自己做单选框多选框**重点
最近更新
贡献者: RowanWang6