# 邊框?qū)傩?br>
# 內(nèi)邊距
# 外邊距
# CSS盒子模型
# box-sizing
#清空默認(rèn)邊距
#行高(line-height)
什么是邊框?
邊框就是環(huán)繞在標(biāo)簽寬度和高度周圍的線條
2.邊框?qū)傩缘母袷?/p>
2.1 連寫(同時(shí)設(shè)置四條邊的邊框)
border: 邊框的寬度 邊框的樣式 邊框的顏色;
快捷鍵:
bd+ + tab
2.2 連寫(分別設(shè)置四條邊框的寬度)
border-top: 邊框的寬度 邊框的樣式 邊框的顏色;
border-left: 邊框的寬度 邊框的樣式 邊框的顏色;
border-right: 邊框的寬度 邊框的樣式 邊框的顏色;
border-bottom: 邊框的寬度 邊框的樣式 邊框的顏色;
快捷鍵:
bt+ + tab
bl+ + tab
br+ + tab
bb+ + tab
邊框樣式:
dotted
dashed 虛線
solid 實(shí)線
double
groove
ridge
inset
注意點(diǎn):
連寫格式中邊框的顏色可以省略,省略之后默認(rèn)是黑色
連寫格式中樣式不能省略,省略之后就看不到邊框了
連寫格式中邊框?qū)挾瓤梢允÷?省略之后默認(rèn)是1px
2.3 連寫(分別設(shè)置四條邊的邊框)
border-width: 上 右 下 左
border-style: 上 右 下 左
border-color: 上 右 下 左
注意點(diǎn):
1.賦值順序是 上右下左
2.這三個(gè)屬性省略時(shí)的規(guī)律
2.1 上右下左> 上右下 >左邊的取值跟右邊一樣
2.2 上右下左> 上右 >左下邊的取值跟上邊的一樣
2.3 上右下左 > 上 > 右下左的取值跟上邊都一樣
3.非連寫(方向+要素)
border-top-width:
border-top-style:
border-top-color:
.
.
.
none代表不需要邊框
-倒三角
1.什么是內(nèi)邊距?
邊框和內(nèi)容的距離就是內(nèi)邊距
2.格式
2.1非連寫
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
2.2 連寫
padding: 上 右 下 左
注意點(diǎn):
給標(biāo)簽設(shè)置內(nèi)邊距之后,標(biāo)簽占有的寬度和高度會(huì)發(fā)生變化
上右下左可以省略部分,規(guī)則跟邊框一樣
給標(biāo)簽設(shè)置顏色之后,內(nèi)邊距也會(huì)有背景顏色
1.什么是外邊距?
標(biāo)簽和標(biāo)簽之前的距離就是外邊距
2.格式
2.1 非連寫
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
2.2 連寫
margin: 上 右 下 左;
注意點(diǎn):
上右下左可以省略部分,規(guī)則跟邊框一樣
給標(biāo)簽設(shè)置顏色之后,外邊距不會(huì)有背景顏色
給子元素添加margin-top之后會(huì)把父元素也一起頂下來,可以用overflow: hidden;清除
外邊距的合并現(xiàn)象(外邊距的塌陷現(xiàn)象)
-在默認(rèn)布局的垂直方向上,默認(rèn)情況下外邊距是不會(huì)疊加的,會(huì)出現(xiàn)合并現(xiàn)象,誰比較大就聽誰的
什么是CSS盒模型?
CSS盒模型僅僅是一個(gè)形象的比喻, HTML中的標(biāo)簽都是盒模型
CSS盒模型指那些可以設(shè)置寬度高度/內(nèi)邊距/邊框/外邊距的標(biāo)簽
這些屬性我們可以用日常生活中的常見事物——盒子作一個(gè)比喻來理解，所以HTML標(biāo)簽又叫做盒模型
1.內(nèi)容的寬高
就是通過標(biāo)簽的width/height屬性設(shè)置的寬度和高度
2.元素的寬高
寬度 = 左邊框 + 左內(nèi)邊距 + width + 右內(nèi)邊距 + 右邊框
高度 同理可證明
3.元素空間的寬高
寬度 = 左外邊距 + 左邊框 + 左內(nèi)邊距 + width +右內(nèi)邊距 + 右邊框 +右外邊距
高度 同理可證明
規(guī)律:
1.增加了padding/border之后,元素的寬高也會(huì)發(fā)生變化
2.如果增加了padding/border之后還想保持元素的寬高,那么必須調(diào)整內(nèi)容的寬高
什么是box-sizing屬性? CSS3
-這個(gè)屬性可以保證我們給盒子新增padding和boder之后盒子元素的寬高不變
取值:
content-box
元素的寬高 = 邊框 + 內(nèi)邊距 + 內(nèi)容寬高
boder-box
元素的寬高 = width屬性
嵌套盒子 水平/垂直方向padding
注意點(diǎn):
1.如果兩個(gè)盒子是嵌套關(guān)系,那么設(shè)置了一個(gè)盒子的頂部的外邊距,外面一個(gè)盒子也會(huì)被頂下來
2.如果外面的盒子不想被一起被頂下來,那么只需要給外面的盒子設(shè)置一個(gè)邊框?qū)傩?/p>
3.在企業(yè)開發(fā)中,一般情況下如果需要控制嵌套關(guān)系盒子之間的關(guān)系,應(yīng)該首先考慮padding,其次再考慮margin
margin本質(zhì)上是控制兄弟關(guān)系間的關(guān)系
嵌套盒子 水平方向居中
注意點(diǎn):
1.在嵌套關(guān)系的盒子中,我們可以利用margin: 0 auto;的方式讓里面的盒子在外面的盒子中水平居中
2.margin: 0 margin;只對(duì)水平方向有效,對(duì)垂直方向無效
text-align跟margin區(qū)別?
text-align: center;
-設(shè)置盒子中存儲(chǔ)的文字/圖片水平居中
margin: 0 auto;
-讓盒子自己水平居中
1.為什么要清空默認(rèn)邊距
在企業(yè)開發(fā)中為了更好的控制盒子的寬高和計(jì)算盒子的寬高等等,所以在企業(yè)開發(fā)中,編寫代碼之前第一件事情就是清空默認(rèn)邊距
如何清空默認(rèn)的邊距
簡(jiǎn)單格式(不推薦):
*{
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.注意點(diǎn)
通配符選擇器會(huì)遍歷當(dāng)前界面中所有的標(biāo)簽,所以性能不好
(百度yui css reset)
企業(yè)開發(fā)中可以從這個(gè)網(wǎng)址中拷貝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
1.什么是行高?
在CSS中所有的行都有自己的行高
注意點(diǎn):
行高和盒子的高度是不一樣的概念
1.文字在行高中默認(rèn)是垂直居中的
2.在企業(yè)開發(fā)中我們經(jīng)常將盒子的高度和行高設(shè)置為一樣,那么這樣就可以保證一行文字在盒子的高度重視是垂直居中的
簡(jiǎn)而言之就是:要想一行文字在盒子中持之居中,那么只需要設(shè)置這行文字的行高等于盒子的高即可
3.在企業(yè)開發(fā)中如果一個(gè)盒子中有多行文字,想要他們?cè)诤凶又写怪本又?那么只能設(shè)置padding來設(shè)置
注意點(diǎn):
1.在企業(yè)開發(fā)中,如果一個(gè)盒子中存儲(chǔ)的是文字,那么一般情況下我們會(huì)以盒子左邊的內(nèi)邊距為基準(zhǔn),不會(huì)以右邊的內(nèi)邊距為基準(zhǔn),因?yàn)檫@個(gè)右邊的內(nèi)邊距有誤差
2.右邊內(nèi)邊距的誤差從何而來?因?yàn)橛疫吶绻挪幌乱粋€(gè)文字,那么文字就會(huì)換行顯示,所以文字和內(nèi)邊距之間的距離就有了誤差
3.頂部的內(nèi)邊距并不是邊框到文字頂部的距離,而是邊框到行高頂部的距離
—————
如何快速寫多個(gè)以數(shù)字遞增作為后綴的標(biāo)簽?
簡(jiǎn)寫:
div.box$*數(shù)字
會(huì)自動(dòng)生成數(shù)字序列
div.box${內(nèi)容}*數(shù)字
會(huì)自動(dòng)生成數(shù)字序列且?guī)?nèi)容
——————
vertical-align: text-top;垂直對(duì)齊方式
清空默認(rèn)邊距
企業(yè)開發(fā)中可以從這個(gè)網(wǎng)址中拷貝
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}
