# 邊框屬性
# 內邊距
# 外邊距
# CSS盒子模型
# box-sizing
#清空默認邊距
#行高(line-height)
什么是邊框?
邊框就是環繞在標簽寬度和高度周圍的線條
2.邊框屬性的格式
2.1 連寫(同時設置四條邊的邊框)
border: 邊框的寬度 邊框的樣式 邊框的顏色;
快捷鍵:
bd+ + tab
2.2 連寫(分別設置四條邊框的寬度)
border-top: 邊框的寬度 邊框的樣式 邊框的顏色;
border-left: 邊框的寬度 邊框的樣式 邊框的顏色;
border-right: 邊框的寬度 邊框的樣式 邊框的顏色;
border-bottom: 邊框的寬度 邊框的樣式 邊框的顏色;
快捷鍵:
bt+ + tab
bl+ + tab
br+ + tab
bb+ + tab
邊框樣式:
dotted
dashed 虛線
solid 實線
double
groove
ridge
inset
注意點:
連寫格式中邊框的顏色可以省略,省略之后默認是黑色
連寫格式中樣式不能省略,省略之后就看不到邊框了
連寫格式中邊框寬度可以省略,省略之后默認是1px
2.3 連寫(分別設置四條邊的邊框)
border-width: 上 右 下 左
border-style: 上 右 下 左
border-color: 上 右 下 左
注意點:
1.賦值順序是 上右下左
2.這三個屬性省略時的規律
2.1 上右下左> 上右下 >左邊的取值跟右邊一樣
2.2 上右下左> 上右 >左下邊的取值跟上邊的一樣
2.3 上右下左 > 上 > 右下左的取值跟上邊都一樣
3.非連寫(方向+要素)
border-top-width:
border-top-style:
border-top-color:
.
.
.
none代表不需要邊框
-倒三角
1.什么是內邊距?
邊框和內容的距離就是內邊距
2.格式
2.1非連寫
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
2.2 連寫
padding: 上 右 下 左
注意點:
給標簽設置內邊距之后,標簽占有的寬度和高度會發生變化
上右下左可以省略部分,規則跟邊框一樣
給標簽設置顏色之后,內邊距也會有背景顏色
1.什么是外邊距?
標簽和標簽之前的距離就是外邊距
2.格式
2.1 非連寫
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
2.2 連寫
margin: 上 右 下 左;
注意點:
上右下左可以省略部分,規則跟邊框一樣
給標簽設置顏色之后,外邊距不會有背景顏色
給子元素添加margin-top之后會把父元素也一起頂下來,可以用overflow: hidden;清除
外邊距的合并現象(外邊距的塌陷現象)
-在默認布局的垂直方向上,默認情況下外邊距是不會疊加的,會出現合并現象,誰比較大就聽誰的
什么是CSS盒模型?
CSS盒模型僅僅是一個形象的比喻, HTML中的標簽都是盒模型
CSS盒模型指那些可以設置寬度高度/內邊距/邊框/外邊距的標簽
這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以HTML標簽又叫做盒模型
1.內容的寬高
就是通過標簽的width/height屬性設置的寬度和高度
2.元素的寬高
寬度 = 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框
高度 同理可證明
3.元素空間的寬高
寬度 = 左外邊距 + 左邊框 + 左內邊距 + width +右內邊距 + 右邊框 +右外邊距
高度 同理可證明
規律:
1.增加了padding/border之后,元素的寬高也會發生變化
2.如果增加了padding/border之后還想保持元素的寬高,那么必須調整內容的寬高
什么是box-sizing屬性? CSS3
-這個屬性可以保證我們給盒子新增padding和boder之后盒子元素的寬高不變
取值:
content-box
元素的寬高 = 邊框 + 內邊距 + 內容寬高
boder-box
元素的寬高 = width屬性
嵌套盒子 水平/垂直方向padding
注意點:
1.如果兩個盒子是嵌套關系,那么設置了一個盒子的頂部的外邊距,外面一個盒子也會被頂下來
2.如果外面的盒子不想被一起被頂下來,那么只需要給外面的盒子設置一個邊框屬性
3.在企業開發中,一般情況下如果需要控制嵌套關系盒子之間的關系,應該首先考慮padding,其次再考慮margin
margin本質上是控制兄弟關系間的關系
嵌套盒子 水平方向居中
注意點:
1.在嵌套關系的盒子中,我們可以利用margin: 0 auto;的方式讓里面的盒子在外面的盒子中水平居中
2.margin: 0 margin;只對水平方向有效,對垂直方向無效
text-align跟margin區別?
text-align: center;
-設置盒子中存儲的文字/圖片水平居中
margin: 0 auto;
-讓盒子自己水平居中
1.為什么要清空默認邊距
在企業開發中為了更好的控制盒子的寬高和計算盒子的寬高等等,所以在企業開發中,編寫代碼之前第一件事情就是清空默認邊距
如何清空默認的邊距
簡單格式(不推薦):
*{
margin: 0;
padding:0;
}
正式格式:
body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input{
margin:0;
padding:0;
}
3.注意點
通配符選擇器會遍歷當前界面中所有的標簽,所以性能不好
(百度yui css reset)
企業開發中可以從這個網址中拷貝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
1.什么是行高?
在CSS中所有的行都有自己的行高
注意點:
行高和盒子的高度是不一樣的概念
1.文字在行高中默認是垂直居中的
2.在企業開發中我們經常將盒子的高度和行高設置為一樣,那么這樣就可以保證一行文字在盒子的高度重視是垂直居中的
簡而言之就是:要想一行文字在盒子中持之居中,那么只需要設置這行文字的行高等于盒子的高即可
3.在企業開發中如果一個盒子中有多行文字,想要他們在盒子中垂直居中,那么只能設置padding來設置
注意點:
1.在企業開發中,如果一個盒子中存儲的是文字,那么一般情況下我們會以盒子左邊的內邊距為基準,不會以右邊的內邊距為基準,因為這個右邊的內邊距有誤差
2.右邊內邊距的誤差從何而來?因為右邊如果放不下一個文字,那么文字就會換行顯示,所以文字和內邊距之間的距離就有了誤差
3.頂部的內邊距并不是邊框到文字頂部的距離,而是邊框到行高頂部的距離
—————
如何快速寫多個以數字遞增作為后綴的標簽?
簡寫:
div.box$*數字
會自動生成數字序列
div.box${內容}*數字
會自動生成數字序列且帶內容
——————
vertical-align: text-top;垂直對齊方式
清空默認邊距
企業開發中可以從這個網址中拷貝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
