7.背景
背景颜色：background
background-image:url(""); /* 默认是全部平铺的 */ background-repeat:repeat-x; /* 水平平铺 */ background-repeat:repeat-y; /* 垂直平铺 */ background-repeat:no-repeat; /* 不平铺 */
背景图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 1000px; height: 700px; border: 1px solid red; background-image: url("images/ceshi.jpeg"); /*默认是全部平铺的*/ } .div1{ background-repeat: repeat-x; } .div2{ background-repeat: repeat-y; } .div3{ background-repeat: no-repeat; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </body> </html>
8.渐变
渐变背景网址：https://www.grabient.com
径向渐变、圆形渐变
body{ background-color: #0cd7f3; background-image: linear-gradient(43deg, #0093E9 0%, #80D0C7 46%, #23F549 100%); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景</title> <style> body{ background-color: #08AEEA; background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%); } div{ width: 500px; height: 200px; border: 1px solid mediumaquamarine; background-image: url("img/str.png"); /* 默认是全部平铺的 */ } /*水平平铺*/ .div1{ background-repeat: repeat-x; } /*垂直平铺*/ .div2{ background-repeat: repeat-y; } /*不平铺*/ .div3{ background-repeat: no-repeat; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </body> </html>
五、盒子模型
1.什么是盒子模型
margin：外边距
padding：内边距
border：边框
2.边框
边框的粗细
边框的样式
边框的颜色
/* 边框大小 边框样式 边框颜色 */ border: 1px solid #000000;
3.内外边距
margin：外边距
padding：内边距
/* 当margin/padding 有一个参数，上下左右，都有边距 有二个参数，上下，左右，表示 四个参数时，上，右，下，左，表示 */ margin：0 1px 2px 3px;
盒子的计算方式：元素到底多大？
margin+border+padding+内容宽度
4.圆角边框
4个角
div{ width: 100px; height: 50px; margin: 30px; border: 2px solid red; border-radius: 50px 50px 0px 0px; /* 和边距的参数一样，左上，右上，右下，左下 */ }
5.阴影
/* h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊的距离。 color 可选。阴影的颜色。 */ text-shadow: h-shadow v-shadow blur color;
六、浮动
1.标准文档流
块级元素：独占一行
<!-- h1-h6 p div ... -->
行内元素：不独占一行
<!-- span a img strong ... -->
注意：块级元素可以存在行内元素。
2.display
block：块元素；
inline：行内元素；
inline-block：是块元素，但是可以内联，在一行；
这也是一种实现行内元素排列的方式，但是我们很多情况用float。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dispaly</title> <style> /* block: 块元素 inline: 行内元素 inline-block: 块元素，但是可以内联 none: 隐藏 */ div{ width: 100px; height: 100px; border: 1px solid darkorange; display: inline-block; } span{ width: 100px; height: 100px; border: 1px solid darkorange; display: inline-block; } </style> </head> <body> <div>div块元素</div> <span>span行内元素</span> </body> </html>
3.float
左右浮动
浮动的元素会脱离标准流
div{ float: right;/*向右浮动*/ }
4.父级边框塌陷问题
/* clear: right; 右侧不允许有浮动元素 clear: left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素 clear: none; 不允许有浮动元素 */ .text{ clear:both; }
解决父级边框塌陷问题：
增加父级元素高度
#body{ border: 1px #000 solid; height: 800px; }
增加一个空的div标签，清除浮动
<div class="clear"></div> .clear{ clear: both; margin: 0; padding: 0; }
父类添加一个伪类：after
#body:after{ content: ''; display: block; clear: both; }
七、定位
1.相对定位
相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留。
top:-20px; /* 向上偏移20px */ left:20px; /* 向右偏移20px */ bottom:10px; /* 向上偏移10px */ right:20px; /* 向左偏移20px */
2.相对定位
定位：基于xxx定位，上下左右
没有父级元素定位的前提下，相对于游览器定位
假设父级元素村咋i定位，我们通常会相对于父级元素进行便宜
在父级元素范围内移动
相对于父级或者游览器的位置，进行指定的偏移，绝对定位后，它仍然在标准文档流中，原来的位置不会被保留
div{ position: absolute;/*绝对定位*/ top: -20px;/*相对当前的位置 向上移动，负值相反方向*/ left: 20px;/*相对当前的位置 向右移动*/ }
3.固定定位
固定定位使元素的位置相对于浏览器窗口来定位
即使窗口是滚动的它也不会移动
div{ position: fixed;/*固定定位*/ right: 0; bottom: 0; }
4.z-index
图层，用定位的时候会产生会和其他元素重叠
相当于上一层盖住了下一层的内容
div{ z-index:2; }
八、动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:100px; height:100px; background:red; animation:myfirst 5s; /* 动画执行时间 */ } @keyframes myfirst{ 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } </style> </head> <body> <div></div> </body> </html>
