实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型和CSS选择器</title>
<style>
*{padding: 0}
ul,li{list-style:none}
body{
font-size:12px;
}
span{
font-size:12px;
line-height: 22px;
}
#bigbox{
width:240px;
height:240px;
border:1px dotted #aaa;
margin:20px 0px 20px 20px;
background-color:lightblue;
}
#smallbox{
border:5px solid #666;
width: 100px;
height: 100px;
margin: 20px;
background-color: floralwhite;
padding: 45px;
}
#smallbox span{
font-size:20px;
line-height: 80px;
display:block;
width: 100px;
height: 100px;
background-color: greenyellow;
text-align:center;
}
#cssbox{
margin-left: 40px;
}
#cssbox ul li{
margin-left: 10px;
display:inline-block;
width: 60px;
height:60px;
text-align:center;
line-height:60px;
box-shadow:2px 2px 3px 2px #aaaaaa;
border-radius:50%;
border:1px solid #666;
}
#cssbox .sel_all li{
background-color:red;
}
#cssbox .sel_even li:nth-of-type(2n){
background-color:red;
}
#cssbox .sel_odd li:nth-of-type(2n-1){
background-color:red;
}
#cssbox .sel_odd li:nth-of-type(2n-1){
background-color:red;
}
#cssbox .sel_id li[id]{
background-color:red;
}
#cssbox .sel_class li[class]{
background-color:red;
}
#cssbox .sel_adj li:nth-of-type(3) + li{
background-color:red;
}
#cssbox .sel_pseudo :nth-child(3){
background-color:red;
}
</style>
</head>
<body>
<div id="bigbox">
<div id="smallbox">
<span>smallbox</span>
</div>
</div>
<p>
<span>smallbox:外边距margin为蓝色区域上右下左均为20px, 深灰色为边框border=5px,<br/>
浅灰色为内边距padding=45px,绿色区域为内容宽度width=100px和高度height=100px。<br/>
smallbox实际撑宽为边框border+margin左和右+padding左和右+盒子的宽度：
5+5+20+20+45+45+100=240px<br/>
smallbox实际撑高为边框border+margin上和下+padding上和下+盒子的高度：
5+5+20+20+45+45+100=240px<br/>
</span>
</p>
<br/><br/><br/><br/><br/>
<div id="cssbox">
<h5>选择所有圆</h5>
<ul class="sel_all">
<li>1</li>
<li>2(id)</li>
<li>3(class)</li>
<li>4(id)</li>
<li>5(class)</li>
<li>6</li>
</ul>
<h5>选择偶数圆</h5>
<ul class="sel_even">
<li>1</li>
<li >2(id)</li>
<li>3(class)</li>
<li>4(id)</li>
<li>5(class)</li>
<li>6</li>
</ul>
<h5>选择奇数圆</h5>
<ul class="sel_odd">
<li>1</li>
<li>2(id)</li>
<li>3(class)</li>
<li>4(id)</li>
<li>5(class)</li>
<li>6</li>
</ul>
<h5>选择有id的圆</h5>
<ul class="sel_id">
<li>1</li>
<li id="liid2">2(id)</li>
<li class="liclass">3(class)</li>
<li id="liid4">4(id)</li>
<li class="liclass">5(class)</li>
<li>6</li>
</ul>
<h5>选择有class的圆</h5>
<ul class="sel_class">
<li>1</li>
<li id="liid2">2(id)</li>
<li class="liclass">3(class)</li>
<li id="liid4">4(id)</li>
<li class="liclass">5(class)</li>
<li>6</li>
</ul>
<h5>选择3圆后相邻的圆</h5>
<ul class="sel_adj">
<li>1</li>
<li id="liid2">2(id)</li>
<li class="liclass">3(class)</li>
<li id="liid4">4(id)</li>
<li class="liclass">5(class)</li>
<li>6</li>
</ul>
<h5>用伪类选择框</h5>
<ul class="sel_pseudo">
<li>1</li>
<li id="liid2">2(id)</li>
<div style="width: 60px; text-align:center;height: 60px; margin-left: 10px; display:inline-block">
框3
</div>
<li class="liclass">3(class)</li>
<li id="liid4">4(id)</li>
<li class="liclass">5(class)</li>
<li>6</li>
</ul>
</div>
<br/><br/><br/><br/><br/>
<div style="height: 400px"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：盒子模型主要注意是合有外边距和内边距，有两者的存在会对原有盒子的撑宽撑高有影响。css选择器注意优选级排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性