一.尺寸和屬性

1.尺寸屬性

2.溢出處理
當(dāng)內(nèi)容多，元素區(qū)域小的時候，就會產(chǎn)生溢出效果
默認(rèn)都是縱向溢出的

屬性 overflow / overflow-x / overflow-y

取值：
（1）visible 默認(rèn)值，溢出可見
（2）hidden 溢出部分隱藏
（3）scroll 顯示滾動條，不管是否溢出都顯示滾動條
只有在溢出時，滾動條可用
（4）auto 自動，溢出方向有滾動條，沒溢出的方向沒有滾動條

如果想顯示成橫向溢出
需要在內(nèi)容和容器之前再套一層容器
內(nèi)部容器寬度要比外部容器寬

3.邊框
（1）border:width style color;
width:邊框的寬度
style:邊框的樣式
取值：
solid 實線
dotted 虛線(圓點)
dashed虛線(線)
double 雙實線

color:邊框顏色，合法的顏色值，支持透明色(transparent)
border直接設(shè)置上右下左4個方向的邊框

取消邊框 border:none/0;

練習(xí)
創(chuàng)建一個div#d2 尺寸200*200
設(shè)置邊框，2px 實線 橙色

2.單邊定義
只設(shè)置某一條邊的3個屬性
border-top/right/bottom/left:width style color;

3.單屬性定義
border-color:#00f;
border-style:dashed;
border-width:10px;

4.單邊單屬性定義(12個)
border-top/right/bottom/left-width/style/color:

5.邊框的倒角
把直角變成圓角
border-radius:
取值：
1° 以px為單位的數(shù)字
2° %——50%設(shè)置圓形

單角設(shè)置
border-top-left-radius:10%; 左上
brer-bottom-right-radius:10%;右下
border-top-right-radius:10%;右上
border-bottom-left-radius:10%;左下

練習(xí)：畫出一個檸檬(芒果)

6.邊框的陰影
box-shadow
取值：
h-shadow v-shadow blur spread color inset;
h-shadow:水平方向陰影的偏移，正：往右，負(fù)：往左
v-shadow:垂直方向陰影的偏移，正：往下，負(fù)：往上
后面4個值，可以不寫
blur：陰影模糊距離，值越大，越模糊，負(fù)值就消失
spread:陰影尺寸，指陰影在基礎(chǔ)上擴(kuò)出來的具體
color:陰影的顏色
inset:將默認(rèn)的外部陰影變?yōu)閮?nèi)部陰影

練習(xí)：設(shè)置一個圓形的向外發(fā)光的效果(太陽，日食)

7.輪廓
輪廓是指邊框的邊框，繪制于邊框外邊的線條
outline:width style color;
給input去掉輪廓 outline:none/0;

練習(xí)：嘗試設(shè)置一個乒乓球拍的效果(宇智波的族徽)

球拍的把手，margin-left:10px

二.框模型，盒子模型(重點)

1.什么叫框模型
頁面元素皆為框（盒子）
框模型，盒子模型 box model
定義了元素框處理元素內(nèi)容，內(nèi)邊距，外邊距以及邊框的計算方式

默認(rèn)的計算方式
元素的實際占地寬度=左外邊距+左邊框+左內(nèi)邊距+內(nèi)容區(qū)域的寬度+右內(nèi)邊距+右邊框+右外邊距
元素的實際占地高度=上外邊距+上邊框+上內(nèi)邊距+內(nèi)容區(qū)域的高度+下內(nèi)邊距+下邊框+下外邊距

2.外邊距，圍繞在元素邊框外的空白間距（元素與元素之間的距離）
語法:margin 定義4個方向的外邊距
單邊定義 margin-top/right/bottom/left
取值：
（1）以px為單位的數(shù)字
（2）%,占父級寬度的百分比
（3）取值為正數(shù)，margin-left 元素往右移動
margin-top 元素往下移動
取值為負(fù)，就是相反方向
（4）auto 自動計算塊級元素的外邊距，對于上下外邊距無效
塊級元素水平居中，要設(shè)置作用外邊距auto
簡寫方式
margin:value 定義4個方向的外邊距
margin:v1 v2; v1:設(shè)置上下，v2設(shè)置左右
margin:0 auto;設(shè)置塊級元素水平居中
margin:v1 v2 v3; v1:上，v2：左右，v3：下
margin:v1 v2 v3 v4; 上 右 下 左

練習(xí)
04_ex.html 兩個div，尺寸300*300
設(shè)置背景顏色，隨意
設(shè)置兩個div之間的距離為50px，
設(shè)置第二個div水平居中

3.自帶外邊距的元素
h1~h6 p body ol ul dl pre
一般在開發(fā)時候，通過樣式重寫的方式，來重置具有外邊距的元素

*{margin:0;padding:0;}body,button,......th,ul{margin:0;padding:0}

4.外邊距的特殊效果
（1）外邊距合并
當(dāng)兩個垂直外邊距相遇時，他們講合并成一個，最終的距離取決于兩個外邊距中較大的值

練習(xí)
在04_ex中再創(chuàng)建兩個span,內(nèi)容隨意，然后為兩個span，都設(shè)置4個方向的外邊距
創(chuàng)建兩個input text, 給其中一個設(shè)置4個方向的外邊距

（2）行內(nèi)元素對外邊距表現(xiàn)
行內(nèi)元素垂直外邊距無效(img除外)

（3）行內(nèi)塊對外邊距的表現(xiàn)
同一行中，一個行內(nèi)塊設(shè)置了垂直外邊距，同行其它行內(nèi)會跟著發(fā)生變化
練習(xí)
05_ex.html中，創(chuàng)建兩個div #d1 #d2，尺寸都是200200，設(shè)置不同背景顏色
在#d2中添加div#d3 100100，設(shè)置不同背景色
設(shè)置d3的上外邊距為50px，f12中改變上外邊距，查看效果

5.外邊距溢出
在特殊條件下，為子元素設(shè)置上外邊距，會作用到父元素
條件：
（1）父元素沒有上邊框
（2）為第一個子元素設(shè)置上外邊距

解決方案：
1°為父元素添加上邊框 弊端：影響了父元素的實際高度
2°為父元素添加上內(nèi)邊距 弊端：影響了父元素的實際高度
3°在父元素第一個子元素的位置，添加一個空的table標(biāo)簽

內(nèi)邊距
不會影響其他元素，但是會改變自己的占地尺寸，視覺上大小會發(fā)生變化

語法：
padding:value; 設(shè)置4個方向的內(nèi)邊距
padding:v1 v2; v1:上下，v2：左右 沒有auto
padding:v1 v2 v3; v1:上 v2：左右 v3：下
padding:v1 v2 v3 v4; 上右下左

單方向設(shè)置
padding-top/right/bottom/left

box-sizing屬性
指定框模型的計算方式
box-sizing:content-box; 默認(rèn)值

默認(rèn)的計算方式
元素的實際占地寬度=左外邊距+左邊框+左內(nèi)邊距+內(nèi)容區(qū)域的寬度+右內(nèi)邊距+右邊框+右外邊距
元素的實際占地高度=上外邊距+上邊框+上內(nèi)邊距+內(nèi)容區(qū)域的高度+下內(nèi)邊距+下邊框+下外邊距

box-sizing:border-box;
元素的實際占地寬度為=左外邊距+width+右外邊距
元素的實際占地高度為=上外邊距+height+下外邊距

作業(yè)
使用邊框，倒角，外邊距完成下圖

總結(jié)

以上是生活随笔為你收集整理的Web前端之CSS（2）——框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。