CSS 常見問題

如何實(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同理

image

問:請(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>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一,css常見問題: 一、margin問題 上下margin重疊問題,即給相鄰的兩個(gè)div設(shè)置margin-bot...
    _往后_閱讀 1,710評(píng)論 0 2
  • 1、瀏覽器默認(rèn)樣式消除2、relative 相對(duì)自身左上角的元素點(diǎn)定位,sticky粘性定位兼容性不好,inher...
    看到這朵小fa了么閱讀 185評(píng)論 0 0
  • 1.介紹一下標(biāo)準(zhǔn)的CSS的盒子模型?低版本IE的盒子模型有什么不同的? 1.盒子模型有兩種,IE盒子模型、W3C盒...
    getElementsByMK閱讀 2,275評(píng)論 0 6
  • CSS優(yōu)先級(jí)算法如何計(jì)算? 樣式優(yōu)先級(jí)規(guī)則: 優(yōu)先級(jí)順序?yàn)椋?important>style>權(quán)重值權(quán)重規(guī)則:第一...
    iliuqiang閱讀 131評(píng)論 0 0
  • 我想你每天寫css代碼有時(shí)候也會(huì)覺得很痛苦:這個(gè)布局的css怎么這么難實(shí)現(xiàn)!我也經(jīng)常會(huì)有這種感覺,一個(gè)看似簡(jiǎn)單的布...
    程序猿TODO閱讀 835評(píng)論 0 0

友情鏈接更多精彩內(nèi)容