1 Position定位
1.1 基础知识
- 普通流:html元素根据显示属性排列的流,比如块级元素从上到下排列,占一行或者多行,行内元素和其他元素共占一行或者独占一行;
- positon有5种属性:static 、relative 、 absolute 、fixed 、skicky ;
1.2 Position的属性
1.2.1 static
- 按照文档流的顺序排列,不受left、right、top、bottou属性值的影响;
1.2.2 relative
- 相对定位,在普通流的默认位置进行位置移动,相对定位元素移动后仍然要占用空间会出现层叠的情况,受left、right、top、bottom属性值的影响;
- 移动后是移动前负的位置;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test {
background-color: rgba(213, 21, 21, 0.5);
width: 500x;
height: 500px;
}
.test1 {
width: 100px;
height: 100px;
background: yellowgreen;
position: relative;
left: 100px;
}
.test2 {
width: 100px;
height: 100px;
background: rgb(68, 50, 205);
}
.test3 {
width: 100px;
height: 100px;
background: rgb(205, 50, 179);
}
</style>
</head>
<body>
<div class="test">
<div class="test1">盒子1</div>
<div class="test2">盒子2</div>
<div class="test3">盒子3</div>
</div>
</body>
</html>
1.2.3 absolute
- 绝对定位,会以最近的父级元素的位置进行定位,没有父级元素则会以则以html(根元素),不会占用空间,移动后原位置会被占用,受left、right、top、bottou属性值的影响;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test {
background-color: rgba(213, 21, 21, 0.5);
width: 500x;
height: 500px;
}
.test1 {
width: 100px;
height: 100px;
background: yellowgreen;
position: absolute;
left: 100px;
}
.test2 {
width: 100px;
height: 100px;
background: rgb(68, 50, 205);
}
.test3 {
width: 100px;
height: 100px;
background: rgb(205, 50, 179);
}
</style>
</head>
<body>
<div class="test">
<div class="test1">盒子1</div>
<div class="test2">盒子2</div>
<div class="test3">盒子3</div>
</div>
</body>
</html>
1.2.4 fixed
- 相对浏览器窗口是固定,无论屏幕怎么移动,都会显示,不占据文档流的位置受left、right、top、bottou属性值的影响;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test {
background-color: rgba(213, 21, 21, 0.5);
width: 500x;
height: 500px;
}
.test1 {
width: 100px;
height: 100px;
background: yellowgreen;
position: fixed;
}
.test2 {
width: 100px;
height: 100px;
background: rgb(68, 50, 205);
}
.test3 {
width: 100px;
height: 100px;
background: rgb(205, 50, 179);
}
</style>
</head>
<body>
<div class="test">
<div class="test1">盒子1</div>
<div class="test2">盒子2</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
</div>
</body>
</html>
1.2.5 skicky
- reletive和fixd的结合体,当设置了该属性的元素,当滑动浏览器窗口,当离开此元素时,会保留在浏览器窗口页面,必须设置left、right、top、bottom。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test {
background-color: rgba(213, 21, 21, 0.5);
width: 500x;
height: 500px;
}
.test1 {
width: 100px;
height: 100px;
background: yellowgreen;
position: sticky;
top: 100px;
}
.test2 {
width: 100px;
height: 100px;
background: rgb(68, 50, 205);
}
.test3 {
width: 100px;
height: 100px;
background: rgb(205, 50, 179);
}
</style>
</head>
<body>
<div class="test">
<div class="test1">盒子1</div>
<div class="test2">盒子2</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
<div class="test3">盒子3</div>
</div>
</body>
</html>
1.2.6 z-index
- 当position属性为static、relative、fixed才会有效;
- z-index可以设置定位元素在z轴上的堆叠顺序,数值大的会在数值小的元素上面
- 父元素不能设置z-index值,如果要和子元素比较必须设置负值;
示例1:不设置z-index值;
不设置z-index的值,则会按照代码的执行顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="test,test1">
<meta name="description" content="这个练习使用的标签">
<style>
div.test{
background: green;
width: 1000px;
height: 1000px;
}
div.test1{
background: red;
width: 100px;
height: 100px;
position: relative;
}
div.test2{
background: yellow;
width: 100px;
height: 100px;
position: relative;
top: -50px;
}
div.test3{
background: yellowgreen;
width: 100px;
height: 100px;
position: relative;
top: -100px;
}
</style>
</head>
<body>
<div class="test">
<div class="test1">盒子1</div>
<div class="test2">盒子2</div>
<div class="test3">盒子3</div>
</div>
</body>
</html>
示例2:设置z-index值;
- 盒子3设置6,盒子2 设置7,盒子1设置8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="test,test1">
<meta name="description" content="这个练习使用的标签">
<style>
div.test{
background: green;
width: 1000px;
height: 1000px;
}
div.test1{
background: red;
width: 100px;
height: 100px;
position: relative;
z-index: 8;
}
div.test2{
background: yellow;
width: 100px;
height: 100px;
position: relative;
top: -50px;
z-index: 7;
}
div.test3{
background: yellowgreen;
width: 100px;
height: 100px;
position: relative;
top: -100px;
z-index: 6;
}
</style>
</head>
<body>
<div class="test">
<div class="test1">盒子1</div>
<div class="test2">盒子2</div>
<div class="test3">盒子3</div>
</div>
</body>
</html>
- 示例3 z-index 不能设置值,但是可以把子元素设置为负,父元素就会把子元素遮挡;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="test,test1">
<meta name="description" content="这个练习使用的标签">
<style>
div.test{
background: green;
width: 1000px;
height: 1000px;
}
div.test1{
background: red;
width: 100px;
height: 100px;
position: relative;
z-index: -8;
}
div.test2{
background: yellow;
width: 100px;
height: 100px;
position: relative;
top: -50px;
z-index: -7;
}
div.test3{
background: yellowgreen;
width: 100px;
height: 100px;
position: relative;
top: -100px;
z-index: -6;
}
</style>
</head>
<body>
<div class="test">
<div class="test1">盒子1</div>
<div class="test2">盒子2</div>
<div class="test3">盒子3</div>
</div>
</body>
</html>
2 三栏布局的实现
问题:高度固定,左右盒子宽度位200;
2.1 使用float实现
- 可以先给第一个盒子设置为向左浮动,第二个盒子设置为向右浮动,根据float的特性,设置浮动的元素不占用文档流,给第三个盒子设置边框宽度为200px就能实现三栏布局;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test {
background-color: rgba(213, 21, 21, 0.5);
}
.test1 {
width: 200px;
height: 300px;
background: yellowgreen;
float: left;
}
.test2 {
width: 200px;
height: 300px;
background: rgb(205, 50, 179);
float: right;
}
.test3 {
background: rgb(68, 50, 205);
height: 300px;
margin: 0px 200px;
}
</style>
</head>
<body>
<div class="test">
<div class="test1">盒子1</div>
<div class="test2">盒子2</div>
<div class="test3">盒子3</div>
</div>
</body>
</html>
2.2 使用position实现
- 使用position实现三栏布局的原理和float的方式大致一致,对第一个盒子设置position:absolute, left:0对第二个盒子设置position:position:absolute,right :0 第三个盒子设置固定高度height:300px,margin200px;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test {
background-color: rgba(213, 21, 21, 0.5);
position: relative;
}
.test1 {
width: 200px;
height: 300px;
background: yellowgreen;
position: absolute;
left: 0px;
}
.test2 {
width: 200px;
height: 300px;
background: rgb(205, 50, 179);
position: absolute;
right: 0px;
}
.test3 {
background: rgb(68, 50, 205);
height: 300px;
margin: 0 200px;
}
</style>
</head>
<body>
<div class="test">
<div class="test1">盒子1</div>
<div class="test2">盒子2</div>
<div class="test3">盒子3</div>
</div>
</body>
</html>
2.3 使用flex实现
- flex实现最为简单,给父元素设置为弹性布局:display:flex;然后再给第二个子项目设置flex-grow:1;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test {
background-color: rgba(213, 21, 21, 0.5);
display: flex;
flex-direction: row;
}
.test1 {
width: 200px;
height: 300px;
background: yellowgreen;
}
.test2 {
height: 300px;
background: rgb(205, 50, 179);
flex-grow: 1;
}
.test3 {
background: rgb(68, 50, 205);
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div class="test">
<div class="test1">盒子1</div>
<div class="test2">盒子2</div>
<div class="test3">盒子3</div>
</div>
</body>
</html>
3 如何设置水平居中
3.1 行内块级元素设置水平居中;
- 第一种方法使用文字属性,文字对齐方式text-align:center,然后设置行高,行高为行内块级元素的高度(行高等于字体的高度+行距)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test {
background-color: rgba(213, 21, 21, 0.5);
display: inline-block;
width: 500px;
height: 500px;
text-align: center;
line-height: 500px;
}
</style>
</head>
<body>
<spn class="test">学习学习</spn>
</body>
</html>
- 第二种方法:使用弹性布局,水平轴居中,交叉轴居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test {
background-color: rgba(213, 21, 21, 0.5);
display: inline-flex;
width: 500px;
height: 500px;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<spn class="test">学习学习</spn>
</body>
</html>
3.2 块级元素设置为水平居中
- 第一种方法知道子盒子的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test {
background-color: rgba(213, 21, 21, 0.5);
display: inline-flex;
width: 500px;
height: 500px;
position: relative;
}
.test1 {
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="test">
<div class="test1"></div>
</div>
</body>
</html>
第二种方法不知道子盒子的高度可以使用tramsform进行平移
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test {
background-color: rgba(213, 21, 21, 0.5);
display: inline-flex;
width: 500px;
height: 500px;
position: relative;
}
.test1 {
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="test">
<div class="test1"></div>
</div>
</body>
</html>
第三种方法使用flex弹性布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test {
background-color: rgba(213, 21, 21, 0.5);
display: flex;
width: 500px;
height: 500px;
justify-content: center;
align-items: center;
}
.test1 {
background-color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="test">
<div class="test1"></div>
</div>
</body>
</html>
4 CSS 的常用属性;
4.1 圆角
- **border-radius:100px 50px 100px 50px/20px 50px 100px 50px;**斜杠之前的数据圆的水平半径,斜杠之后的数据是圆的垂直半径,上面的数据就等同于下面数据的简写:
border-top-left-radius(左上):100px 20px;
border-top-right-radius(右上):50px 50px ;
border-bottom-left-radius(左下):100px 20px;
border-bottom-right-radius(左上):50px 50px;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test1 {
width: 500px;
height: 500px;
background: yellowgreen;
border-radius:100px 50px 100px 50px/20px 50px 100px 50px;
}
</style>
</head>
<body>
<div class="test1"></div>
</body>
</html>
- border-radius:10px 20px 30px 当简写只有3个值就意味着水平半径和垂直半径相等,方位是 左上 ,右上左下(对角线),右下;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test1 {
width: 500px;
height: 500px;
background: yellowgreen;
border-radius:10px 60px 30px;
}
</style>
</head>
<body>
<div class="test1"></div>
</body>
</html>
- border-radius:100px 30px 当简写只有2个值就意味着水平半径和垂直半径相等,方位是 左上右下 ,右上左下(对角线;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test1 {
width: 500px;
height: 500px;
background: yellowgreen;
border-radius:100px 30px ;
}
</style>
</head>
<body>
<div class="test1"></div>
</body>
</html>
- border-radius:100 px 当简写只有1个值就意味着所有方位水平半径和垂直半径相等;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test1 {
width: 500px;
height: 500px;
background: yellowgreen;
border-radius:100px ;
}
</style>
</head>
<body>
<div class="test1"></div>
</body>
</html>
4.2 盒阴影
- 外部阴影:box-shadow 10px 10px 10px red;
- 外部阴影:box-shadow 10px 10px 10px red inset;
box-shadow:x 轴 y轴 模糊程度 颜色;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
body{
display: flex;
justify-content: center;
flex-wrap:wrap;
}
/*外部阴影*/
.test1 {
width: 200px;
height: 200px;
border: 1px solid;
box-shadow: -20px -20px 60px yellowgreen;
margin: 100px;
}
/*内部阴影*/
.test2 {
width: 200px;
height: 200px;
border: 1px solid;
box-shadow: 50px 50px 60px red inset;
}
</style>
</head>
<body>
<div class="test1"></div>
<div class="test2"></div>
</body>
</html>
4.3 边框图片
- border-image是border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeat的缩写,
- border-image-source:是用来定义边框图片的路径的,当值为none或者图像不可用时,会使用默认边框;
- 用法: border-image-source:url();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test{
height: 200px;
width: 200px;
padding: 10px;
border: 10px solid;
border-image-source:url("http://c.biancheng.net/uploads/allimg/210809/1532491419-0.png");
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
- border-image-slice是用来分割border-image-source的图图像,存在四条线把图像分割为9个小块 4个角 4条边
- number:使用数值的方式分割图像,不能为复制;
- percentage:使用百分比的方式分割图像,以原图像为依照,图像的宽度影响水平方向,高度影响垂直方向;
- fill 指的是图像的中心区域一般是透明的,使用了fill参数会展示中心区域;
- border-image-slice最多可以拥有四个数值
- 四个数值 上 右 下 左;
- 三个数值 上 左右 下;
- 二个数值 上下 左右;
- 一个数值 上下左右 ;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test{
height: 200px;
width: 200px;
padding: 10px;
border: 10px solid;
border-image-source:url("http://c.biancheng.net/uploads/allimg/210809/1532491419-0.png");
border-image-slice: 27 ;
/*border-image-outset: 100px;*/
/*border-image-repeat:space;*/
/*background-color: #CCC;*/
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
- border-image-width是设置border-image-source图像边框的厚度
- length 通过数值加上单位定义数值边框的厚度,不允许为负值;
- percentage 通知百分比定义边框的厚度,参照的是边框的宽和高
- number 通过浮点数来定义边框的厚度,例如数值是0.5就是0.5*border-width 不能负值
- auto 和border-image-slice定义的高度和宽度相同;
- border-image-width 最多可以拥有四个数值
- 四个数值 上 右 下 左;
- 三个数值 上 左右 下;
- 二个数值 上下 左右;
- 一个数值 上下左右 ;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test{
height: 200px;
width: 200px;
padding: 10px;
border: 10px solid;
border-image-source:url("http://c.biancheng.net/uploads/allimg/210809/1532491419-0.png");
border-image-slice: 27 ;
border-image-width: 50px
;
/*border-image-outset: 100px;*/
/*border-image-repeat:space;*/
/*background-color: #CCC;*/
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
- border-image-outset设置图像边框相对图像边框偏移的距离(就是图像边框脱离盒子的距离);
- length 通过数值加上单位定义图像边框的便宜距离;
- number 用浮点数指定图像边框向外偏移的距离,该值表示 border-width 的倍数,例如值为 0.5,则表示偏移量为 0.5 * border-width,不允许为负值。
- border-image-outset最多可以拥有四个数值
- 四个数值 上 右 下 左;
- 三个数值 上 左右 下;
- 二个数值 上下 左右;
- 一个数值 上下左右 ;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test{
position: relative;
right: -50%;
height: 200px;
width: 200px;
padding: 27px;
border: 27px solid;
border-image-source:url("http://c.biancheng.net/uploads/allimg/210809/1532491419-0.png");
border-image-slice: 27 ;
border-image-outset: 10px 50px
;
;
/*border-image-outset: 100px;*/
/*border-image-repeat:space;*/
/*background-color: #CCC;*/
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
- border-image-repeat被border-image-slice分割块再图像边框的分布方式
- stretch 分割块以拉伸的方式占据图像边框;
- repeat 分割块以重复铺满的方式占据边框遇到分割线会被割断;
- round 和repeat的方式大致相同,但是根据情况缩放分割块铺满;
- space 和repeat的方式大致相同 但是会根据情况拓展分割块铺满;
- border-image-repeat最多可以拥有2个值
- 2个值 第一个值代表的水平方向,第二个值代表的是垂直方向
- 一个值就是代表的水平方向和垂直方向;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test{
position: relative;
right: -50%;
height: 200px;
width: 200px;
padding: 10px;
border: 27px solid;
border-image-source:url("http://c.biancheng.net/uploads/allimg/210809/1532491419-0.png");
border-image-slice: 27 ;
border-image-repeat:space round;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
4.4 渐变
- 渐变指的是拥有2种颜色或者多种颜色,一种颜色向另外一种颜色平滑过度的一种方式,渐变方式分有直线渐变,径向渐变、圆锥渐变,重复渐变;
- 直线渐变指的是渐变向直线的方向进行渐变(从左到右,从上到下)
- 用法:linear-gradient direction,color1,color2…
- direction指的是方位一般值有:
- to right
- to left
- to top
- to bottom
- to right top
- to left top
- to right bottom
- to left bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test{
height: 300px;
width: 200px;
background: linear-gradient(to left top,red,blue,greenyellow);
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
- 径向渐变指以圆心为中点向周围辐射渐变,可以定义辐射的中点,辐射的形状;
- 用法:radial-gradient(shape ,size,at position,color1,color2…)
- shape 指的是渐变的形状:一般值有circle eliplise;
- size 除了circle elilipse可以定义渐变的形状之外以下的值可以定义:
- closest side 向渐变长度为圆心到离圆心最近的边为半径的长度渐变;
- closest corner向渐变长度为圆心到离圆心最近的角为半径的范围渐变;
- farthest side 向渐变长度为圆心到离圆心最远的边为半径的长度渐变;
- farthest corner 向渐变长度为圆心到离圆心最远的角为半径的长度渐变;
- at position前面的关键字
- position 定义圆心,可以使用数值加上单位,百分比 关键词(top left)如果只有2个值第一个为x轴的坐标,第二个为y轴的坐标。只有一个数值,另外一个值则是轴的中点;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test1{
float: left;
height: 100px;
width: 100px;
background: radial-gradient(ellipse at 50% 50%,red,blue,greenyellow);
}
.test2{
float: left;
height: 100px;
width: 100px;
background: radial-gradient(closest-side at 50% 50%,red,blue,greenyellow);
}
.test3{
float: left;
height: 200px;
width: 100px;
background: radial-gradient(farthest-corner at 20% 20%,red,blue,greenyellow);
}
.test4{
float: left;
height: 200px;
width: 100px;
background: radial-gradient(closest-corner at 20% 20%,red,blue,greenyellow);
}
</style>
</head>
<body>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
</body>
</html>
- 圆锥渐变和径向渐变的方式相同可以设置圆心,但渐变的方式是以旋转的方进行;
- 用法:conic-gradient(from angle at position ,color1,color2…):
- from 是angle 的关键字;
- angle 渐变开始的角度;
- at position前面的关键字
- position 定义圆心,可以使用数值加上单位,百分比 关键词(top left)如果只有2个值第一个为x轴的坐标,第二个为y轴的坐标。只有一个数值,另外一个值则是轴的中点;
- color 不仅可以设置颜色 还可以设置颜色所占用的比例;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="key" content="测试 测试1">
<meta name="description" content="测试网页">
<style>
.test1{
margin: 50px;
float: left;
height: 100px;
width: 100px;
background: conic-gradient(from 0deg at 50% 50%,red 0deg 90deg,blue 90deg 180deg,greenyellow 180deg 360deg);
}
.test2{
margin: 50px;
float: left;
height: 100px;
width: 100px;
background: conic-gradient(from 90deg at 50% 50%,red 0% 55%, yellow 55% 90%, lime 90% 100% );
}
.test3{
margin: 50px;
float: left;
height: 100px;
width: 100px;
background: conic-gradient(at 50%, red, orange, yellow, green, blue, indigo, violet, red);
}
</style>
</head>
<body>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
</body>
</html>
- repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 等函数来分别创建线性渐变、径向渐变和圆锥渐变的重复渐变,所谓重复渐变就是指将渐变的过程重复多次,以铺满整个元素。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 210px;
height: 100px;
float: left;
margin: 10px;
border: 1px solid black;
}
.one {
background: repeating-linear-gradient(190deg, #000 0px 10px, #FFF 10px 20px);
}
.two {
background: repeating-radial-gradient(circle 100px at 50%, red 0% 10%, yellow 10% 30%, lime 30% 40%);
}
.three {
background: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);
}
.four {
background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 25% 25% repeat;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
4.5 文本效果
- text-shaow 文本阴影;
- 用法 text-shadow: 5px 5px 5px red 第一个参数为x轴的偏移量,第二个参数为y轴的偏移量 第三个参数为模糊程度,第四个参数为颜色
<!DOCTYPE html>
<html>
<head>
<style>
div{
margin: 10px;
padding: 10px;
border: 1px solid ;
height: 200px;
width: 200px;
text-shadow: 5px 5px 5px red;
}
</style>
</head>
<body>
<div>
今天不学习明天变垃圾
</div>
</body>
</html>
- text-overflow:规定当文本溢出时,以怎样的方式来处理;
- clip:当对象内文本溢出部分裁切掉;
- ellipsis:当对象内文本溢出时显示省略标记(…)
- 前提条件;
- white-space:设置文字在一行显示,不能换行;
- overflow:文字长度超出限定宽度,则隐藏超出的内容
<!DOCTYPE html>
<html>
<head>
<style>
div{
margin: 10px;
padding: 10px;
border: 1px solid ;
height: 200px;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾
</div>
</body>
</html>
- 文本换行
- word-warp 允许长文本和长连接进行换行
- normal 按照浏览器规则换行;
- break-word 允许长文本进行换行;
- word-break 可以让浏览器在任意处换行;
- normal 按照浏览器规则换行;
- break-all 可以在单词内换行;
- keep-all 只能在空格和字符处换行
- word-warp 允许长文本和长连接进行换行
<!DOCTYPE html>
<html>
<head>
<style>
.test1{
margin: 10px;
padding: 10px;
border: 1px solid ;
height: 200px;
width: 200px;
word-wrap:break-word;
}
.test2{
margin: 10px;
padding: 10px;
border: 1px solid ;
height: 200px;
width: 200px;
word-break:break-all;
}
</style>
</head>
<body>
<div class="test1">
今天不学习明天变垃圾www.baidu,com,今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾
</div>
<div class="test2">
今天不学习明天变垃圾www.baidu,com,今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾
</div>
</body>
</html>
5 gird 网格布局
- flex是轴线布局,只能指定“项目”所在的轴线,grid布局是将容器划分行和列产生单位格,指定单位所在的位置,和flex布局相相似的地方也有容器属性(container)和项目属性(items)
- 简单说下grid布局的创建方法,详细可以参考:https://blog.csdn.net/leilei__66/article/details/122360901
<!DOCTYPE html>
<html>
<head>
<style>
.test{
margin: 0px;
padding: 0px;
border: 1px solid ;
height: 500px;
width: 500px;
display: grid;
/*第一种方式直接设置每个单元格所占的宽高 */
/*grid-template-rows: 100px 100px 100px 100px 100px;*/
/*grid-template-columns: 100px 100px 100px 100px 100px;*/
/*第二种方式设置每个单元格所占父容器高 宽的比例 */
/*grid-template-rows: 20% 20% 20% 20% 20%;*/
/*grid-template-columns: 20% 20% 20% 20% 20%;*/
/*第三种方式设置几行 几列 以及每个单元格所占父容器高 宽的比例
/*grid-template-rows: repeat(5,20%);*/
/*grid-template-columns: repeat(5,20%);*/
}
.test1{
height: 100px;
width: 100px;
background-color: red;
font-size: 50px;
}
.test2{
height: 100px;
width: 100px;
background-color: orange;
font-size: 50px;
}
.test3{
height: 100px;
width: 100px;
background-color: yellow;
font-size: 50px;
}
.test4{
height: 100px;
width: 100px;
background-color: blue;
font-size: 50px;
}
.test5{
height: 100px;
width: 100px;
background-color: pink;
font-size: 50px;
}
.test6{
height: 100px;
width: 100px;
background-color: peru;
font-size: 50px;
}
.test7{
height: 100px;
width: 100px;
background-color: yellowgreen;
font-size: 50px;
}
.test8{
height: 100px;
width: 100px;
background-color: tomato;
font-size: 50px;
}
.test9{
height: 100px;
width: 100px;
background-color: fuchsia;
font-size: 50px;
}
.test10{
height: 100px;
width: 100px;
background-color: rebeccapurple;
font-size: 50px;
}
</style>
</head>
<body>
<div class="test">
<div class="test1">1 </div>
<div class="test2">2 </div>
<div class="test3">3 </div>
<div class="test4">4 </div>
<div class="test5">5 </div>
<div class="test6">6 </div>
<div class="test7">7 </div>
<div class="test8">8 </div>
<div class="test9">9 </div>
<div class="test10">10 </div>
</div>
</body>
</html>