二十二世纪古墓奇兵爱慕影院

小梁建站專注重慶中小企業網站建設SEO優化,讓您網站更具價值!

當前位置:首頁 > WEB前端學習 > 【CSS3框模型】外邊距(margin)屬性和內邊距(padding)屬性學習心得與知識總結

【CSS3框模型】外邊距(margin)屬性和內邊距(padding)屬性學習心得與知識總結

時間:2018-07-30 02:04 來源:重慶網站制作公司(www.l2qz.net) 作者:重慶網站建設公司

【CSS3框模型】外邊距(margin)屬性和內邊距(padding)屬性學習心得與知識總結

【CSS3框模型】外邊距(margin)屬性和內邊距(padding)屬性學習心得與知識總結

 

1、框模型
 

框:盒子(box)
頁面元素皆為框
框模型:(box-model)定義了元素處理內容,內邊距,外邊距,邊框的一種方式
 
元素的 width和height屬性 指定了內容區域的寬度和高度
 
元素的邊框是繪制于元素外圍的一條線,會擴大元素的占地尺寸
 
內邊距和外邊距 也會增加元素的占地尺寸,但不會影響元素的內容區域
 
元素的實際寬度=左右外邊距+左右邊框+左右內邊距+width
 
元素的實際高度=上下外邊距+上下邊框+上下內邊距+height

2、外邊距

1、什么是外邊距?
圍繞在元素邊框周圍的空白區域
作用:
1、控制元素與元素之間的距離
2、移動元素位置
2、屬性
margin:四個方向的外邊距
margin-方向:單邊設置
margin-top:上外邊距
margin-bottom:下外邊距
margin-left:左外邊距
margin-right:右外邊距
 
取值:
1、px 像素
2、%
3、auto(自動)
4、負值
3、取值-auto
左右方向設置為 auto 時,允許元素在其父元素中水平居中對齊,前提,必須設置該元素的寬度
4、取值-負值
移動元素,向著反方向移動
margin-left:-10px;向左移動10px
margin-top:-10px;向上移動10px
5、margin 屬性的取值數量
margin:value;四個方向外邊距
margin:v1 v2;上下  左右
margin:v1 v2 v3;上  左右  下
margin:v1 v2 v3 v4;上右下左
ex:
margin:0 auto;水平居中標準寫法
6、頁面中具備默認外邊距的元素
h1,h2,h3,h4,h5,h6,p,ol,ul,pre,dl,dd
通過 CSS Reset 的方式 重寫默認外邊距
7、特殊效果
1、外邊距合并
當兩個垂直外邊距相遇時,它們將形成一個外邊距
合并后的外邊距的高度等于兩個發生合并外邊距高度重的較大者
2、外邊距的溢出
在某種特殊場合下,給子元素設置外邊距時,效果卻作用在父元素的外邊距效果上了。
特殊場合:父元素不設置邊框時,為父元素中的第一個子元素設置上外邊距時,或為最后一個子元素設置下外邊距時
解決方案:
1、為父元素添加邊框
有瑕疵,父元素高度會發生改變
2、為父元素添加內邊距來取代子元素外邊距
有瑕疵,影響元素的尺寸
3、塊級元素,行內元素,行內塊元素的上下外邊距
上下外邊距對行內元素 無效
上下外邊距對行內塊元素的影響是,整行元素都會受到影響

3、內邊距

1、什么是內邊距
內容區域與邊框之間的空間
會擴大元素邊框所占用的區域
2、屬性
padding:四個方向內邊距
padding-top:
padding-bottom:
padding-right:
padding-left:
取值:
1、px
2、%
取值數量:
padding:value;四個方向內邊距
padding:v1 v2;上下  左右
padding:v1 v2 v3;上  左右  下
padding:v1 v2 v3 v4;上右下左
3、特殊影響
為行內元素設置上下內邊距時,只會影響元素自身,并不會影響到其他元素
4、屬性-box-sizing
1、作用
指定邊框,內邊距,內容區域的計算模式
默認:width和height只負責定義內容區域的尺寸,border,padding額外添加到元素上的
2、屬性 & 值
屬性:box-sizing
取值:
1、content-box
默認值,在元素的width和height之外繪制邊框和內邊距
2、border-box
邊框和內邊距會包含在width和height之中

版權聲明:本文:【CSS3框模型】外邊距(margin)屬性和內邊距(padding)屬性學習心得與知識總結 由重慶網站制作公司(www.l2qz.net)原創內容,如需要轉載請注明原文網址:重慶網站建設公司http://www.l2qz.net/

 
喜歡看,就分享到:

圍觀: 9999次 | 責任編輯:重慶網站建設公司

回到頂部
二十二世纪古墓奇兵爱慕影院 小鹿工具时时彩下载 时时五星计划软件安卓版 福彩30选5奖金多少 免费棋牌游戏现金下载 北京pk1o走势图 pk10计划7码规律 江西时时历史号码 七乐彩基本走势图连线带座标 山东时时五运 时时彩60期的开奖结果 腾讯棋牌 快乐赛车开奖结果查询