CSS3基础知识学习笔记
字体
字体族
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个以前的标签)
下面了解即可:
- :nth-last-child(n) 所有兄弟元素中的倒数第 n 个
- :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
- :only-child 选择没有兄弟的元素(独生子女)
- :only-of-type 选择没有同类型兄弟的元素
- :root 根元素
- :empty 内容为空元素(空格也算内容)
否定伪类
:not(选择器) 排除满足括号中条件的元素。
UI伪类
- :checked 被选中的复选框或单选按钮
- :enable 可用的表单元素(没有 disabled 属性)
- :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%; */
}
胶囊形状:给长方形盒子设置圆角属性值为 盒子高度的一半。
布局小技巧
- 行内元素、行内块元素,可以被父元素当做文本处理。
即:可以像处理文本对齐一样去处理:行内、行内块在父元素中的对齐。例如:text-align、line-height、text-indent等。 - 如何让子元素,在父亲中水平居中:
若子元素为块元素,给父元素加上:margin: 0 auto; 。
若子元素为行内元素、行内块元素,给父元素加上:text-align:center 。 - 如何让子元素,在父亲中垂直居中:
若子元素为块元素,给子元素加上:margin-top ,值为:(父元素content -子元素盒子总高) / 2。
若子元素为行内元素、行内块元素:让父元素的height = line-height ,每个子元素都加上:verticalalign: middle; 。
补充:若想绝对垂直居中,父元素 font-size 设置为0。
元素之间的空白问题
产生的原因:行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。
解决方案:
- 方案一:去掉换行和空格(不推荐)。
- 方案二:给父元素设置 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是加强版的过渡。实现步骤:
- 定义动画
- 使用动画
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;
}
}
屏幕分辨率
- 物理分辨率:即硬件分辨率,出厂设置好的
- 逻辑分辨率:缩放调节的分辨率,由软件/驱动设置(写代码参考逻辑分辨率)
长度单位
- px:像素
- em:相对于当前元素或其父元素font-size的倍数
- rem:相对于根元素font-size的倍数,html标签就是根,1rem = 1HTML字号大小
- %:相对父元素计算
目前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 资源:
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »