css修饰操作（下）
一，css盒子模型：
盒子模型：字面意思就是css就像盒子一样，一层套一层来控制着整个网页的布局。
一般被分为：margin，padding，border，content
最外层是magin，其次是border，在然后是padding，最后是content。
1.margin
用于控制元素与元素之间的距离，margin的最基本的用法就是控制元素周围的空间间隔，从视觉上达到相互隔开的目的。
2.padding
控制内容与边框之间的距离。（内填充）
ps:提供一个，用于四边；提供两个，第一个用于上下，第二个用于左右。
如果提供三个，第一个用于上，第二个用于左右，第三个用于下。
提供四个参数值，将按上右下左的顺序作用于四边。
3.border
围绕在内边距和内容之外的边框。
4.content
盒子的内容，显示文本和图像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body {margin: 0} .c2 {width: 150px;height: 150px;background-color: chartreuse; /*页面水平对齐*/ margin: 0 auto; /*设置边框的宽颜色类型*/ border: 2px yellow solid; /*设置文本与边框之间的距离*/ padding: 2px 2px 2px 2px } </style> <body> <div class="c2"> 我真的服了，好吧 </div> </body> </html>
二，float
float（浮动）：实际上在css中，任何元素都可以浮动。浮动元素会生成一个块级框，无论他是什么元素。
解释浮动之前需要解释什么是文档流和脱离文档流：
文档流：文档中的可显示对象在排列时会占用位置和空间。
脱离文档流就是在可显示对象不占位置和空间。
浮动的特点：
可以向左或向右浮动，直到它的碰到外边缘的框或者另一个浮动的边框。
浮动框是脱离文档流。
属性：left，right，none
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body {margin: 0} .box {margin:0;width: 800px;height: 600px; border: 1px red solid ;background-color: white} #a {margin:0;width: 80px;height: 80px;background-color: orange;text-align: center; /*float: left*/ } /*只给第二个p浮动，第三个p会在第二个标签下面，因为浮动框不沾空间*/ #b {margin:0;width: 80px;height: 80px;background-color: yellow;text-align: center; float: left } #c {margin:0;width: 80px;height: 80px;background-color: green;text-align: center; /*float: left*/ } </style> <body> <div class="box"> <p id="a">1</p> <p id="b">2</p> <p id="c">3</p> </div> </body> </html>
父级盒子塌陷：
不给父级设置高度，浮动子元素会使父级盒子高度塌陷，这样会导致页面布局混乱。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body {margin: 0} .box {margin:0;width: 800px; border: 1px red solid ;background-color: white} /*造成父级盒子塌陷*/ #a {margin:0;width: 80px;height: 80px;background-color: orange;text-align: center; float: left } #b {margin:0;width: 80px;height: 80px;background-color: yellow;text-align: center; float: left } #c {margin:0;width: 80px;height: 80px;background-color: green;text-align: center; float: left } </style> <body> <div class="box"> <p id="a">1</p> <p id="b">2</p> <p id="c">3</p> </div> </body> </html>
当今主流清除浮动的方法：
clearfix：after{content:'';display:block;clear:both}
三，overflow溢出属性
文本或图片的内容超出父级盒子尺寸发生的情况。
visible ：默认值。内容不会被修减，会呈现在元素框之外。
hidden：内容会被修剪，并且其余的内容是看不见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父类元素继承overflow属性的值。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>圆形的头像示例</title> <style> * { margin: 0; padding: 0; background-color: #eeeeee; } .header-img { width: 150px; height: 150px; border: 3px solid white; border-radius: 50%; overflow: hidden; } .header-img>img { width: 100%; } </style> </head> <body> <div class="header-img"> <img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt=""> </div> </body> </html>
四：定位（position）
static：
static 默认值：没有定位，不能当作绝对定位的参照物，并且设置标签对象的left，top等值是不起作用的。
relative（相对定位）
相对定位是相对元素在文档流中的原来的位置，以自己原来的位置为参照物。
可以通过设置，使其偏移，但是元素实际上还占着原来的位置，影响了页面的布局。
其层叠通过z-index属性定义。
ps：（position：relative的主要一个用法：方便绝对定位元素找到参照物）
absolute（绝对定位）
定义：设置为绝对定位元素会相对于最近的已定位的父级元素来定位。ps（父级元素：position：relation，子元素：position：absolute）
子元素会以父级的左上角位原始点来进行定位。
如果没有父级元素：位置就相对于body元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style> .c1 { height: 100px; width: 100px; background-color: red; float: left; } .c2 { height: 50px; width: 50px; background-color: #ff6700; float: right; margin-right: 400px; position: relative; } .c3 { height: 200px; width: 200px; background-color: green; position: absolute; top: 50px; } </style> </head> <body> <div class="c1"></div> <div class="c2"> <div class="c3"></div> </div> </body> </html>
fixed（固定）
fixed：使得对象脱离正常的文档流，使用top，right，bottom，left等属性以窗口位参考来定位。
效果：对象不会随着滚动条滚动。
ps：（一个元素设置了positon：absolute | fixed；则该元素就不能设置float。因为一个是浮动流，一个是定位流。但是relative可以。）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style> .c1 { width:300px; height: 800px; background-color: #ff167f; border: #eeeeee; } .c2 { width:80px; height: 80px; background-color: red; border: white; right: 10px; bottom: 10px; position: fixed; } </style> </head> <body> <div class="c1">hehehe</div> <div class="c1">hehehe</div> <div class="c1">hehehe</div> <div class="c1">hehehe</div> <div class="c1">hehehe</div> <div class="c1">hehehe</div> <div class="c2">clicke me to top</div> </body> </html>
分类：
文档流：普通元素，positon：static ，position：relative。
脱离文档流：float，positon：fixed ，position：absolute。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hehe</title> <style> /*文档流*/ body {margin: 0} .c1 { width: 100px; height: 100px; background-color: yellow; } /*文档流*/ .c2 { width: 100px; height: 100px; background-color: #ff167f; position: static; left: 200px; } /*文档流*/ .c3 { width: 100px; height: 100px; background-color: #c97eff; position: relative; left: 200px; } /*脱离文档流*/ .c4 { width: 100px; height: 100px; background-color: green; position: absolute; left: 200px; } /*脱离文档流*/ .c5 { width: 100px; height: 100px; background-color: black; position: fixed; /*left: 200px;*/ } </style> </head> <body> <div class="c1">1</div> <div class="c2">2</div> <div class="c3">3</div> <div class="c4">4</div> <div class="c5">5</div> <div class="c1">1</div> </body> </html>
四：z-index
用来设置元素的层叠顺序。
1.z-index数值大的盖住数值小的。
2.只有定了位的元素才能有z-index，相对定位，绝对定位，固定定位都可以使用z-index，浮动元素不能。
3.z-index没有单位，就是正整数，定位于元素压住没有定位的元素。
4.父级元素z-index优先级最高。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hehe</title> <style> .cover { background-color: rgba(0,0,0,0.65); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; } .modal { background-color: white; position: fixed; width: 600px; height: 400px; left: 50%; top: 50%; margin: -200px 0 0 -300px; z-index: 1000; } </style> </head> <body> <div class="cover">是的撒大大</div> <div class="modal">是的撒大大</div> </body> </html>
五：opacdity
用来定义透明度。取值范围是0~1，0是完全透明，1是完全不透明。
ps（opacity是全部透明）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hehe</title> <style> .c1 { width: 100px; height: 100px; background-color: rgba(35,68,92,0.4); } .c2 { width: 100px; height: 100px; background-color: rgb(35,68,92); opacity: 0.4; } </style> </head> <body> <!--rgba的文字不透明，而opacity的文字也变透明了。--> <div class="c1">11111</div> <div class="c2">22222</div> </body> </html>
