如何實(shí)現(xiàn)垂直居中(內(nèi)容上下空白一樣高)?
如果父元素的高度不寫,你只需要padding:10px 0 即可垂直居中子元素。
如果父元素高度已定,使用以下方法。
重點(diǎn):能不寫高度就不寫高度。
1、table標(biāo)簽自帶功能
2、把div變?yōu)閠able內(nèi)容即可垂直居中。
<div class = 'table'>
<div class = 'td'>
<div class = 'child'>兒子</div>
</div>
</div>
.table{
display:table;
border:solid 1px black;
height:100px
}
.td{
display:table-cell;
vertical-align:middle
}
.child{
border:solid 1px green;
}
3、margin-top -50%
4、translate -50%
5、absolut margin auto
5、flexgird
7、100%高度的after before 加 inline block
CSS選擇器優(yōu)先級(jí)
1、選擇題越具體,其優(yōu)先級(jí)越高
比如 id和class id更具體,
2、相同優(yōu)先級(jí),后面覆蓋前面的
3、屬性后面加!important的優(yōu)先級(jí)越高(少用)
css選擇器優(yōu)先級(jí)最高到最低順序?yàn)椋?br>
1.id選擇器(#myid)
2.類選擇器(.myclassname)
3.標(biāo)簽選擇器(div,h1,p)
4.子選擇器(ul < li)
5.后代選擇器(li a)
6.偽類選擇(a:hover,li:nth-child)
1、CSS 選擇器是什么: 通俗的講 CSS 選擇器 用來對(duì)選定的頁面元素進(jìn)行樣式修改。
2、什么是 css 選擇器優(yōu)先級(jí):css選擇器優(yōu)先級(jí)是基于不同種類選擇器組成的匹配規(guī)則。 在css規(guī)格文檔中有其計(jì)算規(guī)則。
3、css 選擇器的優(yōu)先級(jí):!important> 行內(nèi)樣式 > ID 選擇器 > 類、偽類、屬性選擇器> 標(biāo)簽、偽元素選擇器> 通配符、子類選擇器、兄弟選擇器
如何清除浮動(dòng)(應(yīng)試題,基本沒人用浮動(dòng)了)
為什么清除浮動(dòng):
由于內(nèi)部元素浮動(dòng),脫離文檔流。外層父元素?zé)o法正常包裹內(nèi)部元素。
1、通過偽元素
給父元素加.clearfix
.clearfix:after{
content:'';
display:block:
height:0
clear:both;
}
2、通過BFC
父元素
overflow:hidden
或
float:left
或
position:absolute
或
display:inline-block
都可以觸發(fā)BFC
缺點(diǎn)overflow:hidden,可能會(huì)使內(nèi)部本應(yīng)正常顯示的元素被裁剪掉。
兩種和模型的區(qū)別?
區(qū)分題:先說1再說2相同點(diǎn)、不同點(diǎn)。
第一種盒模型是content-box,
width指定的是content區(qū)域,而不是實(shí)際寬度,公式為
實(shí)際寬度=width=padding+border(你寫width = 100px可能實(shí)際占120px)
第二種盒模型是border-box.weidt指定的是左右邊框外側(cè)的距離
實(shí)際寬度 = width
相同點(diǎn)都是用來指定寬度,不同點(diǎn)是border-box更好用
盒模型 box-sizing:
content-box 內(nèi)容盒 內(nèi)容就是盒子的邊界。 width = 內(nèi)容寬度
border box 邊框盒 邊框才是盒子的邊界 width=內(nèi)容寬度+padding+border
height同理

問:請(qǐng)說一下CSS盒模型?
答:
CSS盒模型分兩種,一種是content box一種 border box。
區(qū)別content box寬度只包含content, border box 寬度包含到 border,包括padding、 content、border。如果沒有padding和border那他倆寬度是一樣的。
一般用border box 因?yàn)楦糜靡恍?/p>