选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">
后代选择器 #box p{ width: 200px; height: 50px; background-color: bisque; } 子选择器 #box1>p{ width: 100px; height: 20px; background-color: red; }
交集选择器 p,#div4{ width: 200px; background-color: red; } </style> </head> <body> <!-- 后代选择器 --> <div id="box"> <div id="div1"> <p>1111111111</p> </div> <div> <p>222222222</p> </div> <p>0000000000</p> <p>0000000001</p> </div> <!-- 子选择器 --> <div id="box1"> <div> <p>1111111111</p> </div> <div> <p>2222222</p> </div> <p>000000000</p> </div> <!-- 交集选择器 --> <p>21111</p> <div id="div4"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: red; } .c1{ width: 200px; height: 210px; background-color: yellow; } </style> </head> <body> <!--标签选择器 --> <div> 1111111111 </div> <div> 2222222222 </div> <!--类选择器 --> <p class="c1">1111</p> <p class="c2">2222</p> <p class="c1">3333</p> </body> </html>
盒子模型
内填充距离
当设置padding-left 或padding-right后，会增加元素的宽度，如果要使宽度不变，应该在
原有基础上减去对应的值
设置padding-top 或padding-bottom后，也是如此
外边距
当设置某一个盒子的margin-bottom和另一个盒子的margin-top时，上下距离不是相加，而是取其中的较大值
margin-right 和margin-left时，左右的边距是二者相加
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 先把默认的内外边距清空 */ *{ margin: 0; padding: 0; } .div1{ border: 1px solid red; width: 280px; height: 270px; border-top: 10px solid green; border-right: 10px solid yellow; border-bottom: 10px solid red; border-left: 10px solid blue; /* 盒子模型向任何一个方向内填充都会撑大宽度，所以需要减少相应的填充宽度 */ padding-left: 20px; padding-top: 30px; } .div2{ border: 10px solid black; width: 300px; height: 300px; margin-left: 30px ; } </style> </head> <body> <div class="div1"> 我是黑子模型 </div> <div class="div2"> 我是盒子2 </div> </body> </html>