CSS样式
- Web前端三层：
HTML：结构层 CSS：样式层 JS：行为层 - CSS层叠式样式表：使用符合CSS语法的纯文本为页面添加样式效果。
- 注释：/* 描述规则，没有任何作用 */ 快捷键：Ctrl+/
- HTML：<table border=” ”>
CSS:table{ border: ;}
使用CSS选择器定义标签
<style>
选择器{属性名称：属性值;} <!--必须加分号-->
</style>
- CSS对空格、换行、缩进不敏感；
CSS发送到服务器之前：对代码进行压缩，删除所有空格、换行，代码显示在一行，文件体积变小，加载速度快。 - CSS语言需要绑定HTML，来渲染结构和内容（不能单独运行）
CSS引入HTML的方式有四种：行内（内联）式；嵌入（内嵌）式；外链（链接）式；导入式。 - 添加样式的方式分为三种：
1.直接将CSS代码编写到style属性中，缺点：会导致结构和表现耦合，不方便代码的复用，并且不方便后期的维护，所以开发中永远不要使用内联样式。
<p style=”color:颜色；font-size:字体大小；”
2.样式编写在style标签中(style写在head里)，缺点：只能在当前页面复用，在其他里面不能用
将样式编写在style标签中，通过CSS选择器选中指定的元素并为其设置样式。将HTML与CSS分开，CSS样式可以复用，方便后期维护
<style>
table{ border: ;} /*设置边框*/
li{list-style-type: ;} 分号，冒号必须要写
</style>
3.创建style.css文件，在其中编写样式，在HTML中引入，可以在不同页面使用。
优点：将样式表写在外部文件中，可以充分利用到浏览器的缓存机制，进而加快页面的加载速度，提高用户体验
<link rel=’stylesheet’ href=’style.css’
8. 引入CSS的目的：为了达到结构和样式分离；更加丰富的效果，浏览器兼容性更好，HTML结构代码书写量减少。
9. CSS语法：选择器（选择哪个标签进行样式设置）
声明块：样式规则（给标签添加什么属性）：样式+样式值 利用;隔开样式
语法：选择器{
样式名称：样式值；}
选择器
- 元素选择器
作用：根据标签选中指定的元素
语法：标签名 p{},div{}
例：第二行设置字体大小50px
#p2{color:red;font-size:50px} - 选择器分组（并集选择器）
作用：为多个选择器设置同样的样式
语法：选择器1，选择器2，…选择器N{}
例：为第三行、第四行、第五行设置一个背景颜色为黄
style: #p3,#p4,#p5{background:yellow} /逗号表示并集/
body: <p id=’p1’> </p> - 类选择器 p.p1+tab键=<p class=’p1’> </p>
作用：根据元素的class属性选中元素，功能更强大
为元素进行分类，拥有相同class属性的元素属于同一类元素，可以重复使用
例子：.p{}，.div{}
body: <p class=”p2 p3 p4”> </p>
style: .p4{background:yellow} /*包含p4都设置为 */ - 通配选择器
作用：选择页面的所有元素
语法：*{color:red;} - 交集选择器
作用：选中同时符合多个选择器的元素
语法：选择器1.选择器2{} - 父子兄弟选择器
元素间的关系：
父元素
- 直接包含子元素的元素
子元素
- 直接被父元素所包含的元素
祖先元素
- 直接或间接包含后代元素的元素
-父元素也属于祖先元素
后代元素
- 直接或间接被祖先元素包含的元素
- 子元素也属性后代元素
兄弟元素
- 拥有相同父元素的元素 - 后代元素选择器
作用：选中指定元素的指定后代
语法：祖先 后代{}
例子：div span{}
选择某一特定的div进行操作：
body: <div class=”d1”> <span> </span> </div>
style: .d1 span{background:yellow}
-
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素 {}
例子：div>span{ } -
兄弟元素选择器
作用：兄+弟{}选择紧随其后的一个兄弟元素；兄~弟{}选择其后面的所有兄弟元素。
语法：A+B{}==选择B；A~B{}
div+span{}
div~span{} -
伪类选择器
作用：一般用来表示元素的一些特殊的状态或者特殊的位置
：first-child–表示第一个子元素（所有的子元素中）
：first-of-type–同类型中的第一个子元素
：last-child ：last-of-type
：nth-child（even/odd/n）第n个子元素，奇数偶数
：nth-of-type（even/od/n）同类型的第n个元素
：only-child唯一的一个子元素
：only-of-type同类型中唯一一个子元素
：empty：匹配空元素 div:empty{ }
：not（.p1）所有p都选择除了p1
例子：p：first-child
div p:first-child{ }
p:first-child{ } -
a的伪类
:link
- 正常的超链接（带有href的a标签)
- 主要用来设置没有访问的链接的样式
:visited
- 访问过的超链接（只能修改字体的颜色）
:hover
- 鼠标移入的状态（不仅仅适用于超链接）
:active
- 鼠标正在点击的状态（不仅仅适用于超链接） -
属性选择器
作用：根据元素的属性来选中元素
语法：[属性名] 获取含有指定属性的元素
例子：div[title]{ }：含有title元素的div
[title]{ }
[title=” ”]{ }
[title^=’ h ’]{ } ^以什么开头 [title$=’ h ’]{ } $以什么结尾
[title*=’ h ’]{ } *包含就行，不管位置
[title=’ ’ i]{ } i无论大小写 -
伪元素
伪元素主要表示一些特殊的元素
::before 表示元素开头的位置
::after 表示元素结尾的位置
::first-letter 表示首字母
::first-line 首行
::selection 选中的内容时，呈现出来的效果
.box1::before{color= ;content=’ ’}在开头加入设定文字
P::first-letter{ } -
继承
<p><span> </span></p>:两者格式相同，继承关系
继承
在网页中后代元素会继承到祖先元素上的样式
- 为祖先元素所设置样式，也会同时应用到其后代元素上
- 继承的存在大大的简化了样式的编写
可以只为祖先元素设置样式，即可让所有后代元素都同时具有该样式
在开发中可以将一些公共的样式，统一设置到祖先元素上，这样即可让所有的元素都具有该样式
- 并不是所有的样式都会被继承，比如背景相关的样式都不会继承，还有布局相关…
<div style=’width:10px;height:5px;background-color:red;’></div> -
选择器的权重！！！
当使用不同的选择器选择了相同的元素，而又为其同一个样式设置了不同的值，此时就发生了样式的冲突
显示哪个样式，由选择器的权重决定，权重高的优先显示
优先级：若添加！important（最重要，慎用）
内联样式 1000(1,0,0,0)
id选择器 100 (0,1,0,0)
类和伪类 10 (0,0,1,0)
元素 1 (0,0,0,1)
通配选择器 0 (0,0,0,0)
继承来的样式，没有优先级
.box1{color=’’ ! important}
p.p1{}>.p1{}==10+1>10 对于复合选择器来说，需要将所有的选择器的优先级相加再比较
优先级计算时不会超过其最大的数量级,分组选择器中的优先级是独立计算的。如果两个选择器的优先级相同，则使用靠下的样式。
盒子模型
- 盒子模型（框模型 box model）
- 浏览器在渲染页面时，它会将页面中的每一个元素都想象成是一个矩形的盒子。
- 想象成盒子以后，对于页面的布局就变成了如何摆放盒子
- 每一个盒子从内到外都有以下几个部分组成 - 内容区（content）：内容区决定这个盒子能装多少东西（子元素）
内边距（padding）：内容区和边框之间的距离
边框（border）：盒子的边框，边框，是盒子的边界，出了边框就是盒子外部的
外边距（margin）：盒子距离其他盒子的距离
边框（border）
- 边框（border）
边框相关的三个样式
border-color 边框的颜色 border-color：#00ffcc;
border-style 边框的样式 border-style：dashed;
border-width 边框的宽度 border-width：30px;
边框会影响到盒子的可见框大小
border-width表示边框的宽度
- 可以通过该属性分别制定边框四个方向的宽度
border-width: 10px 20px 30px 40px;
如果指定了四个宽度，则会分别设置上右下左四个方向的边框的宽度
border-width: 10px 20px 30px;
三个值：上 左右 下
border-width: 10px 20px;
两个值：上下 左右
border-width: 10px;
一个值：上下左右
border-color边框的颜色，可以分别指定四个边的颜色，规则和border-width一样。
border-color: red orange blue aqua; 上右下左----顺时针旋转
border-color: silver;
border-style 指定边框的样式
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
border-style: solid dotted dashed double;------顺时针旋转
border-style: solid dotted dashed ;--------------上左右下
border-style: solid dotted;------------------------上下左右
border-right: yellow solid ; - 边框（border）
不指定宽度，默认宽度 一般3px
不指定颜色，默认使用字体颜色-随字体颜色变
边框可同时设置四个方向边框的宽度、颜色、样式，并且没有顺序要求
border:red 10px solid
除了border还有四个
border-top 上 border-right 右 border-bottom 下 border-left 左 - 内边距（padding）边框和内容区之间的距离叫做内边距
盒子的可见框大小由内容区，内边距和边框共同决定
四个方向的内边距
padding-top 上 padding-right 右 padding-bottom下 padding-left 左
通过padding来同时设置四个方向的内边距，规则和border-width一样
padding: 10px 20px 30px 40px;
padding: 10px 20px 30px ;
padding: 10px 20px ;
padding: 10px ; - 外边框（margin）
当前盒子和其他盒子之间的距离，外边距不会影响盒子的可见框的大小，但是外边距会影响到盒子实际占地的大小，影响盒子的位置。
四个方向的外边距：
margin-top margin-right margin-bottom margin-left
由于在浏览器中默认情况下，元素是靠左靠上排列的，所以设置上左外边距时，会移动元素自身，而设置下和右外边距时，会移动其他元素
外边距可以是负值，如果是负值则元素会向相反方向移动 margin-top: -50px;
同时设置四个方向的外边距margin: 10px 20px 30px 40px;
- 水平方向布局
子元素在父元素的位置是父元素的内容区
子元素在父元素中的水平方向的布局，必须满足如下等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素的width（7个值和[自动补全]=父元素的宽度）
在水平方向，有三个值可以设置auto
分别是 margin-left width margin-right
设置为auto以后，浏览器会自动计算该属性的值
- 若七个值和相加不等于父元素宽度，则属于过度约束，则浏览器会自动调整右外边距的值
- 如果将margin-left 或 margin-right 的一侧设置为auto，则另一侧会设置尽量大的值
- 若left和right都设置auto，则会将两侧外边距设置相等的值，导致子元素在父元素中水平居中 - 垂直方向布局：（简单）
margin-top+border-top+padding-top+height+margin-bottom+border-bottom+padding-bottom=父元素高度
box1>box2:
width设置auto时，子元素会占满父元素
height设置auto时，父元素的高度由子元素内容决定
1.当父元素写死时，子元素的高度高于父元素时，会溢出，溢出的子元素不会影响页面布局。
使用 overflow 来设置溢出内容的处理方式：
可选值：
visible，默认值 溢出内容不会被裁剪直接在父元素外部显示
hidden，溢出的内容会被裁剪，超过父元素的不会显示
scroll，生成滚动条，可以通过滚动条查看完整内容，滚动条一直在
auto，根据需要生成滚动条
2.兄弟元素的外边距的折叠（margin）
<style>
.box1{
height:100px;
Width:100px;
Margin-bottom:100px;
}
.box2{
height:100px;
Width:100px;
Margin-top:100px;
</style>
外边距的折叠，垂直方向相邻的外边距，会发生外边距折叠现象。
兄弟元素间的相邻外边距，会去两个外边距间的最大值（正值）；如果是负值，取绝对值较大的。
两个外边距：相邻的外边距，谁大用谁的距离
一正一负：取两个值的和
3.父子元素的外边距折叠
父子元素的相邻垂直外边距，子元素的外边距会传递给父元素
<style>
.box1{
width:200px;
heigth:300px;
background-color:#bfa;
border-top:1px red solid;
}
.box2{
width:200px;
heigth:300px;
background-color:orange;
margin-top:100px;
</style>
}
- 文档流（常规流、标准流）
-文档流是网页中的一个位置，默认情况下页面中的所有元素都在文档流中排列
-块元素在文档流中的特点
自上向下进行排列（独占一行）
默认宽度和元素一样
默认高度被内容撑开
<div> </div>
-行内元素在文档流中的特点
自左向右水平排列，如果一行中不足以容纳所有元素则切换到下一行继续自左向右水平排列
默认高度和宽度都会被内容撑开
<span> </span> - 行内元素的盒模型
内联元素不支持设置宽度和高度<span> </span>
内联元素可以设置padding（border），但垂直方向padding（border）不会影响页面的布局
内联元素支持水平方向的外边距，不支持垂直方向的 - display
-指定元素所产生的框的类型
-可选值：
inline行内元素
block块元素
inline-block行内块元素
-既有行内元素的特点，不会独占一行；又有块元素的特点，可设置宽高
none元素不在页面中显示
内联元素无法改变宽度和高度，将超链接变成块元素，就可以改变大小
display:block;
<style>
a{
width:200px;
height:200px;
background:#ofd;
dispaly:none;
}
.box1:hover a { 鼠标碰到连接时出现
display:block;///inline
}
</style>
- visibility设置元素的显示状态
可选值：visible:默认值，元素正常显示
hidden不显示元素，但元素依旧占据位置
display:none :不显示元素，而且不占据位置 - 二级菜单
当鼠标移动到xxx时，显示二级菜单
.outer>xxx:hover .inner{祖先与后代关系
display:block;} - 默认样式
为了确保网页在没有样式的情况下，也可以浏览，所以浏览器都会为网页设置一些默认样式，对开发者来说没有任何作用，并且不同的浏览器所设置的默认样式不同，开发中第一件事就是去除浏览器的默认样式。
*{margin:0;
padding:0; 去掉所有边框，外边界}
重点：CSS权威指南—利用reset.css直接引入，可以去除所有默认样式，推荐
normalize.css–统一 - 块元素和行内元素一般情况下，只会在块中放内联元素，不会向内联元素放块元素
块元素：用于页面的布局 p：不能放任何块元素
行内元素：主要用于页面中选中文字 a：什么都能放，除了自己
<style>
img-list{height:190px;
width:470px;
background-color:#33ffss;
margin:auto; //居中
list-style:none; //去掉列表前面的样式}
.img-list img{
height:100%;
width:100%;}
</style>
<ul class=’img-list’>
<li><a href=”#”><img src=”img/1.jpg”></a></li>
<li><a href=”#”><img src=”img/2.jpg”></a></li>
<li><a href=”#”><img src=”img/3.jpg”></a></li>
</ul>
- 文本修饰text-decoration:none: 去除下划线
<style>
.nav {width:190px;
height:450px;
padding:10px 0;
margin:0 auto;
list-style:none;
background-color:white;}
.nav li {height:25px;
padding-left:18px;}
.nav li:hover{
background-color:gray;}
.nav li a{
font-size:18px;
text-decoration:none;
color:#333;}
.nav li a:hover{
color:red;}
</style>
<ul class=’nav’>
<li><a href=”#”>xxx</a></li>
<li><a href=”#”>xxx</a><a href=”#”>xxx</a><a href=”#”>xxx</a></li>
<li><a href=”#”>xxx</a><a href=”#”>xxx</a><a href=”#”>xxx</a></li>
</ul>
字体
-
文本颜色：color:red;
字体分类：
衬线字体serif
--字体宽度各异，有衬线
--Times、Georgia、宋体
无衬线字体sans-serif
--字体宽度各异，无衬线
--Helvetica、Verdana、Arial、微软雅黑
等宽字体monospace
--字体宽度一样，一般用于代码或表格
--Courier New、Consolas
草书字体cursive
--模仿人手写的字体
--Indie Flower、Comic Sans
装饰字体Fantasy
没有什么统一特征，不属于上述类别的字体
字体族：使用font-family来设置字体族
font-family:sans-serif;
可以同时指定多个字体，多个字体之间使用逗号隔开（若字体之间有空格或者特殊符号，使用引号）
font-family:sans-serif，”Microsoft YaHei”;@font-face：字体本机有，其他人没有，用户可下载
通过@font-face可以使浏览器自动应用服务器上的字体文件
@font-face{
font-family:’myFont’;
Src:url(‘./ZCOOLXW-R.ttf’)}
注：有些字体有版权，不建议使用 -
图标字体：font-awesome.css
1. 使用步骤：将css和fonts文件夹放到项目目录
引入CSS文件
<body>
<span class="fa fa-power-off s1"></span>
</body>
<style>
.s1{font-size:120px;
color:red;}
</style>
2.将文件css和webfonts放在fa文件夹中
<link rel=“stylesheet” href=“fa/css/all.css”>
使用时：<i class=“fas fa-stroopwafel” style=“font-size: 100px;”>
阿里图标字体：http://www.iconfont.cn
选中想要的图标加入购物车，且添加到项目中，下载到本地，放入iconfont中，引入iconfont/iconfont.css
三种方法
1.通过实体
<span class=’iconfont’ style=’font-size:100px;color:red;’></span>
2.通过类
<span class=’iconfont icon-icon-test’ style =’ font-size:100px;color:red; ’> </span>
3.通过伪类
<p></p >
<style>
p::before{
content:’\e63f’
font-family:iconfont;
font-size:100px;}
</style>
- 字体大小
1em=1font-size：em也是CSS中的一个单位，相当于一个字体大小
1rem=HTML的1font-size,默认16px，相对于根元素
修改：html{font-size:200px;}
行高（line height）
行高指的是文字占有的实际高度。通过line-height来设置行高，行高可以指定一个大小（px,em），也可以直接设置整数（整数代表行高是字体的指定倍数）
为了使得文字垂直居中：行高设置和高度一样 line-height=height;
行高还可以设置文字的行间距：行间距=行高-字体大小
字体框：字体存在的格子，设置font-size实际上就是设置字体框的高度。
行高会在字体框的上下平均分配。 - 字体的简写属性
font同时设置字体相关的所有样式，后面必须是字体大小和字体族，必须写（空格隔开）
font:40px ‘Times New Roman ’，Times
font:[加粗 斜体 变形]大小/行高 字体族
行高 可以省略不写，如果不写使用默认值
字重，字体加粗：font-weight:100-900;九个级别，但基本上没有用
可选值：normal 默认值，不加粗
bold 加粗
字体样式：font-style
可选值：normal 默认值，正常
italic 斜体
字体变形：font-variant
可选值：small-caps（小型大写字母） - 文本样式
text-align：设置文本的对齐方式
left 默认值，靠左对齐
right 靠右对齐
center 居中对齐
justify 两端对齐
vertical-align：垂直对齐方式
baseline:基线对齐
top:和父元素顶部对齐
bottom:和父元素的底部对齐 可设置图片对齐，使其不向基线对齐
super：上标
sub：下标
middle:居中
text-decoration：设置文本修饰
underline：下划线
line-through:删除线
overline:上划线
none:没有线
white-space:如何处理空白内容
normal 默认值，自动换行
nowrap 不换行
pre 保留文本的格式
text-overflow: 如何处理溢出的文本
ellipsis 使用省略号来表示溢出的内容
网页背景
- 设置背景颜色 background-color:#bfa;
设置背景图片 background-image:url(“./img/…”)
注意：可以同时设置背景图片和背景颜色，这样背景颜色就会变成图片的背景色
如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满。
如果背景图片和元素一样大，则会直接正常显示。
设置背景的重复方式 background-repeat
可选值：repeat:默认值，背景会沿着x轴，y轴双向重复
repeat-x:沿着x方向重复
repeat-y:沿着y方向重复
no-repeat:背景图片不重复
设置背景图片的位置 background-position
方式：
（1）通过top,left,right,bittom,center几个表示方位词来设置背景，必须指定两个值，如果只写一个则第二个默认是center
background-position:top left;在图片的左上角
（2）通过偏移量来指定背景图片的位置，水平方向的偏移量，垂直方向的偏移量
background-position:100px 100px;水平偏移（x），垂直偏移（y）；
第一个值，水平反向偏移量
正值背景向右移动，负值向左移动
第二个值，垂直方向的偏移量
正值向下走，负值向上走
设置背景范围：
背景显示的区域 background-clip
可选值：
border-box 背景会延伸到边框的下边
padding-box 背景会设置到内边距
content-box 背景只会设置到内容区中
背景图片的偏移量计算的原点 background-origin
padding-box:默认值，background-position从内边距开始计算
content-box:背景图片的偏移量从内容区处计算
border-box:背景图片的变量从边框处开始计算
例如：background-origin: border-box;
background-clip: border-box;
设置背景图片的尺寸 background-size
需要两个值作为参数：宽度 高度
可选值：
contain 完整显示背景图片，可能会有位置没有图片
cover 图片比例不变，使图片将元素填满，可能有部分图片从元素中溢出
background-size：如果只写一个，则第二个默认是auto;
background-size:100% auto; 图像比例不变，但是宽度充满
背景图片是否跟随元素移动 background-attachment
可选值：scroll:默认值，背景图片会跟随元素移动
fixed背景图片会固定在页面，不会随元素移动
<style>
.box1{
width: 500px;
height: 500px;
overflow:auto;
padding:10px;
background-image:url("img/2.jpg");
!*设置背景图片的尺寸*!
background-size:contain;
!*用来设置背景的重复方式*!
background-repeat: no-repeat;
}
.box2{
!*溢出*!
height: 1000px;
width:300px;
background-image: url("img/1.png");
background-repeat: no-repeat;
!*背景图片是否跟随元素移动*!
background-attachment:fixed;
!*设置背景图片的位置*!
background-position: 100px 100px;
!*背景图片的偏移量计算的原点*!
background-origin: border-box;
!*设置背景显示的区域*!
background-clip: border-box;
}
</style>
可将所有的值通过background来设置：背景相关的简写属性，所有背景相关的样式都通过该样式来设置，并且样式之间没有顺序
注意：background-size必须写在background-position的后面，并且通过/隔开，background-position/background-size
background-origin必须在background-clip的前面
background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment
.box3{
width:500px;
height: 500px;
background: #bfa url("img/2.jpg") center/contain border-box content-box no-repeat fixed;
}
- 问题：当按钮状态从link 切换到hover时 或 从hover切换到 active时，第一次会出现一个闪烁！
<style>
a:link{
display: block;
width: 93px;
height: 29px;
background: url("btn/btn.png");}
/*鼠标放上去*/
a:hover{
background: url("btn/btn.png"); }
/*点击情况下*/
a:active{
background: url("btn/btn.png");}
<\style>
**原因：**图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的，用则加载，不用则不加载。
link会首先加载，而hover和active会在指定状态触发时才会加载。加载和显示之间存在一个时间差，这样在图片加载千会出现没有背景图片的情况，导致闪烁！
**解决方式：**可以将多个按钮保存到一个图片中，这样我们一次性加载所有的图片，然后通过偏移量来修改需要显示的图片即可。这个技术称为CSS Sprite（CSS精灵），这种图称为雪碧图。
优点：
将多个图片保存到一个图片中，降低发送请求的次数，增加用户的访问速度。
将多个图片保存到一个图片里，也会降低图片的总大小，增快记载速度。
a:link{
display: block;
width: 93px;
height: 29px;
background: url("btn/btn.png");
}
/*鼠标放上去*/
a:hover{
background-position: -93px 0;
/*background: url("btn/btn.png");*/
}
/*点击情况下*/
a:active{
background-position: -186px 0; /*在同一个图上移动*/
/*background: url("btn/btn.png");*/
}
- 雪碧图的使用步骤：
先确定要使用的图标
测量图标的大小，创建一个元素
将雪碧图设置为元素的背景
设置背景的偏移量，使其可以显示图标
.box1{
/*创建同图标大小一样的元素*/
width: 128px;
height: 46px;
/*将雪碧图设置为元素的背景*/
background-image: url("img/amazon-sprite_.png");
/*设置背景的偏移量，使其可以显示图标*/
background-position:0 0;
}
.box2{
width: 42px;
height: 30px;
background-image: url("img/amazon-sprite_.png");
background-position: -58px -338px;
}
- 渐变：通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过滤的效果！！
渐变是图片，需要通过background-image来设置
线性渐变，颜色沿着一条直线发生变化：linear-gradient(颜色1–颜色2)
注：默认情况，自上而下；
to right to left to bottom to top
xxxdeg:deg表示度数 0：to top 180：to buttom 90：to right
1turn：转一圈=to top；0.5turn：转半圈=to buttom
可以指定多种颜色：几种颜色平均分布
也可以手动指定渐变的分布情况
background-image: linear-gradient(red 50px,green 100px,yellow 150px);
重复出现效果：background-image: repeating-linear-gradient(red 50px,yellow 100px)
径向渐变：放射性效果background-image: radial-gradient()
默认情况下，径向渐变的形状根据元素的形状来计算
正方形：圆形
长方形：椭圆形
(1)手动指定径向渐变的大小：background-image: radial-gradient(100px 100px,red yellow)
circle正圆；ellipse椭圆；
background-image: radial-gradient(circle,red,yellow)
重复出现效果：background-image:repeating- radial-gradient(100px 100px,red,yellow)
(2)手动指定渐变位置：background-image: radial-gradient(100px 100px at 0 0,red,yellow)
background-image: radial-gradient(closest-side at 100px 100px,red,yellow)
background-image: radial-gradient(farthest-side at 100px 100px,red yellow)
定位
- 定位：通过定位可以将元素摆放在页面中任意位置
语法：position属性设置元素的定位
可选值：static：默认值，开启定位
relative开启相对定位
absolute开启绝对定位
fixed开启固定定位 - 相对定位：当元素设置position:relative;开启元素的相对定位
1 开启相对定位，元素不会发生任何变化
2 开启相对定位后，元素不会脱离文档流
3 相对定位的元素，是相对于其在文档流中的位置进行定位的
4 相对定位会使元素提升一个层级（可以遮盖其他块）
5 相对定位不会改变元素的性质，块还是块，行内还是行内
当元素开启定位后，可以通过四个方向的偏移量（offset）来控制元素的位置：
top:元素与其定位位置的顶部距离
bottom：元素与其定位位置的底部距离
left:元素与其定位位置的左侧距离
right:元素与其定位位置的右侧距离 - 绝对定位：（难点：参照物？？）当元素设置position:absolute;开启元素的绝对定位
1 绝对定位会完全脱离文档流
2 绝对定位会改变元素的性质，行内变块，块宽高被内容撑开
3 开启绝对定位后若不设置偏移量，元素的位置不发生变化，位置还在那里
4 绝对定位会相对于离它最近的开启了定位的祖先元素进行定位
5 绝对定位会使元素提升一个层级（层级优先级：文档流<浮动<定位）
<div class=’box1’>
<div class=’box2’>
<div class=’box3’></div></div>
</div>
- 定位时的参照物：
若box2设置absolute，box3与box2原点对齐；若box2未开，box1开，与box1对齐；否则与body对齐
若所有祖先元素都未开启绝对定位，则相对于HTML标签进行定位
一般情况，我们为一个元素开启绝对定位，会同时为它的父辈元素开启相对定位
绝对定位元素会相对于它的包含块进行定位 - 包含块：
对于绝对定位元素来说，包含块就是离它最近的开启定位的块元素
若没有开启定位的祖先元素，则其包含块是网页中的初始包含块（html为初始包含块）
开启绝对定位后，布局的公式新加入四个属性：
水平方向：
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的宽度
绝对定位元素水平方向布局的等式：auto+auto+0+0+200px+0+0+auto+auto=500px
垂直方向：
top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块的高度
此时有五个值可设置为auto：left/right/margin-left/margin-right/width
在包含块中居中：
left:0;
right:0;
margin:0 auto;
全部居中（上下左右）
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
Margin:auto; - 固定定位：当元素设置position:fixed;开启元素的绝对定位
特点与绝对定位一样，不同点：相对于浏览器的窗口（视口）进行定位
粘滞定位：电话部：王，李—粘滞其姓
.l1{
position:sticky; 将l1标签的内容黏贴
top:0;
background-color:#bfa;
}
.l1{ 将l2标签的内容黏贴
position:sticky;
top:20px;
background-color:#bfa;
}
- 层级：开启定位元素会提升一个层级，定位元素层级可以同z-index来设置，z-index需要一个整数作为参数，值越大层级越高
父元素的层级再高，也不会盖住子元素；
若z-index的值相等，则后面元素会盖住前边元素；使用z-index时，需要开启 定位；
position:relative;
z-index:n; - 设置不透明颜色度：方法一：opacity:0-1；（不，完全透）------0.5：半透明 元素整个透明（文字）
方法二：rgba(0,0,0,0.5) 只是颜色透明
扫一扫
4250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
