前端基础知识-css
基本选择器使用，看下面例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--样式标签--> 7 <style> 8 /* id选择器用:# */ 9 #d1{ 10 background-color: crimson; 11 } 12 /* class选择器用:. */ 13 .c1{ 14 background-color: lightcoral; 15 } 16 /*标签选择器：会应用到整个页面所有的标签上*/ 17 p{ 18 background-color: aquamarine; 19 } 20 /*标签层级选择器*/ 21 div span{ 22 background-color: brown; 23 } 24 /*id组合选择器：用逗号隔开，表示每个id的标签都会具备同样的样式*/ 25 #d2,#d3{ 26 background-color: blanchedalmond; 27 } 28 29 .c2{ 30 width: 100px; 31 height: 100px; 32 } 33 /*属性选择器*/ 34 div[jnz="test"]{ 35 background-color: blueviolet; 36 } 37 </style> 38 </head> 39 <body> 40 <div id="d1">id选择器</div> 41 <div class="c1">class选择器</div> 42 <div> 43 <p>标签选择器</p> 44 </div> 45 <div> 46 <span>标签层级选择器</span> 47 </div> 48 <div id="d2">id组合选择器</div> 49 <div id="d3">id组合选择器</div> 50 51 <div class="c2 c1">多个样式组合使用</div> 52 53 <div jnz="test">属性选择器</div> 54 55 </body> 56 </html>
选择器引用方式，以及优先级：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--第二种方法：在head部分使用style标签--> 7 <style> 8 .c1{ 9 background-color: brown; 10 } 11 </style> 12 13 <!--第三种方法：使用link引入css文件--> 14 <link rel="stylesheet" href="css_file.css"> 15 16 </head> 17 <body> 18 <!--总结 CSS样式优先级：由内到外，由近到远--> 19 <!--第一种方法：直接引用style属性--> 20 <div class="c1" style="background-color: aquamarine"></div> 21 22 </body> 23 </html>
水平居中，垂直居中，浮动：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 width: 200px; 9 height: 200px; 10 text-align: center; 11 /*水平居中*/ 12 line-height: 200px; 13 /*垂直居中*/ 14 background-color: aqua; 15 } 16 .f1{ 17 /*宽度可以使用百分比，但是高度不可以*/ 18 width:30%; 19 height: 100px; 20 background-color: crimson; 21 /*浮动设置*/ 22 float: left; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="c1" style="background-color: lightcoral">adss</div> 28 <div class="f1"></div> 29 <div class="f1" style="background-color: blue"></div> 30 <div class="f1" style="background-color: blueviolet"></div> 31 32 <div style="display: inline">块转行内</div> 33 <span style="display: block">行内转块</span>
<div style="display: none">隐藏内容</div>
34 </body> 35 </html>
内边距，外边距
1 <!--margin：外边距，不改变自身，针对外侧进行像素移动--> 2 <div style="border: 1px red solid;width: 100%;height: 100px;"> 3 <div style="margin-top:1px;width: 100%;height: 48px;border: 1px red solid;background-color: lightcoral"></div> 4 </div> 5 6 <!--padding：内边距，改变自身，增加自己的体积--> 7 <div style="border: 1px red solid;width: 100%;height: 100px;"> 8 <div style="padding-top:1px;width: 100%;height: 48px;border: 1px red solid;background-color: lightcoral"></div> 9 </div>
position：
绝对定位
.c1{ width: 100%; height: 50px; background-color: lightcoral; /*绝对定位*/ position: fixed; } .c2{ width: 50px; height: 1000px; background-color: blueviolet; } <body> <div class="c1"></div> <div class="c2"></div> </body>
相对定位：
1 <div style="position:relative;width: 500px;height: 500px;border: black 1px solid"> 2 <div style="position:absolute;width: 100px;height: 100px;background-color: aquamarine"></div> 3 <div style="position:absolute;top: 0;right:0;width: 100px;height: 100px;background-color: rebeccapurple"></div> 4 <div style="position:absolute;left:0;bottom:0;width: 100px;height: 100px;background-color: red"></div> 5 <div style="position:absolute;right:0;bottom:0;width: 100px;height: 100px;background-color: goldenrod"></div> 6 </div>
z-index：分层
1 <!--z-index:1-99的任意一个数字，数字大的显示在上层--> 2 <div style="width: 200px;height: 200px;position: relative;background-color: gold;border: solid red 1px"> 3 <div style="z-index:10;position:absolute;width:200px;height:200px;background-color: red"></div> 4 <div style="position:absolute;width:200px;height:200px;background-color:olivedrab"></div> 5 </div>
