CSS复习---------7.31完结

i98.

已于 2022-07-31 21:14:20 修改

阅读量153

点赞数 1

分类专栏： 33的前端之路文章标签： css

于 2022-07-11 21:12:21 首次发布

本文链接：https://blog.csdn.net/Z933143298/article/details/125662761

版权

33的前端之路专栏收录该内容

47 篇文章 1 订阅

订阅专栏

伪元素

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 :: 开头

:: first-letter 表示第一个字母
:: first-line 表示第一行
:: selection 表示选中的内容
:: before 元素的开始
:: after 元素的最后

选择器的权重

样式的冲突

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

选择器的权重

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

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的），选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器如果优先级计算后相同，此时则优先使用靠下的样式

长度单位

像素：

屏幕（显示器）实际上是由一个一个的小点点构成的
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
所以同样的200px在不同的设备下显示效果不一样

百分比：

也可以将属性值设置为相对于其父元素属性的百分比
设置百分比可以使子元素跟随父元素的改变而改变

em：

em是相对于元素的字体大小来计算的
1em = 1font-size
em会根据字体大小的改变而改变

rem：

rem是相对于根元素的字体大小来计算，即html{font-size}

颜色单位

在C5S中可以直接使用颜色名来设置各种颜色
比如，red、orange、yellow、blue、green……
但是在css中直接使用颜色名是非常的不方便

RGB值

RGB通过三种颜色的不同浓度来调配出不同的颜色
R red，G green， B blue
每一种颜色的范围在0 - 255(0% - 100%)之间
语法：RGB(红色，绿色，蓝色)

RGBA:

就是在rgb的基础上增加了一个a表示不透明度
需要四个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明 0表示完全透明 .5半透明

十六进制的RGB值：

语法：#红色绿色蓝色
颜色浓度通过00-ff
如果颜色两位两位重复可以进行简写，如：#aabbcc --#abc

HSL值        HSLA值

H        色相    0-360
S        饱和度，颜色的浓度 0%-180%
L        亮度，颜色的亮度     0%-180%

盒子模型

Css将页面中的所有元素都设置为了一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都由一下几个部分组成：
内容区(content)
内边距(padding)
边框(border)
外边距(margin)

内容区(content)

元素中的所有的子元素和文本内容都在内容区中排列
内容区的大小由width和heighti两个属性来设置
width设置内容区的宽度
height设置内容区的高度

内边距(padding)

内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
盒子的可见框的大小，由内容区内边距和边框共同决定，
所以在计算盒子大小时，需要将这三个区域加到一起计算

边框(border)

边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
要设置边框，需要至少设置三个样式：
宽度border - width

border - width还有一组border-xxx-width

xxx可以是top right bottom left
用来单独指定某一个边的宽度
颜色border - color

border - color同样可以分别指定四个边的边框

规则和border - width一样
border - color也可以省略不写，如果省略了则自动使用color的颜色值
样式border - style
solid表示实线
dotted点状虚线
dashed虚线
double双线
border简写属性
通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
除了border以外还有四个border-.xxx
border-top
border-right
border-bottom
border-left

外边距(margin)

水平方向布局

元素在其父元素中水平方向的位置由以下几个属性共同决定

margin-left

border-left

padding-left

width

padding-right

border-right

margin-right

一个元素在其父元素中，水平布局必须要满足以下的等式

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

=其父元素内容区的宽度（必须满足)

如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整
调整的情况：

如果这七个值中没有为auto的情况
则浏览器会自动调整margin-right值以使等式满足
这七个值中有三个值和设置为auto
width
maring-right
margin-left
如果某个值为auto,则会自动调整为auto的那个值以使等式成立
如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大，设置为auto的外边距会自动为0
如果将三个值都设置为auto,则外边距都是0，宽度最大
如果将两个外边距设置为auto,宽度固定值，则会将外边距设置为相同的值
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
示例：
width:xxxpx
margin：0 auto；

盒子大小

box-sizing用来设置盒子尺寸的计算方式（设置width和neight的作用）
可选值：

content-box默认值，宽度和高度用来设置内容区的大小
border-box宽度和高度用来设置整个盒子可见框的大小

高度塌陷问题

高度塌陷的问题：

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失，父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理。

解决方法：

BFC(Block Formatting Context)块级格式化环境

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

元素开启BFC后的特点：

开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素子元素和父元素外边距不会重叠
开启BFC的元素可以包含浮动的子元素

可以通过一些特殊方式来开启元素的BFC：

设置元素的浮动（不推荐）
将元素设置为行内块元素（不推荐）
将元素的overflow设置为一个非visible的值
常用的方式为元素设置overflow：hidden，开启其BFC以使其可以包含浮动元素

clear属性

作用：清除浮动元素对当前元素所产生的影响

可选值：

left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both清除两侧中最大影响的一方

原理：

设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响

利用伪元素

添加伪元素::after，然后转换成block元素，并清除浮动即可
a::after{
    content:''
    display:block;
    clear:both;
}
clearfix类

clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可
.clearfix:before,
.clearfix:after{
    content:''
    display:table;
    clear:both;
}

粘滞定位

当元素的position属性设置为sticky时则开启了元素的粘滞定位，当向下移动时，粘滞定位会悬浮在页面最上方
粘带定位和相对定位的特点基本一致
不同的是粘滞定位可以在元素到达某个位置时将其固定
比较少用，兼容性差

绝对定位元素的位置

水平布局

必须满足以下等式：

left + margin-left + border-left + padding-left + width+padding-right + border-right + margin-right + right=包含块的内容区的宽度

当我们开启了绝对定位后，水平方向的布局等式就需要添加left和right两个值，此时规则和之前

样只是多添加了两个值：

当发生过度约束

如果9个值中没有auto，则自动调整right值以使等式满足
如果有auto，则自动调整auto的值以使等式满足

可设置auto的值

margin width left right

因为left和right的值默认是auto，所以如果不知道left和right，则等式不满足时，会自动调整这两个值

垂直布局

必须满足以下等式：

top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的内容区的高度

元素的层级

对于开启了定位元素，可以通过 z-index 属性来指定元素的层级

z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示

如果元素的层级一样，则优先显示靠下的元素（哥哥让弟弟）
祖先的元素的层级再高也不会盖住后代元素（水涨船高）

字体族

font-family字体族（字体的格式）

可选值：

serif衬线字体
sans-serif非衬线字体
monospace等宽字体
指定字体的类别，浏览器会自动使用该类别下的字体

font-family 可以同时指定多个字体，多个字体间使用，隔开字体生效时优先使用第一个，第一个无法使用则使用第二个,以此类推

背景

background-image设置背景图片

可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
如果背景的图片大于元素，将会一个部分背景无法完全显示
如果背景图片和元素一样大，则会直接正常显示

设置背景的范围

background-clip        可选值：

border-box 默认值，背景会出现在边框的下边
padding-box        背景不会出现在边框，只出现在内容区和内边距
content-bo x背景只会出现在内容区

背景图片的偏移量计算的原点

background-origin 可选值

padding-box        默认值，background-position,从内边距处开始计算
content-box        背景图片的偏移量从内容区处计算
border-box 背景图片的变量从边框处开始计算

设置背景图片的大小

background-size

第一个值表示宽度
第二个值表示高度
如果只写一个，则第二个值默认是auto

也可以有以下值：

cover 图片的比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示

背景图片是否跟随元素移动

background-attachment
可选值：

scroll        默认值背景图片会跟随元素移动
fixed        背景会固定在页面中，不会随元素移动

雪碧图

角解决图片闪烁的问题：

可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示

这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题

雪碧图使用步骤：

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

雪碧图特点：

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

渐变

线性渐变（沿直线）

linear-gradient()

如：linear-gradient(red,yellow)红色在开头，黄色在结尾，中间是过渡区域

线性渐变的开头，我们可以指定一个渐变的方向

to left
to right
to bottom
to top
deg 表示度数
turn 表示圈

渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况
linear-gradient(red 50px ，yellow 100px)；
repeating-linear-gradient()

即可以平铺的线性渐变

径向渐变（放射状）

radial-gradient()

默认情况下径向渐变的形状根据元素的形状来计算的

正方形-->圆形
长方形-->椭圆形

可以手动指定径向渐变的大小

circle
ellipse
通过数值改变渐变样式：background-image:radial-gradient(100px 160px,red yellow)；

正圆：background-image:radial-gradient(circle,red yellow)；
椭圆：background-image:radial-gradient(elfipse,red yellow)；
可以指定渐变的位置
在原点：background-image:radial-gradient(100px 100px at 0 0,red,#bfa);
在中心：background-image:radial-gradient(100px 100px at center center,red,#bfa);
在左上：background-image:radial-gradient(at top left,red,#bfa)；
语法：

radial-gradient(大小 at 位置，颜色位置，颜色位置，颜色位置)

大小：

circle圆形
ellipse椭圆
closest - side近边
closest - corner近角
farthest - side远边
farthest - corner远角

位置：

top right left center bottom

缩放

对元素进行缩放的函数

scaleX() 水平方向缩放
scaleY() 垂直方向缩放
scale () 双方向的缩放

Less

是什么

less是一门css的预处理语言
less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
在less中添加了许多的新特性：像对变量的支持、对mixin的支持...
less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

作用

变量，在变量中可以存储一个任意的值，并且我们可以在需要时，任意的修改变量中的值

变量的语法：@变量名
使用变量时，如果是直接使用则以@变量名的形式使用即可
.box5{
width:@a;
color:@b;
}

作为类名，或者一部分值使用时必须以@（变量名}的形式使用
.@{c}{
width:@a;
background-image:url("@{c)/1.png");
}

弹性盒

flex（弹性盒、伸缩盒）是CSS中的又一种布局手段，它主要用来代潜浮动来完成页面的布局
flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器，我们通过display来设置弹性容器

display：flex        设置为块级弹性容器
display：inline-flex        设置为行内的弹性容器

样式：

flex-direction：指定容器中弹性元素的排列方式

可选值：

row默认值，弹性元素在容器中水平排列（左向右）
主轴--自左向右
row-reverse弹性元素在容器中反向水平排列（右向左）
主轴--自右向左
column弹性元素纵向排列（自上向下）
column-reverse弹性元素方向纵向排列（自下向上）

主轴：弹性元素的排列方向称为主轴
侧轴：与主轴垂直方向的称为侧轴

flex-wrap：设置弹性元素是否在弹性容器中自动换行
可选值：

nowrap                默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse       元素沿着辅轴反方向换行

justify-content
如何分配主轴上的空白空间（主轴上的元素如何排列）
可选值：

flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center                    元素居中排列
space-around 空白分布到元素两侧
space-between     空白均匀分布到元素间
space-evenly 空白分布到元素的单侧

align-items：元素在辅轴上如何对齐，元素间的关系
可选值：

stretch            默认值，将元素的长度设置为相同的值
flex-start        元素不会拉伸，沿着辅轴起边对齐
flex-end 沿着辅轴的终边对齐
center 居中对齐
baseline        基线对齐

弹性元素

弹性容器的子元素是弹性元素（弹性项）

一个元素可以同时是弹性容器和弹性元素

样式：

flex-grow指定弹性元素的伸展的系数

当父元素有多余空间的时，父元素的乘剩余空间，会按照比例进行分配

flex-shrink指定弹性元素的收缩系数

当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩

flex-basis：元素在主轴上的基础长度

如果主轴是横向的，则该值指定的就是元素的宽度
如果主轴是纵向的，则该值指定的是就是元素的高度
默认值是auto，表示参考元素自身的高度或宽度
如果传递了一个具体的数值，则以该值为准

flex可以设置弹性元素所有的三个样式
f1ex增长缩减基础；
initial " flex：0 1 auto "
auto " flex：1 1 auto "
none " flex：0 0 auto " 弹性元素没有弹性

order：决定弹性元素的排列顺序
li:nth-child(1){

order:2;

}
li:nth-child(2){

background-color:pink;

order:3;

}
li:nth-child(3){

background-color:orange;

order:1;

}

像素与视口

像素

屏幕是由一个一个发光的小点构成，这一个个的小点就是像素

分辨率：1920×1880说的就是屏幕中小点的数量

在前端开发中像素要分成两种情况讨论：CSS像素和物理像素

物理像素，上述所说的小点点就属于物理像素
CSs像素，编写网页时，我们所用像素都是CSS像素
浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现。
一个css像素最终由几个物理像素显示，由浏览器决定：默认情况下在pc端，一个css像素=一个物理像素

视口

视口就是屏幕中用来显示网页的区域，可以通过查看视口的大小，来观察CS5像素和物理像素的比值

默认情况下：

视口宽度1920px(css像素)
1920px(物理像素)
此时，css像素和物理像素的比是1：1

放大两倍的情况：

视口宽度960px:(css像素)
1920px(物理像素)
此时，css像素和物理像素的比是1：2

我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值

完美视口

移动端默认的视口大小是980px(css像素)
默认情况下，移动端的像素比就是 980/移动端宽度(980/750)
如果我们直接在网页中编写移动端代码，这样在98©的视口下，像素比是非常不好，导致网页中的内容非常非常的小
编写移动页面时，必须要确保有一个比较合理的像素比：

1css像素对应2个物理像素
1css像素对应3个物理像素

可以通过meta标签来设置视口大小

每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果，将像素比设置为最佳像素比的视口大小我们称其为完美视口

完美视口的万能代码：
<meta name="viewport" content=" width=device-width，initial-scale=1.0 " >

vw表示的是视口的宽度(viewport width)

100vw=一个视口的宽度
1vw=1%视口宽度

vw这个单位永远相当于视口宽度进行计算

i98.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS复习---------7.31完结

伪元素，选择器权重，长度单位，颜色单位，盒子模型，水平方向布局，高度塌陷问题，粘黏定位，绝对定位元素的位置，元素的层级，字体族，背景拓展，雪碧图，渐变，缩放，less，弹性盒，像素与视口...
复制链接

扫一扫