前端css学习笔记

程序猿不秃

已于 2022-05-10 20:11:48 修改

阅读量341

点赞数 1

分类专栏：前端css 学习笔记文章标签：前端 css css3

于 2022-03-23 20:36:36 首次发布

本文链接：https://blog.csdn.net/weixin_45909074/article/details/123695233

版权

学习笔记同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端css

1 篇文章 0 订阅

订阅专栏

前端CSS学习笔记

尚硅谷HTML5+css3视频中css3部分学习笔记

前言

HTML、css、js分别在网页形成过程中负责不同的板块。HTML控制网页的结构，css控制网页的表现，js控制网页的行为。该笔记主要针对于其中的css，css又名层叠样式表，网页实际上是一个多层的结构，通过css可以分别为网页的每一层设置样式，但我们看见的始终是网页的最上层。

css编写位置

内联样式（行内样式）

编写在元素的style属性中，该样式编写一次只能应用于一个指定元素。

内部样式

编写在head标签内的style属性中，该样式编写一次可应用于同一页面中拥有共同特征的元素。

外部样式

编写在外部的css文件中，在HTML文件中通过link标签引用，该样式编写一次可应用于不同页面同一特征的元素。

css基本语法

内部样式、外部样式语法规范

    选择器 {                /*{}为一个声明块*/
        样式名：样式值;     /* 每一组名值对都是一个声明 */
        ......
    }

内联样式语法规范

style="样式名:样式值;....."

选择器

功能

选择页面中具有某一特征的所有元素。

选择器的权重

样式冲突

我们通过不同选择器，选中相同的元素，并且为相同的样式设置不同值时，就发生了样式冲突，此时我们需要根据选择器的权重来判断该元素所应用的样式。

权重排序（高位较大的优先级高）

内联样式：1,0,0,0
id选择器: 0,1,0,0
类和伪类选择器： 0,0,1,0
元素选择器：0,0,0,1
通配选择器： 0,0,0,0
继承的样式：无优先级

注：比较时，需要将所有选择器的优先级相加计算，若优先级相同，则应用位置较后的那个，并集选择器需要分别计算。

分类

基础选择器

元素选择器：通过标签名来选中指定元素

    标签名 {
    }

类选择器：通过类名来选中指定元素

    .类名 {
    }

id选择器：通过id值来选中指定元素

    #id值 {
    }

通配选择器：选中所有元素

    * {
    }

复合选择器

交集选择器：选中同时符合多个条件的元素

    选择器1选择器2... {    /*当其中含有元素选择器时，必须用元素选择其开头*/
    }

并集选择器：选中符合并集选择器中任一选择器的所有元素

    选择器1，选择器2，... {    
    }

关系选择器

子元素选择器：选中指定父元素的指定子元素

    选择器1>选择器2 {   
    }

后代元素选择器：选中指定元素的所有后代元素

    选择器1 选择器2... {    
    }

兄弟选择器+：选中指定元素后紧挨的一个指定兄弟元素（中间不能有其他元素）

    选择器1+选择器2... {    
    }

兄弟选择器~：选中指定元素后所有指定兄弟元素（中间可以有其他元素）

    选择器1~选择器2... {    
    }

属性选择器

指定元素中拥有指定属性名的元素

    选择器1[属性]... {    
    }

指定元素中拥有指定属性名以及属性值的元素

    选择器1[属性名=属性值]... {    
    }

指定元素中拥有指定属性名以及属性值以指定值开头的元素

    选择器1[属性名^=指定值]... {    
    }

指定元素中拥有指定属性名以及属性值以指定值结尾的元素

    选择器1[属性名$=指定值]... {    
    }

指定元素中拥有指定属性名以及属性值含有指定值的元素

    选择器1[属性名*=指定值]... {    
    }

伪类选择器

用于描述一个元素的特殊状态

:first-child : 选中同级第一个子元素
:last-child : 选中同级最后一个子元素
:nth-child(value) : 选中第value个子元素
- 当value取数值时，表示选中该数值位的子元素
- 当value取n时，表示选中所有子元素
- 当value取2n|even时，表示选中偶数位的子元素
- 当value取2n+1|odd时，表示选中奇数位的子元素

注：以上三个伪元素根据所有子元素来进行位置计算。

:first-of-type : 功能类似于:first-child
:last-of-type : 功能类似于:last-child
:nth-of-type : 功能类似于:nth-child

注：以上三个伪元素根据同类型子元素来进行位置计算。

:not() : 否定伪类，将符合条件的元素从选择器中去除
:link : 表示未访问过的链接
:visited : 表示访问过的链接，由于隐私的原因，这个伪类中只能修改链接颜色

注：:link，:visited伪类是a标签独有的伪类

:hover : 表示鼠标移入时的状态
:active : 表示鼠标点击时的状态

伪元素选择器

对元素内的一些特殊位置进行样式的修改，起到一个看似被元素包裹的作用

::first-letter : 表示指定元素中的第一个字母
::first-line : 表示指定元素中的第一行
::selection : 表示鼠标选中的内容
::before : 表示指定元素内部起始位置
::after : 表示指定元素内部末尾位置

注：::before和::after内必须设定content，且由这两个伪类添加的内容无法被鼠标选中。

继承

定义

我们为一个元素设置的部分样式会同样应用于它的后代元素中，其发生在祖先后代元素之间。

优点

方便了我们的开发，我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需要设置一次，所有的后代元素都可以应用。

单位

长度单位

绝对单位

像素（px）: 使用该单位的元素属性值不会受其他元素影响。

相对单位

em：使用该单位的元素属性值会相对于最近被设定过字体大小的祖先元素。
rem：使用该单位的元素属性值大小会相对于HTML根元素字体大小。
百分比（%）：其设置规则如下表，参考本篇csdn文章

属性	设置百分比的相对值
width	父元素的width
height	父元素的height
margin	父元素的width
padding	父元素的width
left, top, right, bottom	父元素的width, height, width, height
font-size	继承得到的font-size
line-height	当前字体的font-size
transform(left, top)	自身的left, top

颜色单位

rgb
rgb(红色[0~255|百分比],绿色,蓝色)
#红色[十六进制，相同可只写一个]绿色蓝色
rgba
rgba(红色[0~255|百分比],绿色,蓝色,不透明度[1~0])
hsl
hsl(色相[0~360],饱和度[百分比],亮度[百分比])
hsla
hsla(色相[0~360],饱和度[百分比],亮度[百分比],不透明度[1~0])

文档流

简述

网页是一个多层的结构，用户只能看到最上面的那一层，而最下面的一层称之为文档流，我们所创建的元素默认都是在文档流中进行排列。

元素的两个状态

在文档流中、脱离文档流

元素在文档流中的特点

块元素
- 独占一行（自上向下垂直排列）
- 默认宽度为父元素宽度的100%
- 默认高度被内容撑开
行内元素
- 只占据自身大小，在页面中自左向右水平排列，直到一行不能放下，此时元素会换到下一行继续自左向右排列
- 默认宽度和高度都是被内容撑开

元素不在文档流中的特点（无块元素和行内元素之分）

不再独占页面一行
默认宽度和高度都是被内容撑开
可以设置宽度和高度

盒模型

简述

css将页面中的所有元素都设置为了一个矩形盒子，所以如果想要对页面进行布局也就是将不同的盒子摆放到不同的位置。

盒子的构成

内容区：子元素或是文字信息等，对盒子使用width和height属性设置的是内容区的宽高
内边距（padding）：控制内容区与盒子边框的距离
边框（border）：盒子的边，可以设置它的宽度、颜色、样式
外边距（margin）：控制盒子边框与外部的距离，默认情况下，左上外边距会移动盒子自身，右下外边距会移动相邻的其他盒子。

注意：

color属性设置了一个元素的前景色，即可以同时设置盒子内文本和边框的颜色。其中边框颜色可以被border-color给覆盖；
background-color属性设置盒子背景色时，是同时给盒子的内容区+内边距设置背景颜色；
盒子的可见框大小为：内容区+内边距+边框

水平布局(块元素)

计算等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 父元素内容区宽度

过渡约束

相加结果使等式不成立时产生，此时等式会自动调整，规则如下：

若无auto属性值(width, margin-left, margin-right属性可设)，则浏览器会将缺少或超出的宽度以正数和负数的形式赋给margin-right属性以使等式成立；
若有一个值为auto，则浏览器会调整该auto对应属性以使等式成立；
若有多个值为auto，当其中含有width时，以width为主，忽略其他属性；若无width，即，margin-left和margin-right设置为auto时，这两个属性平分缺少或超出的宽度以使等式成立。

溢出

可用overflow属性对溢出部分进行显示（默认）、隐藏、滚动。

垂直布局(块元素)

无计算等式，父元素内容区高度被子元素或文字撑开，同样有溢出问题。

垂直外边距的折叠

兄弟元素

两者皆取正值或负值时，其相邻垂直外边距会取两者绝对值之间的较大值；
一正一负时，取两者之和

注：对开发有利，所以大部分时间我们不需要对它进行处理。

父子元素

当子元素内容区的上部与父元素内容区的上部重叠时，子元素的上外边距会传递给父元素

解决方式

对父元素使用padding-top
对父元素设置边框

上述两种方式会影响页面布局不推荐使用

设置父元素的before伪类，并将其display属性设置为table

注：会影响到页面的布局，所以大部分时间我们需要对它进行处理。

行内元素布局

行内元素不支持设置width和height；
行内元素可以设置padding，border，margin，但其不会影响垂直方向上的布局，即不会改变垂直方向上自身或者其他元素的位置。

display 和 visibility

`display`属性：用于设置元素的显示类型

inline：将元素设置为行内元素；
block：将元素设置为块元素；
inline-block：将元素设置为行内块元素，既可以设置width和height又不会独占一行；
table：将元素设置为一个表格；
none：隐藏元素，该隐藏的元素不在文档流中占位，浏览器也不会解析该元素。

`visibility`属性

hidden：视觉上隐藏元素，仍在文档中占位，且浏览器会解析该元素。
visible：默认值，元素在页面中正常显示。

注意：display和visibility对显示和隐藏元素的区别。

默认样式

浏览器通常对不同元素有一个默认样式，但这个默认样式一般会影响我们的布局，所以我们可以在网络中下载重置样式表来对浏览器的默认样式进行覆盖。

补充属性

box-sizing属性：用于设置width属性和height属性控制的区域。
- content-box：默认值，width属性和height属性设置内容区的大小；
- border-box：width属性和height属性设置盒子可见框的大小。
box-shadow属性：用于设置元素的阴影效果，不会影响页面布局。默认与元素大小相同，且位居于元素下方，被元素所覆盖。
- 第一个值水平偏移量设置阴影的水平位置正值向右移动；
- 第二个值垂直偏移量设置阴影的垂直位置正值向下移动；
- 第三个值阴影的模糊半径；
- 第四个值阴影的颜色。
out-line属性：用来设置元素的轮廓线，用法同border一样，但其不会影响页面布局，即其不属于盒子构成。

浮动–float

特点

浮动元素会脱离文档流，不再占据文档流中的位置
浮动元素默认不会从父元素中移出
浮动元素的位置不会超过它前边的其他浮动元素或在文档流中的元素
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围

用途

完成图片包围文字的效果
实现页面的水平布局

高度塌陷问题

当子元素浮动后，其会脱离文档流，无法撑起父元素的高度，使父元素的高度丢失，父元素下面的元素自动上移，导致页面布局混乱。

解决方式一：BFC（块级格式化环境）

BFC是一个css的一个隐含属性，可以为一个元素开启BFC，使该元素变成一个独立的布局区域。

元素开启BFC后的特点

不会被浮动元素覆盖
其上外边距不会和子元素上外边距重叠
可以包含浮动的子元素

元素开启BFC的方式

设置元素浮动
将元素设置为行内块元素
将元素的overflow设置为一个非visible的值，通常使用hidden或auto

解决方式二：clear属性

通过为元素设置外边距的方式，清除浮动元素对当前元素所产生的影响，即当前元素位置变为指定元素没有浮动时的位置。

属性值

left：清除左侧浮动元素对当前元素的影响；
right：清除右侧浮动元素对当前元素的影响；
both：清除两侧中需要设置外边距更大的那一侧；

解决方式

在父元素的末尾中添加一个元素，给其清除浮动，就可以让父元素包裹住其中的浮动元素。由于高度塌陷是表示上的问题，而非结构上的问题，所以我们更倾向于使用after伪类去实现而不是在HTML中增加元素去实现。增加伪类时需注意伪类默认为行内元素，无法在垂直方向上撑开父元素，所以要将其变为块元素后再使用clear属性去清除浮动。

clearfix类解决外边距重叠和高度塌陷问题

    clearfix::after,clearfix::before {
        content: '';
        display: table;    /*外边距重叠*/
        clear: both;      /*浮动高度塌陷*/
    }

定位（position）

通过定位可以将元素摆放到任意的位置上去

偏移量

当元素开启定位后，可以通过设置偏移量来设置元素的位置。

top：定位元素和定位位置上边的距离
bottom：定位元素和定位位置下边的距离
left：定位元素和定位位置左边的距离
right：定位元素和定位位置右边的距离

注意：一般情况下水平方向上left，right设置一个，垂直方向上top和bottom设置一个。

属性值

static：默认值，元素禁止没有开启定位；
relative：开启元素的相对定位；
- 定位位置为元素在文档流中的位置；
- 不设置偏移量时，元素不会发生改变；
- 相对定位会提升该元素所在层级，比浮动元素所在层级更高；
- 相对定位不会使元素脱离文档流；
absolute：开启元素的绝对定位；
- 定位位置为离该元素最近的开启了定位的祖先元素；若无，则定位位置为根元素；
- 不设置偏移量时，元素的位置不会发生改变；
- 绝对定位会使元素脱离文档流；
- 绝对定位会提升该元素所在的层级；
- 水平布局（特有）
  - 等式添加left，right
  - 过渡约束
    - 可设置为auto的属性有：margin-left,margin-right,left,right,width
    - 默认设置auto的属性顺序： width>right>left>margin-right
- 垂直布局（特有）
  - 等式为垂直方向上的9个属性之和等于定位元素的高度；
  - 对应过渡约束和水平布局相似；
fixed：开启元素的固定定位；
- 除定位位置为浏览器的视口外，即该元素不会随网页的滚动条滚动。其余特点和绝对定位相同；
sticky：开启元素的粘滞定位；
- 定位位置为浏览器视口；
- 表现为在跨越特定阈值前为相对定位，之后为固定定位；
- 其他特征与相对定位相同；

元素的层级

定位元素的层级相同，位置较后的元素优先显示；
有定位元素的层级比没有定位元素的层级要高；
在有定位的基础上，可以使用z-index属性来指定元素的层级，值越大层级越高越优先显示，但需注意祖先元素永远不会比后代元素的层级更高。

字体

图标字体

通过@font-face引入，以使用字体的形式来使用图标

图标字体网站推荐

Font Awesome
矢量图标库（注意版权问题）

图标字体使用方式

使用指定类名引入
在伪类中引入
在HTML中使用实体引入

字体的简写

font: font-weight font-style font-size/line-height font-family

font-size和font-family必写，并且顺序不能改变；
font-weight使用时一般不使用数值来对字体进行加粗，因为不能确保电脑中含有该数值的字体。

文本

背景

雪碧图（只适用于背景图）

图片属于外部资源，需要浏览器单独按需加载，可以将多个小图片统一保存到一个大图片中来解决图片闪烁问题，其称为雪碧图。

使用步骤

确定需要使用的图标
测量图标大小
根据测量结果创建一个等大元素
将雪碧图设置为元素的背景图片
设置正确的偏移量来显示指定图片

特点

一次性将多个图片加载进页面，降低请求次数，加快访问速度，提升用户的体验。

渐变

实现从一个颜色向其他颜色过渡的效果，注意渐变是图片，需要通过background-img属性来设置。

属性值

linear-gradient(渐变方向, 颜色1 起始位置, 颜色2 起始位置, ...)：颜色沿一条直线变化
- 渐变方向取值可为to left, to right, to bottom , to top, to left top等、xxxdeg（deg表示度数，0deg效果与to top相同）、xxxturn(turn表示圈，1turn为1圈)
- 可指定多个颜色，以及它们的渐变分布情况；
repeating-linear-gradient()：与linear-gradient相似，但可以平铺。
radial-gradient(大小 at 位置or偏移量，颜色1 起始位置, 颜色2 起始位置,...)：径向渐变（放射性效果）
repeating-radial-gradient()：与radial-gradient相似，但可平铺。

表格

示例

    <!-- 创建一个表格 -->
    <table>
        <!-- 创建表格头部 -->
        <thead>
            <!-- 创建表格中的一行 -->
            <tr>
                <!-- 定义表头单元格 -->
                <th>学号</th>
                <th>姓名</th>
                <th>绩点</th>
            </tr>
        </thead>
        <!-- 创建表格体(若直接将tr标签写在table内，浏览器会默认将它用tbody标签包裹) -->
        <tbody>
            <tr>
                <td>001</td>
                <td>小明</td>
                <td>99</td>
            </tr>
            <tr>
                <td>002</td>
                <td>小月</td>
                <td>99</td>
            </tr>
            <tr>
                <td>003</td>
                <td>小确</td>
                <td>99</td>
            </tr>
        </tbody>
        <!-- 创建表格尾 -->
        <tfoot>
            <tr>
                <!-- colspan:横向合并指定数量单元格 -->
                <!-- rowspan:纵向合并指定数量单元格 -->
                <td colspan="2">总人数</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>

注意

表格仅用于表示一些表格类信息，不用于布局。

表单

用于提交数据。

示例

    <!-- 声明一个表单, action决定表单提交的服务器地址 -->
    <form action="test.html">
        <!-- input标签：用于搜集用户的信息 -->
        <!-- 若想要该信息能够提交到服务器中，需要给其设置name属性 -->
        <!-- 文本框 -->
        文本框 <input type="text" name="text">
        <!-- 密码框 -->
        密码框 <input type="password" name="password">
        <!-- 单选按钮and多选按钮 -->
        <!-- 同一组单选或多选按钮的name属性值相同，但需设置value属性来分辨选中的内容 -->
        <!-- checked可以设置默认选中 -->
        一号单选 <input type="radio" name="radio" value="one" checked>
        二号单选 <input type="radio" name="radio" value="two">
        <!-- 多选按钮 -->
        一号多选 <input type="checkbox" name="checkbox" value="one">
        二号多选 <input type="checkbox" name="checkbox" value="two" checked>
        <!-- 下拉列表 -->
        <!-- selected可以设置默认选中 -->
        <select name="select">
            <option value="one">选项一</option>
            <option value="two" selected>选项二</option>
            <option value="three">选项三</option>
        </select>
        <!-- 提交按钮 -->
        提交 <input type="submit">
    </form>

表单相关元素可设属性

autocomplete属性：指定元素是否应打开自动完成功能（浏览器根据用户之前的输入值自动填写值）;
autofocus属性：自动获取焦点;
readonly属性：只读，可以提交;
disable属性：禁用，不可用。

过渡（transition）

元素从一种样式转换为另一种样式时为元素添加效果，需注意过渡时必须是从一个有效数值向另一个有效数值进行过渡，auto不是有效数值。

动画（animation）

与过渡类似，都可以实现一些动态效果。但过渡需要交互触发，动画不需要触发，且过渡只有开始、结束，动画可以设置多个关键帧；

关键帧

    @keyframes name {
      /* 动画的开始位置，也可以使用0% */
      from {
        样式：样式值；
        ....
      }
      /* 动画的结束位置，也可以使用100% */
      to {
        样式：样式值；
      }
    }