CSS 常見問題

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

image

問:請說一下CSS盒模型?

答:

CSS盒模型分兩種彻桃,一種是content box一種 border box坛善。

區(qū)別content box寬度只包含content, border box 寬度包含到 border邻眷,包括padding眠屎、 content、border肆饶。如果沒有padding和border那他倆寬度是一樣的改衩。

一般用border box 因為更好用一些。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末驯镊,一起剝皮案震驚了整個濱河市燎字,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌阿宅,老刑警劉巖候衍,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異洒放,居然都是意外死亡蛉鹿,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門往湿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來妖异,“玉大人,你說我怎么就攤上這事领追∷牛” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵绒窑,是天一觀的道長棕孙。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么蟀俊? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任钦铺,我火速辦了婚禮,結(jié)果婚禮上肢预,老公的妹妹穿的比我還像新娘矛洞。我一直安慰自己,他們只是感情好烫映,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布沼本。 她就那樣靜靜地躺著,像睡著了一般锭沟。 火紅的嫁衣襯著肌膚如雪抽兆。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天冈钦,我揣著相機與錄音,去河邊找鬼李请。 笑死瞧筛,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的导盅。 我是一名探鬼主播较幌,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼白翻!你這毒婦竟也來了乍炉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤滤馍,失蹤者是張志新(化名)和其女友劉穎岛琼,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體巢株,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡槐瑞,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了阁苞。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片困檩。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖那槽,靈堂內(nèi)的尸體忽然破棺而出悼沿,到底是詐尸還是另有隱情,我是刑警寧澤骚灸,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布糟趾,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏拉讯。R本人自食惡果不足惜涤浇,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望魔慷。 院中可真熱鬧只锭,春花似錦、人聲如沸院尔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽邀摆。三九已至纵顾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間栋盹,已是汗流浹背施逾。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留例获,地道東北人汉额。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像榨汤,于是被迫代替她去往敵國和親蠕搜。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容

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