部分CSS笔记

简介

网页组成部分：
HTML------------结构
CSS--------------表现
JavaScript------行为

样式

①内联样式：只对一个标签生效，在标签内通过style属性设置（不方便）
②内联样式表：在head标签中的style标签中（不能跨页面使用）
③外部样式表：通过link标签引入，通过属性rel="stylesheet"样式表来设置

选择器

解释

组成：
选择器------选中页面中的指定元素
声明块------指定要为元素设置的样式。由一个个声明组成的名值对结构（如：background:red;）

类别

①元素选择器
element{…}
②id选择器
#id{…}
③交集选择器
选中同时符合多个条件的元素，有元素选择器时，先写元素选择器
选择器1 选择器2 … 选择器n{…}
④选择器分组
选择器1，选择器2，…，选择器n{…}
⑤子元素选择器
父元素>子元素{…}
⑥后代选择器
父元素 子元素{…}
⑦选择下一个兄弟
前一个兄弟元素 + 下一个兄弟元素{…}
⑧属性选择器
1）[属性名]--------------------选含有指定属性的元素
2）[属性名=“属性值”]-------完全符合的元素
3）[属性名^=“属性值”]------以该属性值开头的元素
4）[属性名$=“属性值”]------以该属性值结尾的元素
5）[属性名*=“属性值”]------含有该属性值的元素
⑨ 伪类选择器
不存在的类
1）:first-child------第一个子元素
2）:last-child------最后一个子元素
3）:nth-child()------第n个子元素[even或2n时，偶数选中；odd或2n+1时，奇数选中]
4）:first-of-type------同类型元素中第一个
5）:last-of-type------同类型元素中最后一个
6）:nth-of-type()------同类型中元素第n个(以元素为中心)
7）:not----------------否定伪类
8）empty-------------空
一个包裹器下同一类元素时，nth-child()和:nth-of-type()效果一样
⑩超链接的伪类
顺序：LoVeHAte
1）:link------没访问过的链接
2）:visited–访问过的链接
3）:hover—鼠标移入的样式
4）:active—鼠标点击的样式
其中3）和4）为所有元素都可用的伪类
⑪伪元素选择器
不存在的元素(特殊位置)
1）::first-letter------第一个字母
2）::first-line--------第一行
3）::selection-------选中的内容
4）::before----------元素开始位置
5）::after------------元素结束位置
其中4）和5）必须结合content属性使用
content表示通过css凭空添加一个内容

继承

①方便开发，只需写一次就可以让所有元素都具有该样式
②并不是所有的样式都会继承（背景相关的、布局相关的等）

选择器权重

权重：
读者重要声明>创作者重要声明>创作者正常声明>读者正常声明》用户代理声明
层叠：
①找出所有相关的规则，这些规则都包含一个选择器
②计算声明优先级
先按来源顺序；再按选择器特殊性排序；最后按顺序排序
权重比较：
①比较优先级，需要把所有选择器优先级相加计算
②分组选择器单独计算
③选择其累加不会超过其最大的数量级
④优先级相同使用靠下的（覆盖）
优先级排序：
！important>内联样式>id选择器>类和伪类选择器>元素和伪元素选择器>通配选择器>继承
优先级的计算：
！important----------------- 最高优先级
内联样式--------------------（1,0,0,0）
id选择器---------------------（0,1,0,0）
类和伪类选择器------------（0,0,1,0）
元素和伪元素选择器------（0,0,0,1）
通配选择器------------------（0,0,0,0）
继承---------------------------- 没有优先级

单位

长度单位：

• 像素 ————越小越清晰，同样的像素在不同的设备下显示效果不一样
• 百分比————相对于父元素属性的百分比，随父元素改变而改变
• em——————相对于父元素字体大小来计算，随字体改变：1 em=1 font-size
• rem——————相对于根元素的字体大小来计算
• vw———————相对于视口计算

颜色单位：

• 颜色名
• rgb值
  Red,Green,Blue
  0-255之间或0%-100%之间
  RGB(0,0,0)————–黑色
  RBG(255,255,255)—白色
• rgba值
  A是不透明度
  0完全透明，1完全不透明，0.5半透明
• 十六进制
  #红黄蓝（相对应的十六进制数）
• hsl值
  H——色相（0,360）
  S——饱和度（0%，100%）
  L——亮度（0%，100%）
• hsla值

文档流（normal-flow）

• 是一个位置，最底下一层称为文档流，网页默认都在文档流上
• 元素在文档流中的特点
  ①块元素
  独占一行（自上向下排列）
  默认宽度是父元素全部
  默认高度被子元素撑开
  ②行内元素
  不会独占一行，只占自身大小
  自左向右水平排列
  默认宽高被内容撑开

盒模型（box-model）

①决定盒子大小
内容区————content（元素中所有子元素和文本内容都在内容区排列）
内边距————padding
边框—————border
外边距————margin
②边框的属性
边框大小影响盒子大小
每个都最多有四个值，各个值的意义：
4个：上 右 下 左
3个：上 左右 下
2个：上下 左右
1个：全部
1）宽度——————border-width 默认3px
四个方向的宽度
border-top-width
border-bottom-width
border-left-width
border-right-width
2）颜色——————border-color 默认黑色
3）样式——————border-style 默认none
其他样式
实线——solid
点状——dotted
虚线——dashed
双线——double
4）简写属性——————border
四个方向的简写属性
border-top
border-bottom
border-left
border-right
③内边距的属性
会影响盒子的大小
背景颜色会拉伸到padding
有背景颜色
简写属性——padding
四个方向的内边距
padding-top
padding-bottom
padding-left
padding-right
④外边距
不会影响盒子可见框大小
影响盒子位置（左上移动自己，右下移动别人）
影响盒子实际占用空间
简写属性——margin
四个方向的外边距
margin-top ————正值向下，负值向上
margin-bottom ———正值下方元素向下
margin-left—————正值向右，负值向左
margin-right————默认不产生效果
⑤可见框大小=内容区+内边距+边框

水平方向的布局

一个元素在其父元素中必须满足

• margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区的宽度
• width默认为auto
• 若7个值中没有auto时，则自动调整margin以满足上述等式
• 可以设为auto的值：width，margin-left,margin-right
  可以自动调整为auto的
  1）如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置auto的外边距会自动为0
  2）三个值为auto则宽度最大，其他为0
  3）两个外边距为auto，宽固定，则外边距设置为相同的值
  4）元素在父元素中水平居中：

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

垂直方向的布局

• 默认父元素高度被内容撑开
• 子元素在父元素内容区排列，若子元素大小超过父元素，则子元素溢出
• 使用overflow设置父元素如何对溢出的子元素进行处理：
  overflow————overflow-x和overflow-y的属性：
  1）visible————默认，溢出在父元素外部显示
  2）hidden————隐藏（溢剪没）
  3）scroll————滚动
  4）auto————根据需要生成滚动条
• 垂直方向外边距的折叠/重叠
  1）相邻垂直方向外边聚会发生重叠现象：
  兄弟元素：
  两者正值，取较大值
  一正一负，取两者和
  两者负值，取绝对值大的
  父子元素：
  子元素传给父元素margin-top
  2）水平方向边距不会合并

行内元素的盒模型

• 行内元素不支持width和height
• 可以设置padding / border / margin，但垂直方向padding不影响页面布局

display

设置显示类型：
inline——————行内元素
block——————块元素
inline-block————行内块元素（既可以设置宽高，又不会独占一行）
table——————表格
none——————不显示

visibility

设置显示状态：
visible————默认，显示
hidden————隐藏，但是位置依然占据

默认样式

浏览器设置

• 会影响页面布局，通常会去除默认样式（PC端页面）
• 去除项目符号：list-style:none;
• 重置样式表
  1）reset.css——去除默认样式
  2）normal.css——统一默认样式

盒子的大小

box-sizing
设置盒子尺寸计算方式，width 和 height作用的地方
可选值：

content-box	默认，宽高设置为内容区大小
border-box	宽高设置为可见框大小

可见框

• 可见框宽度=border-left-width+padding-left+width+padding-right+border-right-width
• 可见框高度=border-top-width+padding-top+height+padding-bottom+border-bottom-width
• 可见框不包括外边距margin

轮廓、阴影和圆角

①轮廓——outline
用来设置元素的轮廓线，用法同border
不影响可见框大小
不影响布局
②阴影——box-shadow
不影响布局
五个参数：
1.水平偏移量，正右负左
2.垂直偏移量，正上负下
3.阴影模糊半径，数值越大越模糊
4.阴影颜色
5.阴影内映（inset）
③圆角——border-radius
设置半径大小
参数：
一个值时，圆的半径
两个值时，第一个是水平半径，第二个是垂直半径
四个方向：
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

border-radius:50%;
//表示一个圆

每个参数可以设置四个值，顺序：
4个值：左上 右上 右下 左下
3个值：左上 右上/左下 右下
2个值：左上/右下 右上/左下
1个值：全部方向

浮动——float

使元素向父元素左侧或右侧移动

• 可选值：
  none————默认，不浮动
  left—————向左浮动
  right————向右浮动
• 设置浮动后，水平布局等式不强制成立
• 设置浮动后，元素会完全从文档流中脱离，不占位置

浮动的特点

• 浮动元素会脱离文档流，不占位置，下边的元素自动上移
• 设置浮动后元素会向父元素的左侧或右侧移动
• 浮动元素默认不会从父元素中移出
• 浮动元素向左或向右移动时，不会超过他前边的其他浮动元素
• 若浮动元素上边是一个没有浮动的元素，则浮动元素无法上移
• 浮动元素不会超过他上边的兄弟元素，最多和他一样高
• 浮动元素不会遮挡文字，文字会自动环绕在浮动元素周围，可实现文字环绕图片功能
• 脱离文档流特点
  1）块元素不独占一行
  2）块元素宽高被内容撑开
  3）行内元素变成块元素

简单的布局

布局元素尽量用块元素

①垂直：直接写块

header	头部
main	主体
nav	导航
article	内容
aside	边栏
footer	底部

②水平：写块后，为元素设置float，既可水平方向排列

clear

清除浮动对当前元素产生的影响
可选值：
left————清除左侧浮动元素对当前元素的影响
right————清除右侧浮动元素对当前元素的影响
both————清除两侧中最大影响的那侧
原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素影响

//::after解决高度塌陷
.box1::after{
			content:'';
			display:block;
			clear:both;
}
//::before解决外边距重叠
.box1::before{
			content:'';
			display:table;
}

clearfix

clearfix可以同时解决高度塌陷和外边距重叠

//经典多功能类
.clearfix::before,.clearfix::after{
				content:'';
				display:table;
				clear:both;
}

将box1后添加一个空的元素让它变成块，添加在box1最后的子元素后面，清除浮动元素对下面的影响。

BFC（Block Formatting Context）

块级格式化上下文/块级格式化环境

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

元素开启BFC后的特点

①开启BFC的元素不会被浮动元素覆盖
②开启BFC的元素，子元素和服元素外边距不会重叠
③开启BFC的元素可以包含浮动的子元素

开启元素BFC的特殊方式

①设置元素的浮动
②将元素设为行内块元素
③将元素overflow设置为一个非visible的值
常用下面两种方式开启BFC，使其包含浮动元素：
overflow：hidden；
overflow：auto；

定位——position

• 定位是一种更高级的不剧手段
• 通过定位可将元素摆放到页面任意位置
• 可选值：

static	默认，不开启定位
absolute	绝对定位
relative	相对定位
fixed	固定定位
stickey	粘滞定位

偏移量——offset

• 元素开启定位，使用偏移量设置位置
• 可选值：

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

包含块

• 正常情况下，包含块是当前元素最近的祖先元素
• 绝对定位的包含块是离他最近开启定位的祖先元素
• 如果所有祖先元素都没开启定位，则根元素（html，也称厨师包含块）为他的包含块

绝对定位

特点：

• 元素开启绝对定位后，不设置偏移量元素位置不发生变化
• 开启绝对定位后，元素会从文档流中脱离
• 绝对定位改变元素性质，行内变块，宽高被内容撑开
• 绝对定位会提升元素一个层级
• 绝对定位元素是相对于其包含块进行定位

相对定位

特点：

• 元素开启相对定位后，不设置偏移量，元素不发生任何变化
• 相对定位是参照自身在文档流中的位置进行定位
• 相对定位会提升元素的层级（层级越高越优先显示）
• 相对定位元素不会使元素脱离文档流
• 相对定位不会改变元素的性质

固定定位

• 多用于网页中的小广告
• 是一种绝对定位，大多数特点与绝对定位一样
• 唯一不同：固定定位永远参照浏览器视口进行定位，不会随滚动条滚动

粘滞定位（了解）

• 多用于类似导航条的网页
• 特点和相对定位基本一致
• 唯一不同：粘滞定位可以在元素到达某个位置时将其固定

绝对定位元素的位置

①水平布局

• 包含块内容区宽度=left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
• 可设为auto的值
  margin-left,margin-right,left,right
• 当我们开启绝对定位后，水平布局灯饰要添加left和right（规则和之前相同）
• 当发生过度约束：如果9个值中没有auto，则自动调整right以使等是满足
• left 和 right默认为auto，如果不知道 left 和 right 值时，若等式不满足，则自动调整 left 和 right
  ②垂直布局（同水平布局）
• 包含块内容区高度=top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom
  ③水平居中

{
		left:0;
		right:0;
		margin-left:auto;
		margin-right:auto;
}

④垂直居中

{
		top:0;
		bottom:0;
		margin-top:auto;
		margin-bottom:auto;
}

⑤垂直水平居中

{
		left:0;
		right:0;
		top:0；
		bottom:0;
		margin-:auto;
}

元素的层级——z-index

• 整数值，越大越上层
• 父元素永远遮不住子元素

字体族

字体相关样式

• color———— 字体颜色
• font-size———字体单位：em（当前元素的一个font-size） rem（根元素的一个font-size）
• font-family———字体族（字体族），建议使用的字体（可同时指定多个字体，用逗号隔开）
  字体生效优先使用第一个，第一个无效使用第二个，以此类推
  字体类别，浏览器自动使用具体的字体
  可选值：
  serif————衬线字体
  sans-serif——非衬线字体
  monospace——等宽字体（代码常用）
• font-face——提供使用的字体，可将服务器中字体直接提供给用户使用，把字体从服务器下载下来
  font-family——指定字体的名字（起个名）
  src:url()——服务器中字体路径
  可能产生的问题：加载速度，版权，字体格式

图标字体

• 可以通过图片引入图标（不灵活）
• 将图标直接设置为字体，通过font-face形式引入字体
• fontawsome使用图标字体

例：
class:"fas fa-bell";
class:"fab fa-accessible-icon";
对应css要添加：
fab
	font-family:'Font Awsome 5 Brands';
fas
	font-family:'Font Awsome 5 Free';
	font-weight:900;

行高——line-height

• 文字占有的实际高度
• 行高可以指定一个大小（单位：px,em），可以是一个整数，即字体的指定倍数

字体框

• 字体所在的格子
• 设置font-size实际上是设置字体框的高度
• 行高在字体框的上下平均分配
• 可将行高设置和高度一样的值，使单行元素在一个元素中垂直居中
• 行间距=行高-字体大小

字体的简写属性

font

可设置字体相关的所有属性
语法：font:字体大小/行高 字体族；
行高可忽略不写，不写使用默认值

font-weight

字重，字体的粗细
可选：

normal	正常
italic	斜体

下拉框

当鼠标移入location时，让city-list显示
hover给被显示元素的父元素
.location:hover .city-list{display:block;}
子元素设置绝对定位使其不占文档位置（脱离文档流）

文本的样式

text-align

文字水平对齐
可选

left	左对齐
right	右对齐
center	居中对齐
justify	两端对齐

vertical-align

设置元素垂直对齐的方式
可选

base-line	默认，基线对齐
top	顶部对齐
bottom	底部对齐
middle	居中对齐，元素的中线相对于字母x的中线对齐

• p中img通过设置样式为vertical-align中除了base-line的值，即可把边框和img之间的缝消除

其他文本样式

text-decoration

设置文本修饰
可选

none	什么都没有
underline	下划线
line-through	删除线
overline	上划线

white-space

设置网页如何处理空白
可选

normal	正常
nowrap	不换行
pre	保留空白

溢出显示省略号

	//三兄弟不可缺一且包裹区域不能让子元素撑开
		white-space:nowrap;//不换行
		overflow:hidden;//将溢出隐藏
		text-overflow:ellipisis;//将文本溢出，用省略号显示

背景

background-color

背景颜色

background-image

背景图片

背景颜色和背景图片可以同时设置

• 同时设置背景颜色变成背景图片的背景色
• 背景图片小于元素，在元素中背景图片平铺
• 背景图片大于元素，在元素中背景图片有一部分无法正常显示

background-repeat

背景重复方式
可选

repeat	默认.x，y轴双向重复
repeat-x	沿x轴方向重复
repeat-y	沿y轴方向重复
no-repeat	不重复

background-position

背景图片设置

• 通过top，bottom，center，left，right几个方位的词来设置（相当于把图片变成一个九宫格）
• 使用方位词时，必须要同时指定两个值，若只写一个值，第二个默认center
• 通过偏移量指定
  水平偏移量 垂直偏移量

background-clip

设置背景范围
可选

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

background-origin

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

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

background-size

设置背景图片的大小
第一个值：宽度
第二个值：高度（只写第一个值，第二个值默认auto）
可选

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

background-attachment

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

scroll	默认，背景图会虽元素移动
fixed	背景图不会随元素移动

background简写属性

没有顺序要求，也没有必须写的属性

• background-size必须卸载background-position后边，且中间用斜线隔开
  background-position/background-size
• background-origin卸载background-clip前边

背景（特殊样式）

①截取宽度1px的背景（前提高度相同）用ps截图
②将截取的图片在div中水平平铺
图片属于网页的外部资源，需要浏览器单独发送请求加载
浏览器加载外部资源是按需加载，用则加载，不用不加载

雪碧图（CSS-Sprite）

• 解决图片闪烁问题，可将多个小图保存在一个大图中，通过调整background-position来显示图片，这样图片会同时加载到网页中，被称为CSS-Sprite，这种图成为雪碧图
  使用步骤：
  ①确定要使用的图标
  ②测量图标的大小
  ③根据测量的结果创建一个元素
  ④将雪碧图设置为元素的背景图片
  ⑤设置偏移量以显示正确的图片
  特点：
  一次性将多个图片加载进页面，降低请求次数，加快访问速度，提升用户体验。

渐变

• 通过渐变可以设置复杂的背景颜色，可实现从一个颜色向其他颜色过渡的效果
• 渐变是图片，通过background-image来设置

linear-gradient()

线性渐变，颜色沿一条直线发生变化

例：
linear-gradient(red,yellow);
//红色开头，黄色结尾，中间是过渡

radial-gradient()

径向渐变，放射性效果

• 默认情况下径向渐变的形状根据元素的形状来计算
  正方形->原型
  长方形->椭圆形
  也可手动指定径向渐变的大小
• 渐变开头可指定渐变方向

to left/right	向左/右
to top/bottom	向上下
deg	度数
turn	圈数

• 可同时指定多个颜色，多个颜色默认平均分布，也可以手动指定渐变分布情况