重温前端--CSS | 青训营笔记 | Day02

b1t_n
197 阅读7分钟

CSS3

层叠样式表，网页实际是一个多层结构，通过css为网页每层元素设置样式。

一、使用CSS

🍕内联样式

<p style="color: red;">...</p>

只能对一个标签生效，不利于网页维护，开发时不推荐使用。

🍔内部样式表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            color: aqua;
        }
    </style>
</head>

<body>
    <p>...</p>
</body>

</html>

只在当前页面生效，不能跨页面复用

🍟外部样式表

<link rel="stylesheet" href="">

通过link标签引入.css文件，可复用。

二、CSS语法

🌭CSS注释

/*

....................

....................

....................

*/

🍿常用选择器

  • 元素选择器

语法：标签名{}

  • ID 选择器

语法：# + &ID{}

  • 类 选择器

语法：.&class{}

  • 通配选择器

语法：*{}

🧂复合选择器

  • 交集选择器

语法：选择器1 + 选择器2 + ... + 选择器n{}

若有元素选择器，则以其开头

  • 并集选择器

语法：选择器1 , 选择器2 , ... , 选择器n{}

🥓关系选择器

  • 子元素选择器

语法：父元素 > 子元素{}

  • 后代元素选择器

语法：祖先 后代{}

  • 兄弟元素选择器
    • 选择下一个兄弟（紧凑）

    语法：兄弟 + 兄弟

    • 选择所有兄弟

    语法：兄弟 ~ 兄弟

🥚属性选择器

  • 有指定属性

语法：标签 [属性]{}

  • 指定属性（值）

语法：标签 [属性=值]{}

  • 指定属性值开头

语法：标签 [属性^=值]{}

  • 指定属性值结尾

语法：标签 [属性$=值]{}

  • 含有指定属性值

语法：标签 [属性* = 值]{}

🍳伪类选择器

  • :first-child{} ---- 第一个子元素
  • :last-child{} ---- 最后一个子元素
  • :nth-child(n){}
    • n = n ---- 第n个子元素
    • n = 2n || even ---- 偶数位元素
    • n = 2n+1 || odd ---- 奇数位元素
  • :first-of-type{} ---- 第一个同类型子元素
  • :last-of-type{} ---- 最后一个同类型子元素
  • :nth-of-type(){}
    • 同上
  • :not(){} 去除条件

a元素的伪类

  • a:link{} ---- 没访问过的超链接
  • a:visited{} ---- 访问过的链接（由于保护隐私，只能修改颜色）
  • a:hover{} ---- 鼠标移入状态
  • a:active{} ---- 鼠标单击状态

🧇伪元素选择器

  • ::frist-letter{} ---- 元素的第一个字母
  • ::first-line{} ---- 元素的第一行
  • ::selection{} ---- 元素被选中内容
  • ::before{} ---- 元素的开始
  • ::after{} ---- 元素的结束

注：before 和 after 需要结合content属性使用

三、继承

某些属性会自动继承祖先元素的计算值，除非显式指定一个值

背景、布局相关等不可继承，文字相关的属性（font-size, color）可继承

显示继承

待补充......

四、选择器优先级

!important > 内联样式 > ID选择器 > 类、伪类选择器 > 元素选择器 > 通配选择器 > 继承

🥞选择器特异度

比较优先级时，向所有的选择器相加比较。

分组选择器单独计算，累加不会超过其数量级

如果优先级特异度相同，则优先使用靠下的样式

五、单位

  • 长度单位
    • px：像素
    • em：1 em = 1 font-size
    • rem（root-em）：1 rem = 1 font-size（html元素的）
    • 百分比%：将属性设置为父元素属性的百分比
  • 颜色单位
    • 颜色名
    • RGB（0 - 255 || 0% - 100%）
    • RGBA（A：不透明度）
    • #00ff00（16进制表示）
    • HSL(A)
      • H 色相（0 - 360）
      • S 饱和度（0% - 100%）
      • L 亮度（0% - 100%）

六、 布局

🧈文档流（normal flow）

网页是一个多层的结构，通过CSS为每一层设置样式，用户只看到最顶层，最底层称为文档流。元素通常有两个状态：

  • 在文档流中
  • 脱离文档流

元素在文档流中的特点：

  • 块元素
    • 独占一行
    • 默认宽度由父元素决定
    • 默认高度由子元素决定
  • 行内元素
    • 自左向右水平排列，只占自身大小
    • 宽度和高度由内容决定

🍞盒模型（box model）

44e7421cd3434606fe323c0e4165eba1.jpeg

.box1{
            /*
                内容区（content）
                    width：内容区宽度
                    height：内容区高度
            */
            /*
                边框（border）
                    border-width：边框宽度
                        四个值：上 右 下 左
                        三个值：上 左右 下
                        两个值：上下 左右
                    border-color：边框颜色
                    border-style：边框样式
                        default：none
                        solid：实线
                        dasher：虚线
                        double：双线
                        dotted：点状虚线
                简写：border：10px，color，solid;
                简写：border-top：......
            */
            /*
                内边距（padding）
                内边距的设置会影响box大小
                背景颜色会延伸至内边距
            */
            /*
                外边距（margin）
                不会影响可见框的大小
                设置左、上外边距移动自身
                设置右、下外边距移动其他

            */
        }

🥐过度约束（水平布局）

当一个元素在其父元素中，若水平布局不满足以下等式，则称为过度约束，浏览器会自动调整某些值,使等式成立。

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = width

  • 当左边7个值无 auto 时，则浏览器自动调整 margin-right

7个值中有三个可设置为 auto：

  • width
  • margin-right
  • margin-left

若某个值为 auto ，则调整该值

若 width 和 1个 margin 为 auto ，则调整 width 最大，margin 为 0

若3个值均为 auto ，则调整 margin 为 0，width 最大

若2个 margin 为 auto ，则固定 width，平均调整 margin

子元素水平居中

width:...px;
margin:0 auto;

🥗垂直布局

垂直外边距的重叠

相邻的垂直方向外边距会发生重叠现象。

  • 兄弟元素间取绝对值最大值；若一正一负，取和
  • 父子元素相邻外边距，子元素会传递给父元素

🍚行内元素盒模型

  • 行内元素不支持设置高度、宽度
  • 行内元素可以设置padding、border和margin，但不会影响垂直方向的布局
  • display属性：inline -- 行内元素 || block -- 块元素 || inline-block -- 行内块元素 （可以设置宽度、高度，不会独占一行）|| table -- 表格 || none -- 不显示（不占据位置）
  • visibility属性：visible -- 默认值，正常显示 || hidden -- 不显示（占据位置）

🍩默认样式

通常情况，浏览器为元素设置了默认样式，一般设置在 body , p , ul 标签中。

一般引入重置样式表，reset.css。

🍭Box-Sizing

该属性用来设置盒子尺寸的计算方式

  • content-box：默认值，高宽设置content大小
  • border-box：高宽设置可见框大小

🧃轮廓和圆角

  • 用 outline 属性代替 border ，不会影响可见框大小
  • box-shadow（阴影效果）：水平偏移量 + 垂直偏移量 + 模糊半径 + color（0，0，0，.3）
  • border-radius（圆角）：水平半径 + 垂直半径

🍥浮动属性（float）

float: left || right; default：none

通过浮动使一个元素向其父元素左（右）侧移动，默认不会超出父元素，不会覆盖其他浮动元素，高度不会超过上边的浮动兄弟元素。

浮动元素不会覆盖文字，可用来设置文字环绕。

注：设置浮动以后，会完全从文档流中脱离。水平布局的等式便不需要强制成立。

脱离文档流的特点：

  • 块元素：
    • 不在独占一行
    • 宽度和高度由内容决定
  • 行内元素：
    • 特点和块元素一样

🧆 定位（position）

  • static：默认值，元素静止，不开启定位
  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位
  • sticky：粘滞定位

相对定位

相对定位参照元素在文档流中的位置进行定位。

相对定位提高元素的层级，会覆盖文档流中的元素，但不会脱离文档流，不会改变元素的性质。

  • offset（偏移量）：top、bottom、left、right

绝对定位

绝对定位会使元素脱离文档流，改变元素性质，行内变成快，提高层级，高宽由内容决定。

绝对定位元素相对于其包含块定位，正常情况下，包含块是当前元素最近的、开启了定位的祖先块元素，若没有，则追溯到根元素。

left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块.width

当发生过度约束时，无 auto 时，自动调整 right。

垂直方向也应满足等式！

  • z-index：设置元素层级，整数越大，层级越高；若同级，则优先显示html中靠下的元素；祖先元素层级再高也不会盖住后代元素。

固定定位

固定定位也是一种绝对定位，参照与浏览器视口进行定位，不会随网页的滚动而移动。

粘滞定位

当元素到达某个位置时，固定该元素位置。兼容行不好。

🧃字体

  • color：颜色
  • font-size：大小
  • font-family：字体族

🍗背景（background）

  • background-color
  • background-image: url(“./xxx.png”)
  • background-repeat
    • repeat默认值
    • repeat-x 沿X轴重复
    • repeat-y
    • no-repeat
  • background-position 设置背景图片位置
    • top、left、right、bottom、center
    • 需要同时指定两个值，若只写一个，则默认center
    • 也可通过偏移量（水平、垂直）
  • background-clip 设置背景范围
    • border-box：默认值，边框下有背景
    • padding-box：边框下无背景
    • content-box：内容区有背景
  • background-origin 图片偏移远点
    • 可选值与上一属性相同
  • background-size 设置背景图片尺寸

    • 宽、高

avatar
文章
阅读
粉丝