Spring-_-Bear 的 CSDN 博客导航
一、认识 CSS
-
CSS(Cascading Style Sheets)
简介:层叠样式表,属于一种标记语言,用于给HTML
结构设置样式,如文字大小、背景颜色、元素宽高等。 -
CSS 的编写位置:
-
行内样式:也称为内联样式,写在标签的
style
属性中。只能控制当前标签的样式,样式不可复用;没有体现结构与样式分离的思想;仅仅针对当前元素添加简单样式时才偶尔使用。<body> <h1 style="color: red; font-size: 60px;">Spring-_-Bear 的 CSDN 博客</h1> </body>
-
内部样式:写在
html
页面内部,将所有的 CSS 代码抽取出来单独放在style
标签中。style
标签理论上可以放在HTML
文档的任何地方,但一般都放在head
标签中。此种写法样式可以复用、代码结构清晰,但仍然存在多个HTML
页面无法复用、结构与样式未完全分离的问题。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>内部样式</title> <style> h1 { color: red; font-size: 60px; } </style> </head> <body> <h1>Spring-_-Bear 的 CSDN 博客</h1> </body> </html>
-
外部样式:写在单独的
.css
文件中,随后在HTML
文件中通过link
标签引入使用。此种方式样式可以复用,代码层次清晰、可触发浏览器的缓存机制,实现了结构与样式的完全分离,这是实际开发过程中最推荐的使用方式。/* css/index.css */ h1 { color: red; font-size: 60px; }
<!-- index.html --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外部样式</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <h1>Spring-_-Bear 的 CSDN 博客</h1> </body> </html>
-
-
样式优先级:
行内样式 > 内部样式 = 外部样式
,并且后写的样式会覆盖先写的样式,此所谓后来者居上
原则。详见2.3
小节 -
CSS 语法规范:由选择器和声明块两部分组成。选择器用于找到要添加样式的元素,声明块用于设置具体的样式。可使用
/* */
为 CSS 代码添加注释。 -
CSS 代码风格:
-
展开风格:开发时推荐,便于维护和调试
h1 { color: red; font-size: 60px; }
-
紧凑风格:上线时推荐,可减小文件体积。项目上线前,可通过打包工具将展开风格的代码转换成紧凑风格,这样可以减少文件体积,节约网络流量的同时让用户的网页打开速度更快
h1{ color:red;font-size:60px;}
-
-
CSS 三大特性:
- 层叠性:发生样式冲突时根据一定的规则进行样式的层叠覆盖
- 继承性:元素自动继承其父元素、或其祖先元素上所设置的某些样式,遵循就近原则。详见
4.5
小节 - 优先级:发生样式冲突时需根据样式的优先级规则进行样式覆盖,详见
2.3
小节
-
CSS3
新特性:- 更加实用的选择器:动态伪类选择器、目标伪类选择器、伪元素选择器等
- 更好的视觉效果:圆角、阴影、渐变等
- 丰富的背景效果:多个背景图片、新增若干与背景相关的属性等
- 全新的布局方案:弹性盒子
Web 字体
:可以显示用户电脑上没有安装的字体- 增强颜色:如
HSL
、HSAL
和RGBA
等颜色模式,并支持控制颜色透明度 - 增加
2D
和3D
变换:支持旋转、扭曲、缩放、平移等 - 动画与过渡效果:让效果的变化更具有流线性和平滑性
-
CSS3
私有前缀:W3C
标准所提出的某个CSS
特性,在被浏览器正式支持之前,浏览器厂商会根据浏览器的内核使用私有前缀来测试该CSS
特性,在浏览器正式支持该特性后,就不需要私有前缀了。CSS3
兼容性查询网址:https://caniuse.com浏览器 内核引擎 私有前缀 Chrome Blink -webkit- Safari WebKit -webkit- Firefox Gecko -moz- Edge Blink -webkit- div { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; }
二、选择器
2.1 四大基本选择器
-
通配选择器:用于选中所有元素
* { color: orange; font-size: 40px; }
-
元素选择器:为某种元素统一设置样式
h1 { color: orange; font-size: 40px; } p { color: blue; font-size: 60px; }
-
类选择器:根据元素的
class
属性值来选中某些元素<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>类选择器</title> <style> .title { color: orange; font-size: 40px; } .description { background-color: aqua; } </style> </head> <body> <h1 class="title description">Spring-_-Bear 的 CSDN 博客</h1> </body> </html>
-
ID 选择器:根据元素的
id
属性值来精准地选中某个元素<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>类选择器</title> <style> #title { color: orange; font-size: 40px; } </style> </head> <body> <h1 id="title">Spring-_-Bear 的 CSDN 博客</h1> </body> </html>
2.2 八大复合选择器
复合选择器:建立在基础选择器之上,由多个基础选择器通过不同的方式组合而成,可以在复杂的结构中快速而准确的选中目标元素。
-
交集选择器:选中同时符合多个条件的元素。存在标签名时,标签名必须写在最前面
/* 选中类名为 beauty 的 p 元素(常用) */ p.beauty { color: blue; } /* 选中类名包含 rich 和 beauty 的元素 */ .rich.beaury { color: green; }
-
并集选择器:也称为分组选择器。选取多个选择器所选择到的元素
/* 选择 id 为 peiqi,或类名为 rich,或类名为 beauty 的元素 */ #perqi, .rich, .beauty { font-size: 40px; border-color: skyblue; }
-
后代选择器:选中指定元素中符合要求的后代元素
/* 选中 ul 中的所有 li */ ul li { color: red; } /* 选中 ul 中所有 li 中的所有 a */ ul li a { color: orange; } /* 选中类名为 subject 元素中的所有 li */ .subject li { color: blue; } /* 选中类名为 subject 元素的所有类名为 front-end 的 li */ .subject li.front-end { color: green; }
-
子代选择器:又称为子元素选择器或子选择器。选中指定元素中符合要求的儿子元素
/* 选中 div 中的子代 a 元素 */ div>a { color: red; } /* 选中类名为 person 元素的子代 a 元素 */ .person>a { color: red; }
-
兄弟选择器:两种兄弟选择器选择的都是
“下铺”
兄弟-
相邻兄弟选择器:选中指定元素后符合条件的相邻兄弟元素,简记为 “睡在我下铺的兄弟”
/* 选中 div 后相邻的兄弟 p 元素 */ div+p { color: red; }
-
通用兄弟选择器:选中指定元素后符合条件的所有兄弟元素,简记为 “睡在我下铺的所有兄弟”
/* 选中 div 后的所有的兄弟 p 元素 */ div~p { color: red; }
-
-
属性选择器:选中属性值符合一定要求的元素
语法 说明 [属性名]
选中具有某个属性的元素 [属性名="值"]
选中包含某个属性,且属性值等于指定值的元素 [属性名^="值"]
选中包含某个属性,且属性值以指定值开头的元素 [属性名$="值"]
选中包含某个属性,且属性值以指定值开结尾的元素 [属性名*="值"]
选中包含某个属性,且属性值包含指定值的元素 /* 选中具有 title 属性的 div */ div[title] { color: red; } /* 选中 title 属性值为 header 的 div */ div[title="header"] { color: green; } /* 选中 title 属性值以 s 开头的 div */ div[title^="s"] { color: aqua; } /* 选中 title 属性值以 r 结尾的 div */ div[title$="r"] { color: skyblue; } /* 选中 title 属性值包含 bear 的 div */ div[title*="bear"] { color: antiquewhite; }
-
伪类选择器(
CSS3
新增):选中特定状态的元素,伪类是对元素状态的一种描述。包含动态伪类、结构伪类、否定伪类、UI 伪类、目标伪类和语言伪类共六大伪类选择器-
动态伪类:遵循
LVHA
的顺序原则,否则可能会导致样式异常格式 说明 :link
超链接未被访问的状态 :visited
超链接访问过的状态 :hover
鼠标悬停在元素上的状态 :active
元素激活(按下鼠标点击元素不松开)的状态 :focus
获取焦点的元素(只有表单类元素可使用) /* 选中未点击过的 a 元素(a 标签独有) */ a:link { color: blue; } /* 选中已点击过的 a 元素(a 标签独有) */ a:visited { color: grey; } /* 选中鼠标悬浮在上的 a 元素 */ a:hover { background-color: green; } /* 选中激活状态的 a 元素 */ a:active { color: red; } /* 选中聚焦状态的 input 元素(表单类元素独有) */ input:focus { background-color: grey; }
-
结构伪类:
格式 说明 :first-child
所有兄弟元素中的第一个 :last-child
所有兄弟元素中的最后一个 :nth-child(n)
所有兄弟元素中的第 n
个:nth-last-child(n)
所有兄弟元素中的倒数第 n
个:first-of-type
所有同类型兄弟元素中的第一个 :last-of-type
所有同类型兄弟元素中的最后一个 :nth-of-type(n)
所有同类型兄弟元素中的 第 n
个:nth-last-of-type(n)
所有同类型兄弟元素中的倒数第 n
个:only-child
选择没有兄弟的元素(独生子女) :only-of-type
选择没有同类型兄弟的元素(同性相斥) :root
选择根元素 :empty
选择内容为空的元素(空格也算内容) n 含义 0
或不写
什么都选不中(几乎不用) n
选中所有子元素(几乎不用) 正整数 选中对应序号的子元素 2n
或even
选中序号为偶数的子元素 2n+1
或odd
选中序号为奇数的子元素 -n+3
选中前 3
个子元素/* 选出 div 的儿子 p 元素,若 p 是其父元素的第一个孩子则选中 */ div>p:first-child { background-color: red; } /* 选出 div 的后代 p 元素,若 p 是其父元素的第一个孩子则选中 */ div p:first-child { background-color: green; } /* 选中 p 为其父元素第一个孩子的所有 p */ p:first-child { background-color: saddlebrown; } /* * 选出 div 的儿子 p 元素,若 p 是其父元素的第 n 个孩子则选中 * 参数:[0]none [n]所有 [even]偶数 [odd]奇数 [-n+5]前五个 */ div>p:nth-child(-n+3) { background-color: cyan; } /* 选中没有兄弟元素的 span */ span:only-child { color: red; } /* 选中没有同类型兄弟的 span */ span:only-of-type { color: red; } /* 选中根元素,等价于选中 html */ :root { background-color: lightgrey; } /* 选中标签体内容为空的 div */ div:empty { background-color: red; }
-
否定伪类:
格式 说明 :not(选择器)
选中不满足括号中条件的元素 /* 选中 div 的儿子 p 元素,但排除类名为 fail 的 p 元素 */ div>p:not(.fail) { color: red; } /* 选中 div 的儿子 p 元素,排除第一个儿子 p 元素 */ div>p:not(:first-child) { color: red; }
-
UI 伪类:
格式 说明 :checked
被选中的复选框或单选按钮 :enable
可用的表单元素(无 disabled
属性):disabled
不可用的表单元素(有 disabled
属性)input:checked { width: 100px; height: 100px; } input:disabled { background-color: darkgrey; } input:enabled { background-color: lightblue; }
-
目标伪类:
格式 说明 :target
选中锚点指向的元素 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>目标伪类选择器</title> <style> p { height: 300px; background-color: grey; } /* 选中锚点指向的元素 */ p:target { background-color: green; } </style> </head> <body> <a href="#one">to one</a> <a href="#two">to two</a> <a href="#three">to three</a> <a href="#four">to four</a> <a href="#five">to five</a> <p id="one">one</p> <p id="two">two</p> <p id="three">three</p> <p id="four">four</p> <p id="five">five</p> </body> </html>
-
语言伪类:
格式 说明 :lang(语言)
选中 lang
属性值为指定值的元素<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>语言伪类</title> <style> :lang(en) { color: green; } :lang(zh-CN) { color: red; } </style> </head> <body> <div lang="en">Hello World</div> <div lang="zh-CN">你好,世界</div> </body> </html>
-
-
伪元素选择器(
CSS3
新增):选中元素中的一些特殊位置格式 说明 ::first-letter
选中元素中的第一个文字 ::first-line
选中元素中的第一行文字 ::selection
选中被鼠标选中的内容 ::placeholder
选中输入框的提示文字 ::before
在元素最开始的位置创建一个子元素(必须用 content
属性指定内容)::after
在元素最末尾的位置创建一个子元素(必须用 content
属性指定内容)/* 选中 p 标签体中的第一个字符 */ p::first-letter { color: red; font-size: 20px; } /* 选中 p 标签体中的第一行文本 */ p::first-line { background-color: yellow; } /* 选中鼠标选中的文字 */ p::selection { background-color: green; color: orange; } /* 选中输入框的提示文字 */ input::placeholder { color: skyblue; } /* 在 p 元素的内容区之前嵌入内容 */ p::before { content: "¥"; } /* 在 p 元素的内容区之后嵌入内容 */ p::after { content: ".00"; }
2.3 选择器优先级
样式冲突:通过不同的选择器选中相同的元素,并且为相同的样式名设置不同的值时,就发生了样式冲突。到底哪个样式生效,需要根据选择器的优先级进行决策,简单来看:!important > 行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式
详细来看,每个选择器都可以计算出一组权重,格式为:(a,b,c)
a
:ID 选择器的个数b
:类、伪类、属性选择器的个数c
:元素、伪元素选择器的个数
选择器 | 权重 |
---|---|
ul>li |
(0,0,2) |
div ul>li p a span |
(0,0,6) |
#atguigu .slogan |
(1,1,0) |
#atguigu .slogan a |
(1,1,1) |
#atguigu .slogan a:hover |
(1,2,1) |
比较规则按照 a
、b
、c
依次比较大小,大的优先级高,当前位胜出后不再比较后续位,权重相同时遵循 “后来者居上” 原则:
(1,0,0) > (0,2,2)
(1,1,0) > (1,0,3)
(1,1,3) > (1,1,2)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器优先级</title>
<style> /* 选择器一:(a,b,c) = (0,2,1) */ .container span.slogan {
color: red; } /* 选择器二:(a,b,c) = (0,1,3) */ div>p>span:nth-child(1) {
color: green; } </style>
</head>
<body>
<div class="container">
<p>
<span class="slogan">尚硅谷,让天下没有学得完的技术!</span>
<span>同学们快来报名吧!</span>
</p>
</div>
</body>
</html>
三、常用属性
3.1 长度单位
单位 | 说明 |
---|---|
px |
像素 |
em |
相对于当前元素的字体大小 |
rem |
相对于根元素 html 的字体大小(CSS3 新增) |
% |
相对于父元素的百分比 |
vw |
相对于视口宽度的百分比,10vw 就是视口宽度的 10% (CSS3 新增) |
vh |
相对于视口高度的百分比,10vh 就是视口高度的 10% (CSS3 新增) |
vmax |
选择视口宽度或高度中的较大者作为参考值,了解即可(CSS3 新增) |
vmin |
选择视口宽度或高度中的较小者作为参考值,了解即可(CSS3 新增) |
3.2 颜色表示
表示方式 | 说明 | 示例 |
---|---|---|
颜色名 | 使用颜色英文名表示 | red、green、blue、black、white |
rgb 或 rgba |
使用 红(r)、绿(g)、蓝(b) 光的三原色进行组合,a 表示透明度红绿蓝是光的三原色,红黄蓝是颜料的三原色 rgba 为 CSS3 新增 |
color: rgb(255, 0, 0); color: rgb(0, 255, 0); color: rgb(0, 0, 255); color: rgb(0, 0, 0); color: rgb(255, 255, 255); 也可以通过百分比进行表示: color: rgb(100%, 0%, 0%); color: rgb(100%, 0%, 0%, 50%); |
HEX 或 HEXA |
HEX 原理与 rgb 一样,但通过 6 位 3 组十六进制数表示颜色。当每组值相同时可触发简写形式,此时透明度也需要简写,如: color: #ff998866; 可简写为 color: #f986; |
color: #ff0000; color: #00ff00; color: #0000ff; color: #000000; color: #ffffff; |
HSL 或 HSLA |
通过 色相、饱和度、亮度 来表示颜色,格式为 hsl(色相,饱和度,亮度) ,为 CSS3 新增色相:取值范围是 0°~360° ,具体度数对应的颜色如下图所示饱和度:取值范围是 0%~100% ,值越小灰度越强亮度:取值范围是 0%~100% ,值越大亮度越高 |
color: hsl(0, 100%, 50%); color: hsl(120, 100%, 50%); color: hsl(240, 100%, 50%); color: hsl(0, 0%, 0%); color: hsl(0, 0%, 100%); |
3.3 字体属性
Chrome
浏览器默认字体大小为16px
,字号限制最小为12px
。通常会给body
设置font-size
属性,这样其它元素就可以继承字体大小了
属性名 | 作用 | 值说明 |
---|---|---|
font-size | 字体大小 | 由于字体设计原因,文字最终呈现的大小并不一定与 font-size 的值一致,可能略大也可能略小由于字体设计原因,通常情况下文字相对字体设计框并不是垂直居中的,而是略靠下一些 |
font-family | 字体族 | serif :衬线字体sans-serif :非衬线字体 |
font-style | 字体风格 | normal :正常(默认值)italic :斜体(自带倾斜)oblique :斜体(强制倾斜) |
font-weight | 字体粗细 | lighter :细normal :正常bold :加粗bolder :更粗或者使用 100~1000 的数值且无单位进行表示100~300 等同于 lighter 400~500 等同于 normal 600 及以上等同于 bold |
font | 复合写法 | 字体族、字体大小必不可少 字体族必须是最后一位、字体大小必须是倒数第二位 各个属性间使用空格分隔 |
/* 字体属性复合写法 */
div {
font: bold italic 50px PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
}
3.4 文本属性
行内元素和行内块元素可以被父元素当作文本处理
属性名 | 作用 | 值说明 |
---|---|---|
color | 文本颜色 | 颜色名rgb 或 rgba HEX 或 HEXA HSL 或 HSLA |
letter-spacing | 字母间距 | 像素值,正大负小 |
word-spacing | 单词间距:通过空格识别词 | 像素值,正大负小 |
text-decoration | 文本修饰(CSS3 增强) |
三个值,分别是:line style color line :- none :无装饰(默认值)- underline :下划线- overline :上划线- line-through :贯穿线style :- solid :实线- double :双实线- dotted :点线- dashed :虚线- wavy :波浪线 |
text-indent | 文本缩进:控制文本首字母的缩进 | css 中的长度单位,如 px |
text-align | 文本对齐:控制文本水平对齐方式 | left :靠左对齐(默认值)center :居中对齐right :靠右对齐 |
line-height | 行高:控制一行文字的高度 | normal :浏览器根据 font-size 决定一个默认值像素值 数字:参考自身 font-size 的倍数百分比:参考自身 font-size 的百分比 |
vertical-align | 设置非块元素的垂直对齐方式,可以影响行内元素或表格单元格中文本内容的垂直位置 | baseline :使元素的基线与父元素的基线对齐(默认值)top :使元素的顶部与其所在行的顶部对齐middle :使元素的中部与父元素的基线加上父元素 x 字符高度的一半对齐bottom :使元素的底部与其所在行的底部对齐 |
text-shadow | 文本阴影(CSS3 新增) |
none :无阴影(默认值)四个值,分别是: h-shadow v-shadow blur color h-shadow :必填,水平阴影位置,允许负值v-shadow :必填,垂直阴影位置,允许负值blur :可选,模糊距离color :可选,阴影颜色 |
white-space | 文本换行方式(CSS3 新增) |
normal :自动换行(默认值),代码换行和众多连续空格使用一个空格表示pre :原文格式输出,与 <pre> 标签效果相同pre-wrap :在 pre 的基础上超出元素边界的文字内容自动换行pre-line :在 pre-wrap 的基础上去除文本始末空格nowrap :强制不换行 |
text-overflow | 设置文本内容溢出时的呈现模式(CSS3 新增)生效前提: - overflow: 非 visible 外的值 - white-space: nowrap |
clip :裁切掉溢出文本(默认值)ellipsis :将溢出文本渲染为 ... |
text-stroke | 文本描边(CSS3 新增)仅 Webkit 内核浏览器支持 |
两个值,分别是:width color |
-
行高注意事项:
-
line-height
值过小会导致文字重叠,且最小值为0
。为0
时容器背景色消失、文字上方内容部分将被遮挡 -
line-height
是可以继承的,为了更好地呈现文字最好写数值,通常设置为字体大小的1.5~2
倍 -
元素指定
height
时元素高度就是height
的值;未指定元素高度时会根据line-height * rows
计算元素高度
-
-
行高应用场景:
-
多行文字:控制行与行之间的距离
-
单行文字:让
line-height
等于height
可以实现文字垂直居中。用此种方式实现的垂直居中,由于受到字体设计的影响,并不是绝对意义上的垂直居中。但如果一行中都是文字,不会太影响观感
-
-
文本垂直对齐:
-
顶部对齐:无需设置任何属性,默认就是顶部对齐
-
居中对齐:对于单行文字让
line-height = height
即可;对于多行文字后面使用定位实现 -
底部对齐:对于单行文字让
line-height = (height * 2) - font-size - x
即可,x
是根据字体族动态决定的一个值;对于多行文字后面使用定位实现
-
-
vertical-aligin
:非块元素垂直对齐,可以影响行内元素、行内块元素或表格单元格的垂直位置<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>非块元素垂直对齐</title> <style> div { font-size: 100px; height: 300px; background-color: skyblue; } span { font-size: 40px; background-color: orange; vertical-align: middle; } </style> </head> <body> <div> 尚硅谷-atguigu-x<span>x-span</span> </div> </body> </html>
-
text-shadow
:文本阴影h1 { font-size: 50px; text-align: center; color: white; text-shadow: 0 0 1px black; }
-
white-space
:文本换行
3.5 列表属性
列表相关属性可以作用在
ul
、ol
或li
元素上
属性名 | 作用 | 值说明 |
---|---|---|
list-style-type | 设置列表符号 | none :不显示列表符号square :实心方块disc :圆形decimal :数字lower-roman :小写罗马字upper-roman :大写罗马字lower-alpha :小写字母upper-alpha :大写字母 |
list-style-position | 设置列表符号的位置 | inside :在 li 里outside :在 li 外 |
list-style-image | 自定义列表符号 | 通过 url(图片地址) 设置自定义符号 |
list-style | 复合属性 | 无特殊要求 |
3.6 边框属性
属性名 | 作用 | 值说明 |
---|---|---|
border-width | 边框宽度 | css 中可用的长度值 |
border-color | 边框颜色 | css 中可用的颜色值 |
border-style | 边框风格 | none :无边框(默认值)solid :实线dashed :虚线dotted :点线double :双实线 |
border-radius | 设置盒子圆角(CSS3 新增) |
像素值或百分比,同时设置四个角的圆角半径 也可以通过类似 border-top-left-radius 的形式分别设置盒子四个角的圆角(几乎不用) |
border | 复合属性 | 无特殊要求 |
outline | 边框外轮廓(CSS3 新增),所谓盒子发出来的光,不参盒模型大小计算 |
三个值,依次是:宽度 风格 颜色 |
outline-offset | 设置外轮廓与边框的距离(CSS3 新增) |
正负值都可以设置 |
.outline {
height: 300px;
width: 300px;
border: 1px solid black;
margin: 100px auto;
outline: 10px dashed blueviolet;
outline-offset: 20px;
}
3.7 表格属性
只有
table
标签才能使用以下表格独有属性
属性名 | 作用 | 值说明 |
---|---|---|
table-layout | 设置列宽度 | auto :自动计算(默认值)fixed :固定列宽,均分 |
border-spacing | 单元格间距 生效前提:单元格边框不合并 |
css 中可用的长度值 |
border-collapse | 合并单元格边框 | sperate :不合并(默认值)collapse :合并 |
empty-cells | 隐藏没有内容的单元格 生效前提:单元格不合并 |
show :显示(默认值)hide :隐藏 |
caption-side | 设置表格标题位置 | top :表格上方(默认值)bottom :表格下方 |
3.8 背景属性
属性名 | 作用 | 值说明 |
---|---|---|
background-color | 设置背景颜色 | css 中可用的颜色值,默认为 transparent |
background-image | 设置背景图片 | url(图片地址) |
background-repeat | 设置背景重复方式 | repeat :重复铺满整个元素(默认值)repeat-x :只在水平方向重复repeat-y :只在垂直方向重复no-repeat :不重复 |
background-position | 设置背景图位置 以元素左上角为坐标原点,设置图片左上角的位置 |
通过关键字设置位置: 水平: left 、center 、right 垂直: top 、middle 、bottom 写两个值并使用空格分隔,只写一个值时另一个值取中 通过长度指定坐标位置: 写两个值分别是 x 和 y 坐标,只写一个值时会被当做 x 坐标,y 坐标取中 |
background-origin | 设置背景图的起始原点(CSS3 新增) |
padding-box :从 padding 区域开始显示背景图像(默认值)border-box :从 border 区域开始显示背景图像content-box :从 content 区域开始显示背景图像 |
background-clip | 设置背景图向外裁剪的区域(CSS3 新增) |
border-box :从 border 区域开始向外裁剪背景(默认值)padding-box :从 padding 区域开始向外裁剪背景content-box :从 content 区域开始向外裁剪背景text :背景图只呈现在文字上,需将文字颜色设置为透明 |
background-size | 设置背景图的尺寸(CSS3 新增) |
auto :背景图片的真实大小(默认值)contain :缩放背景图片以完全适应元素,图片不会被裁剪,但可能会有空白区域cover :缩放背景图片以完全覆盖元素(高平齐,宽截断),图片可能会被裁剪长度值 :设置背景图片的具体宽度和高度,第一个值设置宽度,第二个值设置高度百分比 :以父元素的百分比来设置背景图片的宽度和高度,第一个值设置宽度,第二个值设置高度 |
background | 复合属性,格式为:background: color url repeat position / size origin clip |
size 的值必须置于 position 后,并且使用 / 分隔 |
-
background-clip
:设置背景图向外裁剪的区域。值为text
时背景图只呈现在文字上,此时需要将文字颜色设置为透明<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>设置背景图向外裁剪的区域</title> <style> .box { width: 400px; height: 400px; background-color: yellow; margin: 0 auto; padding: 50px; border: 50px dashed red; font-size: 100px; text-align: center; line-height: 400px; font-weight: bold; background-image: url("https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/bg-clip-bridge.jpg"); background-repeat: no-repeat; background-origin: border-box; /* 值为 text 时需将文字颜色设置为透明 */ background-clip: text; color: transparent; } </style> </head> <body> <div class="box">Hello</div> </body> </html>
-
background-size
:设置背景图的尺寸。以下左图为contain
效果,右图为cover
效果 -
多背景图:
CSS3
允许单个元素设置多个背景图片.box { height: 300px; width: 300px; border: 1px solid #f2f3f5; background: url("https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/bg-multi-lt.png") no-repeat, url("https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/bg-multi-rt.png") no-repeat right top, url("https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/bg-multi-lb.png") no-repeat left bottom, url("https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/bg-multi-rb.png") no-repeat right bottom; }
3.9 鼠标属性
属性名 | 作用 | 值说明 |
---|---|---|
cursor | 设置鼠标光标样式 | pointer :小手move :移动图标text :文字选择器crosshair :十字架wait :等待help :帮助 |
/* 自定义鼠标光标 */
table:hover {
cursor: url("https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/cursor-arrow.png"), pointer;
}
3.10 渐变属性
CSS3
新增
-
线性渐变(
linear-gradient
):指定两种或多种颜色,并且可以控制它们的方向、角度和颜色分布<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>线性渐变</title> <style> body { margin: 10px 0; } .box { width: 300px; height: 200px; float: left; margin-left: 10px; font-size: 50px; line-height: 200px; text-align: center; } div.box:nth-child(1) { /* 多个颜色之间的渐变,默认方向从上至下 */ background-image: linear-gradient(red, yellow, green); } div.box:nth-child(2) { /* 使用关键词设置线性渐变的方向 */ background-image: linear-gradient(to right top, red, yellow, green); } div.box:nth-child(3) { /* 使用角度设置线性渐变的方向 */ background-image: linear-gradient(30deg, red, yellow, green); } div.box:nth-child(4) { /* 指定渐变开始的位置 */ background-image: linear-gradient(red 50px, yellow 100px, green 150px); } </style> </head> <body> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </body> </html>
-
径向渐变(
radial-gradient
):与线性渐变不同,径向渐变以圆形或椭圆形的形式从中心向外扩散<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>径向渐变</title> <style> body { margin: 0; } .box { width: 300px; height: 200px; float: left; margin-top: 10px; margin-left: 10px; font-size: 50px; line-height: 200px; text-align: center; } div.box:nth-child(1) { /* 多个颜色之间的渐变,默认由圆心往四周扩散 */ background-image: radial-gradient(red, yellow, green); } div.box:nth-child(2) { /* 使用关键词调整渐变圆的圆心位置 */ background-image: radial-gradient(at right top, red, yellow, green); } div.box:nth-child(3) { /* 使用像素值调整渐变圆的圆心位置 */ background-image: radial-gradient(at 100px 50px, red, yellow, green); } div.box:nth-child(4) { /* 调整渐变形状为正圆 */ background-image: radial-gradient(circle, red, yellow, green); } div.box:nth-child(5) { /* 调整渐变圆形状半径 */ background-image: radial-gradient(50px 100px, red, yellow, green); } div.box:nth-child(6) { /* 指定渐变开始的位置 */ background-image: radial-gradient(red 50px, yellow 100px, green 150px); } </style> </head> <body> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> </body> </html>
-
重复渐变:无论是线性渐变还是径向渐变,在没有发生渐变的位置继续进行渐变就是重复渐变
- 重复线性渐变(
repeating-linear-gradient
):参数同linear-geadient
- 重复径向渐变(
repeating-linear-gradient
):参数同radial-gradient
- 重复线性渐变(
3.11 变换属性
CSS3
新增
3.11.1 2D 变换
-
2D
位移:改变元素位置属性名 值说明 transform translateX
:水平方向位移,需指定长度值;指定百分比时参考自身宽度translateY
:垂直方向位移,需指定长度值;指定百分比时参考自身高度translate
:一个值代表水平方向;两个值代表水平和垂直方向-
位移对行内元素无效
-
位移配合绝对定位可实现非行内元素水平垂直居中
.outer { width: 200px; height: 200px; background: orange; position: relative; } .inner { height: 100px; width: 100px; background: blue; position: absolute; top: 50%; left: 50%; /* 子绝父相定位 + 位移变换实现非行内元素水平、垂直居中对齐 */ transform: translate(-50%, -50%); }
-
位移与相对定位类似,不脱离文档流,不会对页面布局产生影响;相对定位的百分比参考父元素,位移的百分比参考自身;与定位相比浏览器处理位移的效率更高
-
-
2D
缩放:缩小或放大元素属性名 值说明 transform scaleX
:水平方向缩放比例,1
表示不缩放,小于1
缩小,大于1
放大scaleY
:垂直方向缩放比例,1
表示不缩放,小于1
缩小,大于1
放大scale
:一个值同时设置水平和垂直方向缩放比例;两个值分别设置水平、垂直方向缩放比例- 借助缩放可以实现文字小于
12px
效果,从而规避浏览器最小字号限制 - 缩放的比例值支持书写负数,但几乎不使用,因为容易让人产生误解
- 借助缩放可以实现文字小于
-
2D
旋转:让元素在二维平面内顺时针或逆时针旋转属性名 值说明 transform rotate
:设置旋转角度,需加上角度单位deg
,正顺负逆 -
2D
扭曲:让元素在二维平面内被 “拉扯” 成一个平行四边形,进而 “走形”(了解即可)属性名 值说明 transform skewX
:值为角度值,会将元素的左上角、右下角沿水平方向拉扯skewY
:值为角度值,会将元素的左上角、右下角沿垂直方向拉扯skew
:一个值代表水平方向;两个值代表水平和垂直方向 -
多重变换:多个
2D
变换可以使用一个transform
属性复合书写。建议旋转最后写,因为旋转会改变坐标轴 -
变换原点:修改变换原点对位移无影响,对缩放和旋转会产生影响
属性名 作用 值说明 transform-origin 设置变换原点 50% 50%
:变换原点在元素中心位置(默认值)left top
:变换原点在元素左上角50px 50px
:变换原点在距离元素左上角(50px,50px)
的位置0
:变换原点在Y
轴中点,即(0,50%)
总结如下:
- 两个值时分别代表横坐标、纵坐标
- 一个像素值时表示横坐标,纵坐标取中50%
;一个关键词时另一个坐标取中50%
- 百分比相对于自身宽高
3.11.2 3D 变换
-
3D
空间:元素进行3D
变换的前提条件是父元素必须开启3D
空间属性名 作用 值说明 transform-style 设置变换风格 flat
:2D 空间,让子元素位于此元素的二维平面内(默认值)preserve-3d
:3D 空间,让子元素位于此元素的三维空间内 -
景深:指定观察者与
z=0
平面的距离,能让发生3D
变换的元素产生透视效果,使之看起来更加立体。景深设置给发生3D
变换元素的父元素属性名 作用 值说明 perspective 设置景深 none
:不指定透视(默认值)长度值
:指定观察者距离z=0
平面的距离,不允许负值 -
透视点位置:即观察者位置,默认透视点位置在元素几何中心。通常情况下无需调整透视点位置
属性名 作用 值说明 perspective-origin 设置透视点位置 两个值分别代表透视点相对坐标轴向右、向下偏移的距离 -
3D
位移:在2D
位移的基础上,让元素可以沿z
轴位移属性名 值说明 transform translateZ
:设置z
轴位移,需指定长度值且不能为百分比。正值屏外,负值屏里translate3d
:三个值分别对应x
、y
、z
轴位移值,均不可省略 -
3D
缩放:在2D
缩放的基础上,让元素可以沿z
轴缩放属性名 值说明 transform scaleZ
:z
轴缩放比例,1
表示不缩放,小于1
缩小,大于1
放大。效果相当于变相调整景深值scale3d
:三个值分别代表x
、y
、z
轴的缩放倍数,均不可省略 -
3D
旋转:在2D
旋转的基础上,让元素可以沿x
轴和y
轴旋转属性名 值说明 transform rotateX
:设置x
轴旋转角度,需加上角度单位deg
。面对x
轴正方向,正顺负逆rotateY
:设置y
轴旋转角度,需加上角度单位deg
。面对y
轴正方向,正顺负逆rotate3d
:四个值分别代表x
、y
、z
轴和旋转的角度。如rotate3d(1,1,1,30deg)
表示沿x
、y
、z
轴均旋转30°
-
多重变换:多个
3D
变换可以使用一个transform
属性复合书写。建议旋转最后写,因为旋转会改变坐标轴 -
背部可见性:指定元素背面在面向用户时是否可见。需加在发生
3D
变换元素自身上属性名 值说明 backface-visibility visible
:指定元素背面可见,即允许显示元素正面的镜像(默认值)hidden
:指定元素背面不可见 -
3D
变换综合案例:案例将创建一个3D
立方体,可以通过鼠标移动来旋转它<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D 变换综合案例</title> <style> .cube-container { /* 设置景深值 */ perspective: 1000px; width: 200px; height: 200px; position: relative; margin: 100px auto; } .cube { width: 100%; height: 100%; position: absolute; /* 父元素开启 3d 空间 */ transform-style: preserve-3d; transition: transform 0.5s; } .cube-face { position: absolute; width: 200px; height: 200px; border: 2px solid black; background-color: rgba(255, 255, 255, 0.7); font-size: 24px; text-align: center; line-height: 200px; color: black; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1); } .front { transform: translateZ(100px); } .back { transform: rotateX(180deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); } .cube-container:hover .cube { transform: rotateX(360deg) rotateY(360deg); } </style> </head> <body> <div class="cube-container"> <div class="cube"> <div class="cube-face front">1</div> <div class="cube-face back">2</div> <div class="cube-face right">3</div> <div class="cube-face left">4</div> <div class="cube-face top">5</div> <div class="cube-face bottom">6</div> </div> </div> </body> </html>
3.12 过渡属性
CSS3
新增:过渡可以在不使用Flash
动画和JavaScript
的情况下,让元素由一种样式平滑地过渡到另一种样式
属性名 | 作用 | 值说明 |
---|---|---|
transition-property | 定义哪些属性需要过渡 | none :不过渡任何属性(默认值)all :过渡所有能过渡的属性,即值为数字或能转换为数字的属性属性名集合 :多个属性名之间用英文逗号进行分隔 |
transition-duration | 设置过渡持续的时间 | 0 :没有任何过渡时间(默认值)s 或 ms :指定过渡持续时间为多少秒或多少毫秒列表值 :一个值时所有属性过渡时间相同;多个值时分别指定每个属性的过渡时间 |
transition-delay | 指定开始过渡的延迟时间 | 单位为 s 或 ms ,默认值为 0 |
transition-timing-function | 设置过渡函数类型 | ease :平滑过渡(默认值)linear :线性过渡ease-in :慢 > 快ease-out :快 > 慢ease-in-out :慢 > 快 > 慢steps(integer,?) :将过渡效果分割成固定的步骤数- 第一个整型参数指定过渡效果被分割成多少个步骤; - 第二个参数可以为 start 或 end ,默认为 end 表示在每个过渡阶段结束时发生跳跃step-start :等同于 steps(1,start) step-end :等同于 steps(1,end) cubic-bezier(number,number,number,number) : 特定的贝塞尔曲线类型 |
transition | 复合属性 | 设置一个时间时表示 duration 设置两个时间是依次表示 duration 和 delay 其它值没有顺序要求 |
-
过渡类型:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过渡类型</title> <style> .outer { width: 1000px; height: 900px; border: 1px dashed black; } .outer:hover .box { width: 1000px; } .outer .box { height: 100px; width: 200px; line-height: 100px; transition-property: all; transition-duration: 5s; } .outer .ease { background-color: green; transition-timing-function: ease; } .outer .linear { background-color: red; transition-timing-function: linear; } .outer .ease-in { background-color: blue; transition-timing-function: ease-in; } .outer .ease-out { background-color: orange; transition-timing-function: ease-out; } .outer .ease-in-out { background-color: aqua; transition-timing-function: ease-in-out; } .outer .steps { background-color: blueviolet; transition-timing-function: steps(20, start); } .outer .step-start { background-color: chocolate; transition-timing-function: step-start; } .outer .step-end { background-color: darkred; transition-timing-function: step-end; } .outer .cubic-bezier { background-color: deeppink; transition-timing-function: cubic-bezier(.8, -0.45, 1, .17); } </style> </head> <body> <div class="outer"> <div class="box ease">ease:平滑过渡</div> <div class="box linear">linear:线性过渡</div> <div class="box ease-in">ease-in:慢 -> 块</div> <div class="box ease-out">ease-out:快 -> 慢</div> <div class="box ease-in-out">ease-in-out:慢 -> 快 -> 慢</div> <div class="box steps">steps(integer, ?):将过渡效果分割成固定的步骤数</div> <div class="box step-start">step-start:等同于 steps(1, start)</div> <div class="box step-end">step-end:等同于 steps(1, end)</div> <div class="box cubic-bezier">cubic-bezier:特定的贝塞尔曲线:<a href="https://cubic-bezier.com">https://cubic-bezier.com</a></div> </div> </body> </html>
-
过渡综合案例:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过渡综合案例</title> <style> .container { width: 750px; height: 500px; position: relative; overflow: hidden; margin: 0 auto; cursor: pointer; } .container img { width: 750px; height: 500px; transition: 1s linear all; } .container .mask { width: 750px; height: 500px; background-color: black; color: white; text-align: center; line-height: 500px; font-size: 100px; opacity: 0; /* 子绝父相 */ position: absolute; left: 0; top: 0; /* 过渡 */ transition: all linear 0.5s; } .container:hover .mask { opacity: 0.5; } .container:hover img { /* rotate 影响坐标系应置于最后 */ transform: scale(1.5) rotate(20deg); } </style> </head> <body> <div class="container"> <img src="https://img.zcool.cn/community/0161345b337b05a80120b959217f53.jpg" alt="cover" /> <div class="mask">深圳湾</div> </div> </body> </html>
3.13 动画属性
CSS3
新增
属性名 | 作用 | 值说明 |
---|---|---|
animation-name | 设置动画名称 | 变量名命名规则 |
animation-duration | 设置动画持续时间 | 单位为 s 或 ms ,默认值为 0 |
animation-delay | 设置动画延迟时间 | 单位为 s 或 ms ,默认值为 0 |
animation-timing-function | 设置动画函数类型 | ease :平滑动画(默认值)linear :线性动画ease-in :慢 > 快ease-out :快 > 慢ease-in-out :慢 > 快 > 慢steps(integer,?) :将动画效果分割成固定的步骤数- 第一个整型参数指定动画效果被分割成多少个步骤; - 第二个参数可以为 start 或 end ,默认为 end 表示在每个动画阶段结束时发生跳跃step-start :等同于 steps(1,start) step-end :等同于 steps(1,end) cubic-bezier(number,number,number,number) : 特定的贝塞尔曲线类型 |
animation-iteration-count | 设置动画播放次数 | number :指定动画播放次数(默认值为 1 )infinite :无限循环播放 |
animation-direction | 设置动画方向 | normal :正常方向(默认值)reverse :反方向alternate :先正常后反方向,并持续交替运作alternate-reverse :先反方向后正常,并持续交替运作 |
animation-fill-mode | 设置动画之外的状态 | forwards :设置对象状态为动画结束时的状态(默认值)backwards :设置对象状态为动画开始时的状态 |
animation-play-state | 设置动画的播放状态 | running :运动(默认值)paused :暂停 |
animation | 复合属性 | 设置一个时间时表示 duration 设置两个时间是依次表示 duration 和 delay 其它值没有顺序要求 |
-
帧:一段动画就是一段时间内连续播放的
n
个画面,其中的每一张画面我们称之为 “帧” -
关键帧:在构成一段动画的若干帧中起到关键性作用的
2~3
帧 -
动画的使用步骤:
-
定义关键帧:
/* 定义方式一:简单定义 */ @keyframes 动画名 { from { /*property1:value1*/ /*property2:value2*/ } to { /*property1:value1*/ } } /* 定义方式二:完整定义 */ @keyframes 动画名 { 0% { /*property1:value1*/ } 20% { /*property1:value1*/ } 40% { /*property1:value1*/ } 60% { /*property1:value1*/ } 80% { /*property1:value1*/ } 100% { /*property1:value1*/ } }
-
给元素应用动画:
.box { /* 指定动画名 */ animation-name: testKey; /* 设置动画持续时间 */ animation-duration: 5s; /* 设置动画延迟 */ animation-delay: 0.5s; }
-
-
滚动与变色动画:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滚动与变色动画</title> <style> .outer { width: 1000px; height: 100px; border: 1px solid black; margin: 0 auto; } .inner { width: 100px; height: 100px; border-radius: 50%; background-color: blueviolet; animation-name: rolling; animation-duration: 2s; animation-delay: 1s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-fill-mode: forwards; animation-play-state: running; } @keyframes rolling { from { } to { transform: translateX(900px) rotate(360deg); background-color: blueviolet; border-radius: 50%; } 50% { background-color: red; border-radius: 0; } } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
-
动画经典案例之骑单车:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>骑单车动画</title> <style> .bike { width: 130px; height: 130px; background-image: url("https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/animation-bike.png"); margin: auto; animation: drive-bike 500ms infinite steps(31); } @keyframes drive-bike { to { background-position: 0 -4030px; } } </style> </head> <body> <div class="bike"></div> </body> </html>
3.14 媒体查询
CSS3
新增
-
媒体类型:
all
、print
、screen
div { width: 500px; height: 300px; background-image: linear-gradient(to right bottom, #1989fa, #ea1024); font-size: 50px; text-align: center; line-height: 300px; margin: auto; } /* 检测所有设备 */ @media all { div { color: #595CA8; } } /* 检测打印机 */ @media print { div { background: transparent; } } /* 检测电子屏幕,包括:电脑屏幕、平板屏幕、手机屏幕等 */ @media screen { div { color: white; } }
-
媒体特性:
值 含义 width、height 检测视口宽度、高度 max-width、max-height 检测视口最大宽度、最大高度 min-width、min-height 检测视口最小宽度、最小高度 device-width 检测设备屏幕宽度 max-device-width 检测设备屏幕最大宽度 min-device-width 检测设备屏幕最小宽度 orientation 检测视口旋转方向(是否横屏)
-portrait
:纵向,即高度大于宽度
-landscape
:横向,即宽度大于高度 -
媒体运算符:
值 含义 and
与 ,
或or
或 not
非 only
肯定,常用于解决 IE
兼容性问题 -
常用阈值:
<!-- 媒体查询使用方式一 --> <link rel="stylesheet" media="screen and (max-width:768px)" href="../css/mobile.css">
/* 媒体查询使用方式二 */ @media screen and (max-width:768px) { } @media screen and (min-width:768px) and (max-width:1200px) { }
-
媒体查询最佳实践:
/* index.css */ h1 { color: #1989fa; } /* small.css */ @media screen and (max-width: 768px) { h1 { background-color: aqua; } } /* middle.css */ @media screen and (min-width: 768px) and (max-width: 992px) { h1 { background-color: blueviolet; } } /* large.css */ @media screen and (min-width: 992px) and (max-width: 1200px) { h1 { background-color: blue; } } /* huge.css */ @media screen and (min-width: 1200px) { h1 { background-color: bisque; } }
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>媒体查询</title> <link rel="stylesheet" href="../css/index.css"> <link rel="stylesheet" href="../css/small.css"> <link rel="stylesheet" href="../css/middle.css"> <link rel="stylesheet" href="../css/large.css"> <link rel="stylesheet" href="../css/huge.css"> </head> <body> <h1>Hello World</h1> </body> </html>
3.15 Web 字体
CSS3
新增
-
基本用法:通过
@font-face
指定字体的具体地址,浏览器会自动下载该字体 -
定制字体:中文字体文件很大,引入完整的字体文件不太现实,通常仅针对某几个文字进行单独定制。可以通过阿里
Web
字体定制工具实现:https://iconfont.cn/webfont<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web 字体</title> <style> @font-face { font-family: 'webfont'; font-display: swap; /* IE9 */ src: url('./font/webfont.eot'); src: /* IE6-IE8 */ url('./font/webfont.eot?#iefix') format('embedded-opentype'), url('./font/webfont.woff2') format('woff2'), /* chrome、firefox */ url('./font/webfont.woff') format('woff'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('./font/webfont.ttf') format('truetype'), /* iOS 4.1- */ url('./font/webfont.svg#webfont') format('svg'); } .web-font { font-family: "webfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <h1 class="web-font">到头来,都是为他人做嫁衣裳!</h1> </body> </html>
-
字体图标:https://iconfont.cn
- 比图片更加清晰
- 灵活性高,方便改变大小、颜色、风格等
- 兼容性好,
IE
都支持
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体图标</title> <link rel="stylesheet" href="./icon/iconfont.css"> </head> <body> <i class="iconfont icon-female"></i> </body> </html>
四、盒子模型
4.1 盒子组成
-
盒子模型的组成:
CSS
会把所有的HTML
元素都看成一个盒子,所有的样式都基于该盒子- 盒子宽度 =
content 宽度
+左右 padding
+左右 border
- 盒子高度 =
content 高度
+上下 padding
+上下 border
盒子成分 含义 说明 margin 外边距 盒子与外界的距离,不影响盒子大小但影响盒子位置 border 边框 盒子的边框 padding 内边距 紧贴内容的补白区域 content 内容 元素中的文本或包含的后代元素 - 盒子宽度 =
-
盒子内容区(
content
):一般不同时指定盒子内容区域的宽度和最大宽度或最小宽度,高度同理属性名 作用 width 设置内容区域的宽度 height 设置内容区域的高度 max-width 设置内容区域的最大宽度 max-height 设置内容区域的最大高度 min-width 设置内容区域的最小宽度 min-height 设置内容区域的最小高度 -
盒子内边距(
padding
):行内元素上下内边距会占用其它盒子的内容,慎用;padding
的值不能是负值属性名 作用 值说明 padding-top 上内边距 长度值 padding-right 右内边距 长度值 padding-bottom 下内边距 长度值 padding-left 左内边距 长度值 padding 复合属性 长度值,可以设置 1~4
个值:
1 个值:上下左右
2 个值:上下、左右
3 个值:上、左右、下
4 个值:上、右、下、左 -
盒子边框(
border
):可以分别设置元素上、右、下、左四个方向的边框样式属性名 作用 值说明 border-width 设置四个方向边框宽度 长度值 border-color 设置四个方向边框颜色 颜色值 border-style 设置四个方向边框风格 none
:无边框(默认值)solid
:实线
dashed
:虚线
dotted
:点线
double
:双实线border 复合属性 无特殊要求 -
盒子外边距(
margin
):行内元素上下外边距设置无效,谨记;margin
的值可以是负值- 子元素的
margin
是参考父元素的content
计算的,因为子元素包含在父元素的content
中 - 上左
margin
影响自己的位置;下右margin
影响后面兄弟元素的位置 - 块级元素基于父元素水平居中:设置元素的左右
margin
为auto
属性名 作用 值说明 margin-top 上外边距 长度值 margin-right 右外边距 长度值 margin-bottom 下外边距 长度值 margin-left 左外边距 长度值 margin 复合属性 长度值,可以设置 1~4
个值:
1 个值:上下左右
2 个值:上下、左右
3 个值:上、左右、下
4 个值:上、右、下、左 - 子元素的
4.2 盒子属性
属性名 | 作用 | 值说明 |
---|---|---|
box-sizing | 怪异盒模型(CSS3 新增) |
content-box :内容盒模型,宽高设置的是内容区的大小(默认值)border-box :边框盒模型,宽高设置的是盒子总大小(内容区 + 内边距 + 边框) |
resize | 调整盒子大小(CSS3 新增)生效前提:搭配 overflow 使用 |
none :不允许用户调整元素大小(默认值)both :用户可以调节元素宽高horizontal :用户可以调节元素宽度vertical :用户可以调节元素高度 |
box-shadow | 盒子阴影(CSS3 新增) |
none :无阴影(默认值)六个值:依次是 h-shadow v-shadow blur spread color inset h-shadow :必填,水平方向阴影,可以为负值v-shadow :必填,垂直方向阴影,可以为负值blur :可选,模糊距离spread :可选,阴影的外延值color :可选,阴影的颜色inset :可选,将外部阴影改为内部阴影 |
-
resize
:控制是否允许用户调节元素尺寸<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>控制是否允许用户调节元素尺寸</title> <style> .outer { width: 500px; height: 500px; background-color: grey; /* 生效前提:搭配 `overflow` 使用 */ resize: both; overflow: hidden; } .inner { width: 1000px; height: 100px; background-color: blueviolet; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </body> </html>
-
box-shadow
:盒子阴影div { /* 写两个值,含义:水平位置、垂直位置 */ box-shadow: 10px 10px; /* 写三个值,含义:水平位置、垂直位置、颜色 */ box-shadow: 10px 10px red; /* 写三个值,含义:水平位置、垂直位置、模糊值 */ box-shadow: 10px 10px 10px; /* 写四个值,含义:水平位置、垂直位置、模糊值、颜色 */ box-shadow: 10px 10px 10px red; /* 写五个值,含义:水平位置、垂直位置、模糊值、外延值、颜色 */ box-shadow: 10px 10px 10px 10px blue; /* 写六个值,含义:水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */ box-shadow: 10px 10px 20px 3px blue inset; }
4.3 显示隐藏
属性名 | 作用 | 值说明 |
---|---|---|
opacity | 设置元素的不透明度(CSS3 新增) |
值的范围为 [0,1] ,值越大不透明度越高1 :完全不透明0 :完全透明 |
visibility | 使元素不可见,依然占据位置和大小(占位隐藏) | show :展示元素(默认值)hidden :隐藏元素 |
display | 改变元素显示方式,不占据位置和大小(不占位隐藏) | none :不显示元素block :以块级元素显示inline :以行内元素显示inline-block :以行内块元素显示 |
显示模式 | 说明 | 特点 | 代表元素 |
---|---|---|---|
block |
块元素或块级元素 | 从上至下排列并且独占一行 默认宽度撑满父元素 默认高度由内容撑开 可以通过 CSS 设置宽高 |
主体标签:html 、body 排版标签: h1~h6 、hr 、p 、pre 、div 列表标签: ul 、ol 、li 、dl 、dt 、dd 表格标签: table 、tbody 、thead 、tfoot 、tr 、caption 其它标签: form 、option |
inline |
行内元素或内联元素 | 从左至右排列并且不独占一行 默认宽度由内容撑开 默认高度由内容撑开 不能通过 CSS 设置宽高 |
文本标签:br 、em 、strong 、sup 、sub 、del 、ins 其它标签: a 、label |
inline-block |
行内块元素或内联块元素 | 从左至右排列并且不独占一行 默认宽度由内容撑开 默认高度由内容撑开 可以通过 CSS 设置宽高 |
图片标签:img 表单控件: input 、textarea 、select 、button 框架标签: iframe 单元格标签: td 、th |
4.4 内容溢出
内容溢出处理:可以解决许多疑难杂症
属性名 | 作用 | 值说明 |
---|---|---|
overflow | 溢出内容的处理方式 | visible :显示(默认值)hidden :隐藏scroll :显示滚动条,无论内容是否溢出auto :自动显示滚动条,内容不溢出时不显示 |
overflow-x | 水平方向溢出内容的处理方式 | 同 overflow |
overflow-y | 垂直方向溢出内容的处理方式 | 同 overflow |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容溢出处理</title>
<style> .father {
width: 500px; height: 200px; background-color: orange; overflow: auto; } .son {
width: 1000px; background-color: blueviolet; } </style>
</head>
<body>
<!-- 在 VS Code 中可通过 lorem 命令生成大段随机文本 -->
<div class="father">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam voluptatem earum nemo, molestias praesentium
obcaecati non dignissimos doloribus laborum rem sed officia soluta quaerat sapiente quis quas pariatur sit
reprehenderit nostrum illo atque ut rerum alias!
<div class="son">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, maiores eos! Aperiam debitis
nemo quae reiciendis minima accusamus aliquid unde saepe nesciunt? Iusto explicabo quisquam neque,
distinctio, eum aut, sed sapiente eaque facilis sint assumenda numquam iure voluptatum ullam sunt
consequatur alias nesciunt animi debitis inventore odit culpa veniam? Dolore.
</div>
Repudiandae modi aliquam consectetur libero debitis mollitia
possimus vero architecto laudantium optio recusandae provident, ipsum consequatur voluptate, dolore ducimus
maxime et magnam? Esse quia laboriosam, veritatis dignissimos quibusdam ipsa modi debitis molestias eum cumque
in quos. Quas repellat quisquam rerum similique quaerat architecto, nobis totam qui reiciendis, deserunt sit
dolorem, error consectetur quod? Eos ipsa doloribus repellat nihil dicta? Ipsum similique beatae itaque officia?
</div>
</body>
</html>
4.5 继承默认
样式继承是 CSS
的一个特性,它允许子元素从其祖先元素继承样式属性。如果一个元素自身设置了某个样式,那么它将使用自己的样式。如果没有设置,它会从其祖先元素继承该样式。
继承规则是从最近的父元素开始向上查找,直到找到有该样式定义的父元素或者到达根元素为止。这种机制使得页面样式更加统一和易于管理。总结来说,能继承的样式都是不影响布局的,简单来说都是和盒子模型无关的样式。
- 可以继承的样式:字体属性、文本属性(除
vertical-align
外)等 - 不会继承的样式:背景(默认为透明)、宽高、边距、边框、填充等
元素的默认样式优先级大于继承样式,一些常用元素的默认样式如下:
a
:下划线、字体颜色、鼠标小手h1~h6
:文字加粗、文字大小、上下外边距p
:上下外边距ul、ol
:左内边距body
:8px
外边距
重置元素默认样式:
- 使用全局选择器(几乎不使用)
- reset.css:通过元素选择器依次清除各种元素默认样式
- normalize.css:在清除默认样式的基础上,保留了一些有价值的默认样式
4.6 元素问题
-
margin
合并问题:上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并,取较大的一个值,而不是简单相加 -
margin
塌陷问题:第一个子元素的上margin
和最后一个子元素的下margin
作用在父元素身上- 解决方案一:给父元素设置不为 0 的
padding
- 解决方案二:给父元素设置不为 0 的
border
- 解决方案三(推荐):给父元素设置
overflow: hidden
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>margin 塌陷问题</title> <style> body { margin: 0; background-color: grey; } .father { width: 400px; background-color: skyblue; /* 解决 margin 塌陷问题 */ overflow: hidden; } .son1 { width: 100px; height: 100px; background-color: red; margin-top: 50px; } .son2 { width: 100px; height: 100px; background-color: green; margin-bottom: 50px; } .text { width: 400px; background-color: orange; } </style> </head> <body> <div class="father"> <div class="son1">son1</div> <div class="son2">son2</div> </div> <div class="text">哎呀呀,margin 塌陷问题发生了~</div> </body> </html>
- 解决方案一:给父元素设置不为 0 的
-
非块元素之间的空白问题:行内元素或行内块元素彼此之间的换行会被浏览器解析为一个空白字符
-
解决方案一:去掉换行和空格
-
解决方案二(推荐):设置父元素
font-size: 0
,需要展示文字的子元素单独设置字体大小<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素之间的空白问题解决方案二</title> <style> .box { width: 200px; height: 100px; background-color: orange; font-size: 0; } span { font-size: 16px; } .spring { background-color: aqua; } .bear { background-color: blueviolet; } </style> </head> <body> <div class="box"> <span class="spring">x-spring</span> <span class="bear">x-bear</span> </div> </body> </html>
-
-
行内块元素的幽灵空白问题:行内块元素与文本的基线对齐,而文本的基线与文本最底端存在一定距离
-
解决方案一(推荐):设置行内块元素
vertical-align
的值不为baseline
即可<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行内块元素的幽灵空白问题解决方案一</title> <style> .box { width: 300px; background-color: orange; } img { vertical-align: bottom; } </style> </head> <body> <div class="box"> <img src="https://pic.imeitou.com/uploads/allimg/240511/10-2405111G102-50-lp.jpg" height="100" alt="image-100px"> <span>X-Spring-_-Bear</span> </div> </body> </html>
-
解决方案二:若父元素中仅含有一个行内块元素,设置该行内块元素
display: block
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行内块元素的幽灵空白问题解决方案二</title> <style> .box { width: 300px; background-color: orange; } img { display: block; } </style> </head> <body> <div class="box"> <img src="https://pic.imeitou.com/uploads/allimg/240511/10-2405111G102-50-lp.jpg" height="100" alt="image-100px"> </div> </body> </html>
-
4.7 BFC
W3C
对BFC
的定义:Floats, absolutely positioned elements, block containers (such as inline-blocks, tablecells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.MDN
对BFC
的描述:块格式化上下文(Block Formatting Context,BFC) 是Web
页面的可视CSS
渲染的一部分, 是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域BFC
的通俗说法:BFC
可以理解成元素的一种特异功能
。该特异功能默认属于关闭状态,当元素满足某些条件后将激活该特异功能。所谓激活特异功能,术语说法就是该元素创建了BFC
,或称开启了BFC
- 开启
BFC
的元素能解决什么问题:- 子元素不再产生
margin
塌陷问题 - 元素不会被其它浮动元素所覆盖
- 子元素浮动不会导致父元素高度塌陷
- 子元素不再产生
- 哪些元素开启了
BFC
:- 根元素
html
- 浮动元素
- 定位元素(绝对定位、固定定位的元素)
- 行内块元素
- 表格:
table
、thead
、tbody
、tfoot
、th
、td
、tr
、caption
- 伸缩项目
- 多列容器
column-span
为all
的元素,即使该元素没有包裹在多列容器中display: flow-root
的元素
- 根元素
五、浮动
属性名 | 作用 | 值说明 |
---|---|---|
float | 设置浮动 | none :不浮动(默认值)left :左浮动right :右浮动 |
clear | 清除浮动对后面兄弟元素的影响 | left :清除元素左浮动产生的影响right :清除元素右浮动产生的影响both :清除元素左右浮动产生的影响 |
-
浮动简介:浮动设计的初衷是为了实现文字环绕图片效果,如今浮动是主流的页面布局方式之一
-
元素浮动布局原则:兄弟元素要么全都浮动,要么全都不浮动
-
元素浮动后的特点:
- 脱离文档流
- 不独占一行
- 不存在行内块的幽灵空白问题
- 无论什么元素,浮动后默认宽高均由内容撑开(尽可能小),并且可以自由设置宽高
- 不会出现
margin
塌陷与合并问题,可以完美地设置四个方向的margin
和padding
-
元素浮动后产生的影响:
- 对父元素的影响:不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚着浮动的元素
- 对后面兄弟元素的影响:后面的兄弟元素会占据浮动元素之前的位置,导致页面布局发生变化
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素浮动后产生的影响</title> <style> .box { width: 500px; background-color: #f2f3f5; border: 1px solid black; } .node1 { height: 100px; width: 100px; background-color: aqua; float: right; } .node2 { height: 200px; width: 200px; background-color: antiquewhite; } </style> </head> <body> <div class="box"> <div class="node1"></div> <div class="node2"></div> </div> </body> </html>
-
如何消除浮动带来的影响:
-
方案一:给父元素指定高度,不能消除对后面兄弟元素的影响
-
方案二:给父元素也设置浮动,但会带来其它影响(父元素的兄弟元素顶上父元素的位置)
-
方案三:设置父元素
overflow: hidden;
,不能消除对后面兄弟元素的影响 -
方案四:在所有浮动元素的最后面添加一个块级元素,并设置该块元素
clear: both
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>方案四:消除浮动带来的影响</title> <style> .box { width: 500px; background-color: #f2f3f5; border: 1px solid black; } .node1 { height: 100px; width: 100px; background-color: aqua; float: right; } .node2 { height: 200px; width: 200px; background-color: antiquewhite; float: right; } .node3 { clear: both; } .node4 { width: 100px; height: 100px; background-color: blueviolet; } </style> </head> <body> <div class="box"> <div class="node1"></div> <div class="node2"></div> <div class="node3"></div> <div class="node4"></div> </div> </body> </html>
-
方案五(推荐):给浮动元素的父元素设置伪元素样式清除浮动。此方案需保证父元素中的所有子元素均浮动,否则对不浮动的元素仍然存在影响
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>方案五:消除浮动带来的影响</title> <style> .box { width: 500px; background-color: #f2f3f5; border: 1px solid black; } .clearfix::after { content: ""; display: block; clear: both; } .node1 { height: 100px; width: 100px; background-color: aqua; float: right; } .node2 { height: 200px; width: 200px; background-color: antiquewhite; float: right; } .node3 { width: 100px; height: 100px; background-color: blueviolet; float: right; } </style> </head> <body> <div class="box clearfix"> <div class="node1"></div> <div class="node2"></div> <div class="node3"></div> </div> </body> </html>
-
-
浮动案例练习:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮动布局案例</title> <style> body { margin: 0; padding: 0; } .clearfix::after { content: ''; display: block; clear: both; } .float-left { float: left; } .container { width: 960px; margin: 0 auto; text-align: center; } .page-header div { height: 80x; line-height: 80px; background-color: #f2f3f5; } .logo, .banner2 { width: 200px; } .banner1 { width: 540px; margin: 0 10px; } .nav-menu { height: 30px; line-height: 30px; margin: 10px 0; background-color: #f2f3f5; } .main-content .left-content .top-box div { width: 368px; height: 198px; line-height: 198px; border: 1px black solid; margin: 0 10px 10px 0; } .main-content .left-content .bottom-box div { width: 178px; height: 198px; line-height: 198px; border: 1px black solid; margin: 0 10px 10px 0; } .right-content div { width: 198px; height: 128px; line-height: 128px; border: 1px solid black; margin-bottom: 10px; } .page-footer { height: 60px; line-height: 60px; background-color: #f2f3f5; } </style> </head> <body> <div class="container"> <header class="page-header clearfix"> <div class="logo float-left">logo</div> <div class="banner1 float-left">banner1</div> <div class="banner2 float-left">banner2</div> </header> <nav class="nav-menu">菜单</nav> <main class="main-content clearfix"> <div class="left-content float-left"> <div class="top-box clearfix"> <div class="float-left">栏目一</div> <div class="float-left">栏目二</div> </div> <div class="bottom-box clearfix"> <div class="float-left">栏目三</div> <div class="float-left">栏目四</div> <div class="float-left">栏目五</div> <div class="float-left">栏目六</div> </div> </div> <div class="right-content float-left"> <div>栏目七</div> <div>栏目八</div> <div>栏目九</div> </div> </main> <footer class="page-footer">页脚</footer> </div> </body> </html>
六、定位
属性名 | 作用 | 值说明 |
---|---|---|
position | 设置元素定位方式 | relative :相对定位abolute :绝对定位fixed :固定定位sticky :粘性定位 |
发生定位的元素的注意事项:
- 元素可以通过
left
、top
、right
、bottom
设置元素位置,需注意left
和right
不能同时设置,top
和bottom
也不能同时设置 - 不推荐对发生定位的元素通过
margin
调整位置 - 定位可以越过元素的
padding
区
6.1 相对定位
- 参考点:相对于自己原来的位置
- 特点:
- 不会脱离文档流;元素位置的变化只是视觉效果,不会对布局产生影响
- 不推荐对发生相对定位的元素进行浮动
- 应用场景:
- 对元素的位置进行微调
- 与绝对定位配合使用(子绝父相)
6.2 粘性定位
-
参考点:离它最近的一个拥有
滚动机制
的祖先元素,即使该祖先元素并非真实可滚动 -
特点:
- 不会脱离文档流;是一种专门用于窗口滚动时的定位方式
- 不推荐对发生粘性定位的元素进行浮动
-
应用场景:页面滚动过程中,在元素到达指定位置时将其黏住
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性定位</title>
<style> body {
margin: 0; } .content div {
height: 99px; line-height: 99px; border-bottom: 1px solid black; font-size: 30px; background-color: grey; } .content div:first-child {
font-size: 50px; background-color: blueviolet; position: sticky; top: 0; } </style>
</head>
<body>
<div class="content">
<div>A</div>
<div>A1</div>
<div>A2</div>
<div>A3</div>
<div>A4</div>
<div>A5</div>
<div>A6</div>
<div>A7</div>
<div>A8</div>
<div>A9</div>
</div>
<div class="content">
<div>B</div>
<div>B1</div>
<div>B2</div>
<div>B3</div>
<div>B4</div>
<div>B5</div>
<div>B6</div>
<div>B7</div>
<div>B8</div>
<div>B9</div>
</div>
<div class="content">
<div>C</div>
<div>C1</div>
<div>C2</div>
<div>C3</div>
<div>C4</div>
<div>C5</div>
<div>C6</div>
<div>C7</div>
<div>C8</div>
<div>C9</div>
</div>
</body>
</html>
6.3 绝对定位
- 参考点:参考它的包含块
- 包含块:
- 对于没有脱离文档流的元素,包含块是其父元素
- 对于脱离文档流的元素,包含块是第一个拥有定位属性的祖先元素(如果所有祖先都不存在定位,此时包含块就是整个页面)
- 特点:
- 脱离文档流;会对父元素及后面的兄弟元素产生影响
- 绝对定位和浮动不能同时设置,同时设置时浮动失效
- 无论何种元素,设置绝对定位后都变成了定位元素(默认宽高由内容撑开,且能自由设置宽高)
- 应用场景:用于覆盖元素内容,作为一种对布局的辅助增强工具
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style> .outer {
width: 500px; height: 500px; background-color: grey; /* 父元素相对定位 */ position: relative; } .inner {
width: 150px; height: 150px; line-height: 150px; font-size: 50px; text-align: center; } .box1 {
background-color: green; } .box2 {
background-color: blueviolet; /* 子元素绝对定位 */ position: absolute; left: 150px; } .box3 {
background-color: deepskyblue; } .outer:hover .box2 {
left: 0; } </style>
</head>
<body>
<div class="outer">
<div class="inner box1">1</div>
<div class="inner box2">2</div>
<div class="inner box3">3</div>
</div>
</body>
</html>
6.4 固定定位
- 参考点:参考视口
- 视口:对于
PC
浏览器来说,视口通常指的是用户在浏览器窗口中直接看到的内容区域 - 特点:
- 脱离文档流;会对父元素及后面的兄弟元素产生影响
- 固定定位和浮动不能同时设置,同时设置时浮动失效
- 无论何种元素,设置固定定位后都变成了定位元素(默认宽高由内容撑开,且能自由设置宽高)
- 应用场景:将内容固定在视口的指定区域
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style> body {
margin: 0; background-color: #f2f3f5; height: 10000px; } .to-top {
width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: aqua; position: fixed; right: 0; bottom: 0; } </style>
</head>
<body>
<a href="#" class="to-top">回到顶部</a>
</body>
</html>
6.5 定位层级
属性名 | 作用 | 值说明 |
---|---|---|
z-index | 设置发生定位的元素的显示层级 | 值为数字且无单位,值越大显示层级越高 |
- 发生定位的元素的显示层级比普通元素高,会覆盖在普通元素之上
- 无论什么定位显示层级默认都是一样的,都发生定位的两个元素后写的元素会覆盖在先写的元素之上
- 如果
z-index
值大的元素没有覆盖掉值小的元素,那么请检查该元素包含块的定位层级
6.6 定位应用
特别说明:以下定位特殊应用只适用于
定位元素
,即发生绝对定位
和固定定位
的元素。因为定位元素默认宽高由内容撑开,且能自由设置宽高
-
定位元素盒子宽高充满包含块:
- 盒宽充满包含块:
left
和right
同时设置为0
- 盒高充满包含块:
top
和bottom
同时设置为0
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位元素盒子宽高充满包含块</title> <style> .outer { height: 500px; background-color: red; position: relative; } .inner { font-size: 50px; text-align: center; background-color: blueviolet; padding: 20px; border: 20px solid black; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } </style> </head> <body> <div class="outer"> <div class="inner">Hello World</div> </body> </html>
- 盒宽充满包含块:
-
定位元素基于包含块水平垂直居中:必须设置元素的宽和高
/* 方案一 */ div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } /* 方案二 */ div { position: absolute; left: 50%; top: 50%; margin-left: -midWidth; margin-top: -midHeight; } /* 方案三 */ div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位元素基于包含块水平垂直居中</title> <style> .outer { width: 500px; height: 500px; background-color: grey; position: relative; } .inner { /* 必须设置元素的宽和高 */ width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: blueviolet; /* 定位元素基于包含块水平垂直居中 */ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; */ } </style> </head> <body> <div class="outer"> <div class="inner">Hello World</div> </body> </html>
七、弹性盒子
CSS3
新增
- 简介:
2009
年,W3C
提出了一种新的盒子模型,称之为Flexible Box
,翻译为伸缩盒模型或弹性盒子。它可以轻松地实现元素分布、元素对齐以及调节元素视觉顺序。弹性盒子的出现逐渐演变出了一套全新的布局方案,即flex
布局,flex
布局目前在移动端应用广泛,因为传统布局不能很好地在移动端呈现。 - 伸缩容器:显示模式为
flex
或inline-flex
的元素就是伸缩容器。一个元素可以既是伸缩容器,又是伸缩项目 - 伸缩项目:伸缩容器中的所有儿子元素均是伸缩项目,伸缩项目会 “块状化”
- 主轴与侧轴:
- 主轴:伸缩项目沿着主轴排列,默认为水平方向,且从左至右
- 侧轴:与主轴垂直的就是侧轴,默认为垂直方向,且从上至下
属性名 | 作用 | 值说明 |
---|---|---|
flex-direction | 设置主轴方向 | row :水平从左至右(默认值)row-reverse :水平从右至左column :垂直从上至下column-reverse :垂直从下至上 |
flex-wrap | 设置主轴换行方式 | nowrap :不换行(默认值)wrap :自动换行wrap-reverse :反向换行 |
flex-flow | 主轴方向和换行方式的复合属性 | 无特殊要求 |
justify-content | 设置主轴对齐方式 | flex-start :主轴起点对齐(默认值)flex-end :主轴终点对齐center :主轴居中对齐space-between :均匀分布,两端对齐(最常用)space-around :均匀分布,两端距离是中间距离的一半space-evenly :均匀分布,两端距离与中间距离一致 |
align-items | 设置侧轴对齐方式(一行) | stretch :若伸缩项目未设置高度,则拉伸撑满整个容器(默认值)baseline :与伸缩项目的第一行文字的基线对齐flex-start :侧轴起点对齐flex-end :侧轴终点对齐center :侧重中点对齐 |
align-content | 设置侧轴对齐方式(多行) | stretch :若伸缩项目未设置高度,则拉伸撑满整个容器(默认值)flex-start :侧轴起点对齐flex-end :侧轴终点对齐center :侧重中点对齐space-between :均匀分布,两端对齐(最常用)space-around :均匀分布,两端距离是中间距离的一半space-evenly :均匀分布,两端距离与中间距离一致 |
flex-grow | 定义伸缩项目的放大比例 | 0 :纵使主轴存在剩余空间也不拉伸(默认值)1 :若所有伸缩项目 flex-grow: 1 ,则它们将等分剩余空间若三个伸缩项目的 flex-grow 值分别是 1、2、3 ,则它们分别瓜分到 1/6 、2/6 、3/6 的剩余空间 |
flex-basis | 设置主轴方向的基准长度 | 默认值为 auto ,浏览器会根据此值计算主轴是否存在剩余空间 |
flex-shrink | 定义伸缩项目的压缩比例 | 1 :空间不足时压缩伸缩项目以适应空间大小(默认值)其它值含义同 flex-grow |
flex | 伸缩性复合属性 | 三个值依次表示:flex-grow 、flex-shrink 、flex-basis flex: 0 1 auto :默认值flex: 1 1 auto :可简写为 flex: auto flex: 1 1 0 :可简写为 flex: 1 (最常用)flex: 0 0 auto ,可简写为 flex: none flex: 0 1 auto ,可简写为 flex: 0 auto |
order | 定义项目的主轴排列顺序 | 数值越小排列越靠前,默认为 0 |
align-self | 设置伸缩项目侧轴单独对齐 | auto :继承父元素的 align-items 属性(默认值)其它值同 align-items 的属性值 |
八、布局案例
8.1 布局技巧
-
网页版心:在
PC
端网页中,一般都会有一个固定宽度且水平居中的盒子用来展示网页的主要内容,称之为网页版心。版心的宽度一般在960~1200
像素之间 -
常用布局名词:
位置 类名 顶部导航条 topbar 页头 header、page-header 导航 nav、navigator、navbar 搜索框 search、search-box 横幅、广告、宣传图 banner 主要内容 content、main 侧边栏 aside、sidebar 页脚 footer、page-footer
8.2 对齐技巧
-
单行文本基于父元素水平垂直居中:详见
3.4
小节- 水平居中:设置父元素
text-align: center
- 垂直居中:使得父元素
line-height=height
- 水平居中:设置父元素
-
子元素基于父元素水平居中:
- 行内元素和行内块元素:设置父元素
text-align: center
- 块元素:设置父元素
margin: 0 auto
- 行内元素和行内块元素:设置父元素
-
子元素基于父元素垂直居中:
-
行内元素和行内块元素:设置父元素
line-height=height
,设置子元素vertical-algin: middle
。需要绝对垂直居中时设置父元素font-size: 0
,因为vertical-algin: middle
使元素的中部与父元素的基线加上父元素x
高度的一半对齐。详见3.4
小节<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行内或行内块子元素基于父元素水平垂直居中</title> <style> .outer { width: 400px; height: 400px; background-color: orange; text-align: center; line-height: 400px; /* 设置 `font-size: 0` 以避免 x 高度的一半对子元素 `vertical-align: middle` 的影响 */ font-size: 0; } span { vertical-align: middle; background-color: blueviolet; font-size: 20px; } img { vertical-align: middle; } </style> </head> <body> <div class="outer"> <span>inner-x</span> <img src="https://pic.imeitou.com/uploads/allimg/240511/10-2405111G102-50-lp.jpg" height="100" alt="image-100px"> </div> </body> </html>
-
块元素:设置子元素
margin-top: value
,其中value = (父元素内容高度 - 子元素盒子高度) / 2
,注意解决margin
塌陷问题<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块级子元素基于父元素水平垂直居中</title> <style> .outer { width: 400px; height: 400px; background-color: orange; /* 解决 margin 塌陷问题 */ overflow: hidden; } .inner { width: 200px; height: 100px; background-color: blueviolet; margin: 0 auto; /* value = (400 - 100) / 2 = 150 */ margin-top: 150px; } </style> </head> <body> <div class="outer"> <div class="inner">inner</div> </div> </body> </html>
-
-
定位元素基于包含块水平垂直居中:详见
6.6
小节 -
flex
布局实现水平垂直居中:-
方式一:
flex + justify-content + align-items
.outer { width: 400px; height: 400px; background-color: #888; display: flex; justify-content: center; align-items: center; } .inner { width: 100px; height: 100px; background-color: orange; }
-
方式二:
父元素flex + 子元素margin
.outer { width: 400px; height: 400px; background-color: #888; display: flex; } .inner { width: 100px; height: 100px; background-color: orange; margin: auto; }
-
8.3 多列布局
多列布局:专门用于实现类似于报纸分栏的布局
属性名 | 作用 | 值说明 |
---|---|---|
column-count | 指定列数 | 值为数字 |
column-width | 指定列宽 | 长度值 |
columns | 列数和列宽的复合属性 | 无特殊要求 |
column-gap | 设置列边距 | 长度值 |
column-rule-style | 设置列与列之间边框的风格 | none :无边框(默认值)solid :实线dashed :虚线dotted :点线double :双实线 |
column-rule-width | 设置列与列之间边框的宽度 | 长度值 |
column-rule-color | 设置列与列之间边框的颜色 | 颜色值 |
column-rule | 列与列之间边框的复合属性 | 无特殊要求 |
column-span | 指定是否跨列 | none :不跨越任何列(默认值)all :跨越所有列,常用于头部标题 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多列布局</title>
<style> .content {
width: 1000px; column-count: 3; column-gap: 20px; column-rule: 1px dashed red; } h1 {
/* 横跨所有列 */ column-span: all; text-align: center; } </style>
</head>
<body>
<div class="content">
<h1>人类在探索未知的道路上又进一步</h1>
<p>北京时间10月2日至4日,2023年诺贝尔生理学或医学奖、物理学奖、化学奖陆续揭晓。8位科学家,领走了今年诺贝尔奖的3个自然科学类奖项。从为mRNA疫苗快速研发奠定基础,到打开通往电子世界的大门,再到为纳米技术增添色彩,他们的研究让人类在探索未知的道路上又进一步。</p>
<p>北京时间10月2日,2023年诺贝尔生理学或医学奖正式公布,获奖者为卡塔琳·考里科、德鲁·韦斯曼。诺贝尔奖官网这样描述他们的贡献:因为他们在核苷酸碱基修饰方面的发现,使得开发出针对COVID-19的有效mRNA疫苗成为可能。</p>
<p>mRNA被称为“信使核糖核酸”,20世纪80年代,人们研究出了在没有细胞培养的情况下产生mRNA的有效方法,这一研究也加速了分子生物学在几个领域的应用的发展,将mRNA技术用于疫苗和治疗的想法也随之出现。</p>
<p>但是困难阻碍也非常明显,其中之一是mRNA非常不稳定,另一个是mRNA可以引起强烈的炎症反应。</p>
<p>不过,这些困难并没有阻止生物化学家卡塔琳·考里科的研究。20世纪90年代初,在宾夕法尼亚大学担任助理教授的她认识了一位新同事——免疫学家德鲁·韦斯曼。德鲁·韦斯曼对树突状细胞感兴趣,树突状细胞在免疫监视和激活疫苗诱导的免疫反应中具有重要功能。在新想法的推动下,两位科学家很快开始了富有成效的合作,重点研究不同RNA类型如何与免疫系统相互作用。</p>
<p>2005年,他们发表了一篇具有里程碑意义的论文,解决了这些问题。这些开创性的研究成果比新冠大流行早了15年。</p>
</div>
</body>
</html>
8.4 传统布局
传统布局:基于传统盒模型,主要依靠
display
+position
+float
实现布局
尚品汇综合案例:https://github.com/springbear2020/study-repo/tree/master/css/atguigu-mall
8.5 弹性布局
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>弹性布局案例</title>
<style> /* 重置默认样式 */ * {
font-family: Arial, serif; font-size: 14px; margin: 0; padding: 0; border: none; } a {
text-decoration: none; } ul {
list-style: none; } /* 背景铺满全屏 */ html, body {
width: 100%; height: 100%; } body {
background-image: url("https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/flex/bg.jpg"); background-repeat: no-repeat; background-size: cover; } /* 头部 */ .page-header {
height: 70px; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .header-nav {
display: flex; } .header-nav li a {
color: white; font-size: 20px; border: 1px solid white; border-radius: 8px; padding: 10px; margin-right: 20px; } .header-nav li:last-child a {
margin-right: 0; } /* 内容区 */ .page-content {
/* 撑满视口高度 */ height: calc(100vh - 70px); display: flex; justify-content: center; align-items: center; } .content-nav {
width: 1000px; height: 300px; display: flex; justify-content: space-evenly; align-items: center; } .nav-item {
width: 180px; height: 200px; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; transition: 200ms linear; } .nav-item:hover {
cursor: pointer; box-shadow: 0 0 20px black; } .nav-item span {
color: white; font-size: 20px; } .content-nav .nav-item:nth-child(1) {
background-color: #595CA8; } .content-nav .nav-item:nth-child(2) {
background-color: #FF9D2E; } .content-nav .nav-item:nth-child(3) {
background-color: #01A6DE; } .content-nav .nav-item:nth-child(4) {
background-color: #015E91; } .content-nav .nav-item:nth-child(5) {
background-color: #1DC128; } </style>
</head>
<body>
<header class="page-header">
<a href="http://atguigu.com">
<img src="https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/flex/logo.png" alt="log" />
</a>
<ul class="header-nav">
<li><a href="http://atguigu.com">国内校区</a></li>
<li><a href="http://atguigu.com">缅甸校区</a></li>
<li><a href="http://atguigu.com">非洲校区</a></li>
<li><a href="http://atguigu.com">美国校区</a></li>
</ul>
</header>
<div class="page-content">
<ul class="content-nav">
<li class="nav-item">
<img src="https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/flex/email.png" alt="icon">
<span>我的邮箱</span>
</li>
<li class="nav-item">
<img src="https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/flex/cloud.png" alt="icon">
<span>云服务</span>
</li>
<li class="nav-item">
<img src="https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/flex/phone.png" alt="icon">
<span>手机课堂</span>
</li>
<li class="nav-item">
<img src="https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/flex/wechat.png" alt="icon">
<span>微信服务</span>
</li>
<li class="nav-item">
<img src="https://raw.githubusercontent.com/springbear2020/study-repo/main/css/images/flex/customer.png" alt="icon">
<span>在线客服</span>
</li>
</ul>
</div>
</body>
</html>
文章评论