本文详细介绍了CSS的基础知识，包括选择器的使用、盒模型、布局方式、浮动、定位、以及各种类型的布局技巧。重点讲解了浮动元素、BFC（块级格式化上下文）、相对定位、绝对定位、固定定位、粘滞定位的概念和应用场景。此外，还涵盖了字体、背景、行高、文本样式、渐变和动画等CSS特性，旨在帮助读者深入理解CSS在网页设计中的重要性和使用技巧。
CSS知识点
在写内部样式表时遵循css的语法
注释：/* */
-
CSS的基本语法：
- 选择器：通过选择器可以选择页面中的特定元素
- 申明块：通过声明块来指定要为元素设置的样式；声明块由一个个声明组成；声明是一个名值对结构；
-
选择器
-
常用选择器
-
元素选择器：根据标签来选择指定元素
p{};h1{};div{} -
id选择器：根据元素的id属性来选择一个元素
语法： #id属性值{} #box{}，#red{} -
class选择器：可以通过class属性来对元素分组(一个元素可以有多个class)
语法：.class属性值 .blue{ color: blue; } .abc{ font-size: 60px; } <p class="blue abc">一个内容<p> <p class="blue">另一个内容<p> -
通配选择器：选中页面中的所有元素
语法：*{}
-
-
复合选择器
-
交集选择器：选择同时复合多个条件的元素(交集选择器如果有元素选择器，必须使用元素选择器开头)
语法：选择器1.选择器2.选择器n{} div.red{ color: red; } -
并集选择器（选择器分组）：同时选择多个选择器对应的元素；
语法：选择器1，选择器2，选择器n{} h1,span{ color: green; } #b1,.p1,span,div.red{ color: red; } -
选择同一个标签内的所有元素
p*{plate}
-
-
关系选择器
-
元素关系：
父元素：直接包含子元素的元素；
子元素：直接被父元素包含的元素；
祖先元素：直接或间接包含后代元素的元素；
后代元素：直接或间接被祖先元素包含的元素；
兄弟元素：拥有相同父元素的元素；
<body> <div class="box1"> 我是一个div <p> 我是div中的p元素 <span> 我是p元素中的span元素</span> </p> <span> 我是div中的span</span> </div> <div class="box2"> 我是另一个div <span> 我是div中的span元素<span> </div> </body>-
子元素选择器：选择指定父元素的子元素；
语法：父元素 > 子元素{} div.box1 > span { color: red; } -
后代元素选择器：可以选择指定元素中的指定后代元素；
语法：祖先 后代{} div span{ color: blue; } -
兄弟选择器1：选择指定元素的下一个兄弟元素；
语法：指定的 + 下一个{} p + span{ color: red; } -
兄弟选择器2：选择指定元素下边的所有兄弟元素；
语法：指定元素 ~ 兄弟元素； p ~ span{ color: red; }
-
-
属性选择器
- [属性名] 选择含有指定属性的元素
- [属性名^=属性值] 选择属性值以指定值开头的元素
- [属性名$=属性值] 选择属性值以指定值结尾的元素
- [属性名*=属性值] 选择属性值中含有指定值的元素
-
[属性名 = 属性值] 选择含有指定属性和属性值的元素
p[title]{ color: orange } *[title$=晴天]{ font-size: small; } p[title^=晴]{ background: white； } <body> <p title="晴天">一行白鹭上青天</p> <p title="黄天">一行白鹭上黄天</p> <p title="晴朗">一行白鹭上黑天</p> </body>
-
-
伪类选择器
伪类：不存在的类，特殊的类；伪类用来描述一个元素的特殊的状态，比如：第一个元素，被点击的元素，鼠标移入的元素；
伪类一般使用冒号‘ : ’ 开头
-
伪类分类
-
child类 ：根据所有的子元素来排序选择
-
:first-child : 指定第一个子元素为其添加样式
<style> ul>li:first-child{ color: orange; } </style> <body> <ul> <li class="first">第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> </ul> </body>- ：last-child: 指定最后一个子元素；
- ：nth-child( n ) : 选择第n个子元素；
- 特殊值(括号内的值)：
- n : 选择0~∞的子元素；
- 2n 或even : 选择偶数位的元素；
- 2n+1 或 odd ：选择奇数位的元素；
- 特殊值(括号内的值)：
-
-
type类 ：在同类型子元素内排序选择
- ：first-of-type
- ：last-of-type
- ：nth-of-type( )
-
not( ) ：否定伪类，将符合条件的元素从选择器中去除；
<style> ul>li : not( : nth-of-type(2))/*除了第二个li*/{ color: green; } /*ul>li : not ( : nth-child(2)) 除了子元素的第二个，即第一个li*/ </style> <body> <ul> <span>我是一个span</span> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> </ul> </body>
-
-
a标签的伪类
- ：link 表示表示没访问过的链接 （正常的链接）
- ：visited 表示访问过的链接（由于隐私的原因，visited这个伪类只能修改链接的颜色）
- ：hover 表示鼠标移入的状态
- ：active 表示鼠标点击（ : hover和 : active 是所有元素的）
<style> a:link{ color: red; font-size:50px; } a:visited{ color:auqa; } a:hover{ color: orange; } a:active{ color: yellow; } </style> <html> <a href="www.baidu.com">未访问的链接</a> <a herf="www.baidu123.com">访问过的链接</a> </html>
-
-
伪元素
表示页面中一些特殊的并不真实存在的元素（特殊的位置）；伪元素使用 ‘：：’ 开头；
例子：表示第一个字母 : : first-letter{ } 表示第一行 : : first-line{ } 表示选择的元素 : : selection{ } 表示元素开始的位置 : : before{ } 表示元素的最后 : : after{ } after和before要结合content元素来使用span :: after{ content : abc; color : red; }
-
-
继承
- 样式的继承：一个元素的样式同时会应用在该元素的后代元素上
- 注意：并不是所有的样式都会被继承，比如：背景相关的，布局相关的样式不会被继承
-
选择器的权重
-
样式的冲突：当通过不同的选择器选中同一个元素并且为相同的样式设置不同的值时，此时就发生了样式的冲突；
-
选择器的权重：内联样式（1000）>id选择器（100）>类和伪类选择器（10）>元素选择器（1）>通配选择器（0）>继承的样式（没有优先级）
-
比较选择器的权重时要将选择器的权重相加（分组选择器单独计算）选择器的累加不会超过其最大的数量级
-
如果优先级计算后相等，此时则优先使用靠下的样式
-
可以在某个样式的后面加 !important ，此时这个样式的优先级高于内联样式（慎用）
.d1{ background-color: purple !important }
-
-
像素与百分比
-
父元素设置好像素值后将子元素设置为相对于父元素的百分比，子元素可以跟随父元素的改变而改变（宽高只用改一个另一个属性会随比例变化）
<style> .box1{ width: 200px; height: 200px; background-color: orange; } .box2{ width: 50%; height: 50%; background-color: red; } </style> <body> <div class="box1"> <div class="box2"></div> </div> </body>- em与rem
- em是相对于元素的字体来计算：1em = 1font-size；em会根据字体的大小来改变；
- rem是相对与根元素（html的样式）的字体来计算；
- RGB值
- 色值范围：0~255；
- 语法：RGB（red, green, blue）;
- 十六进制的RGB：#红色绿色蓝色；颜色浓度00~ff；如果颜色两位两位连续重复可以简写：#aabbcc—>#abc;
- RGBA
- 在RGB的基础上加上了透明度（0~1），需要四个值
- 语法：RGBA（R，G，B，A）
- HSL值
- 色相 H（0~360）
- 饱和度 S 颜色的浓度（0%~100%）
- 亮度 L 颜色的亮度 （0%~100%）
- em与rem
-
-
布局（layout）
-
文档流（normal flow）
- 文档流是网页的最底层，创建的元素默认都是在文档流中排列
- 元素的两种状态：在文档流中；不在文档流中（脱离文档流 ）
- 元素在文档流中的特点
- 块元素（div）
- 块元素会在页面中独占一行（不考虑块元素的宽度，自上而下垂直排列）
- 默认宽度为父元素的全部（会把父元素撑满）
- 默认高度是被子元素（内容）撑开
- 行内元素（span）
- 行内元素不会独占一行；
- 行内元素在页面中自左向右水平排列，如果一行之中不能容下所有行内元素时，元素会换到第二行继续自左向右排列；
- 行内元素的默认宽度和默认宽度都是由内容（子元素）撑开
- 块元素（div）
-
盒子模型（box model）
-
内容区（content）
- 元素中的所有子元素和文本内容都在内容区排列；
- 内容区的宽高由width和height设置；
-
边框（border）
-
设置边框需要至少三个样式：边框宽度（border-width） 边框颜色（border-color） 边框样式（border-style）
-
边框的大小会影响到盒子的大小
-
border-width如果设置参数对应的边框宽度情况：四个参数：上右下左分布（顺时针）；三个参数：上 左右 下；两个参数：上下 左右；
-
border-width的四个方向也可以由border-xxx-width来设置（xxx：top right left bottom）；
-
边框颜色，样式的设置方式与边框宽度的设置方式一致；
-
border-color默认与color（字体的颜色，前景色）属性一致
-
边框样式：solid（实线）；dotted（点状虚线）；dashed（虚线）；double（双实线）
-
border-style默认值=none；
-
border的简写属性（无顺序要求）
border: 10px soild orange; 给一个盒子设置三个边框： border:10px solid orange; border-bottom: none;
-
-
内边距（padding）
-
内边距的设置会影响到盒子的大小；
-
内容区和边框之间是内边距；
-
内边距有四个方向：padding-left; padding-right; padding-top; padding-bottom;
-
内容区的背景颜色会延伸到内边距；
-
在盒子中添加一个子元素将父元素的内容区撑满可以区分内容区和内边距；
-
盒子的可见框由内容区，内边距，边框共同决定；
-
padding的简写属性
padding: 10px(上)10px（左）10px（下）10px（右） padding: 10px(上)10px（左右）10px（下） padding: 10px(上下)10px（左右） padding: 10px(上下左右)
-
-
外边距（margin）
- 外边距不影响盒子的可见框的大小，但外边距会影响盒子的位置；
- 一共有四个方向的外边距
- margin-top: 盒子会向下移动
- margin-bottom：盒子会挤下方的盒子
- margin-left：盒子向右移动
- margin-right：盒子会挤右边的盒子
- mragin可以设置负值，设置成负值的外边距元素会向正值的反方向移动；
- 默认情况下设置margin-right不会有任何效果；
- margin的简写属性写法与padding一致；
- margin会影响到盒子实际占用的空间；
-
-
盒子的水平布局
-
元素在父元素中的水平布局由以下属性决定：
- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right
七个属性的宽度相加必须等于父元素内容区的宽度；如果不满足，称为过渡约束，浏览器会自动调整
- 调整情况
-
如果七个值中没有为auto的情况，则浏览器会自动调整margin-right的值使得等式成立
-
如果有auto（width，margin-left，margin-right可以设置为auto），浏览器将调整auto；
-
如果将width和一个外边距设置为auto，width将为最大，margin为零；如果设置三个auto，width将最大，margin为零；
-
如果设置两个margin设置为auto，width为固定值，则会将margin设置为相同的值，利用这个属性可以使元素在父元素中水平居中
width: xxpx; margin: 0 auto;
-
-
-
盒子的垂直布局
- 子元素是在父元素的内容区排列的，如果父元素设置了height，而子元素超过了父元素的height，子元素就会从父元素中溢出；此时可以使用css属性 overflow 来设置父元素如何处理溢出的子元素
- overflow可选值：
- visible：默认值 子元素从父元素溢出，在父元素外部显示；
- hidden：溢出内容将会被裁剪；
- scroll：生成两个滚动条，通过滚动条来查看完整内容（溢出的文本）
- auto：根据需要生成滚动条
- overflow-x / overflow-y：单独处理水平方向 / 垂直方向的溢出；
-
垂直外边距的折叠
相邻的垂直方向外边距会发生折叠
- 兄弟元素间的相邻垂直外边距（外边距为正值）会取两者之间的较大值；特殊情况：如果相邻的外边距一正一负，则取两者之和；同为负值，则取两者中绝对值大的
- 父子元素：父子元素间的相邻外边距，子元素的外边距会传递给父元素（margin-top）不利于开发
-
行内元素的盒子模型
- 行内元素不支持设置高度和宽度
- 行内元素可以设置padding/border/margin，但是垂直方向的padding/border/margin不会影响页面的布局,且水平方向上的margin不会折叠
- display属性：设置元素显示的类型
- 可选值：
- inline 将元素设置为行内元素
- block 将元素设置为块元素
- inline-block 将元素设置为行内块元素，可以设置元素的宽高又不会独占一行（两个行内块元素之间会有间隙）
- table 将元素设置为一个表格
- none 元素不在页面中显示
- 可选值：
- visibility属性：设置元素的显示状态
- 可选值
- visible：默认值，正常显示；
- hidden：元素在页面中隐藏，不显示，但依然在页面中占据位置
- 可选值
-
浏览器的默认样式
通常情况下，浏览器都会为元素设置一些默认样式；默认样式的存在会影响到页面的布局，一般要去掉浏览器的默认样式
-
去除默认样式（粗犷地去除）：
*{ margin: 0; padding: 0; } -
link引入现成的css reset文件 （文件的引入放在title标签下避免修改其他css文件）
<link rel="stylesheet" herf="./CSS/CSSreset/reset.css"> or <link rel="stylesheet" herf="./CSS /CSSreset/normalize.css">
-
-
盒子的尺寸
- 默认情况下盒子的可见框的大小由内容区，内边距和边框共同决定
- box-sizing：设置盒子尺寸的计算方式（设置width和height的作用）
- 可选值：
- content-box：默认值，设置padding和border会撑开盒子，width和height只决定内容区的大小；
- border-box：width和height决定盒子的总大小，设置border和padding会向内容区挤压；
- inherit：规定从父元素继承box-sizing的属性值；
- 可选值：
-
轮廓阴影和圆角
-
outline：用来设置元素的轮廓线，用法与border一致（轮廓不会影响到可见款的大小）outline不会影响到页面的布局，可配合hover使用
.box1:hover{ outline: red 10px soild; } /* 当鼠标移入时在box外围加上边框，不会影响页面布局但会遮挡box周围的元素*/ .box2:hover{ border: red 10px solid; } /* 当鼠标移入时在box外围加上边框，不会影响页面布局但会遮挡box周围的元素*/ -
box-shadow：设置元素的阴影效果，阴影不会影响页面的布局
- 第一个值：左侧偏移量 设置阴影的水平位置 正值向右移动，负值向左移动
- 第二个值：垂直偏移量 设置阴影的垂直位置 正值向下移动 负值向上移动
- 第三个值：阴影的模糊半径
- 第四个值：阴影的颜色（rgba//r g b a值 .1 ~ .9 调整透明度）
-
border-radius：设置圆角 参数可以设置四个圆角的半径
- 四个值 ：左上 右上 右下 左下
- 三个值 ： 左上 右上/左下 右下
- 两个值 ： 左上/右下 右上/左下
- 一个值 ： 四个方向
-
-
flex布局
-
-
浮动（float）：让页面中的元素使得块元素可以水平排列
-
可选值：
- none：默认值；
- left：元素向左浮动
- right：元素向右浮动
-
浮动的特点：
-
通过浮动可以使一个元素向其父元素的左侧或右侧移动；
-
块元素设置浮动后水平布局的等式不需要强制成立；
-
设置浮动后元素将完全从文档流中脱离，不再占据文档流的位置，元素下边的还在文档流中的元素会自动向上移动；
-
浮动元素默认不会从父元素溢出；
-
浮动元素不会覆盖其他浮动元素，浮动元素向左或向右浮动时不会超过比它先设置浮动的同方向的元素
-
默认情况下浮动元素都是按html的编排顺序来浮动，后一个元素不会超过前一个浮动元素的位置
<head> <style> .box1{ width: 400px; height: 200px; background-color: #bfa; float: left; } .box2{ width: 400px; height: 200px; background-color: orange; float: left; } .box3{ width: 200px; height: 200px; background-color: yellow; float: right; } </style> </head> <body> <div class"box1"></div> <div class"box2"></div> <div class"box3"></div> </body>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hiBMCHYU-1635301198510)(CSS%E7%9F%A5%E8%AF%86%E7%82%B9%20ab14be0ae0274dbc8ccb00f72a0d00d5/Untitled.png)]
-
浮动元素不会覆盖文本，默认效果为文字环绕浮动元素；
-
元素设置浮动后将从文档流中脱离，其元素的一些特点也会发生一些变化
- 块元素不在页面中独占一行；
- 块元素的宽高都默认被内容撑开；
- 行内元素脱离文档流后就变成了块元素，特点与块元素一致（脱离文档流后元素就不分块元素和行内元素了）
-
-
网页的布局（使用语义化标签）
- 网页头部（header标签）
- 网页主体（main标签）
- 网页底部（footer标签）
- 网页导航（nav标签）
- 文本内容（article标签）
- 边栏（aside标签）
-
高度塌陷和BFC
- 在网页布局中父元素的高度默认是被子元素撑开，子元素设置浮动后脱离文档流就无法撑起父元素的高度，导致父元素高度塌陷 父元素高度丢失后，父元素下方的元素自动上移，导致页面布局混乱
- BFC（Block Formatting Context 块级格式化环境）：
- BFC是CSS中的隐含属性，为一个元素开启BFC后该元素会变成一个独立的布局区域
- 开启BFC的元素的特点：
- 元素不会被浮动元素覆盖；
- 子元素和父元素的外边距不会重叠（解决父子元素垂直外边距折叠问题）；
- 开启BFC元素可以包含浮动的子元素；
- 部分开启元素BFC的特殊方式：
- 设置元素浮动或设置行内块元素（缺点：宽度也将变为由子元素撑开并且影响页面布局，行内块元素不利于页面布局）；
- 将元素的overflow设置为非visible的值（hidden/auto）
-
clear
- 作用：清除浮动元素对当前元素的影响；
- 原理：设置去除浮动后浏览器会自动为元素添加一个上外边距，使其不受其他浮动元素的影响
- 可选值：left/right/both：去除左侧/右侧/两侧（左右两侧影响更大的那个浮动元素）浮动元素对当前元素的影响
-
高度塌陷的最终解决方案（使用伪元素 ::after）
-
通过 ::after在浮动元素的尾部添加一个“标签”
.box{ ... ... float: left; } .box::after{ content: ''; display: block; /*content添加行内元素 需要转换成块元素才能清除浮动*/ clear: both; /*设置清除浮动使伪元素不受浮动元素的影响留在浮动元素的尾部*/ }
-
-
clearfix解决外边距折叠和高度塌陷问题
.clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; } <body> <div class"clearfix box1"> <div class"box2"></div> <!--父元素的类（clearfix）可以继承到子元素--> </div> </body>
-
-
定位（position）
-
定位是一种高级的布局手段
-
通过定位可以将元素摆放到页面的任意位置；
-
position属性可选值
- static：默认值，元素是静止的没有开启定位
- relative：开启相对定位；
- absolute：开启绝对定位；
- fixed：开启固定定位；
- sticky：开启粘滞定位；
-
偏移量（offset）：元素开启定位后可以通过偏移量来设置元素的位置
- top：定位元素和定位位置上边的距离；
- bottom：定位元素和定位位置下边的距离；
- left：定位元素与定位位置的左侧距离；
- right：定位元素与定位位置的右侧距离
- 定位元素垂直方向的位置由top和bottom之一来控制 top越大，元素越下移 bottom越大，元素越往上移；
- 定位元素水平方向的位置由left和right之一来控制 left越大，元素越右移 right越大，元素越往左移；
-
相对定位（relative）特点
- 元素开启相对定位后如果不设置偏移量元素不会发生变化
- 相对定位是参照于元素在文档流中的位置来定位的（定位位置就是元素原来的位置）
- 相对定位会提升元素的层级
- 相对定位不会使元素脱离文档流，不会改变元素的性质（块元素/行内元素）该元素（如果是块元素）依然会在原来的位置独占一行；
-
绝对定位（absolute）特点
- 开启绝对定位后如果不设置偏移量元素的位置不会发生变化；
- 元素会脱离文档流；
- 绝对定位会改变元素的性质：行内元素变成块元素，块元素的宽高都被内容撑开；
- 绝对定位会提升元素的层级
- 绝对定位元素是相对与包含快进行定位的
- 包含块
- 正常情况下：包含块就是离当前元素最近的祖先块元素；
- 开启绝对定位的情况：包含块就是最近的开启了定位（position不为默认值）的祖先元素，如果所有的祖先元素都没有开启定位，包含块就是网页的根元素（html/初始包含块）；
- 包含块
-
固定定位（fixed）特点
- 固定定位也是一种绝对定位，固定定位的大部分特点与绝对定位一样；
- 唯一不同的是固定定位永远参照与浏览器的视口简写定位
- 固定定位的元素不会随网页滚动而移动
-
粘滞定位（sticky）特点
- 粘滞定位与相对定位特点基本一致；
- 不同点是粘滞定位可以在元素达到某个位置时将其固定；
- 兼容性不好；
-
绝对定位元素的布局
- 水平布局
- 开启绝对定位后水平布局需要满足等式：left+7个参数+right=包含块内容区的宽度；
- 此时的水平布局规则与之前的规则一样；
- 当发生过渡约束，如果9个值没有auto 则自动调整right使得等式满足；
- 如果9个值中有auto（可以设置auto：width margin left right）就调整auto；
- left与right的默认值为auto，如果不设置浏览器就会自动调整这两个值；
- 垂直布局
- 包含块内容区高度=top+margin+padding+border+height
- 没有auto默认调整top（top和bottom默认值为auto）
- 水平布局
-
元素的层级
- 对于开启了绝对定位的元素，可以通过z-index属性来指定元素的层级（z-index需要一个整数来作为参数，值越大元素的层级越高，层级越高越优先显示 ）
- 如果元素的层级一样，则优先显示靠下的元素；
- 祖先元素的层级会继承给后代元素
-
-
字体和背景（font&background）
-
font-size单位：em/rem;
-
front-family（字体值）
- 可选值（字体大类）：指定字体的类别，浏览器自动选择使用该类别下的一种；
- serif：衬线字体
- sans-serif：非衬线字体；
- monospace：等宽字体；
- fantasy：虚幻字体；
- cursive：草书字体；
- font-family 可以指定多个字体，用逗号隔开，字体的优先级按顺序降低；
- 可选值（字体大类）：指定字体的类别，浏览器自动选择使用该类别下的一种；
-
font-face属性：将服务器上的字体提供到用户本地
@font-face { font-family: /*自定义字体的名字*/ src: url('/.../.../'); /*服务器中字体的路径*/ }- 字体加载第一次加载速度较慢
- 版权受限
-
图标字体（iconfont）
在网页中经常要使用一些图标，可以通过图片来引入图标，但图片较大，并且不灵活；
在使用图标时可以将图标直接设置成字体
-
fontawesome使用步骤：
- 将css文件夹和webfont文件夹移入项目
- 将all.css引入网页（）
- 使用图标字体（字体图标（矢量图）不会失真，可以设置样式 ）
-
直接通过类名来使用字体
<i class"fas fa-bell"></i> <span class"fab fa-accessible-i"></span> <!-- fas/fab 是固定格式; 标签使用任意行内标签即可 --> -
使用伪元素选择器
- 找到要设置图标的元素通过before或者after选中
- 在content中添加图标字体的编码
- 设置字体的样式
- fab类别：font-family： ‘Font Awesome 5 Brands’;
- fas类别：font-family：‘Font Awesome 5 Free’; font-weight：900；
-
使用实体
<span class="fas"></span>
-
-
iconfront
离线版：将下载的图标包移入项目；link引入；使用实体/类名/伪元素；
在线版：
-
-
行高
- 行高是指文字占有的实际高度
- line-height可以设置行高
- 行高可以指定一个大小（em / px / 一个整数 —> 此时行高会是字体的指定的倍数）
- 字体框：字体存在的格子，设置font-size实际上就是在设置字体框的大小
- 行高会在字体框的上下平均分配
-
字体的简写属性
- font: 字体大小/行高 字体族
- 行高可以省略不写，行高会被设置成默认值
-
文本的样式
-
text-align（文本的对齐）可选值
- left：左侧对齐
- right：右对齐
- center：居中对齐
- justify：两端对齐
-
vertical-align（设置元素的垂直对齐）可选值
- 默认值（基线对齐）：baseline
- 顶部对齐：top
- 底部对齐：bottom（可以处理图片基线对齐问题）
- 居中对齐：middle
-
white-space（处理网页中的空白）
默认值：normal
nowrap：不换行
pre：保留空白
-
-
背景
-
设置背景图片
background-image: url() -
设置背景颜色
background-color: #... -
提升设置背景图片和颜色，颜色会成为图片的背景色
-
如果背景图大小小于元素的大小，则背景图会在元素中平铺，将元素撑满
-
如果图片比元素大，则背景图无法完全显示
-
background-repeat：设置背景的重复方式
- repeat：默认值，图片沿着x轴，y轴双向重复
- repeat-x：沿着x轴重复
- repeat-y：…
- no-repeat：图片不重复
-
background-position：设置背景图片的位置
-
通过top，center，bottom，left，right其中的两个值来定位图片的位置（如果只写一个值，则第二个值默认为center）
-
通过偏移量来指定图片的位置（水平方向(正值向右)和垂直方向（正值向下）变量来设置）
background-position: 100px 100px;
-
-
background-clip：设置背景的范围
- border-box：默认值，背景会出现在边框中
- padding-box：背景出现在内容区和内边距
- content-box：背景出现在内容区
-
background-origin：背景图片计算图片偏移量计算的原点
- padding-box：默认值，background-position从内边距开始计算
- content-box：从内容区计算
- border-box：从边框出计算
-
background-size： 设置背景图的大小
- cover：图片比例不变，将元素铺满
- contain：图片比例不变，将图片在元素中完整显示
- 参数1 参数2：第一个表示宽度，第二个表示高度
-
background-attachment：设置背景是否跟随元素移动
- scroll：默认值，背景跟随图片移动
- fixed：背景固定在页面中
-
-
线性渐变（颜色沿一条直线变化） linear-gradient（）
background下的一个属性
开头可以指定渐变的方向（to left, to right, to top , to bottom xxdeg [deg表示度数]）
background-image: linear-gradient(to top right,red,teal)渐变可以同时指定多个颜色，多个颜色默认情况下平均分布
repeating-linear-graident（）可以平铺的线性渐变（优先级高于no-repeat）
-
径向渐变 （radial-gradient）
默认情况下，径向渐变的形状是根据元素的形状来计算的
手动指定（circle或者ellipse）
background-image: radial-gradient(ellipse,red,teal)background-image: radial-gradient(100px,100px,at center centerred,teal)radial-gradient(大小 at 位置，颜色，位置，颜色，位置)
-
大小：
circle 圆形
ellipse 椭圆
closest-side 近边
farthest-corner 远角
closest-corner 近角
farthest-side 远边
-
-
-
动画
- 2D转换
- 3D转换
- 过渡
- 动画
扫一扫
8922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
