css样式

字数统计: 12.8k阅读时长: 49 min

 2022/05/02 

css样式–基础

css的引入方式

行内样式

在标签内部通过style属性来设置元素样式；

作用与当前标签;

需要配合js使用最当;
1
2
3
<p style="size : 18px;">
这是一段文字
</p>
内嵌样式

在 hade 头部 title 标签下设置 style 标签,在其内部书写;

作用与当前标签;

常用与小案例;
1
2
3
4
5
6
<head>
<title></title>
<style>
/* css样式与注释 */
</style>
</head>
外联样式

css单独写在单独的css文件里,在 hade 头部 title 标签下用 link 标签引入;

一个css可以作用于多个页面;

常用与各个项目中;
1
2
3
4
5
<head>
<title></title>

<link rel="stylesheet" href="">
</head>
它们之间有优先级:

行内样式 > 内嵌样式 > 外部样式

但是内嵌样式 > 外部式有一个前提：内嵌样式 css样式的位置一定在外部式的后面。

例:
1
2
3
4
5
6
7
8
<head>
<title></title>

<link rel="stylesheet" href="">
<style>
/* css样式 */
</style>
</head>

css书写样式顺序

定位
浮动 / display转换行内块
盒子模型,宽度,高度,背景色
文字样式

选择器

选择器有:

元素(标签)选择器
id选择器
类(class)选择器
通配(*)选择器

类选择器最常用;

它可以有多个,一个标签可以有多个class类名;
id只能有一个 ,它是唯一性的,一般配合js使用;
元素和通配它们的选择范围太广阔;

类选择器以: .xxx

id选择器以: #xxx

/* 清除內外边距 */
*{
    margin: 0px;
    padding: 0px;
}

1.关系选择器

父元素

直接包含的元素叫做父元素

子元素

直接被父元素包含的元素是子元素

作用：选中指定父元素的子元素

语法：父元素 > 子元素

1	div.box > span {}

孙子元素

1	div.box > p > span {}

祖先元素

直接包含后代元素的元素叫做祖先元素
一个元素的父元素也是它的祖先元素

后代元素

直接或者间接被祖先元素包含的元素叫做后代元素
子元素也是后代元素

作用：选中指定元素内的指定后代元素

语法：祖先 后代

1	div span {…}

兄弟元素

用有相同父元素的元素是兄弟元素

作用：选择下一个兄弟，单个兄弟

语法：前一个 + 下一个

1	p + span {…}

作用2：选择下面所有兄弟

语法：兄 ~ 弟

1	p ~ span {…}

2.属性选择器

[属性名]选择含有指定属性的元素

1 2	/* 解析：标签里含有title属性就行 */ p[title]{...}

[属性名=属性值]选择含有指定属性和属性值的元素

1 2	/* 解析：标签里含有title属性并且值为abc才行 */ p[title=abc]{...}

[属性名^=属性值]选择属性值以指定值开头的元素

1 2	/* 解析：标签里title属性开头为abc即可 */ p[title^=abc]{...}

[属性名$=属性值]选择属性值以指定值结尾的元素

1 2	/* 解析：标签里title属性结尾为abc即可 */ p[title$=abc]{...}

[属性名=属性值]选择属性值中含有某值的元素*

1 2	/* 解析：标签里title属性任意位置有abc即可 / p[title=abc]{...}

3.伪类选择器

伪类选择器：就是在 css 里进行条件筛选进行设置样式;
伪类是用来描述一个元素的特殊状态

比如：第一个子元素，被点击的元素，鼠标移入的元素…

伪类选择器一般情况下以冒号开头

/* 第一个子元素 */
:first-child

/* 最后一个子元素 */
:last-child

/* 
选中第 n 个子元素 
特殊值：
n 第 n 个，范围是  0  到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 2n-1 或 odd 表示选中奇数位的元素
-n+5	找到前5个的元素
n+5		找到从第5个后的元素
5n	5,10,15,20
*/
:nth-child()

/* 既是第一个也是最后一个的子元素 */
:only-child 
/* 例： */
plate > :only-child
/* 
大于号很重要，因为是plate它下面的子元素
*/

以上的伪类都是根据所有的子元素（所有的子标签）进行排序筛选;

以下是功能上面一样，都是是根据同类型的元素（p标签是p标签里的，span是span的）进行排序筛选;

/* 同类型子元素的第一个 */
:first-of-type

/*
同类型子元素的最后一个;也可以说同样的类，不同的标签
*/
:last-of-type

/* 同类型子元素的第n个 */
:nth-of-type()

/* 不论元素类型从最后一个元素往前数 */
:nth-last-child()

/* 没有子元素的元素 */
:empty

/* 否定伪类;用于将符合条件的元素从选择器中去除 */
:not()

4.伪元素

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

伪元素使用 :: 开头

/*
表示第一个字母
解析：设置每个段落首个字的样式
*/
::first-letter

/*
表示第一行
解析：设置每个段落第一行的样式
*/
::first-line

/*
表示选中的内容
解析：就是鼠标拉中的内容改变背景颜色样式
*/
::selection

/*
元素的开始
解析：就是在一个块或者行的开头位置进行添加内容
*/
::before

/*
元素的最后
解析：就是在一个块或者行的末尾位置进行添加内容
*/
::after

/*
before和after必须结合content属性来使用
例：添加 [ 与 ] 
*/
div::before{content: '[';}
div::after{content: ']';}
/*
before 和 after是可以在css里添加文本的样式
*/

5.焦点伪类选择器

用于选中元素获取焦点时状态，常用于表单控件

效果：
表单控件获取焦点时默认会显示外部轮廓线

就是鼠标点入表单后的

:focus
/*
input:focus{}
*/

6.超链接的伪类

超链接的伪类，用于设置点击前后，悬停等等时候的样式

:link 正常状态下未点击（未访问）过的链接

语法：

1 2	/* 正常状态下的链接可以做任意的修改 */ a:link{color: blue;}

:visited 表示点击（访问）过链接

语法：

1 2	/* 由于隐私的原因，它只能修改颜色，不能做其他修改 */ a:visited{color: xxx;}

:hover 用来表示鼠标移入（悬停）的状态

语法：
1
a:hover{color: xxx;}
:active 鼠标点击后

语法：
1
a:active{color: xxx;}

7.选择器的权重(优先级)

样式的冲突

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。

选择器的权重

内联样式 1,0,0,0

id选择器 0,1,0,0

类和伪类选择器 0,0,1,0

元素选择器 0,0,0,1

通配选择器 0,0,0,0

继承的样式没有优先级

内联 > id > 类与伪类 > 标签 > 通配 > 继承
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算）
选择器的累加不会超过其最大数量级，类选择器在高也不会超过id选择器
如果优先级计算后相同，则优先使用靠下的样式
可以在某一个样式的后面添加 !important，则此样式会获取到最高的优先级，甚至超过内联样式
1
!important
注意：开发中这个要慎用！一但设置了难以修改。

字体样式font

字体大小: font-size: 10px;
1
font-size: 10px;

字体粗细: font-weight

/*
关键字				数字
正常:	normal	=		400
加粗:	bold	=		700
*/
font-weight: normal;
font-weight: 400px;

字体样式: font-style

/*
正常(默认值)	normal
倾斜	italic
*/
font-style: noraml;

字体类型: font-family

/*
无衬线字体（sans-serif）：黑体，Arial
衬线字体（serif）：宋体,TIMES NEW ROMAN
等宽字体（monospace）：CONSOLAS
Ink Free
fantasy 具有特殊艺术效果的字体:Papyrus、Herculanum、"Party LET"、"Curlz MT"、Harrington、fantasy
*/
/* 先看电脑有没有安装微软雅黑，宋体，没有就使用电脑里任意的无衬线字体（sans-serif）*/
font-family: 微软雅黑，宋体，sans-serif;

字体类型: font属性连写
1
2
3
4
5
6
/*
font : style weight size family;
顺序要求：swsf
只能省略前两个，如果省略了相当于设置了默认值
*/
font: normal 60px 18px sans-serif;
常见取值：具体字体1,具体字体2,…,字体系列

渲染规则：
- 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
- 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
- win系统默认微软雅黑;macos默认苹方;
- 如果字体名称中存在多个单词，推荐使用引号包裹
- 最后一项字体系列不需要引号包裹

1.em与rem

大小单位：

em是相对于元素自身的字体大小来计算的

1em = 1个字的大小

当前size 为16px;2em = 32大小;

em会根据字体大小的改变而改变高与宽

rem

rem是相对于根元素html的字体大小来计算

2.像素与百分比

长度单位：

像素px

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

百分比%

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

4.vh与百分比

vh是一种视窗单位，也是相对单位。相对于视窗的高度。视窗被均分为100单位的vh。vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。

文本样式text

文本缩进: text-indent: 10px;

1 2	/* 10em;(推荐: 1em = 当前标签的font-size的大小) */ text-indent: 10px;

文本水平对齐: text-align: left;
1
2
3
4
5
6
/*
left 左对齐;
center 居中对齐;
right 右对齐;
*/
text-align: left;
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

text-align : center 能让那些元素水平居中？
- 文本
- span标签、a标签
- input标签、img标签
  
  如果需要让以上元素水平居中， text-align : center 需要给以上元素的父元素设置
文本修饰: text-decoration: underline;
1
2
3
4
5
6
7
/*
underline 下划线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
none 无装饰线(常用)
*/
text-decoration: underline;
开发中会使用 text-decoration : none ; 清除 a标签默认的下划线

text-decoration: underline;设置下划线
行高: line-height
1
line-height: 20px;
1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
2. 网页精准布局时，我们一般做css初始化,会设置 line-height : 1 清除上下间距
3. 取值是以px为单位
4. 取值是以倍数(是文字大小的倍数,不带单位)

颜色

颜色单位：

rgb值

rgb通过三种不同颜色来调配各种颜色

r red红色，g green绿色，b blue蓝色

每一种颜色的范围在0 - 255（0% - 100%）之间

语法：rgb(0,0,0)

三个0是黑色，都是255是白色

rgba

就是在rgb的基础上增加了一个a表示不透明度

它需要4个值，前面三个与rgb一样，第四个表示不透明度

1 表示完全不透明；0表示完全透明；.5 是半透明

十六进制的rgb值：

语法：#红色绿色蓝色

颜色浓度通过 00-ff

如果颜色两位两位重复可以进行简写

/* 红色 */
#ff0000;
/* 红色 */
#f00;

hsl值 hsla值

h 色相（0 - 360）

s 饱和度，颜色的浓度 0% - 100%

l 亮度，颜色的亮度 0% - 100%

css样式–布局

文档流 normal flow

文档流

文档流是可以显示的对象在排列时所占用的位置;
文档流所在的位置是网页的最底层;
网页是一个多层的结构，一层叠加着一层;
通过css可以分别为每一层设置样式;
作为用户来讲只能看到最顶上一层;
这些层中，最底下的一层称之为文档流，文档流是网页的基础;
我们所创建的元素默认都是在文档流中进行排列的;
对于我们来说元素主要有两个状态;

在文档流中(占位)

不在文档流中(脱离文档流不占位)

元素在文档流中有什么特点：

块元素:

块元素会在页面中独占一行(自上而下垂直排列);
默认宽度是父元素的全部(会把父元素撑满);
默认高度是被内容撑开(子元素);

行内元素:

行内元素不会独占页面的一行，只占自身的大小;
行内元素在页面中从左向右水平排列，如果一行之中不能纳所有行内元素，则元素会换到第二行继续从左向右;
水平排列(与书写习惯一致);
行内元素的默认宽度与高度都是被内容撑开;

盒子模型 box model

上　top，右 right，下　bottom ，左 left

盒子模型,盒子:

css将页面中的所有元素都设置为了一个矩形的盒子块
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都由以下几个部分组成：

内容区(content)
内边距(padding)
边框(border)
外边距(margin)

基本上都是 border-top:

top可以更换为其他的的;

１.内容区 content

内容区(content)，元素中的所有子元素和文本内容都在内容区排列
内容区的大小是由width 和 height两个属性来设置

width 设置内容区的宽度;

height 设置内容区的高度;

1
2
3

width: 200px;
height: 200px;
background-color: royalblue;

2.盒子-边框 border

边框(border)，边框属于盒子的边缘，边框里面属于盒子的内部，出了盒子都是外部

边框的大小会影响到整个盒子的大小

要设置边框，至少需要三个样式

边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style

属性可设置为实线，虚线，双实线

/*细线边框*/
border-collapse: collapse;
border-width: 8px;
border-color: black;
border-style: solid;

用边框 border 指定样式

border是简写属性，可以通过该属性设置边框所有的相关样式并且没有顺序

1	border：red solid 10px；

用方向指定样式
方法一：

/* 指定上面位置的边框宽度 */
border-top-width: 10px;

/* 指定xxx位置的边框颜色 */
border-xxx-color

/* 指定xxx位置的边框线 */
border-xxx-style

方法二：

border-top 指单独定上面位置的颜色，宽度与边框线;
设置的内容可以随意摆放
可以是top 也可以是 right

边框的宽度 border-width
默认值，一般情况下为 3px（像素）
border-width 可以用来指定四个方向（上右下左）的宽度
值的情况：
例：border-width:10px 12px 18px 20px;
四个值时上右下左的顺序指定
三个值时上左右下的顺序指定，以中间的数值指定左右两侧
两个值时上下左右的顺序指定
一个值时上下左右就是指定了所有

边框的颜色 border-color
默认值为黑色，也可以入宽度一边一个颜色，顺序都是一样

注意事项：
边框的宽度，边框的颜色可以简写，最好不要简写
边框的样式不能简写，因为不写就没了，它的默认值为none(没有边框)

3.盒子-内边距 padding

**内边距(padding)**，与边框一样可以影响盒子大小，盒子的背景颜色会延申到内边距上；
同由上 top，右right，下bottom，左 left来影响
内边距不能设置颜色
padding的简写与边框一样四个方向：
其他格式相同:

padding: 可以用来指定四个方向（上右下左）的宽度
值的情况：
1
padding:10px 12px 18px 20px;
四个值时上右下左的顺序指定;

三个值时上左右下的顺序指定，以中间的数值指定左右两侧;

两个值时上下左右的顺序指定;

一个值时 上下左右 就是指定了所有;
计算盒子大小需要将 内容区，内边距与边框相加计算;

4.盒子-外边距 margin

外边距(margin)

外边距不会影响可见框的大小,但是外边距会影响盒子的位置;

margin-top
上外边距，设置一个正值，元素会向下移动

margin-right
默认情况下设置右外边距不会产生任何效果

margin-bottom
下外边距，设置一个正值，其下面的元素都会向下移动

margin-left
左外边距，设置一个正值，元素会向右移动
margin也可以设置负值，元素会往相反的方向移动
元素在页面中是按照自身自左向右的顺序排列的;
所以默认情况下，如果我们设置的左和上外边距则会移动自身,而设置下和右边距会移动其他元素;
外边距margin可以与边框，内边距它们一样简写

margin:
margin会影响到盒子实际占用的空间

5.盒子-水平方向布局

元素的水平方向布局：

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

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 = 父元素内容区的宽度

外边距-左 + 边框-左 +

内边距-左 + 宽度 +

内边距-右 + 边框-右 +

**外边距-右 **=父元素内容区的宽度

外边距-左与外边距-右默认值为0，而宽度 width 的默认值就是 auto ，它们三可以设置为auto(自动);

以上等式必须满足，如果相加等式不成立，则称之为过度约束，则等式自动调整

调整情况：

如果七个值中没有为 auto 的情况，则浏览器会自动调整 margin-right 外边距-右的值以使等式满足
七个值中三个可以设置为auto：

外边距-左 margin-left

外边距-右 margin-right

宽度 width
如果某个值为auto，则会自动调整为auto的那个值让等式成立
auto + 0 + 0 +200 + 0 + 0 + 0 = 父元素内容区的宽度
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0;
如果将三个值都设置为auto，则外边距都是0，宽度最大;
如果将两个外边距设置为auto，宽度值固定，则会将外边距设置为相同的值;
所以我们可以利用这一点来使一个元素在父元素中水平居中;

示例：

width: xxxpx；

margin: 0 auto;

margin: 100px auto;

6.盒子-垂直方向布局

概括：

垂直排列，设置多高是多高；
子元素超过父元素的，可以用 overflow 裁掉；
overflow 的值：
visible 默认值，子元素溢出，在父元素外部显示;
hidden 溢出的内容会被裁减不显示;
scroll 根据设置的宽与高生成两个滚动条，通过滚动条查看完整的内容;
auto 根据需要生成滚动条，需要上下的生成上下滚动条，需要左右的生成左右滚动条;
子元素是在父元素的内容区中排列的，如果子元素超过父元素则会溢出;

7.盒子-外边距折叠

概括：

两个盒子在一上一下的位置时，上面盒子设置的下外边距与下面盒子设置的上外边距会发生重叠现象；
在是兄弟元素的情况下：
- 兄弟元素间相邻的垂直外边距会取两者之间最大值（这是两者都是正值的情况下）
- 一正一负的情况：取两者的和
- 都是负值的情况：取两者中的绝对值最大的（-200与-100，取-200）
- 兄弟元素之间的外边距的重叠，队开发是有利的，不需要进行处理
父子元素的情况下：

父子元素相邻外边距，子元素会传递给父元素（上外边距）;

父子外边距的折叠会影响到页面的布局，必须进行处理;

解决方法:
给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
给父元素设置overflow：hidden
转换成行内块元素
设置浮动

8.盒子-塌陷,溢出

盒子塌陷:当两个块级元素为父子关系时,给子元素设置外边距高时,父元素会出现塌陷;

方法一:

给父元素设置边框或者内边距

不推荐使用,它们容易撑大盒子

方法二:

给父元素设置:

overflow: hidden;

/* 溢出隐藏 */
overflow: hidden; 
/* 默认值,溢出可见 scroll*/
overflow: visibl; 
/* 无论是否溢出,都显示滚条*/
overflow: hidden; 
/* 根据是否溢出,自动显示或者隐藏滚动条 */
overflow: hidden; 
/* 横向隐藏滚动条 */
overflow-x: hidden;

推荐使用;

方法三:

把父子元素,转换成为行内块

不推荐使用

**方法四:**设置浮动

9.盒子-自动内减

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？

解决方法 ① ：手动内减
操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦
解决方法 ② ：自动内减
操作：给盒子设置属性 box-sizing : border-box ; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去

/* 自动内减 */
box-sizing : border-box;
/* 
自动内减
content-box 为 外加模式，用户设置的宽度和高度是相对稳定的，增加border、padding会使整个盒子变大
*/

content-box(标准)
padding和border不被包含在width和height内
元素的实际大小为宽高+border+padding，此为标准模式下的盒模型

border-box(怪异)
padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽
此属性为怪异模式下的盒模型

10.盒子-清除默认内外边距

/*
body标签默认有margin：8px
p标签默认有上下的margin
ul标签默认由上下的margin和padding-left
*/
*{
    margin: 0;
    padding: 0;
}

背景样式

设置背景样式

1 2	/* 它的默认值是:rgba(0,0,0,0)、transparent */ background-color: red;

设置背景图片
1
background-image: url(./1.jpg);
注意:

背景图片中的 url 中可以省略引号;

背景图片默认在水平方向和垂直方向平铺;

背景图片只能起到装饰作用,盒子不会被它撑开;

背景平铺

/*
repeat	默认值,水平方向和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向 x 轴平铺
repeat-y	沿着水平方向 y 轴平铺
*/
background-repeat: repeat;

背景位置

方法1

/* 
后面两个0,前面一个是水平位置,后面一个是垂直方向 
水平方向的值有:
left 左;center 居中;right 右;
垂直方向的值有:
top 上;center 居中;bottom 下;
*/
background-position: 0 0;

方法2

/* 
后面两个0,前面一个是水平位置,后面一个是垂直方向 
水平方向的值有: 正值,水平向右边;负值,水平向左边;
垂直方向的值有: 正值,垂直向下;负值,垂直向上;
*/
background-position: 0 0;

img或者video适应容器

object-fit 属性用于规定应如何调整或
1
object-fit: cover;
背景属性连写

单个属性值的合写，取值之间以空格隔开

书写顺序：background：color image repeat position

设置背景图片大小

作用：设置背景图片的大小，
语法：

background-size：宽度 高度；
/*
数字+px		简单方便,常用
百分比			相对于盒子自身的宽高百分比
contain
包含,将背景图等比例缩放,直到不会超出盒子的最大
cover
覆盖,将背景图等比例缩放,直到刚好填满整个盒子没有空白
*/

块元素与行内元素

1.块元素

显示特点：

独占一行（一行只能显示一个）
宽度默认是父元素的宽度，高度默认由内容撑开
它可以继承父元素的宽,但它不属于继承性质,这是块元素自身的
可以设置宽高
代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

2.行内元素

显示特点：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
代表标签：
a、span 、b、u、i、s、strong、ins、em、del……
行内元素,设置外边距上和下,不会生效,左右两侧会生效;
行内元素,设置内边距上内边距没有

特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

3.块元素,行内元素相互转换

div{
    background-color: cornflowerblue;
    border: 1px solid;
    margin-bottom: 50px;
    width: 200px;
    height: 200px;
/*
转换成为行内块
*/
    display: inline-block;
}

display: block; 转换成块元素 常用
display: inline-block; 转换成行内块元素 常用

行内块元素被浏览器默认成为行内元素,所以不能在转换成为行内元素
display:inline 转换成行内元素 少用

继承性的介绍

特性：子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性(文字控制属性都可以继承)

color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height
……
注意点：可以通过调试工具判断样式是否可以继承

灰色的不能继承;高亮可以;

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
a标签的color会继承失效

其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

h系列标签的font-size会继承失效

其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
继承失效的特殊情况

去除列表默认小圆点

1 2	/* 给ul设置list-style:none */ list-style:none;

绝对定位

div{
    position: absolute;
    top: 10px;
    right: 10px;
}

浮动

浮动的作用是什么？

早期作用：图文环绕
现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右

/* 左浮动 */
float:left;
/* 右浮动 */
float:right;

浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
相当于从地面飘到了空中
浮动元素是属于半脱标的状态,里面的文字依然会受影响

浮动元素比标准流高半个级别，可以覆盖标准流中的元素

浮动是顶对齐特性
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果:一行可以显示多个;
可以使用margin进行缓慢移动;
浮动元素,不管你是行内元素还是块元素还是行内块,只要设置了浮动,就可以在一行显示,并且可以设置宽高;(它绝对不是行内块)
注意点：
浮动元素是不能通过text-align: center;或者margin: 0auto;进行居中;

浮动的元素不能通过text-align:center或者margin:0 auto;

清除浮动

父子级,子级浮动,父级没有高度,后面的标准流盒子就睡受影响,需要清除;

方法一:

给父级加高度;

优点：简单粗暴，方便

缺点:有些布局中不能固定父元素高度。

方法二:

给父元素内容最后添加一个块级;

给添加的块级,设置clear:both;

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

div{
    /* 
    noth 表示清除左右两侧
    left 表示清除左侧
    right 表示清除右侧
    */
    clear: both;
}

方法三:单伪元素清除法

用伪元素替代了额外标签

优点：项目中使用，直接给标签加类即可清除浮动

/* 给父类,在增加一个类,用于清除浮动 ::after 它表示块的末尾 */
.clear::after{
    /* 用::after 自带的配合元素 */
    content: '';
	/* 转换成块元素 */
    display: block;
    /* 清除浮动 */
    clear: both;
    /* 补充代码:在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}

方法四:双伪元素清除法

优点：项目中使用，直接给标签加类即可清除浮动

/*	::before,它表示元素的开头	*/
.clear::before,
.clear::after{
    content: '';
    display: table;
}
.clear::after{
    clear: both;
}

方法五:

直接给父元素设置

overflow : hidden

1	overflow : hidden;

优点：方便

解决图片下的间隙

1	vertical-align: middle;

版心

1 2	width: 1226px; margin: auto;

盒子阴影

1 2	/* 盒子阴影 */ box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);

定位

可以让元素自由的摆放在网页的任意位置
可以让盒子始终固定在屏幕中的某个位置
一般用于盒子之间的层叠
解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高，可以层叠在其他盒子上

/*
属性名：position
	静态定位	static
	相对定位	relative
	绝对定位	absolute
	固定定位	fixed
偏移值
水平左	left
水平右	right
垂直上	top
垂直下 bottom
*/
position:static;
/* 偏移值 */
right: 100px;
top: 20px;

/*脱标盒子居中*/
position: absolute;
    top: 50%;
    right: 50%;
transform: translate(50%, -50%);

定位 > 浮动 > 标准流

静态定位:

默认定位,它是标准流,它是不会脱离标准流的

相对定位:(子绝对定位,父相对定位)

是针对于之前的位置,进行移动的;

它移动后还是在原本的位置占着;所以它是不脱标的
相对定位之后,他是不会改变之前的模式的

应用场景：

配合绝对定位组CP（子绝父相）,用于小范围的移动

绝对定位:(子绝对定位,父相对定位)

脱离标准流,不占位置

它脱标后具有行内快的特点

它需要看父级别定位:

父级不带定位,以浏览器为参照物进行定位;

父级带定位,以父级定位

固定定位:

它是脱标的,不占位置

它是以浏览器为参照物

1.定位脱标元素居中

/* 
居中:
水平x
垂直y
translateX 宽度,与高度 
*/
transform: translate(x,y);
transform：translate(-50%，-50%)；

2.调整定位层级别

/* 
改变定位元素的层级
数字越大，层级越高
*/
z-index：6;

图片垂直对齐

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

文本框和表单按钮无法对齐问题
input和img无法对齐问题
div中的文本框，文本框无法贴顶问题
div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
使用line-height让img标签垂直居中问题

/*
baseline	默认,基线对齐
top			顶部对齐
middle		中部对齐
bottom		底部对齐
*/
vertical-align: bottom;

设置鼠标光标

/*
default		默认值,箭头
pointer		小手,提示用户可点击
text		工字型,提示用户可以选择文字
move		十字光标,提示用户可以移动
*/
cursor: pointer;

边框圆角

/*	
常见取值：数字+px 、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
*/
border-radius: 50%;

如果需要在网页中用盒子展示出一个正圆，应该如何完成？

盒子必须是正方形
设置 → border-radius:50%

如果需要在网页中用盒子展示出一个胶囊按钮，应该如何完成？

盒子要求是长方形
设置 → border-radius：盒子高度的一半

元素本身隐藏

常见属性：

visibility：hidden
display：none

区别：

visibility：hidden 隐藏元素本身，并且在网页中占位置,不建议使用
display：none 隐藏元素本身，并且在网页中不占位置

开发中经常会通过 display属性完成元素的显示隐藏切换

display：none；（隐藏）、 display：block；（显示）

/*元素隐藏*/
display：none;
/*元素显示*/
display：block;

1.元素透明

让某元素整体（包括内容）一起变透明

属性名：opacity
属性值：0~1之间的数字
1：表示完全不透明
0：表示完全透明
注意点：
opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

1	opacity: 0.8;

2.边框合并

1 2	/* 让相邻表格边框进行合并，得到细线边框效果 */ border-collapse：collapse；

3用CSS画二维码上的三角形技巧

利用盒子边框完成
步骤：

设置一个盒子
设置四周不同颜色的边框
将盒子宽高设置为0，仅保留边框
得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

精灵图

1 2	background: url(../images/sprites.png); background-position：x y

盒子阴影

/*
h-shadow	水平阴影,允许负值
v-shadow	垂直阴影,允许负值
blur		模糊距离
spread		阴影尺寸
color		阴影颜色
inset		将外部阴影(outset)改为内部
顺序
语法 box-shadow: h-shadow v-shadow blur spread color inset;
*/
box-shadow: xxx;
/* 文字 阴影*/
text-shadow: xx;

过度

1	transition: all 0.3s;

all 能过渡的属性都过渡

transition 属性规定过渡效果的延迟（以秒计）。

1
2
3

div {
  transition: width 2s, height 2s, transform 2s;
}

transition-delay 下例为转换添加过渡效果
1
2
3
div {
transition-delay: 1s;
}
transition-duration 规定过渡效果要持续多少秒或毫秒。
transition-property 规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function 规定过渡效果的速度曲线。

div {
  transition: width 2s, height 4s;
}
/*
指定过渡的速度曲线
transition-timing-function 属性规定过渡效果的速度曲线。
transition-timing-function 属性可接受以下值：
ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值
*/
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

ico图标

1	<link rel="shortcut icon" href="图片路径" type="image/x-icon">

网页整体缩放

/*
transform: scale(0.8);
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8);
-webkit-transform: scale(0.8);
但应用程序缩小并出现在中心。它不像 chrome 那样使用整个屏幕。
*/
body{
    zoom:79%;
}

文字单行显示…

/*默认值,文字换行*/
white-space: normal;
/*让文字在一行显示*/
white-space: nowrap;
/*让溢出的文字隐藏*/
overflow:hidden;
/*超出的部分用省略号代替*/
text-overflow: ellipsis;
/*单行文本要有固定的宽度*/

字体图标

阿里巴巴矢量图片库
字体图标文件夹命名规范:fonts
字体图片样式文件名字:iconfot.css

引用方式

<!-- 方法1:
第一步引入样式表
第二步,必须引入两个类名
下面一个都不能少
或者
把link改成外部网页链接样式
-->
<!-- icon 图标 类名方式-->
<i class="iconfont icon-xxx"></i>
<!--方法2:
icon 图标 实体字符方式
<i class="iconfont">&#xe633;</i>
-->
<i class="iconfont">xxx</i>

/*方法3:
icon 图标 伪元素的方式
只需要后面4个
前面需要加 \
需要指顶字体系列
font-family:"iconfont"
*/
content: '\e68d';
font-family: "iconfont";

平面转换

平面转换也叫 2d 转换;

1.位移

/*
x轴,y轴
不加上过渡无法使用;
*/
transform: translate(x,y);
/*单独设置方向的写法*/
transform: translatex();
transform: translatey();
/*
百分比值的写法
它是参照盒子自身移动的
*/
transform: translatex(100%);

transform移动盒子不会影响其它盒子;
它在pc端,布局会有兼容性问题;
移动端可以放心使用;

与其他移动盒子的方法对比:

对比外边距margin:

margin外边距移动,会影响其余盒子,挤走它们;

位移transform不会影响其它盒子,但是它不脱标;

对比定位 position:

transform比定位运行更加快捷流畅,能用transform实现预想的效果就不要去使用position了;

有的时候也可以配合定位一起使用;

2.旋转

任何旋转都是给需要旋转的对象增加过渡;

在给外面的框添加悬浮(:hover)

 /*
旋转语法;
正值顺时针旋转,负值逆时针旋转
*/
transform:rotate(360deg);

改变旋转中心点:

/*
它是给盒子添加的,并不是给悬停的
默认值为center中心原点;
取值:
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）
*/
transform-origin: center;

如果需要移动,也需要旋转,则一定要先写移动,在写旋转;

因为旋转会改变网页内元素的坐标轴方向;

1	transform: translateX(600px) rotate(360deg);

3.缩放

做到缩放效果有两种:

方法一:在悬浮时候直接改变宽高,这样容易挤开其他盒子;
方法二:用 transform: scale(); 他不会挤开其他盒子;

/*
语法一:transform: scale(x,y);
建议不用,因为没必要,因为在实际中,写任意一边另外一边会等比例缩放
transform: scale();
取值:
等于1表示不缩放;
大于1表示放大;
小于1表示缩小;
数值里面不需要加单位;
*/
transform: scale(1);
transform: scale(0.5);

注意：单标签不能使用伪元素；

4.渐变

/* 
background-color: transparent;
transparent 透明黑
默认从上往下
background-image:linear-gradient
to left		设置渐变从右往左,相当于 270deg
to right	设置渐变从左往右,相当于 90deg
to top		设置渐变从下往上,相当于 0deg
to bottom	设置渐变从上往下,相当于 180deg,默认值等同于不写
*/
background-image:linear-gradinent(180deg,rgba(0,0,0,0),rgba(0,0,0,1))

3d转换

与平面转(2d)换一样,也有位移,缩放,渐变;
不过它比2d多了个z轴;

3d之位移

transform: translate3d(x,y,z);
transform: translateX(110px);
transform: translateY();
transform: translateZ();

3d之视距

/* 
它是给父元素添加的
视距元素
取值一般在:800px - 1200px
*/
perspective: ;

视距越小,盒子越大;

视距越大,盒子越小;

3d之旋转

1
2
3

transform: rotateZ(deg);
/* 1turn 一圈 */
transform: rotateZ(1turn);

与2d旋转一样;

/*
用来设置自定义旋转轴的位置以及旋转轴的角度
x,y,z取值为0-1之间的数字
*/
rotate3d(x,y,z,角度度数);

立体呈现

/*
默认是2d呈现,值是
transform-style: flat 子元素不开启3d立体空间
他是给父元素添加的,让子元素保存3d立体空间
需要添加视距
*/
transform-style: preserve-3d;

perspective视距只能增加近大远小,近实远虚的视觉效果.

动画

过渡只能实现两个状态间的变化过程

动画可以实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

/*
定义动画
@keyframes 动画名称{
    from{}
    to{}
}
*/
/*百分比写法*/
@keyframes 动画名称{
    0%{}
    25%{}
    100%{}
}
/* 
使用动画 
animation:动画名称 动画时长
infinite	无限次数
moce 时长
谁需要给谁加
*/
animation:moce 3s 3;

animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时候的状态;

动画的属性值书写不分先后顺序;
但是必须保留:动画名称,动画时长;
如果里面有两个时间,第一个是动画时长,第二个是延迟时间,单位都是 s(秒);
animation可以让动画重复触发，transition不可以，是一次性的

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function	速度曲线	steps(数字)：逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反向 alternate先正常运行在反方向运行,持续交替 normal正常反方向
animation-play-state	暂停动画	paused为暂停，通常配合:hover使用

逐帧动画:一般开发中配合精灵图使用

1 2	/* steps(10) 分为10帧 */ animation:moce 3s 3s steps(10);

走马灯

<head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    img {
      width: 200px;
    }

    .box {
      width: 600px;
      height: 112px;
      border: 5px solid #000;
      margin: 100px auto;
      overflow: hidden;
    }
    .box ul{
      width: 2000px;
      animation: zmd 5s infinite linear;
    }
    .box ul li{
      float: left;
    }
    @keyframes zmd{
      0%{
        transform: translate(0,0);
      }
      100%{
        transform: translate(-1400px,0);
      }
    }
  </style>
</head>

<body>
  <div class="box">
    <ul>
      <li><img src="./images/1.jpg" alt="" /></li>
      <li><img src="./images/2.jpg" alt="" /></li>
      <li><img src="./images/3.jpg" alt="" /></li>
      <li><img src="./images/4.jpg" alt="" /></li>
      <li><img src="./images/5.jpg" alt="" /></li>
      <li><img src="./images/6.jpg" alt="" /></li>
      <li><img src="./images/7.jpg" alt="" /></li>
      <li><img src="./images/1.jpg" alt="" /></li>
      <li><img src="./images/2.jpg" alt="" /></li>
      <li><img src="./images/3.jpg" alt="" /></li>
    </ul>
  </div>
</body>

移动web

PC端网页和移动端网页的有什么不同

PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

屏幕尺寸

指的是屏幕对角线的长度，一般用英寸来度量
分辨率

物理分辨率是生产屏幕时就固定的，它是不可被改变的

比如:1920 * 1080

逻辑分辨率是由软件（驱动）决定的

比如:1920 x 1080,缩放后的

(1920/150%)* (1080/150%)

书写网页一般都是参考逻辑分辨率来写的

视口

视口：显示HTML网页的区域，用来约束HTML尺寸。

默认情况下，网页的宽度和逻辑分辨率是不相同,网页宽度是980px;

<!--
viewport ：视口
width=device-width ：视口宽度 = 设备宽度(逻辑分辨率的宽度)
initial-scale=1.0 ：缩放1倍（不缩放）
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是 vscode 书写时候 ! + TAB 自动生成就有带的

二倍图

可以使用像素大厨软件测量二倍图中元素的尺寸

现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。

二倍图设计稿尺寸：750px。

百分比布局

分比布局，也叫流式布局
效果：宽度自适应，高度固定。

Flex布局

Flex布局非常适合结构化布局

任何一个元素都可以直接给宽度和高度;

Flex存在兼容性问题;

水平是左右结构;

垂直是上下结构;

多个盒子横向排列使用浮动属性;
设置盒子间的间距使用margin属性;
浮动的盒子脱标

Flex布局/弹性布局：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

特点:

类似于行内块的特点;

不设置高度,自动与父盒子一样;

设置方式
父元级添加 display: flex，子级可以自动的挤压或拉伸
组成部分
父级: 弹性容器
子级: 弹性盒子
主轴/x轴
侧轴 /y轴/ 交叉轴

父级添加 display: flex后,子级水平排列;

因为默认情况下,主轴在水平方向,所以子级水平排列

子元素排列方向和主轴方向一致

Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

设置垂直方向的间距,就调整侧轴;

设置水平方向的间距,就调整主轴;

1.主轴的对齐方式

修改主轴对齐方式属性: justify-content

1 2	/* 主轴 */ justify-content: space-between;

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

2.行对齐

1 2	/* 属性值与上面主轴对齐一样 */ align-content:;

3.侧轴的对齐方式

使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性:

align-items（添加到弹性容器)
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

如果要保证侧轴有拉伸效果,需要去除高度

/* 谁要给谁加 */
align-self：;
/* 给父级 */
align-items:center;
/* 侧轴 */
align-content:;

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值, 弹性盒子沿着主轴线被拉伸至铺满容器

4.伸缩比

使用flex属性修改弹性盒子伸缩比

属性
flex : 值;
取值分类
数值(整数)

注意 : 只占用父盒子剩余尺寸

父级分多少份是所以的份数相加

1
2
3

/* 先把父级剩余的分成几份,在占去其中的 */
flex: 1;
/*flex: 1;与width 同时写,width不会起作用*/

5.修改主轴为垂直方向

1 2	/* column 列 ,row 行 */ flex-direction: column;

属性值	作用
row	行, 水平(默认值)
column	列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

6.让弹性盒子自动换行

/* 
默认值:nowrap;不换行
*/
flex-wrap: wrap;

7.移动端适配

flex + rem单位;

flex + viewport width/vh

flex布局让rem 或者 vw/vh 实现网页尺寸(vw宽,vh高)

1 2	width: 10rem; higth: 10vh;

rem 是相对于当前的文字大小

文字大小 * rem

确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

rem单位的尺寸
rem = (宽度或者高度数px) / 37.5(页面的宽度的十分之一)

68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字

媒体查询

能够使用媒体查询设置差异化css样式

1
2
3

@media(){
    p{}
}

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式

引用js

在body里面写;

flexible.js是手淘开发出的一个用来适配移动端的js框架

1	<script src="./js/flexible.js"></script>

Less语法

注释：
单行注释
语法：// 注释内容
快捷键：ctrl + /
块注释
语法：/* 注释内容 */
快捷键： shift + alt + A

除法需要加小括号;
表达式存在多个单位以第一个单位为准;

使用Less嵌套写法生成后代选择器

.box{
  width: (60 /37.5px);
  height: (30px / 37.5px);
	//快速生成后代选择器。
  .div{
    width: 20px;
    height: 60px;
	//&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
    &:hover{
      background-color: aqua;
    }
  }
}

less导入

/* 方法二一*/
@import '';
/* 方法二 */
@import url();

导出

先在less设置里settings.json下 less.compile 里添加”out”: “../css/“

// out: ../mycss/

禁止导出

// out: false

vw与vh

vh单位尺寸
1. 确定设计稿对应的vh尺寸（1/100视口高度
  
  查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸（1/100 视口高度）
2. vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )
vw单位尺寸
1. 确定设计稿对应的vw尺寸（1/100视口宽度）
  查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸（1/100 视口宽度）
2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

响应式布局

max-width:(最大宽度–小于等于)

min-width:(最小宽度—大于等于)

@media (min-aspect-ratio:16 / 9) {
        .back-video{
            width: 100%;
            height: auto;
        }
      }
      /* 
      媒体查询:设置视频的宽度与高度的比例
      如果宽度与高度大于16:9
      */
@media (max-aspect-ratio:16 / 9) {
	.back-video{
	 	width: auto;
        height: 100vh;
        }
}

设置移动端最大宽度

max-width: 540px;
margin: 0 auto;
background: #fff;
/**/
@media (min-width:540px) {
  html{
      font-size:54px !important;
  }
}
body{
  background-color: #f4f4f4;
  max-width: 540px;
  margin: 0 auto;
}
.header{
  max-width: 540px;
  left: 50%;
  transform: translateX(-50%);
}

设置网页宽度小于多少时候隐藏盒子

@media (max-width:1000px) {
  .box{
      width:1000px;
  }
    .box:nth-child(2){
        display: none;
    }
}

原文作者：ELl

原文链接：https://ell-hsy.github.io/2022/05/02/css%E6%A0%B7%E5%BC%8F/

发表日期：May 2nd 2022, 9:12:46 pm

更新日期：May 2nd 2022, 10:43:17 pm

Next Post

html标签
Previous Post

前端初学者的自述

CATALOG

1. css样式–基础
2. css样式–布局
3. 移动web

Total : 4

Invalid date

Invalid date 前端初学者的自述

Invalid date

Invalid date html标签

Invalid date

Invalid date css样式

Invalid date

Invalid date 来自前端小白的自述