前端笔记_css

二锤子

已于 2022-02-14 10:00:22 修改

阅读量436

点赞数

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

于 2021-12-15 10:29:55 首次发布

本文链接：https://blog.csdn.net/weixin_42125762/article/details/121946744

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

为网页添加样式
- 术语解释
- - 选择器：选中元素
  - 声明块
- CSS代码书写的位置
常见样式声明
选择器
- 简单选择器
- 选择器的组合
- 选择器的并列
层叠
- - - （用处：二次开发时不要去修改别人的代码，利用权重计算来覆盖掉之前的样式）
- 1.比较重要性
- 2.比较特殊性
- 3.比较源次序
继承
属性值的计算过程
- - - - 渲染每个元素的前提条件：该元素的所有css属性必须有值
- 计算过程（从无属性值到每个属性都有值）
盒模型
- - - - 盒子类型
- 盒子的组成部分
盒模型应用
- 改变宽高范围
- 改变背景覆盖范围
- 溢出处理
- 断词规则
- 空白处理
行盒的盒模型
- 显著特点
- 行块盒
- 空白折叠
- 可替换元素和非可替换元素
常规流
- 常规流布局
- - - - 绝大部分情况下，盒子的包含块，为其父元素的内容盒。
常规流练习
浮动
- 应用场景
- 浮动的基本特点
- 盒子尺寸
- 盒子排列
- 高度坍塌
浮动练习
定位
- position属性
- 相对定位
- 绝对定位
- 固定定位
- 定位下的居中
- 多个定位元素重叠时
- 补充
- position属性
- 相对定位
- 绝对定位
- 固定定位
- 定位下的居中
- 多个定位元素重叠时
- 补充

为网页添加样式

术语解释

h1 {
    color: #fff;
    background-color: brown;
    text-align: center;
}

css规则 = 选择器 + 声明块

选择器：选中元素

基本写法

id选择器（选中的是对应id值得元素）
用法：# + id值

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one {
            color: brown;
        }
    </style>
</head>

<body>
    <div id="one">hello world</div>
</body>

</html>

元素选择器
直接写元素名称
类选择器（常用）
用法：. + 属性值
一个元素可以有多个类

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .two {
            color: brown;
        }
    </style>
</head>

<body>
    <div class="two">hello world</div>
</body>

</html>

声明块

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

CSS代码书写的位置

内部样式表(200行以内，使用可以提高浏览器响应速度)
书写在style中，style一般放在head里面。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .two {
            color: brown;
        }
    </style>
</head>

内联样式表（元素样式表）
直接书写在元素的style中
以前叫做行内样式。

<div style="color: brown; background-color: cornsilk;">hello world</div>

外部样式表
将样式书写在独立的css文件中
用法：

 <link rel="stylesheet" href="/css/index.css">

1.外部样式可以解决多页面样式重复的问题

2.有利于浏览器缓存，从而提高页面响应速度

3.有利于代码分离（HTML和CSS）代码分开更容易阅读和维护

常见样式声明

color
预设值：定义好的单词列如：red
三原色、色值：常用列如：hex表示法（#ff4400）rgb表示法（rgb（225,225,225））
background-color
元素背景色
font-size
元素内部文字尺寸的大小
1】px：绝对单位，文字的高度占用多少像素。
2】em：相对单位，相对于父元素的字体大小。
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，若没有父元素（html），则使用浏览器的基准字号。
user agent,简称UA，用户代理（浏览器）
font-weight
文字的粗细程度。可以取值数字，可以取值预设值。
font-family
文字类型
必须在用户计算机中存在的字体才有效，（使用多个字体，以匹配不同的环境）
写法：

<style>
        .two {
            font-family: 微软雅黑, 宋体, 思源黑体,sans-serif;
        }
    </style>

sans-serif:表示非衬线字体。
6. font-style
表示设置字体样式，一般用来设置字体倾斜。
i元素：表示特殊的内容
strong：表示重要的，不能忽略的内容
em：表示强调的内容
7. text-decoration
文本修饰，给文本加线
del：表示错误的内容
s：过期的内容
8. text-indent
首行文本缩进
9. line-height
每行文本的高度，该值越大，每行文本的距离越大。
设置行高为容器的高度，可以让单行文本垂直居中
行高可以设置为纯数字，表示相对于当前元素的字体大小

 <style>
    line-height:1.5;
 </style>

width
宽度
height
高度
letter-space
文字间隙
text-align
表示元素内部的文字的水平排列方式

选择器

选择器：帮助你精准度的选中你想要的元素

简单选择器

ID选择器
书写：# + id值
元素选择器
书写：元素名例如：h1
类选择器
书写：. + 类名
通配符选择器
书写：* 表示选中所有元素
属性选择器
根据属性名和属性值选中元素
书写：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中所有该属性的元素 */
        /* [href] {
            color: aquamarine;
        } */
        /* 选中带有该属性值得元素 */
        
        [href="www.a.com"] {
            color: brown;
        }
        /* 选中该属性值得元素标准写法，表示以a.com结尾的元素 */
        
        [href$="a.com"] {
            color: chartreuse;
        }
        /*选中带有b值的元素，并且b以逗号隔开 */
        
        [href~="b"] {
            font-weight: 100;
        }
        /* 选中带有包含b值得元素，没有逗号隔开 */
        
        [href*="b"] {
            font-size: 2em;
        }
    </style>
</head>

<body>
    <a href="www.a.com">a</a>
    <a class="abc" href="www.b.com">b</a>
    <a class="a,b,c" href="www.c.com">c</a>
</body>

</html>
不定可以百度 属性选择器mdn

伪类选择器
选中某些元素的某种状态

1）link：超链接未访问时的状态
2）visited：超链接访问过后的状态
3）hover：鼠标悬停状态
4）active：鼠标按下状态

书写：

<li>
    <span>4</span>
   <a href="#">巨型一号丝瓜水320ML</a>
</li>

<style>
     li:hover a{
            color:#E9185A;
            text-decoration:underline;
        }
        li:hover span{
            background-color:#E9185A;
        }    
</style>

爱恨法则： love hate

伪元素选择器
表示选中一个元素的第一个子元素或最后一个子元素
before
after
书写：

 <style>
        span::before {
            content: " 弟弟真帅";
            color: darkslateblue;
        }
        
        span::after {
            content: "是的呀";
            color: darkslateblue;
        }
    </style>

选择器的组合

并且,中间不加空格 p.one
书写：

html:
<p class="one">lorem</p>

css:
p.one{
    color:#f42;
}

后代元素___空格
书写：祖先元素div + 空格 + 后代元素p

div p{
    color：red;
}

子元素 >
书写：父级元素div + > + 子元素p

div>p {
    color: red;
}

相邻兄弟元素 +
书写：

html:
<div>
    <div>loerm</div>
    <span>loremm</span>
</div>

css:
    div+span{
        color: red;
    }

后面出现的所有兄弟元素 ~
书写：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>ul>li.one~li {
            color: #008c8c;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>Lorem.</li>
            <li class="one">Possimus?</li>
            <li>Beatae?</li>
            <li>Quam.</li>
            <li>Laudantium?</li>
        </ul>
    </div>
</body>

</html>

选择器的并列

多个选择器用逗号隔开
书写：

div,
.one,
p {
    color: red;
}

层叠

（用处：二次开发时不要去修改别人的代码，利用权重计算来覆盖掉之前的样式）

声明冲突：同一个样式多次应用到了同一个元素。

层叠：解决声明冲突的过程（权重计算）

1.比较重要性

重要性从高到低：

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

1）作者样式表中的!important样式

2）作者样式表中的普通样式

3）浏览器默认样式表中的样式

2.比较特殊性

看选择器

总体规则：选择器选中的范围越窄越特殊

具体规则：通过选择器，计算出一个四位数（xxxx）个十百千

1）千位：如果是内联样式，记1，否则是0.

2）百位：等于选择器中所有id选择器的数量

3）十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量

4）个位：等于选择器中所有的元素选择器、伪元素选择器的数量

3.比较源次序

代码书写靠后的胜出

##应用
1.重置样式表：书写一些作者样式表来覆盖浏览器的默认样式
常见的重置样式表：normalize.css，reset.css，meyer.css

2.爱恨法则
link > visited > hover > active

继承

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

属性值的计算过程

一个元素一个元素依次渲染，顺序按照按照页面文档的树形目录结构进行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HMIozVwt-1639535356832)(img/1.png)]

渲染每个元素的前提条件：该元素的所有css属性必须有值

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

计算过程（从无属性值到每个属性都有值）

确定声明值

1）参考样式表中没有冲突的声明，作为css属性值。
层叠冲突

1）对样式表中有冲突的声明使用层叠规则，确定css属性值。

层叠规则：
· 比较重要性
· 比较特殊性
· 比较源次序
使用继承

1）对仍然没有值得属性，若可以继承，则继承父元素的值。
使用默认值

1）对仍然没有值得属性，使用默认值。

<div>
    <a href="www.baidu.com"> baidu </a>
</div>

<style>
    div {
        color: blue;
    }
</style>
/* 这时候a不继承父元素的颜色值 */

reset.css

a {
    color: inherit; 
}
/* 在样式重置表中可以写成强制继承 */

css中两个特殊的值
inherit 手动强制继承，将父元素的值取出应用到该元素上
initial 初始值，将该属性设置为默认值

盒模型

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

盒子类型

行盒，display属性值等于inline的元素叫做行盒。
块盒，display属性值等于block的元素叫做块盒。

行盒在页面中不换行，块盒独占一行，会换行。

display默认值为：inline

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

常见的行盒：文本元素、span、a、img、video、audio等

盒子的组成部分

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

内容 content

width、height，设置的是盒子内容的宽高。
内容部分通常叫做整个盒子的内容盒 content-box
填充(内边距) padding

盒子边框到盒子内容的距离

padding-top、padding-right、padding-bottom、padding-left

简写属性：

padding：上下左右（写一个值）

padding：上右下左（写四个值）

padding：上下左右（写两个值）

padding: 上左右下（写三个值）

填充区 + 内容区 = 填充盒 padding-box
边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框宽度：border-width

边框样式：border-style

边框颜色：border-color

简写属性：

border：宽度样式颜色

边框 + 填充区 + 内容区 = 边框盒 border-box
外边距 margin

边框到其他盒子的距离

margin-top、margin-right、margin-bottom、margin-left

简写属性与内边距padding一致

盒模型应用

改变宽高范围

默认情况下，width 和 height设置的是内容盒的宽高。

页面重构师：将psd文件（设计稿）制作成为静态页面。

问题：衡量设计稿尺寸的时候，往往使用的是边框盒，但设置 width 和 height 时设置的内容盒。

解决方案：

（以前）精确计算
（现在）css3：box-sizing：border-box
表示设置的宽高为整个边框盒的大小，改变padding时盒子大小不变，内容区域自动计算大小

改变背景覆盖范围

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

溢出处理

overflow，控制内容溢出边框盒后的处理方式

overflow：visible(默认值显示)、hiddent（溢出部分隐藏）、scroll（滚动条）

overflow-y：scroll（y轴上的滚动条）

overflow-x：scroll（x轴上的滚动条）

overflow: auto（根据内容宽度自动显示或隐藏滚动条）

断词规则

word-break，会影响文字在什么位置被截断换行

worf-break：normal 普通。CJK（中国、韩国、日本）字符，文字位置截断，非CJK字符，单词位置截断。

worf-break：break-all 截断所有。表示所有字符都在文字处截断。

worf-break：keep-all 保持所有。表示所有文字都在单词之间截断。

空白处理

文本溢出处理方法：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            line-height: 2;
            /* 文本不换行 */
            white-space: nowrap;
            /* 文本溢出部分隐藏 */
            overflow: hidden;
            /* 超出部分显示圆点 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, asperiores.
    </div>
</body>

</html>

行盒的盒模型

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

显著特点

盒子沿着内容延伸
行盒不能设置宽高
（调整行盒的宽高，应该使用字体大小、行高、字体类型、间接调整）
内边距（填充区）
水平方向上有效，垂直方向上只会影响背景，不会占据实际空间。
边框
水平方向上有效，垂直方向上只会影响背景，不会占据实际空间。
外边距
水平方向上有效，垂直方向上只会影响背景，不会占据实际空间。

行块盒

display: inline-block 表示行块盒

不独占一行
盒模型中所有的尺寸都有效

实际开发中经常用来做分页

空白折叠

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

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

大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素

可替换元素：img、video、audio、
绝大部分可替换元素均为行盒，

可替换元素类似于行块盒，盒模型中所有尺寸都有效。

object-fit：fill（默认）
fill：改变宽高，图片比例会发生变化，填充满img，
contain：改变宽高，图片比例不变，不填充满img。
cover：改变宽高，图片比例不变，填充满img。图片发生类似剪裁效果。

常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中的多个盒子排列规则

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流
浮动
定位

常规流布局

很多叫法：常规流、文档流、普通文档流、常规文档流

所有元素，默认情况下，都属于常规流布局。

总体规则：块盒独占一行，行盒水平依次排列。

包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的活动范围。

绝大部分情况下，盒子的包含块，为其父元素的内容盒。

块盒常规流特点

每个块盒的总宽度（margin + border + padding + 宽高），必须刚好等于包含块的宽度。

宽度的默认值是：auto

auto：将剩余空间吸收掉

marign的取值也可以是auto，默认值为0.
当 width 和 margin 同为 auto 时，width 的吸收能力强于 margin。

若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收。

在常规流中，让块盒在包含块中居中，可以定宽、然后左右margin设置为auto。
每个块盒垂直方向的auto值

height：auto 表示适应内容的高度，适用于子元素和父元素。（高度根据内容撑开）
margin：auto 表示0
百分比取值
padding、宽高、margin、可以取值为百分比。
以上的所有百分比相对的是包含块的宽度。(包含块的宽度 * n% = 取值)

高度的百分比：
1）包含块的高度是否取决于子元素的高度（包含块没有设置高度）。设置百分比无效。
2）包含块的高度不取决于子元素的高度（包含块设置了高度），百分比相对于父元素的高度。
上下外边距的合并
两个常规流块盒，上下外边距相邻，会进行合并。相邻合并取最大值。（适用于兄弟元素和父子元素）
中间出现border或padding时，不合并。

常规流练习

详情见 /常规流练习

浮动

视觉格式化模型，大体上将页面中盒子的排列方式分为三种：

常规流
浮动
定位

应用场景

文字环绕
横向排列

浮动的基本特点

修改float属性值为：

left：左浮动，元素靠上靠左。
right：右浮动，元素靠上靠右。
默认值：none

当一个元素浮动后，元素必定为块盒。（浮动会更改元素display属性为block）
浮动元素的包含块，和常规流一样，为父元素的内容盒。

盒子尺寸

宽度为auto时，适应内容宽度。与常规流不同。（常规流自动吸收剩余空间）
高度为auto时，适应内容高度。与常规流一致。（常规流适应内容高度）
border、padding、百分比设置与常规流一致。
margin 为 auto 时，为0.

盒子排列

左浮动的盒子靠上靠左排列
右浮动的盒子靠上靠右排列
浮动盒子在包含块中排列时，会避开常规流块盒。
常规流块盒在排列时，会无视浮动盒子。
行盒在排列时，会避开浮动盒子。 (文字环绕)

注意浏览器规则：如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字。（该行盒叫做匿名行盒，看不见）


/* 文字环绕 */

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       img {
           float: left;
           margin-right: 20px;
       }
   </style>
</head>

<body>
   <div>
       <img src="./img/1.png" alt="">
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur ex eaque id magni, molestias est illo dolorum maxime perferendis deleniti? Debitis neque nobis perferendis vitae. Odio, quae? Molestiae quod recusandae nesciunt eius corporis dolor
           modi itaque et deserunt qui maxime, illo aperiam voluptatum nihil voluptatem blanditiis accusamus illum provident tenetur! Dolorum adipisci rerum minus eligendi doloribus ducimus, ab, eaque, minima nihil non quasi laboriosam. Amet commodi
           illum ipsum laboriosam, iure dignissimos. Sunt nesciunt maiores cum, excepturi natus unde magni rerum officiis architecto, cumque consequuntur a deleniti quas corporis amet autem odit rem. Quo voluptatem totam atque quasi excepturi, eum officiis
           provident, deserunt autem dignissimos, vel a mollitia architecto sint repellat delectus commodi. Eius, et culpa sint temporibus debitis voluptatum impedit enim dolorem officia unde sapiente tenetur vel. Iste, nam inventore. Laudantium eaque
           corporis minus recusandae laboriosam nostrum reiciendis debitis expedita tenetur magnam quibusdam ipsa, illo fugiat at blanditiis sed qui consectetur veritatis et quidem quam eum reprehenderit natus? Exercitationem eum voluptas aperiam illo
           ad molestiae neque? Sapiente ad nemo culpa explicabo quas, iure eos porro quaerat, impedit unde nam et odio blanditiis odit neque ipsum reprehenderit reiciendis facere hic amet nesciunt itaque. Vitae a temporibus at quaerat hic? Animi eveniet
           explicabo reiciendis ipsam accusamus necessitatibus quisquam ducimus at minus suscipit porro, corrupti aliquid perspiciatis exercitationem ut quod molestias nisi sed accusantium nostrum officiis deleniti? Mollitia eligendi rem quae accusamus!
           A quisquam esse illo rerum, optio magnam assumenda laboriosam odio, perspiciatis amet tenetur incidunt doloribus quibusdam, obcaecati eum earum delectus sit labore magni dolore nostrum aperiam temporibus? Autem quia doloremque sit perspiciatis
           velit sunt eum quaerat animi maiores neque odit in, sapiente deleniti accusamus delectus ipsam perferendis voluptates obcaecati. Voluptas, at nobis aut corporis, placeat soluta porro hic voluptates, odit ab neque laboriosam fugiat voluptatem
           temporibus natus unde debitis incidunt dicta aliquid ipsum blanditiis pariatur reprehenderit! Voluptatem sequi mollitia nam rerum, atque impedit optio quis, sint alias dolorem quibusdam veniam blanditiis cumque repellendus labore delectus
           placeat, consequuntur deserunt. Minus pariatur sapiente laudantium iure commodi non nihil dolor rerum, maxime odio enim molestiae fugiat accusamus cum cumque, et totam? Eveniet dignissimos nesciunt eligendi itaque veritatis ut doloribus dolores,
           sunt repellendus necessitatibus hic quod magni sed inventore tenetur quisquam vitae expedita provident! Provident officiis quo earum aperiam impedit, quibusdam iste consequuntur possimus delectus, placeat unde. Tempora corporis mollitia minima
           consectetur. Amet quisquam eveniet laborum aperiam rerum illo quia totam temporibus iste qui! Dolorem, consequatur suscipit eum cum minima a repudiandae neque ipsam nobis ad ipsa sequi fuga tempore nihil expedita, aliquid quod molestiae sit
           itaque libero quis soluta voluptas. Aliquam, pariatur? Ad enim, ipsam autem laborum velit maiores corporis nihil sit voluptas veritatis reprehenderit sequi, alias suscipit incidunt ab eos culpa. Repellat, earum, molestias adipisci minus molestiae
           voluptate, eveniet a accusantium sed eos reiciendis illum libero error quisquam obcaecati? Cupiditate alias repudiandae itaque quam impedit minima ducimus corporis harum enim tenetur, qui aut magni mollitia quos, odio corrupti libero accusamus
           ullam! Impedit dignissimos illo id exercitationem? Quae libero mollitia dolores. Dolore, quis illo?</p>
   </div>
</body>

</html>

外边距合并不会发生

高度坍塌

高度坍塌的根源：常规流盒子的自动高度（根据内容撑开）在计算时，无视浮动盒子。

清除浮动：clear

默认值：none
left：清除左浮动，该元素（clear：left；）必须出现在前面所有左浮动盒子的下方
right：清除右浮动，该元素（clear：right；）必须出现在前面所有右浮动盒子的下方
both：清除左右浮动，该元素（clear：both；）必须出现在前面所有浮动盒子的下方

解决方法：

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            background-color: lightblue;
        }
        
        p {
            width: 100px;
            height: 100px;
            border: 2px solid #ff4200;
            float: left;
        }
        
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="parent clearfix">
        <p>Lorem.</p>
        <p>Nisi.</p>
        <p>Numquam.</p>
    </div>
</body>

</html>