什麼是盒子模型？
盒子模型如圖所示
1、邊框：
border-color
border-width
border-style
屬性 說明 示例
border-top-color 上邊框顔色 border-top-color:#369;
border-right-color 右邊框顔色 border-right-color:#369;
border-bottom-color 下邊框顔色 border-bottom-color:#fae45b;
border-left-color 左邊框顔色 border-left-color:#efcd56;
border-color 四個邊框為同一顔色 border-color:#eeff34;
上、下邊框顔色：#369
左、右邊框顔色：#000 border-color:#369 #000;
上邊框顔色：#369
左、右邊框顔色：#000
下邊框顔色：#f00 border-color:#369 #000 #f00;
上、右、下、左邊框顔色：
#369、#000、#f00、#00f border-color:#369 #000 #f00 #00f;
邊框粗細：border-width
thin；
medium；
thick；
像素值；
邊框樣式： border-style
none;
hidden;
dotted;
dashed;
solid;
double;
border的簡寫：
border:1px solid #3a6587;
border: 1px dashed red;
2、外邊距：margin
margin-top；
margin-right；
margin-bottom；
margin-left；
網頁居中對齊：margin:0px auto;
網頁居中對齊的必要條件：塊元素、固定寬度
3、内邊距：padding
padding-left
padding-right
padding-top
padding-bottom
4、在網頁上畫個圖形：
<!DOCTYPE html>
<html lang="en">
<head>
<title>圓角邊框</title>
</head>
<!-- 内部樣式表 -->
<style>
/* 圓 */
.one{
width:100px;
height:100px;
border:4px solid red;
border-radius: 100px;
}
/* 半圓形 */
/* 上半圓 */
.two{
width:200px;
height:100px;
background-color: red;
border-radius: 100px 100px 0 0;
}
/* 下半圓 */
.three{
width:200px;
height:100px;
background-color: red;
border-radius: 0 0 100px 100px;
}
/* 左半圓 */
.four{
width :100px;
height:200px;
background-color: red;
border-radius: 0 100px 100px 0
}
/* 右半圓 */
.five{
width :100px;
height:200px;
background-color: red;
border-radius: 100px 0 0 100px
}
/* 扇形 */
.six{
width :100px;
height:100px;
background-color: red;
border-radius: 100px 0 0 0
}
.seven{
width :100px;
height:100px;
background-color: red;
border-radius: 0 100px 0 0
}
.eigth{
width :100px;
height:100px;
background-color: red;
border-radius: 0 0 100px 0
}
.nine{
width :100px;
height:100px;
background-color: red;
border-radius: 0 0 0 100px
}
</style>
<body>
<div class="container">
<div class="one">
</div>
<br/>
<div class="two">
</div><br/>
<div class="three">
</div>
<div class="four">
</div>
<div class="five">
</div>
<div class="six">
</div><br/>
<div class="seven">
</div><br/>
<div class="eigth">
</div><br/>
<div class="nine">
</div><br/>
</div>
</body>
</html>
5、盒子陰影：
box-shadow:inset x-offset y-offset blur-radius color;
6、上示例：<html>
<head>
<title>美容熱賣品</title>
</head>
<link rel="stylesheet" href="meirongremai.css">
<body>
<div class="container">
<div class="title">
<h2>大家都喜歡買的美容品</h2>
</div>
<div class="list">
<ul>
<li><a href="#"><span>1</span> <span>雅詩蘭黛即時修護眼部精華霜15ml</span></a> </li>
<li><a href="#"><span>2</span> <span>伊麗莎白雅頓顯效複合活膚霜 75ml</span></a> </li>
<li><a href="#"><span>3</span> <span>OLAY玉蘭油多效修護霜 50g</span></a> </li>
<li><a href="#"><span>4</span> <span>巨型一号絲瓜水320ML</span></a> </li>
<li><a href="#"><span>5</span> <span>倩碧保濕潔膚水2号 200ml</span></a> </li>
<li><a href="#"><span>6</span> <span>比度克細膚淡印霜 30g</span></a> </li>
<li><a href="#"><span>7</span> <span>蘭芝 (LANEIGE)夜間修護鎖水面膜 80ml </span></a> </li>
<li><a href="#"><span>8</span> <span>SK-II護膚精華露 215ml </span></a> </li>
<li><a href="#"><span>9</span> <span>歐萊雅青春密碼活顔精華肌底液</span></a> </li>
</ul>
</div>
</div>
</body>
</html>
/* 去除所有内外邊距 */
*{
margin:0;
padding:0;
}
/* 去超鍊接的下劃線 */
a {
text-decoration: none;
}
/* 去小圓點 */
li{
list-style: none;
}
/* 整個布局背景設置 */
body{
background:#eee7e1;
}
/* 内容背景設置 */
.container{
background: #fff;
width: 400px;
margin:10px;
}
/* 标題 */
.title>h2{
background-color: #e6005a;
color:#fff;
font-size: 16px;
padding-left: 12px;
line-height:40px;
}
.list ul li{
font-size: 14px;
border-bottom:1px dashed #000;
}
/* 内容小圓圈s */
.list ul li span:first-child{
margin:2px;
/* span 标簽轉換成具有行内和塊元素特點 */
display :inline-block;
width: 19px;
height:28px;
background:#000;
border-radius: 50%;
color:#fff;
margin-left: 1px;
padding-left:10px;
}
li a:hover{
color:red;
}
li a:hover>span:first-child{
color:#e6005a
}
效果圖展示鍊接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlSix/meirongremai.html
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
