盒子模型三大屬性-tft每日頭條

什麼是盒子模型？

盒子模型三大屬性（盒子模型-第六章）1

盒子模型如圖所示

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>

<head>

</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>

<br/>

</div><br/>

</div>

</div>

</div>

</div><br/>

</div><br/>

</div><br/>

</div><br/>

</div>

</body>

</html>

5、盒子陰影：

box-shadow:inset x-offset y-offset blur-radius color;

6、上示例：<html>

<head>

<title>美容熱賣品</title>

</head>

<body>

<h2>大家都喜歡買的美容品</h2>

</div>

<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>

</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