一、 了解
CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表）是为网页添加样式的代码。
二、 补充
2.1 进制
如何表示二进制、八进制、十六进制?
二进制（0b开头, binary）：其中的数字由0、1组成，可以回顾之前学习过的机器语言。
八进制（0o开头, Octonary）：其中的数字由0~7组成。
十六进制（0x开头, hexadecimal）：其中的数字由0~9和字母a-f组成（大小写都可以）.
2.2 CSS颜色的表示方法
2.2.1 颜色关键字（color keywords）
2.2.2 RGB颜色
可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示。
① 十六进制符号：#RRGGBB[AA]
② 三位数符号、四位数符号简写
③ 函数符：
.keyboards{
/*表示一个纯灰色*/
background-color: rgb(100,100,100);
background-color: #646464;
/*表示一个纯黑色*/
background-color: rgb(0,0,0);
background-color: #000000;/*#000*/
/*表示一个纯白色*/
background-color: rgb(255,255,255);
background-color: #FFFFFF;
}2.3 Chrome浏览器开发者工具
① 打开Chrome调试工具：右键 – 检查 / 快捷键 – F12
② 技巧：ctrl+ 可以调整页面或者调试工具的字体大小；
可以通过删除某些元素来查看网页结构;
可以通过增删css来调试网页样式;
2.4 浏览器渲染的流程
三、 CSS结构
3.1 CSS语法结构
CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;
可以在style元素或者CSS文件中使用@import导入其他的CSS文件
@import url(./other.css);CSS有层叠属性
3.2 CSS样式
CSS提供了3种方法，可以将CSS样式应用到元素上：
① 内联样式（inline style） (在Vue的template中某些动态的样式是会使用内联样式的)
<div style="color: red; font-size:30px;">我是div元素</div>
<h1 style="font-size: 100px">我是标题</h1>② 内部样式表（internal style sheet） 文档样式表（document style sheet）内嵌样式表（embed style sheet） 将CSS放在HTML文件<head>元素里的<style>元素之中。
<style>
/*选择器*/
div {
color: red;
font-size:30px;
background-color: orange;
}
</style>③ 外部样式表（external style sheet）
将css样式在一个独立的css文件中编写（后缀名为.css）；并通过<link>元素引入进来；
/*css文件中*/
.title {
color: red;
font-size:30px;
background-color: orange;
} <!--html中-->
<link rel="stylesheet" href="../image/style.css">
<!--略-->
<div class="title">我是01中的title</div>3.3 link 元素
① link元素是外部资源链接元素，规范了文档与外部资源的关系
link元素通常是在head元素中
② 最常用的链接是样式表（CSS）；
此外也可以被用来创建站点图标（比如 “favicon” 图标）；
③ link元素常见的属性：
href：此属性指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的。
rel：指定链接类型，常见的链接类型：
icon：站点图标；
stylesheet：CSS样式；
HTML 属性：rel - HTML（超文本标记语言） | MDN
<link rel="icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../image/style.css">3.4 选择器
按照一定的规则选出符合条件的元素，为之添加CSS样式
选择器的种类繁多，大概可以这么归类
通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id选择器（id selectors）
属性选择器（attribute selectors）
组合（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）
3.4.1 通用选择器
所有的元素都会被选中;(效率比较低，尽量不要使用;)
/*不推荐*/
* {
font-wight: 700;
background-color: #f00;
}
/*更推荐的方法*/
body, p, div, h2, span {
margin: 0;
padding: 0;
}3.4.2 简单选择器
元素选择器 类选择器 id选择器
div { /* <div> */
color: #ff0000;
}
.box { /* class="box" */
color: #0000ff;
}
#home { /* id="home" */
color: #008000;
}id选择器：中划线-、下划线_连接，也可以使用驼峰标识
（注意：id在一个页面只能用一次）
3.4.3 属性选择器
拥有某一个属性 [att]
属性等于某个值 [att=val]
[title] { /* 包含title属性的 */
font-weight: 700;
}
[title=box] { /* 包含title属性且等于box的 */
background-color: #000ff0;
}3.4.4 后代选择器
① 所有的后代(直接/间接的后代)
选择器之间以空格分割
② 直接子代选择器(必须是直接自带)
选择器之间以 > 分割;
3.4.5 兄弟选择器
① 相邻兄弟选择器 使用符号 + 连接
② 普遍兄弟选择器 使用符号 ~ 连接
3.4.6 交集选择器 并集选择器
① 交集选择器
② 并集选择器 给多个元素设置相同的样式;用 ， 隔开
3.4.7 伪类
是选择器的一种，它用于选择处于特定状态的元素;（例如鼠标放上去时候的状态）
3.4.7.1 动态伪类
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接（鼠标在链接上长按住未松开）
:focus指当前拥有输入焦点的元素（能接收键盘输入）
使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是 :link、:visited、:focus、:hover、:active
除了a元素，:hover、:active也能用在其他元素上
直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* a元素的链接 没被访问过 */
a:link {
color: red;
}
/* a元素的链接 被访问过 */
a:visited {
color: green;
}
/* a/input元素聚焦（tab健选中时 */
a:focus {
color: yellow;
}
/* a元素鼠标放上去了 */
a:hover {
color: blue;
}
/* 点下去时候（手还没松开）*/
a:active {
color: purple;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<a href="https://bing.com" target="_blank">必应</a>
</body>
</html>浏览器查看点击状态：
3.4.7.2 结构伪类
nth-child(1) 是父元素中的第1个子元素
nth-child(2n) n代表任意正整数和0 是父元素中的第偶数个子元素（第2、4、6、8......个）
nth-child(2n + 1) 是父元素中的第奇数个子元素（第1、3、5、7......个）
nth-child(-n + 2) 代表前2个子元素（1，2）
nth-last-child( ) 从最后一个子元素开始往前计数
nth-last-child(1) 代表倒数第一个子元素
nth-last-child(-n + 2) 代表最后2个子元素
first-child 等同于:nth-child(1)
last-child 等同于:nth-last-child(1)
first-of-type 等同于:nth-of-type(1)
last-of-type 等同于:nth-last-of-type(1)
only-child 是父元素中唯一的子元素
only-of-type 是父元素中唯一的这种类型的子元素
root 根元素，就是HTML元素
empty 代表里面完全空白的元素
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后两个元素为红色*/
.box > div:nth-last-child(-n+2) {
color: #00fff0;
}
/*绕开干扰项 选择第二个div*/
.box > div:nth-of-type(2) {
color: #000ff0;
}
/*root就是html的根目录*/
:root {
font-size: 30px;
}
/*空的元素都设置为红色正方形*/
:empty {
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="box">
<div>列表元素1</div>
<span>我不是元素</span>
<div>列表元素2</div>
<div>列表元素3</div>
<div>列表元素4</div>
<div>列表元素5</div>
<div>列表元素6</div>
<div>列表元素7</div>
<div>列表元素8</div>
<div></div> <!--这个是空的-->
</div>
</body>
</html>3.4.7.3 否定伪类（negation pseudo-class）
:not()的格式是:not(x)
x是一个简单选择器
元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
:not(x)表示除x以外的元素
<style>
.box :not(.why) {
color: #000ff0;
}
</style>
</head>
<body>
<div class="box">
<div class="item">列表1</div>
<div class="why">列表2</div>
<div class="item">列表3</div>
</div>
</body>3.4.8 伪元素
为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
::first-line - ::first-letter
::first-line可以针对首行文本设置属性
::first-letter可以针对首字母设置属性
::before和::after (常用)
::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
常通过 content 属性来为一个元素添加修饰性的内容。
/*伪元素*/
.item::before {
content: "321"; /*使用伪元素，不要将content省去，即使它为空*/
color: orange;
font-size: 20px;
}
.item::after {
content: url(../images/14.png);
color: green;
font-size: 20px;
/*!*位置不是很好看*!*/
/*position: relative;!* 相对位置 *!*/
/*left: 5px;*/
/*top: 2px;*/
}<div class="box1 item">我是box</div>
<div class="box2 item ">我也是box</div>
<div class="box3">我也是box</div>3.4.9 选择器权重
!important：10000
内联样式：1000
id选择器：100
类选择器、属性选择器、伪类：10
元素选择器、伪元素：1
通配符：0
<style>
div.box {
color: red !important; /* 10000 */
}
/* id选择器：100 */
#main {
color: orange;
}
/* 类选择器：1 */
.box {
color: blue;
}
</style>
</head>
<body>
<!--内联样式：1000-->
<div id="main" class="box one two" style="color: blue;">我是div</div>3.5 盒子模型
HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性
内容（content） 元素的内容width/height
内边距（padding） 元素和内容之间的间距
边框（border） 元素自己的边框
外边距（margin） 元素和其他元素之间的间距
3.5.1 内容 content
设置内容是通过宽度和高度设置的:
宽度设置: width
高度设置: height
min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
注意: 对于行内级非替换元素来说, 设置宽高是无效的!
移动端适配时, 可以设置最大宽度和最小宽度
.keyboards{
height: 200px; /* 高度 */
min-width: 500px; /* 最小宽度 */
max-width: 750px; /* 最大宽度 */
background-color: aqua; /* 背景 */
margin: 0 auto; /* 块级元素居中 */
}3.5.2 内边距 padding
① padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;
② padding包括四个方向, 所以有如下的取值:
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
③ padding单独编写
从零点钟方向开始, 沿着顺时针转动
④ padding并非必须是四个值, 也可以有其他值;
.box{
background-color: aqua;
/* 内边距padding */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
/* 简写 */
padding: 10px 20px 30px 40px;
/* 其他情况 */
padding: 10px; /* 四个边都是等于上边10px */
padding: 10px 20px; /* 上下10px 左右20px */
padding: 10px 20px 30px; /* 上10px 左右20px 下30px */
}3.5.3 边框 border
边框相对于content/padding/margin来说特殊一些:
边框具备宽度width;
边框具备样式style;
边框具备颜色color;
① 边框宽度
border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性
② 边框颜色
border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是上面4个属性的简写属性
③ 边框样式
border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性
边框样式：
④ 整体简写（顺序任意）
border: gray 10px solid;⑤ 圆角 border-radius
数值: 通常用来设置小的圆角, 比如6px;
百分比: 通常用来设置一定的弧度或者圆形;
3.5.4 外边距 margin
① 用于设置盒子的外边距, 通常用于元素和元素之间的间距;
② margin包括四个方向, 所以有如下的取值:
margin-top：上内边距
margin-right：右内边距
margin-bottom：下内边距
margin-left：左内边距
③ margin单独编写是一个缩写属性： 也是从零点钟方向开始
④ 上下margin的传递
如何防止出现传递问题？
给父元素设置padding-top\padding-bottom
给父元素设置border
触发BFC: 设置overflow为auto
建议：
margin一般是用来设置兄弟元素之间的间距
padding一般是用来设置父子元素之间的间距
⑤ 上下margin的折叠
1> 垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）
2> 水平方方向上永远不会
3> 两个值进行比较，取较大的值
3.5.5 外轮廓 outline
不占用空间
默认显示在border的外面
outline相关属性有
outline-width: 外轮廓的宽度
outline-style：取值跟border的样式一样，比如solid、dotted等
outline-color: 外轮廓的颜色
outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似
◼ 应用实例
去除a元素、input元素的::focus轮廓效果（tab键选中时候）
a { outline: none; }3.5.6 盒子阴影 box-shadow
① box-shadow属性可以设置一个或者多个阴影 用逗号,隔开
② <shadow>的常见格式如下
第1个<length>：offset-x, 水平方向的偏移，正数往右偏移
第2个<length>：offset-y, 垂直方向的偏移，正数往下偏移
第3个<length>：blur-radius, 模糊半径
第4个<length>：spread-radius, 延伸半径
<color>：阴影的颜色，如果没有设置，就跟随color属性的颜色
inset：外框阴影变成内框阴影
③ 在线查看
Box Shadow CSS Generator | 𝗧𝗛𝗘 𝗕𝗘𝗦𝗧 𝗢𝗡𝗟𝗜𝗡𝗘 𝗖𝗦𝗦 𝗚𝗘𝗡𝗘𝗥𝗔𝗧𝗢𝗥Set the properties of your box shadow to get the CSS style. Use the sliders and the color picker to set the values and watch the live preview
https://html-css-js.com/css/generator/box-shadow/
3.5.7 文字阴影 text-shadow
相当于box-shadow, 它没有spread-radius的值;
在线查看
Text Shadow CSS Generator OnlinePick a predefined style from the gallery or generate a text shadow with your preferences. Set up the desired attributes to get the CSS code.https://html-css-js.com/css/generator/text-shadow/
3.5.8 行内非替换元素
以下属性对行内级非替换元素不起作用
width、height、margin-top、margin-bottom
padding-top、padding-bottom、上下方向的border（有效但比较特殊）
3.5.9 调整 box-sizing
用来设置盒子模型中宽高的行为
① box-sizing: content-box （W3C标准盒子模型）
元素的实际占用宽度 =
border + padding + width
元素的实际占用高度 =
border + padding + height
② box-sizing: border-box （IE8以下浏览器）
元素的实际占用宽度 =
width
元素的实际占用高度 =
height
3.5.10垂直方向的位置 vertical-align
影响 行内块级元素 在一个 行盒 中垂直方向的位
vertical-align 分析
只有文字时：
有图片，有文字时：
有图片，有文字，有inline-block（比图片要大）:
有图片，有文字，有inline-block（比图片要大）而且设置了margin-bottom:
有图片、文字、inline-block（比图片要大）而且设置了margin-bottom并且有文字:
vertical-align 属性值
baseline(默认值)：基线对齐（你得先明白什么是基线）
top：把行内级盒子的顶部跟line boxes顶部对齐
middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐
bottom：把行内级盒子的底部跟line box底部对齐
<percentage>：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0%意味着同baseline一样
<length>：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样
解决图片下边缘的间隙方法:
方法一: 设置成top/middle/bottom
方法二: 将图片设置为block元素
3.6 auto的理解
3.6.1 元素水平居中
（父元素一般都是块级元素、inline-block）
① 行内级元素(包括inline-block元素)
水平居中：在父元素中设置text-align: center;
② 块级元素
水平居中：margin: 0 auto;
画布大小 =width + left + right + ml +mr
1920 800 0 0 auto auto (auto平分了画布大小)
3.6.2 在父元素里水平居中
red box width = green box width + left + right + ml +mr
800 200 0 0 auto auto
3.6.3 在父元素里上下居中
red box width = green box height + top + bottom + mt + mb
300 100 0 0 auto auto
3.6.4 填满父元素
red box width = green box width + left + right + ml +mr
800 auto 0 0 0 0
<style>
.box {
width: 800px;
height: 300px;
background-color: #f00;
position: relative;
}
.box .container {
height: 100px;
background-color: #0f0;
position: absolute;
/*red box width = green box width + left + right + ml +mr*/
left: 0;
right: 0;
bottom: 0;
}
</style>3.8 综合练习
0、统一配置的css
body,p,h3 {
margin: 0;
padding: 0;
}
body {
background: #f5f5f5;
}
a {
text-decoration: none;
color: #333;
font-size: 12px;
}
h3 {
font-weight: 400;
}1、淘宝按键
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn{
display: inline-block;
width: 80px;
height: 42px;
font-size: 16px;
font-weight: 700;
font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;
text-align: center; /* 水平居中 */
line-height: 42px; /* 垂直居中 */
border-radius: 21px;/* 圆角 */
border: 1px rgb(255, 145, 94) solid; /* 边框线 */
box-sizing:border-box;
margin-right: 5px;/* 间距 */
}
.Login {
color: rgb(255, 255, 255);
background-color: rgb(255, 80, 0);
}
.Register {
color: rgb(255, 255, 255);
background-color: rgb(255, 144, 0);
}
.New {
color: rgb(255, 144, 0);
background-color: rgb(255, 255, 255);
}
</style>
<link rel="stylesheet", href="../css/reset.css">
</head>
<body>
<a class="btn Login" href="https://login.taobao.com/member/login.jhtml" target="登录">登录</a>
<a class="btn Register" href="https://reg.taobao.com/member/reg/fast/union_reg?_regfrom=TB&_regbizsource=index">注册</a>
<a class="btn New" href="https://ishop.taobao.com/openshop/tb_open_shop_landing.htm">开店</a>
</body>
</html>2、小米商城
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
body {
background-color: rgba(117, 117, 117, 0.23);
text-align: center;
}
.item{
padding-top: 10px; /*父子关系这样调整*/
display: inline-block;
font-size: 14px;
width: 234px;
height: 300px;
text-align: center; /* 居中 */
background-color: #fff;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC",serif;
}
.item:hover{
box-shadow: 0 2px 20px 5px rgba(0,0,0,.1); /* 阴影 */
}
.item .img1 {
/*margin-top: 10px;*/ /* 父子关系不要这样调整 */
width: 160px;
height: 160px;
}
.item h3 {
margin-top: 5px;
}
.item .desc {
color: #999;
margin: 8px 10px 0 10px;
font-size: 12px;
/*单行显示省略号*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item .price {
margin-top: 15px /* 与上方间距 */
}
.item .price .new-price {
font-size: 14px;
color: rgb(255, 103, 0);
margin-right: 3px; /* 与左边间距 */
}
.item .old-price { /* 也可以这样写，不要超过4个 */
font-size: 14px;
color: rgb(176, 176, 176);
text-decoration: line-through; /* 划线 */
}
</style>
</head>
<body>
<a class="item" href="https://www.mi.com/xiaomibuds3pro">
<img class="img1" src="../../images/xiaomi.webp" alt="图片">
<h3 class="name">Xiaomi Buds 3 Pro</h3>
<p class="desc">40dB自适应降噪 ｜空间音频 ｜ HiFi高保真音质</p>
<div class="price">
<span class="new-price">349元</span>
<span class="old-price">699元</span>
</div>
</a>
</body>
</html>3、哔哩哔哩
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="../css/reset.css">
<style>
a {display: inline-block;}
body {background-color: rgba(0,0,0,.1);;}
.item {
width: 300px; /* 卡片宽度 */
margin: 0 auto; /* 水平居中 */
}
.item .info :hover{color: #00AEEC;} /* 点击后效果 */
.item .info a {
width: 100%;
overflow: hidden; /* 防止溢出 */
}
.item .album img {
width: 100%;
border-radius: 8px; /* 图片圆角 */
}
.item .info p {
font-size: 15px; /* 字体 */
margin-top: 8px;
/*显示两行*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.item .info .anchor { /* 作者及日期设置 */
font-size: 13px;
color: #888;
margin-top: 5px;
}
.item .info .anchor::before { /* up图标设置——伪元素 */
content: url("../../images/widget-up.svg");
display: inline-block;
width: 16px;
height: 16px;
position: relative; /* 相对位置 */
top: 1px; /* 相对顶端1px */
}
</style>
<body>
<div class="item">
<div class="album">
<a href="#"> /* 空链接 */
<img src="https://i1.hdslb.com/bfs/archive/d8feaedcc2f81dafb8b3ecd1fc843e3be02a3986.jpg@672w_378h_1c_!web-search-common-cover.avif" referrerpolicy="no-referrer" alt="图片"> /* 图片加载失败时：referrerpolicy */
</a>
</div>
<div class="info">
<a href="#">
<p>PKPM如何生成楼梯以及导出DWG格式PKPM如何生成楼梯以及导出DWG格式PKPM如何生成楼梯以及导出DWG格式</p>
</a>
<a class="anchor" href="#">
<span class="nickname">老王爱早起</span>
<span class="time">·2023-3-31</span>
</a>
</div>
</div>
</body>
</html>四、 CSS 属性
CSS官方文档（不推荐直接去查）
W3C standards and drafts | W3CThe World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/TR/?tag=csshttps://www.w3.org/TR/?tag=cssCSS推荐文档
CSS 参考 - CSS：层叠样式表 | MDN使用此 CSS 参考页面以浏览按字母索引的所有标准 CSS 属性、伪类、伪元素、数据类型、功能表记以及@ 规则。你也可以浏览CSS 关键概念和按类型排列的 CSS 选择器列表。还有一份简短的 DOM-CSS / CSSOM 参考。https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95由于浏览器版本、CSS版本等问题，查询某些CSS是否可用：
Can I use... Support tables for HTML5, CSS3, etchttps://caniuse.com/https://caniuse.com/
4.1 最常用的属性
font-size：文字大小 默认16
color：前景色（文字和划线颜色）
background-color：背景色
width ：宽度
height：高度
4.2 特殊属性
4.2.1 继承性 （了解）
① CSS的某些属性具有继承性(Inherited):
如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
② 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;
4.2.2 块级/行内级元素 display
① 块级元素（block-level elements）: 独占父元素的一行
② 行内级元素（inline-level elements）:多个行内级元素可以在父元素的同一行中显示
（比如a、span、strong等）
block：让元素显示为块级元素
inline：让元素显示为行内级元素
inline-block：让元素同时具备行内级、块级元素的特征
none：隐藏元素
block独占一行 可以设置高度和宽度
inline和其他内级袁术在同一行，不可以设置宽度和高度
注：
① img元素 inline - replaced（行内替换元素（不是块内级））
1> 和其他的行内级元素在同一行显示
2> 可以设置宽度和高度
② 不要在p元素内放div
③ 行内级元素中不要放块级元素
4.3 文字属性
text-decoration 文字划线 (常用)
none：无任何装饰线（可以去除a元素默认的下划线）
underline：下划线
overline：上划线
line-through：中划线（删除线）
text-transform文字大小写转换
capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
uppercase：(大写字母)将每个单词的所有字符变为大写
lowercase：(小写字母)将每个单词的所有字符变为小写
none：没有任何影响
（实际开发中用JavaScript代码转化的更多.）
text-indent 首行缩进 (常用)
text-indent: 2em; 刚好是缩进2个文字
p {
font-size: 40px;
/*em：相对于字体的大小*/
text-indent: 2em;
}text-align 对齐方式
定义块级（例如文字）如何相对它的块父元素对齐
left：左对齐
right：右对齐
center：正中间显示
justify：两端对齐（ 但对最后一行无效）
letter-spacing 字母的间距
默认是0，可以设置为负数
word-spacing 单词的间距
默认是0，可以设置为负数
font-size 文字的大小 (常用)
具体数值+单位 比如100px
百分比 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
font-family 设置文字的字体名称 (常用)
可以设置1个或者多个字体名称;
浏览器会选择列表中第一个该计算机上有安装的字体;
或者是通过 @font-face 指定的可以直接下载的字体。
/*例如淘宝的*/
font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-weight 文字的粗细 (常用)
① 常见的取值:（只需要记住红色的400，700）
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
normal：等于400
bold：等于700
② strong、b、h1~h6等标签的font-weight默认就是bold
font-style 斜体显示
normal：常规显示
italic(斜体)：用字体的斜体显示(通常会有专门的字体，让文字向左倾斜)
oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)
font-variant 小写字母变大写
normal：常规显示
small-caps：将小写字母替换为缩小过的大写字母
line-height 文本的行高 (常用)
① 行高的严格定义是：两行文字基线（baseline）之间的间距
② 基线（baseline）：与小写字母x最底部对齐的线
③ 行高可以用于使文本垂直方向居中 （仅限于文本）(文字高度等于box高度）
line-height 元素中每一行文字所占据的高度
font 合并写（常用）
font-style font-variant font-weight font-size/line-height font-family (顺序）
① font-style、font-variant、font-weight可以随意调换顺序，也可以省略
② /line-height可以省略，如果不省略，必须跟在font-size后面
③ font-size、font-family不可以调换顺序，必写
.box{
/*关于字体属性*/
font-size: 30px; /* 文字大小 */
font-weight: 700; /* 文字粗细 */ /* =bold */
font-variant: small-caps; /* 小写字母替换为缩小的大写字母 */
font-style: italic; /* 倾斜显示/
font-family: Serif;/* 文字的字体名称 */
line-height: 30px; /* 每行文字高度 */
/*缩写形式*/
/*1.5的行高是相对于font-size的*/
font: italic small-caps 700 30px/1.5 serif;
/*font-style font-variant font-weight font-size/line-height font-family*/
}overflow 内容溢出时
visible：溢出的内容照样可见
hidden：溢出的内容直接裁剪
scroll：溢出的内容被裁剪，但可以通过滚动机制查看
会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto：自动根据内容是否溢出来决定是否提供滚动机制
元素隐藏
法一: display设置为none
元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
法二: visibility设置为hidden
设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
默认为visible, 元素是可见的;
法三: rgba设置颜色, 将a的值设置为0
rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
法四: opacity设置透明度, 设置为0
设置整个元素的透明度, 会影响所有的子元素;
（rgba和opacity可以改透明度）
.box{
display: none;
visibility:hidden;
color: rgba(255,111,111,0.5);
opacity: 0.5;
}重点（单行/多行显示）
/*单行显示省略号*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;/*显示两行*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;4.4 背景属性
background-image 背景图片
①background-image用于设置元素的背景图片
会盖在(不是覆盖)background-color的上面
②如果设置了多张图片
设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
③注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的
background-repeat 是否平铺
repeat：平铺
no-repeat：不平铺
repeat-x：只在水平方向平铺
repeat-y：只在垂直平方向平铺
background-size 图片大小
auto：默认值, 以背景图本身大小显示
cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
<percentage>：百分比，相对于背景区（background positioning area）
length：具体的大小，比如100px
background-position 具体位置
可以设置具体的数值 比如 20px 30px;
水平方向还可以设值：left、center、right
垂直方向还可以设值：top、center、bottom
如果只设置了1个方向，另一个方向默认是center
background-attachment 区块滚动/固定
scroll：此关键属性值表示背景相对于元素本身固定
local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.
fixed：此关键属性值表示背景相对于视口固定。跟着视口而不是元素滚动
background
一系列背景相关属性的简写属性
注：background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
background: #000ff0 url("../images/diqiu.jpg") 20px center /10% no-repeat ;4.5 图标和图片
border 图形
border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状:
The Shapes of CSS | CSS-Tricks - CSS-TricksCSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you havehttps://css-tricks.com/the-shapes-of-css/#top-of-site
<style>
.box {
width: 100px;
height: 100px;
border: 50px solid transparent; /* 四个边全都整为空黑白 */
border-top-color: orange; /* 保留上面那个倒三角 */
box-sizing: border-box;
transform-origin: center 25%; /* 找倒三角的旋转点（上面开始 到长度的25%） */
transform: rotate(180deg);
}
</style>Web网络字体
① 功能：用服务器自带的字体
② 工作流程：
首先, 我们需要通过一些渠道获取到希望使用的字体(不是开发来做的事情):
其次, 在我们的CSS代码当中使用该字体(重要):
最后, 在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中;
③ 用户的角度:
浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;
浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体；
在浏览器中使用对应的字体显示内容；
④ @font-face{font-family;scr;}来引入字体, 并且设置格式
<style>
/*将这个字体引用到网页中*/
@font-face {
font-family: "what";
src:url("../fonts/fonteditor/AaJianHaoTi.ttf");
}
.box {
font-family: "what",serif;
}
</style>⑤ web-fonts的兼容性
一个网站来生产对应的字体文件:
在线字体编辑器-JSON在线编辑器在线编辑你想要的字体https://font.qqe2.com/#
⑥ web fonts兼容性写法
兼容性写法可以直接在上面网站下载下来的css里复制走
@font-face {
font-family: "AaJianHaoTi";
src: url("AaJianHaoTi.eot"); /* IE9 */
src: url("AaJianHaoTi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("AaJianHaoTi.woff") format("woff"), /* chrome、firefox */
url("AaJianHaoTi.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url("AaJianHaoTi.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
font-style: normal;
font-weight: 400;
}这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）“ Paul Irish
src用于指定字体资源
url指定资源的路径
format用于帮助浏览器快速识别字体的格式
Web字体图标
1> 通过link引入iconfont.css文件
2> 使用字体图标
使用字体图标常见的有两种方式:
方式一: 通过对应字体图标的Unicode来显示代码;
方式二: 利用已经编写好的class, 直接使用即可;
<style>
@font-face {
font-family: "iconfont";
src: url("../fonts/font_ayykfxossfn/iconfont.ttf");
}
.iconfont {
font-family: "iconfont",serif;
font-style: normal;
font-size: 100px;
color: #00fff0;
}
</style>
</head>
<body>
<i class="iconfont"></i>
</body> @font-face {
font-family: "iconfont";
src: url("../fonts/font_ayykfxossfn/iconfont.ttf");
}
.icon-vedio:before { /*相当于伪元素的方式加进来*/
content: "\e61d";
}
</style>
</head>
<body>
<i class="icon-vedio"></i>
</body>
</html> <link rel="stylesheet" href="../fonts/font_ayykfxossfn/iconfont.css">
</head>
<body>
<i class="iconfont icon-vedio"></i>
</body>CSS精灵图
① 各种小图片合并到一张图片
② 使用CSS Sprite的好处
减少网页的http请求数量，加快网页响应速度，减轻服务器压力
减小图片总大小
解决了图片命名的困扰，只需要针对一张集合的图片命名
③ Sprite图片制作（雪碧图、精灵图）
方法1：Photoshop, 设计人员提供
方法2：CSS Sprites Generator Tool | Toptal®Generate CSS image sprites from multiple images with our easy-to-use uploading tool. Get started for free.https://www.toptal.com/developers/css/sprite-generator④ 精灵图的使用
精灵图的原理是通过只显示图片的很小一部分来展示的;
通常使用背景:
1> 设置对应元素的宽度和高度
2> 设置精灵图作为背景图片
3> 调整背景图片的位置来展示
⑤ 如何获取精灵图的位置
Sprite Cow - Generate CSS for sprite sheetshttp://www.spritecow.com/
<style>
.box{
background-color: #00fff0;
}
.box .topbar {
background-image: url("../images/topbar.png");
background-repeat: no-repeat;
display: inline-block;
}
.box .hot-icon {
background-position: -192px 0;
width: 26px;
height: 13px;
}
.box .logo-icon {
background-position: 0 -19px;
width: 157px;
height: 33px;
}
</style>
</head>
<body>
<div class="box">
<i class="topbar hot-icon"></i>
<i class="topbar logo-icon"></i>
</div>
</body>cursor属性
① cursor可以设置鼠标指针（光标）在元素上面时的显示样式
② cursor常见的设值有 （了解）
auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
default：由操作系统决定，一般就是一个小箭头
pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
none：没有任何指针显示在元素上面
<style>
div {
cursor: pointer;
text-decoration: underline;
color: #00f;
}
</style>
</head>
<body>
<div>我能被选择哦</div>
</body>五、CSS元素定位
5.1 position 定位
position属性
① 默认值:
static：默认值, 静态定位
② 使用下面的值, 可以让元素变成 定位元素(positioned element)
relative：相对定位
absolute：绝对定位
fixed：固定定位
sticky：粘性定位
③ 定位元素的特点
1> 可以随意设置宽高 （可以不用设置 块内级元素）
2> 宽高默认由内容决定
3> 不再受标准流的约束
不再严格按照从上到下、从左到右排布
不再严格区分块级、行内级，块级、行内级的很多特性都会消失
4> 不再给父元素汇报宽高数据（例如图片的大小不会影响到div父元素的高度了）
5> 脱标元素内部默认还是按照标准流布局
标准流布局
默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布
从左到右、从上到下按顺序摆放好
默认情况下，互相之间不存在层叠现象
static 静态定位
元素按照normal flow布局
left 、right、top、bottom没有任何作用
relative 相对定位
① 元素按照normal flow布局（原来位置还占用着）
② 对当前元素位置进行微调
③ 定位参照对象是元素自己原来的位置
④ left、right、top、bottom用来设置元素的具体位置
例：始终让图片处于视口中间（不管如何缩放浏览器）
<style>
.box {
height: 489px;
overflow: hidden;
background-color: #f00;
}
.box img {
/*position: relative;*/
/*left: -920px;*/
/*translate中的百分比是相对于自己*/
transform: translate(-50%);
/*向右移动div的一半 margin中的百分比是相对于父元素 */
margin-left: 50%;
}
</style>
fixed 固定定位
元素脱离normal flow（脱离标准流、脱标）
可以通过left、right、top、bottom进行定位
定位参照对象是视口（viewport）
当画布滚动时，固定不动（画布/视口 不解释了，懂的都懂）
absolute 绝对定位
元素脱离normal flow（脱离标准流、脱标）
可以通过left、right、top、bottom进行定位
定位参照对象是最邻近的定位祖先元素
如果找不到这样的祖先元素，参照对象是视口
子绝父相 子绝父绝
sticky 粘性定位
不兼容老ie;
可以看做是相对定位和固定(绝对)定位的结合体;
它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;
当达到这个阈值点时, 就会变成固定(绝对)定位;
<style>
.nav {
background-color: #f00;
position: sticky;
top: 0; /*至少设置一个相对于谁*/
}
</style>z-index 层叠顺序
① z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）
取值可以是正整数、负整数、0
② 比较原则
1> 如果是兄弟关系
z-index越大，层叠在越上面
z-index相等，写在后面的那个元素层叠在上面
2> 如果不是兄弟关系
各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
而且这2个定位元素必须有设置z-index的具体数值
z-index: 1;网易云——绝对定位
(ps： 累死了）
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<div class="item">
<div class="top">
<img src="../../images/music_flowers.jpg" alt="音乐封面">
<a class="cover" href="#" ></a>
<div class="info">
<i class="icon-music"></i>
<span class="count">2966万</span>
<a class="icon-play" href="#"></a>
</div>
</div>
<a class="bottom" href="#">
<i class="icon-video"></i>
<span class="title">古典清香 I 我的茶馆里住着巴赫与肖邦</span>
</a>
</div>
</body>
</html>@import url("../css/reset.css");
.item {
width: 140px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}
.item .top{
position: relative;
width: 140px;
height: 140px;
}
.item .top .img {
/*将图片下面的多出来的区域去掉*/
/*vertical-align: top;*/
display: block;
}
.item .top .cover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url("../../images/music_coverall.png");
/*background-color: #f00;*/
background-position: 0 0;
}
.item .top .info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 27px;
padding-left: 10px;
line-height: 27px;
/*background-color: #f00;*/
background-image: url("../../images/music_coverall.png");
background-position: 0 -537px;
}
.item .top .info .icon-music {
/*position: relative;*/
/*top: 0;*/
display: inline-block;
width: 14px;
height: 11px;
background-image: url("../../images/music_iconall.png");
/*background-color: #f00;*/
background-position: 0 -24px;
}
.item .top .info .count {
position: relative;
margin-left: 4px;
bottom: 0;
font-size: 12px;
width: 100%;
color: #ccc;
height: 27px;
}
.item .top .info .icon-play {
position: absolute;
top: 1px;
bottom: 0;
right: 10px;
margin: auto 0;
display: inline-block;
width: 16px;
height: 17px;
background-image: url("../../images/music_iconall.png");
/*background-color: #f00;*/
background-position: 0 0;
}
.item .bottom {
position: absolute;
margin-top: 6px;
width: 140px;
}
.item .bottom .icon-video {
position: relative;
top: 3px;
display: inline-block;
height: 15px;
width: 35px;
background-image: url("../../images/music_icon.png");
/*background-color: #f00;*/
background-position: -31px -658px;
}
.item .bottom .title {
margin-left: 5px;
font-size: 14px;
}
.item .bottom .title:hover {
text-decoration: underline;
}5.2 float 浮动定位
5.2.1 历史
float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果;
但是早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具;
5.2.2 浮动定位
① 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
② float的常用取值
none：不浮动，默认值
left：向左浮动
right：向右浮动
5.2.3 浮动的规则
① 定位元素会层叠在浮动元素上面
② 浮动元素的左（右）边界不能超出包含块的左（右）边界
③ 不能重叠
如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
④ 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
⑤ 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
5.2.3 clear 清浮动
① 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
② 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
③ 清浮动clear: 让父元素计算总高度的时候，把浮动子元素的高度算进去
clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
clear的常用取值
left：要求元素的顶部低于之前生成的所有左浮动元素的底部
right：要求元素的顶部低于之前生成的所有右浮动元素的底部
both：要求元素的顶部低于之前生成
清浮动的方法：
给父元素增加::after伪元素
纯CSS样式解决，结构与样式分离（推荐）
.clear-fix::after {
content: "";
display: block;
clear: both;
visibility: hidden; /* 浏览器兼容性 */
height: 0; /* 浏览器兼容性 */
}
.clear-fix {
*zoom: 1; /* IE6/7兼容性 */
}练习
导航窗口
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*初始化*/
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #333;
}
/*全局*/
body {
background-color: #f2f2f2;
}
/*内容样式*/
ul > li {
float: left;
margin-left: 12px;
}
ul > li >a {
display: inline-block;
width: 36px;
height: 36px;
font-style: normal;
font-weight: 400;
text-align: center;
color: #3951b3;
background-color: #fff;
line-height: 36px;
border: none;
border-radius: 6px;
}
ul > li > a:hover, ul .active > a {
background-color: #4e6ef2;
color: #fff;
}
ul > li.next >a {
width: 80px;
}
</style>
</head>
<body>
<ul>
<li class="item"><a href="#">1</a></li>
<li class="item"><a href="#">2</a></li>
<li class="item"><a href="#">3</a></li>
<li class="item"><a href="#">4</a></li>
<li class="item"><a href="#">5</a></li>
<li class="item active"><a href="#">6</a></li>
<li class="item"><a href="#">7</a></li>
<li class="item"><a href="#">8</a></li>
<li class="item"><a href="#">9</a></li>
<li class="item"><a href="#">10</a></li>
<li class="item next"><a href="#">下一页 ></a></li>
</ul>
</body>
</html> JD商品界面
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
text-decoration: none;
color: #333;
}
ul li {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #00fff0;
}
.content {
/*background-color: #666;*/
width: 1190px;
margin: 0 auto;
}
div > ul.wapper {
margin-block-start: 0;
padding-inline-start: 0;
margin-right: -10px;
}
.clear-fix::after {
content: "";
display: block;
clear: both;
visibility: hidden; /* 浏览器兼容性 */
height: 0; /* 浏览器兼容性 */
}
.clear-fix {
*zoom: 1; /* IE6/7兼容性 */
}
div > ul > li > a.item {
display: inline-block;
float: left;
width: 290px;
background-color: #fff;
margin-right: 10px;
margin-bottom: 10px;
}
div > ul > li > a.left {
height: 370px;
}
div > ul >li a.right {
height: 180px;
}
</style>
</head>
<body>
<div class="content">
<ul class="wapper clear-fix">
<li ><a class="item left" href="#"></a></li>
<li><a class="item left" href="#"></a></li>
<li><a class="item left" href="#"></a></li>
<li><a class="item right" href="#"></a></li>
<li><a class="item right" href="#"></a></li>
<li><a class="item right" href="#"></a></li>
<li><a class="item right" href="#"></a></li>
<li><a class="item right" href="#"></a></li>
<li><a class="item right" href="#"></a></li>
</ul>
</div>
</body>
</html>kaola商品界面
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: #e9e9e9;
}
.content {
width: 1100px;
margin: 0 auto;
}
.item {
width: 221px;
height: 168px;
background: #fff;
color: #000;
float: left;
border: 1px solid #e9e9e9;
margin-left: -1px;
box-sizing: border-box;
}
.item.first {
width: 220px;
}
.clear-fix::after {
content: "";
display: block;
clear: both;
visibility: hidden; /* 浏览器兼容性 */
height: 0; /* 浏览器兼容性 */
}
.clear-fix {
*zoom: 1; /* IE6/7兼容性 */
}
</style>
</head>
<body>
<div class="content">
<div class="box clear-fix">
<div class="item first icon">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>xiaomi-dress
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
.box-dress {
width: 1226px;
margin: 0 auto;
}
.box-dress .box-hd {
height: 58px;
line-height: 58px;
}
.box-dress .box-hd .left-area {
float: left;
font-size: 22px;
}
.box-dress .box-hd .right-area {
float: right;
font-size: 16px;
}
.box-dress .box-hd .right-area .more{
margin: 0 0 0 30px;
padding: 2px 0;
}
.box-dress .right-area .more:hover, .box-dress .right-area .active {
border-bottom: 2px solid #ff6700;
color: #ff6700;
}
.box-dress .box-bd .brick-list {
margin-left: -14px;
}
.box-dress .box-bd .brick-list .item {
float: left;
width: 234px;
height: 300px;
background-color: #fff;
margin-left: 14px;
margin-bottom: 14px;
/*动画*/
transition: all .2s linear;
}
.box-dress .box-bd .brick-list .item-l {
width: 234px;
height: 614px;
}
.box-dress .box-bd .brick-list .item-s {
width: 234px;
height: 143px;
}
.box-dress .box-bd .brick-list .item a {
display: inline-block;
width: 100%;
height: 100%;
}
.item:hover{
box-shadow: 0 2px 20px 5px rgba(0,0,0,.1); /* 阴影 */
transform: translateY(-2px);/* 动画 */
}
</style>
</head>
<body>
<div class="box-dress">
<div class="box-hd clear-fix">
<div class="left-area">
<h2 class="title">智能穿戴</h2>
</div>
<div class="right-area">
<a class="more active" href="#">耳机</a>
<a class="more" href="#">穿戴</a>
</div>
</div>
<div class="box-bd">
<ul class="brick-list clear-fix">
<li class="item item-l"><a href="#">1</a></li>
<li class="item"><a href="#">2</a></li>
<li class="item"><a href="#">1</a></li>
<li class="item"><a href="#">1</a></li>
<li class="item"><a href="#">1</a></li>
<li class="item"><a href="#">1</a></li>
<li class="item"><a href="#">1</a></li>
<li class="item item-s"><a href="#">1</a></li>
<li class="item item-s"><a href="#">1</a></li>
<li class="item item-s"><a href="#">1</a></li>
<li class="item item-s"><a href="#">1</a></li>
</ul>
</div>
</div>
</body>
</html>a {
color: #424242;
text-decoration: none;
}
h2 {
margin: 0;
font-weight: 400;
font-size: 1em;
}
.clear-fix::after {
content: "";
display: block;
clear: both;
visibility: hidden; /*兼容*/
height: 0;
}
.clear-fix {
*zoom: 1; /*IE兼容*/
}
body {
color: #424242;
font: 14px / 1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
background-color: #f5f5f5;
}
ul ,li {
padding: 0;
margin: 0;
list-style: none;
}5.3 flex布局
① 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;
② flex布局是目前web开发中使用最多的布局方案：
③ 目前特别在移动端可以说已经完全普及;
④ 在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;
⑤ 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。
⑥ 最担心的是兼容性问题
flex container和flex item
① flex item的布局将受flex container属性的设置来进行控制和布局;
② flex item不再严格区分块级元素和行内级元素;
③ flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;
④ 设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
flex： flex container 以 block-level 形式存在
inline-flex： flex container 以 inline-level 形式存在
main axis和cross axis
布局有两个方向：主轴方向和垂直于主轴方向
flex相关的属性总结
| 应用在 flex container 上的 CSS 属性 | 应用在 flex items 上的 CSS 属性 |
|---|---|
| flex-flow | flex-grow |
| flex-direction | flex-basis |
| flex-wrap | flex-shrink |
| justify-content | order |
| align-items | align-item |
| align-content | flex |
flex-direction 主轴方向
flex-direction 决定了 main axis 的方向，有 4 个取值
row（默认值）、row-reverse、column、column-reverse
flex-wrap 单行还是多行
nowrap（默认）：单行
wrap：多行
wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）
flex-flow 是direction 和 wrap 的简写
顺序任何, 并且都可以省略
justify-content 对齐方式（主轴）
flex-start（默认值）：与 main start 对齐
flex-end：与 main end 对齐
center：居中对齐
space-between：
flex items 之间的距离相等
与 main start、main end两端对齐
space-around：
flex items 之间的距离相等
flex items 边距是 flex items 之间距离的一半
space-evenly：
flex items 之间的距离相等
flex items 边距 等于 flex items 之间的距离
align-item 对齐方式（副轴）
normal：在弹性布局中，效果和stretch一样
stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
baseline：与基准线对齐
align-content 多行文本对齐（副轴）
用法与 justify-content 类似
stretch（默认值）：与 align-items 的 stretch 类似
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
space-between：
flex items 之间的距离相等
与边距两端对齐
space-around：
flex items 之间的距离相等
flex items 边距是 flex items 之间距离的一半
space-evenly：
flex items 之间的距离相等
flex items边距距离 等于 flex items 之间的距离
order items排布顺序
可以设置任意整数（正整数、负整数、0），值越小就越排在前面
默认值是 0
flex items 单独设置align-items
auto（默认值）：遵从 flex container 的 align-items 设置
stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致
flex-grow 如何扩展(拉伸/成长)
可以设置任意非负数字（正小数、正整数、0），默认值是 0
当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
flex-shrink items 如何收缩(缩小)
可以设置任意非负数字（正小数、正整数、0），默认值是 1
当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效
flex-basis 基础长度（单词溢出不溢出）
flex-basis 用来设置 flex items 在 main axis 方向上的 base size
auto（默认值）、具体的宽度数值（100px）
决定 flex items 最终 base size 的因素，从优先级高到低
max-width\max-height\min-width\min-height
flex-basis
width\height
内容本身的 size
flex属性 简写
① 单值语法: 值必须为以下其中之一:
一个无单位数(<number>): 它会被当作<flex-grow>的值。
一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。
关键字none，auto或initial.
② 双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
第二个值必须为以下之一：
一个无单位数：它会被当作 <flex-shrink> 的值。
一个有效的宽度值: 它会被当作 <flex-basis> 的值。
③ 三值语法:
第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。
对齐问题
→ 
法一、 手算间距
法二、使用span填充空隙 添加span的个数是列数减2
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
width: 500px;
background-color: orange;
display: flex;
flex-wrap: wrap; /*多行显示*/
justify-content: space-around; /*对齐：两边无空隙。中间均分*/
}
.item {
width: 110px;
height: 140px;
}
.container > span {
width: 110px;
}
/*.container > span*/
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">1</div>
<!--添加span的个数是列数减2-->
<span></span><span></span>
</div>
<script src="../js/itemRandomColor.js"></script>
</body>
</html>function getRandomColor() {
return `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`
}
const itemEls = document.querySelectorAll(".item")
for (const item of itemEls) {
item.style.backgroundColor = getRandomColor()
}
5.4 水平居中/垂直居中
1、水平居中：
1、行内级元素： 设置父元素的
text-align: center;2、块级元素： 设置当前块级元素（宽度）
margin: 0 auto;3、绝对定位： 元素有宽度的情况下
left0/right0/margin: 0 auto;4、flex：
justify-content: center;1、垂直居中：绝对定位
弊端：
1> 必须使用定位（脱离标准流）
2> 必须给元素设置高度
<style>
.container1 {
position: relative;
height: 300px;
background-color: orange;
align-items: center;
}
.box1 {
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
margin: auto 0;
background-color: #f00;
}
</style>
<body>
<div class="container1">
<div class="box1">what</div>
</div>
</body>2、垂直居中：flex布局（直接使用flex）
弊端：
1> 当前flex局部中所有的元素都会被垂直居中
2> 相对来说，兼容性差一点（可以被忽视）
<style>
.container2 {
height: 300px;
display: flex;
background-color: orange;
}
.box2 {
top: 0;
bottom: 0;
background-color: #f00;
}
</style>
<body>
<div class="container2">
<div class="box2">what</div>
</div>
</body>3、垂直居中：top/translate
两件事情：
让元素向下位移父元素的50%
让元素向下位移自身的50%
不行：margin-top的百分比是相对于包含块（父元素）的宽度
<style>
.container3 {
position: relative;
height: 300px;
background-color: orange;
}
.box3 {
display: inline-block;
background-color: #f00;
height: 50px;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
</style>
<body>
<div class="container3">
<div class="box3">what</div>
</div>
</body>六、 CSS动画
① transform是形变：
一个CSS属性，该CSS属性用于设置形变；
后面的值是形变的函数，比如scale、rotate、translate；
② translate是其中一个transform-function
用于对元素进行平移；
③ transition是过渡的意思
它本身也有转变的含义，但是更多表示的是过渡的过程；
6.1 tranform 旋转，缩放，倾斜或平移
对于行内级非替换元素是无效的 比如对span、a元素等；
常见的函数transform function有：
平移：translate(x, y)
缩放：scale(x, y)
旋转：rotate(deg)
倾斜：skew(deg, deg)
translate(x, y) 位移
数字：100px
百分比：参照元素本身
translate是translateX和translateY函数的简写。
translate的百分比可以完成一个元素的水平和垂直居中：
（居中在单独的小节总结过）
scale(x, y) 缩放
数字：
1：保持不变
2：放大一倍
0.5：缩小一半
百分比：百分比不常用
一个值时，设置x轴上的缩放
二个值时，设置x轴和y轴上的缩放
rotate(<angle>) 旋转
① 值个数
一个值时，表示旋转的角度
② 值类型：
常用单位deg：旋转的角度（ degrees ）
正数为顺时针
负数为逆时针
③ rotate的其他单位
度（degrees）、 百分度（gradians）、弧度（radians）或圈数（turns）；
skew(x, y) 倾斜
① 倾斜：skew(x, y)
函数定义了一个元素在二维平面上的倾斜转换。
② 值个数
一个值时，表示x轴上的倾斜
二个值时，表示x轴和y轴上的倾斜
③ 值类型：
deg：倾斜的角度
正数为顺时针
负数为逆时针
origin 形变的原点
① 一个值：
设置x轴的原点
② 两个值：
设置x轴和y轴的原点
③ 必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个
left, center, right, top, bottom关键字
length：从左上角开始计算
百分比：参考元素本身大小
transform-origin: top left;transform 多值
.box {
width: 200px;
height: 200px;
background-color: #f00;
transform-origin: top left;
transform: translate(100px) scale(0.5) rotate(45deg) ;
}6.2 transition动画
CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。
可以让CSS属性变化成为一个持续一段时间的过程，而不是立即生效的；
比如将一个元素从一个位置移动到另外一个位置，默认在修改完CSS属性后会立即生效；
但是我们可以通过CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化；
通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为开始与结束之间的状态由浏览器决定。
CSS transitions 可以决定
哪些属性发生动画效果 (明确地列出这些属性)
何时开始 (设置 delay）
持续多久 (设置 duration)
如何动画 (定义timing function，比如匀速地或先快后慢)。
查看属性是否可以做CSS动画
① 在MDN可执行动画的CSS属性中查询动画性 CSS 属性 - CSS：层叠样式表 | MDNCSS 动画和过渡依赖于动画性属性这一概念，且所有 CSS 属性除非另有规定否则均有动画性。每个属性的动画类型决定了此属性的值如何结合——插值、相加或累积。过渡仅涉及插值，而动画可能使用所有三种结合方法。https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties② 阅读CSS属性的文档说明
transition CSS 属性
transition-property：指定应用过渡属性的名称
all：所有属性都执行动画；
none：所有属性都不执行动画；
CSS属性名称：要执行动画的CSS属性名称，比如width、left、transform等；
transition-duration：指定过渡动画所需的时间
单位可以是秒（s）或毫秒（ms）
transition-timing-function：指定动画的变化曲线
transition-timing-function - CSS：层叠样式表 | MDNCSS 属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个 transition 变化过程中，变化速度可以不断改变。https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-functiontransition-delay：指定过渡动画执行之前的等待时间
.box {
position: relative;
left: 0;
width: 200px;
height: 100px;
background-color: orange;
/*告诉浏览器box在进行一些CSS属性变化的时候有一个过渡效果 */
/*transition-property: left, transform; !* 指定给左侧位移加动画 *!*/
/*transition-duration: 1s; !* 指定动画所需要的时间 *!*/
/*transition-timing-function: ease-in; !* 指定动画的变化曲线 *!*/
/*transition-delay: 2s; !* 延迟两秒后才开始 *!*/
/*简写属性*/
/*transition: all 1s ease-in 2s;*/
}
.box:hover {
left: 100px;
transform: translate(100px);
}6.3 Animation 动画
如果我们希望可以有更多状态的变化，我们可以使用CSS Animation。
CSS Animation的使用分成两个步骤：
步骤一：使用keyframes定义动画序列（每一帧动画如何执行）
步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等
@keyframes规则
可以使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配：
关键帧使用percentage来指定动画发生的时间点；
0%表示动画的第一时刻，100%表示动画的最终时刻；
因为这两个时间点十分重要，所以还有特殊的别名：from和to；
也就是说可以使用from和to关键字：
from相当于0%
to相当于100%
animation属性
animation-name：指定执行哪一个关键帧动画
animation-duration：指定动画的持续时间
animation-timing-function：指定动画的变化曲线
animation-delay：指定延迟执行的时间
animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画
animation-direction：指定方向，常用值normal和reverse
animation-fill-mode：执行动画最后保留哪一个值
none：回到没有执行动画的位置
forwards：动画最后一帧的位置
backwards：动画第一帧的位置
animation-play-state：指定动画运行或者暂停（在JavaScript中使用，用于暂停动画）
.box {
position: relative;
left: 0;
width: 200px;
height: 100px;
background-color: orange;
/*box要执行moveAnim动画*/
animation-delay: 2s; /* 延迟执行的时间 */
animation-name: moveAnim; /* 指定执行哪一个关键帧动画 */
animation-duration: 3s; /* 动画的持续时间 */
animation-timing-function: ease-in-out; /* 变化曲线 */
animation-fill-mode: backwards; /* 动画最后回到原点 */
}
@keyframes moveAnim {
0% {transform: translate(0, 0) scale(0.5, 0.5);}
33% {transform: translate(0, 200px) scale(1.2, 1.2);}
66% {transform: translate(400px, 200px) scale(1, 1);}
100% {transform: translate(400px, 400px) scale(0.5, 0.5);}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
