CSS3基础知识学习笔记

编程 · 2023-11-21 · 241 人浏览

字体

字体族

a {
  font-family: Microsoft YaHei, Heiti SC, sans-serif;
}

font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。

font-family属性最后设置一个字体族名，网页开发建议使用无衬线字体族（Sans-Serif）。

通用字体族：

  • Serif 衬线体
  • Sans-Serif 无衬线体
  • Cursive 手写体
  • Fantasy 夸张体
  • Monospace 等宽字体

使用Web Fonts：

@font-face {
  font-family: 'CustomFont';
  src: url(https://example.com/CustomFont.woff2) format('woff2');
}

font复合属性

复合属性连写的font格式：font:font-style font-weight font-size/line-height font-family;

必须按顺序书写，并且字号和字体值（后两个）必须书写，否则font属性不生效。

文本

行高

p {
  line-height: 1.6;
}

空白符

white-space属性设置如何处理元素内的空白，默认空白会被浏览器忽略。

值为 nowrap：文本不会换行，会在同一行上继续，直到遇到
标签为止。

值为 pre：空白会被保留，其行为方式类似 HTML 中的 

 标签。
值为 pre-wrap：保留空白符，正常换行。
值为 pre-line：合并空白符，保留换行符。
复合选择器
后代选择器
选中某元素的所有后代（包含儿子、孙子、重孙子），选择器之间用空格隔开。
/* 选中div下的a元素 */
div a {
  color: #000;
}
子代选择器
选中某元素的子代元素（最近的子级），选择器之间用>隔开。
div > a {
  color: #000;
}
并集选择器
选中多组标签设置相同的样式，选择器之间用逗号,隔开。
div,
a {
  color: #000;
}
交集选择器
选中同时满足多个条件的元素，选择器之间连写，没有任何符号。
div.box {
  color: #000;
}
兄弟选择器
/* 选中div后相邻的兄弟p元素 */
div + p {
  color: green;
}
/* 选中div后的所有兄弟p元素 */
div ~ p {
  color: green;
}
属性选择器
/* 选中具有title属性的元素 */
[title] {
  color: green;
}
/* 选中title属性值为hello的元素 */
[title="hello"] {
  color: green;
}
/* 选中title属性值以a开头的元素 */
[title^="a"] {
  color: green;
}
/* 选中title属性值以a结尾的元素 */
[title$="a"] {
  color: green;
}
/* 选中title属性值包含a的元素 */
[title*="a"] {
  color: green;
}
伪类选择器
伪类很像类，但不是类，是元素特殊状态的一种描述。伪类表示元素状态，选中元素的某个状态设置样式。
状态伪类
超链接一共有4个状态，给超链接设置状态时，需要按LVHA（LV哈）顺序书写。
  • :link 访问前
  • :visited 访问后
  • :hover 鼠标悬停
  • :active 点击时（激活）
结构伪类
根据元素的结构关系查找元素。
  • E:first-child 查找第一个E元素
  • E:last-child 查找最后一个E元素
  • E:nth-child(N) 查找第N个E元素（第一个元素N值为1）
  • :first-of-type 所有同类型兄弟元素中的第一个
  • :last-of-type 所有同类型兄弟元素中的最后一个
  • :nth-of-type(n) 所有同类型兄弟元素中的第n个
nth-child(公式)用法：
  • 2n：偶数标签
  • 2n+1：奇数标签（或2n-1）
  • 5n：找到5的倍数的标签
  • n+5：找到第5个以后的标签（-n+5为第5个以前的标签）
下面了解即可：
  1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个
  2. :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
  3. :only-child 选择没有兄弟的元素（独生子女）
  4. :only-of-type 选择没有同类型兄弟的元素
  5. :root 根元素
  6. :empty 内容为空元素（空格也算内容）
否定伪类
:not(选择器) 排除满足括号中条件的元素。
UI伪类
  1. :checked 被选中的复选框或单选按钮
  2. :enable 可用的表单元素（没有 disabled 属性）
  3. :disabled 不可用的表单元素（有disabled 属性）
目标伪类（了解）
:target 选中锚点指向的元素。
<style>
  div {
    background: gray;
    height: 300px;
  }
  div:target {
    background: green;
  }
</style>

<a href="#one">去看第1个</a>
<a href="#two">去看第2个</a>

<div id="one">第1个</div>
<br />
<div id="two">第2个</div>
语言伪类（了解）
:lang() 根据指定的语言选择元素（本质是看lang属性的值）。
伪元素选择器
作用：选中元素中的一些特殊位置。创建虚拟元素（伪元素），用来摆放装饰性的内容。
  • E::before 在E元素里面最前面添加一个伪元素
  • E::after 在E元素里面最后面添加一个伪元素
  • ::first-letter 选中元素中的第一个文字
  • ::first-line 选中元素中的第一行文字
  • ::selection 选中被鼠标选中的内容
  • ::placeholder 选中输入框的提示文字
必须设置content: "内容";属性，用来设置伪元素内容，如果没有内容，则内容留空即可。伪元素默认是行内显示模式，权重和标签选择器相同。
CSS三大特性
继承性
子级默认继承父级的文字控制属性。
层叠性
相同的属性会覆盖，即后面的属性覆盖全面的属性。不同的属性会叠加，即不同的属性都生效。
优先级
也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
规则：选择器优先级高的样式生效。
公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
叠加计算
如果是复合选择器，则需要权重叠加计算。
公式：(行内样式，id选择器个数，类选择器个数，标签选择器个数)
规则：从左往右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较。!important权重最高，继承权重最低。
显示模式
块级（block）：独占一行；宽高属性生效；默认宽度是父级的100%
行内（inline）：一行共存多个；宽高属性不生效；宽高由内容撑开
行内块（inline-block）：一行共存多个；宽高属性生效；宽高默认由内容撑开
盒子模型
盒子尺寸
盒子尺寸=内容尺寸+内边距尺寸+border尺寸。外边距margin不会影响盒子的大小，但会影响盒子的位置。
给盒子加border/padding会撑大盒子，解决方法有二：
  • 手动做减法，减掉border/padding的尺寸
  • 启动内减模式：box-sizing: border-box;
外边距问题
合并现象
垂直排列的兄弟元素，上下margin会合并，取两个margin中的较大值生效。
塌陷问题
父子级的标签，子级添加上外边距会产生塌陷问题，导致父级一起向下移动。
解决方法：
  • 取消子级margin，父级设置padding（推荐）
  • 父级设置overflow: hidden;
  • 父级设置border-top
行内元素边距问题
行内元素添加margin和padding，无法改变元素垂直位置。
解决方法：给行内元素添加行高（line-height）来改变垂直位置。
圆角
正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%。
div {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 100px;
  /* border-radius: 50%; */
}
胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半。
布局小技巧
  1. 行内元素、行内块元素，可以被父元素当做文本处理。
    即：可以像处理文本对齐一样去处理：行内、行内块在父元素中的对齐。例如：text-align、line-height、text-indent等。
  2. 如何让子元素，在父亲中水平居中：
    若子元素为块元素，给父元素加上：margin: 0 auto; 。
    若子元素为行内元素、行内块元素，给父元素加上：text-align:center 。
  3. 如何让子元素，在父亲中垂直居中：
    若子元素为块元素，给子元素加上：margin-top ，值为：(父元素content －子元素盒子总高) / 2。
    若子元素为行内元素、行内块元素：让父元素的height = line-height ，每个子元素都加上：verticalalign: middle; 。
    补充：若想绝对垂直居中，父元素 font-size 设置为0。
元素之间的空白问题
产生的原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：
  1. 方案一：去掉换行和空格（不推荐）。
  2. 方案二：给父元素设置 font-size: 0 ，再给需要显示文字的元素，单独设置字体大小（推
    荐）。
行内块的幽灵空白问题
产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
方案一：给行内块设置vertical，值不为baseline即可，设置为 middel、bottom、top均可。
方案二：若父元素中只有一张图片，设置图片为 display: block。
方案三：给父元素设置 font-size: 0。如果该行内块内部还有文本，则需单独设置fontsize。
浮动（了解）
布局相关技术有：
  • 常规流（文档流）：行级、块级、表格布局、FlexBox、Grid 布局
  • 浮动
  • 绝对定位
清除浮动推荐使用双伪元素法：
/* before解决外边距塌陷问题 */
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

/* after清除浮动 */
.clearfix::after {
  clear: both;
}
Flex布局
给父元素设置display: flex;，子元素可以自动挤压或拉伸。
组成
Flex组成部分：
  • 弹性容器（创建容器：display: flex;）
  • 弹性盒子
  • 主轴（默认在水平方向，对齐方式：justify-content）
  • 侧轴/交叉轴（默认在垂直方向，对齐方式：align-items所有弹性盒子、align-self某个弹性盒子）
其他属性
  • 修改主轴方向：flex-direction属性
  • 弹性伸缩比：flex属性（控制弹性盒子主轴方向的尺寸，表示占用父级剩余尺寸的份数，属性值：整数数字）
  • 弹性盒子换行：flex-wrap属性（属性值：wrap换行，nowrap不换行）
  • 行对齐方式：align-content属性（对单行弹性盒子不生效）
定位
灵活改变盒子在网页中的位置，属性：position。设置盒子的位置用边偏移属性：left、right、top、bottom。
相对定位
改变位置的参照物是自己原来的位置，不脱标（占位），标签显示模式不变。
div {
  position: relative;
  top: 100px;
  left: 100px;
}
绝对定位
  • 脱标（不占位）
  • 参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，则参照浏览器可视区改位置
  • 显示模式会改变：宽高生效，具备了行内块的特点
工作中一般不单独使用相对或绝对定位，都是配合着使用：子级绝对定位，父级相对定位（子绝父相）。
定位居中
首先设置绝对定位，水平垂直边偏移为50%，最后transform: translate(-50%, -50%)。
div {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 50% 就是自己宽高的一半 */
  transform: translate(-50%, -50%);
}
固定定位
元素的位置在网页滚动时不会改变。
  • 脱标（不占位）
  • 参照物：浏览器窗口
  • 显示模式特点：宽高生效，具备了行内块的特点
z-index
即堆叠层级，默认按照标签书写顺序，后来者居上。
z-index默认是0，取值越大显示顺序越靠上。
总结
定位模式属性值是否脱标显示模式参照物
相对定位relative否保持标签原有显示模式自己原来位置
绝对定位absolute是行内块特点已经定位的祖先元素；浏览器可视区
固定定位fixed是行内块特点浏览器窗口
实用代码
清除默认样式
* {
  margin: 0;
  padding: 0;
}
版心
/* 版心 */
.wrapper {
  margin: 0 auto;
  width: 1200px;
}
CSS精灵
即CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再精确定位出背景图片的位置。
优点：减少服务器被请求次数，减轻服务器压力，提高页面加载速度。
实现步骤：
  • 创建盒子，盒子尺寸与小图尺寸相同
  • 设置盒子背景图为精灵图
  • 添加background-position属性，改变背景图位置
    div {
width: 100px;
height: 100px;
background-color: pink;
background-image: url(./123.jpg);
background-position: -50px -50px;
}
字体图标
展示的是图标，本质是字体。作用是在网页中添加简单的、颜色单一的小图标。
字体图标下载：https://www.iconfont.cn/
垂直对齐方式
属性名：vertical-align，默认是基线对齐（baseline），其他属性值：top（颈部对齐）、middle（居中对齐）、bottom（顶部对齐）。
浏览器把行内块、行内标签当做文字处理，默认按基线对齐。
过渡transition
可以为一个元素在不同状态之间切换的时候添加过渡效果。
img {
  width: 100px;
  height: 100px;
  transition: all 1s;
}

img:hover {
  width: 200px;
  height: 200px;
}
移动
平面转换transform
平面转换又叫2D转换，改变盒子在平面内的形态（平移translate()、旋转rotate()、缩放scale()、倾斜skew()），一般与过渡配合使用，为元素添加动态效果。
线性渐变
属性：background-image: linear-gradient();
background-image: linear-gradient(
  渐变方向（to 方位名词 或 角度度数）,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);
如果不指定方向，默认从上到下渐变：
  • to right：从左侧开始的线性渐变
  • to bottom right：从左上角到右下角的线性渐变
  • 45deg：45°的线性渐变
/* 蓝色渐变到红色 */ 
linear-gradient(blue, red);
/* 蓝色占80%渐变到红色 */ 
linear-gradient(blue 80%, red);
/* 多个终止色 */
linear-gradient(blue, red, yellow, green, orange);
/* 透明色 */
linear-gradient(transparent, rgba(0, 0, 0, 0.5));
径向渐变
属性：background-image: radial-gradient();
background-image: radial-gradient(
  半径 at 圆心位置（半径可以是2条，则为椭圆）,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);
空间转换
视距perspective
指定了观察者与Z=0平面的距离，为元素添加透视效果（近大远小、近实远虚）。
perspective属性要添加给直接父级，取值范围800-1200（经验值）。
.father {
  perspective: 1000px;
}

.son {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  background-color: rebeccapurple;
  transition: all 0.5s;
}
.son:hover {
  transform: translateZ(-300px);
}
旋转
左手法则：根据旋转方向确定取值正负。左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向。
  • rotateX(60deg)
  • rotateY(60deg)
  • rotateZ(60deg)
立体呈现
作用是设置元素的子元素是位于3D空间还是平面中，属性名：transform-style，属性值：preserve-3d（子级处于3D空间），flat（子级处于平面中）。
动画
动画animation是加强版的过渡。实现步骤：
  1. 定义动画
  2. 使用动画
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态。
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
  /* 使用动画 */
  animation: change 1s;
}
/* 定义动画：宽度从100变化到800 */
@keyframes change {
  from {
    width: 100px;
  }
  to {
    width: 800px;
  }
}
/* 定义动画 另一种写法 */
@keyframes change2 {
  0% {
    width: 100px;
    height: 100px;
  }
  20% {
    width: 300px;
    height: 200px;
  }
  100% {
    width: 800px;
    height: 300px;
  }
}
屏幕分辨率
  • 物理分辨率：即硬件分辨率，出厂设置好的
  • 逻辑分辨率：缩放调节的分辨率，由软件/驱动设置（写代码参考逻辑分辨率）
长度单位
  1. px：像素
  2. em：相对于当前元素或其父元素font-size的倍数
  3. rem：相对于根元素font-size的倍数，html标签就是根，1rem = 1HTML字号大小
  4. %：相对父元素计算
目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10。
vw与vh
是相对单位，相对视口的尺寸（viewport width，viewport height）计算结果。
1vw = 1/100视口宽度，1vh = 1/100视口高度。
媒体查询
手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
媒体查询能够检测视口的宽度，然后编写差异化的CSS样式。当某个条件成立，执行对应的CSS样式。
@media (width: 500px) {
  body {
    background-color: red;
  }
}
完整写法（了解）
@media 媒体类型 and (媒体特性) { CSS代码 }
媒体类型用来区分设备类型：
  • 屏幕 - screen - 带屏幕的设备
  • 打印预览 - print - 打印原来模式
  • 阅读器 - speech - 屏幕阅读模式
  • 不区分类型 - all - 默认值，包括以上3种情形
媒体特性用来描述媒体类型的具体特征：
  • 视口宽高 - width、height
  • 视口最大/最小宽高 - max-width、max-height、min-width、min-height
  • 屏幕方向 - orientation（portrait竖屏、landscape横屏）
逻辑操作符：and、only、not。
CSS 资源：
CSS
2023 - 2024 三毛笔记. All Rights Reserved.
Theme Jasmine by Kent Liao
闽公网安备35020602002927 | 萌ICP备20242345号