如何實現(xiàn)垂直居中(內(nèi)容上下空白一樣高)?
如果父元素的高度不寫,你只需要padding:10px 0 即可垂直居中子元素票堵。
如果父元素高度已定,使用以下方法逮栅。
重點:能不寫高度就不寫高度。
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)先級
1、選擇題越具體镰官,其優(yōu)先級越高
比如 id和class id更具體提前,
2、相同優(yōu)先級泳唠,后面覆蓋前面的
3狈网、屬性后面加!important的優(yōu)先級越高(少用)
css選擇器優(yōu)先級最高到最低順序為:
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 選擇器 用來對選定的頁面元素進(jìn)行樣式修改拓哺。
2、什么是 css 選擇器優(yōu)先級:css選擇器優(yōu)先級是基于不同種類選擇器組成的匹配規(guī)則脖母。 在css規(guī)格文檔中有其計算規(guī)則士鸥。
3、css 選擇器的優(yōu)先級:!important> 行內(nèi)樣式 > ID 選擇器 > 類谆级、偽類烤礁、屬性選擇器> 標(biāo)簽、偽元素選擇器> 通配符肥照、子類選擇器鸽凶、兄弟選擇器
如何清除浮動(應(yīng)試題,基本沒人用浮動了)
為什么清除浮動:
由于內(nèi)部元素浮動建峭,脫離文檔流玻侥。外層父元素?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
缺點overflow:hidden掌桩,可能會使內(nèi)部本應(yīng)正常顯示的元素被裁剪掉。
兩種和模型的區(qū)別姑食?
區(qū)分題:先說1再說2相同點波岛、不同點。
第一種盒模型是content-box音半,
width指定的是content區(qū)域则拷,而不是實際寬度,公式為
實際寬度=width=padding+border(你寫width = 100px可能實際占120px)
第二種盒模型是border-box.weidt指定的是左右邊框外側(cè)的距離
實際寬度 = width
相同點都是用來指定寬度曹鸠,不同點是border-box更好用
盒模型 box-sizing:
content-box 內(nèi)容盒 內(nèi)容就是盒子的邊界煌茬。 width = 內(nèi)容寬度
border box 邊框盒 邊框才是盒子的邊界 width=內(nèi)容寬度+padding+border
height同理
問:請說一下CSS盒模型?
答:
CSS盒模型分兩種彻桃,一種是content box一種 border box坛善。
區(qū)別content box寬度只包含content, border box 寬度包含到 border邻眷,包括padding眠屎、 content、border肆饶。如果沒有padding和border那他倆寬度是一樣的改衩。
一般用border box 因為更好用一些。