原來的盒子，新增border,padding都可以讓盒子本身變大，為了解決這個問題，css3推出了新的盒子模型
box-sizing:content-box,border-box
content-box是預設值 計算方式 padding+border+width
border-box盒子大小始終是元素width
盒子陰影（邊框陰影）：
box-shadow:x y 模糊度（可選） 顏色 內陰影;
box-shadow: 20px 20px 20px yellow,30px 30px 30px green;
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
*.wrap
.box
.box:first-child
.box:nth-child(2)
.box:nth-child(3)
style
>
head
>
>
class
="wrap"
>
class
="box"
>
div>
class
="box"
>
div>
class
="box"
>
div>
div>
body
>
html
>
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
*.wrap
.wrap1
style
>
head
>
>
class
="wrap"
>
div>
class
="wrap1"
>
div>
body
>
html
>
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
divstyle
>
head
>
>
>
div>
body
>
html
>
text-shadow：x y blur color, …
引數x 橫向偏移
y 縱向偏移
blur 模糊距離
color 陰影顏色
文字陰影如果加很多層，會很卡很卡很卡
例子：
層疊：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
光暈：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:verdana, geneva, sans-serif; font-size:100px; font-weight:bold; color:white;
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
pstyle
>
head
>
>
>
通天塔p
>
body
>
html
>
webkit-text-stroke:寬度 顏色
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
pstyle
>
head
>
>
>
通天塔p
>
body
>
html
>
direction定義文字排列方式(全相容)
rtl從右向左排列
ltr從左向右排列
注意要配合unicode-bidi:bidi-override; 一塊使用
/*單行文字省略號*/
p/*多行文字省略號*/
p
@font-face
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
div@font-face
style
>
head
>
>
>
asdfghjkdiv
>
body
>
html
>
>
>
charset
="utf-8"
>
>
title
>
rel=
"stylesheet"
type
="text/css"
href
="font/iconfont.css"
/>
type
="text/css"
>
.icon_t
.zanting
style
>
head
>
>
class
="icon iconfont icon_t"
>p
>
class
="icon iconfont icon-zanting zanting"
>
p>
body
>
html
>
0416 盒子模型
css盒子模型樣式 定義 margin 外邊距，圍繞在元素邊框的空白區，在元素外建立額外的空白。border 邊框，圍繞元素內容和內邊距的一條或多條線。padding 內邊距，在邊框和內容區之間。屬性 margin 外邊距也叫作空白 接受任何長度單位，百分數值和負值，還可設定為auto。margin...
3 盒子模型
盒子模型是我學習css中使用頻率最高的模型，其中主要還是理解整個盒子的構成，以及其中各屬性的作用，最重要的問題就是合併巢狀問題。盒子模型 外邊距margin 邊框border 內邊距padding 內容 border color 邊框顏色 border width 邊框寬度 border style...
05盒子模型
目錄盒子模型用來 放 網頁中的各種元素 網頁設計中內容，如文字 等元素，都可以是盒子 div巢狀 網頁中盒子模型 寬度屬性 寬度with 最大寬度max width 最小寬度min width 長度值 百分比 auto 高度屬性 高度height 最大高度max height 最小高度min hei...