一.尺寸和屬性

1.尺寸屬性

2.溢出處理
當內容多，元素區域小的時候，就會產生溢出效果
默認都是縱向溢出的

屬性 overflow / overflow-x / overflow-y

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

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

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

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

取消邊框 border:none/0;

練習
創建一個div#d2 尺寸200*200
設置邊框，2px 實線 橙色

2.單邊定義
只設置某一條邊的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為單位的數字
2° %——50%設置圓形

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

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

6.邊框的陰影
box-shadow
取值：
h-shadow v-shadow blur spread color inset;
h-shadow:水平方向陰影的偏移，正：往右，負：往左
v-shadow:垂直方向陰影的偏移，正：往下，負：往上
后面4個值，可以不寫
blur：陰影模糊距離，值越大，越模糊，負值就消失
spread:陰影尺寸，指陰影在基礎上擴出來的具體
color:陰影的顏色
inset:將默認的外部陰影變為內部陰影

練習：設置一個圓形的向外發光的效果(太陽，日食)

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

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

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

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

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

默認的計算方式
元素的實際占地寬度=左外邊距+左邊框+左內邊距+內容區域的寬度+右內邊距+右邊框+右外邊距
元素的實際占地高度=上外邊距+上邊框+上內邊距+內容區域的高度+下內邊距+下邊框+下外邊距

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

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

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

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

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

練習
在04_ex中再創建兩個span,內容隨意，然后為兩個span，都設置4個方向的外邊距
創建兩個input text, 給其中一個設置4個方向的外邊距

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

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

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

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

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

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

單方向設置
padding-top/right/bottom/left

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

默認的計算方式
元素的實際占地寬度=左外邊距+左邊框+左內邊距+內容區域的寬度+右內邊距+右邊框+右外邊距
元素的實際占地高度=上外邊距+上邊框+上內邊距+內容區域的高度+下內邊距+下邊框+下外邊距

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

作業
使用邊框，倒角，外邊距完成下圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。