选择器
<!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>html css`盒子模型
原文地址：https://www.cnblogs.com/miaomeng/p/8986322.html