HTML中CSS常用小技巧

2021-10-09 01:31:19 字數 1297 閱讀 3169

1、簡述塊級元素在父元素的居中方法有哪些?

父元素position

父元素相對定位,子元素絕對定位,子元素margin:auto;top:0;left:0;bottom:0;right:0;

父元素相對定位,子元素絕對定位,子元素left:50%,top:50%;margin-left:-子元素一半的寬度;margin-top: - 子元素一半的高度

父元素display

父元素display:flex; justify-content:center; align-items:center,子元素自動居中 (伸縮盒布局)

父元素display:table-cell; vertical-align:middle; 子元素margin:auto;

2.清除浮動的方式有哪些?

1.浮動元素的父級元素:overflow:hidden;

2.浮動元素的父級元素: ::after

3.浮動元素的同級:新增乙個空標籤,並且設定clear:both;

3、父子級外邊距合併問題的幾種解決方案?
1、父元素:border:1px solid;(不能是0px)

2、父元素:overflow: hidden;(或auto)

3、父元素:padding-top:30px;(不能是0或auto,其他的任意數值都可以)

4、父元素或子元素脫離文件流

1) 浮動float:left;(不能是auto)

2) 定位position:absolute;或者position:fixed;

5、子元素:display:inline-block;

4、簡述設定元素的隱藏和顯示的兩種方式?區別是什麼?
什麼是浮動:

元素使用float:left/right;後,會脫離文件流,父級元素因此失去支撐(如果沒有設定高度),下面的元素就會忽略父元素開始布局

display: none

display: block

該方式隱藏元素的時候,不會佔據頁面空間

visibility:hidden

visibility:visible

該方式隱藏元素時,依然佔據頁面空間

5、如何給行內元素設定寬高 – 將行內元素設定為塊級元素、脫離文件流
1) 使用display

display:block/inline-block

2) 使用position

position:absolute/fixed

3) 使用float

float:left/right

常用的css小技巧

li first child li last child li nth child 4 width 200px word break break all text overflow ellipsis display webkit box 物件作為伸縮盒子模型顯示 webkit box orient ...

CSS表常用小技巧

ul 標籤在 mozilla 中預設是有 padding 值的,而在 ie 中只有 margin 有值。同乙個的 class 選擇符可以在乙個文件中重複出現,而 id 選擇符卻只能出現一次 對乙個標籤同時使用 class和 id 進行 css 定義,如果定義有重複,id 選擇符做的定義有效。初學可能...

解決HTML和CSS中樣式的小技巧

在中會單獨佔一行,若想要在同一行,需要給li設定 disply inline block,將行內元素轉換為行內塊元素,從而可以擁有塊元素具有的寬高和對齊等屬性 每個前面有乙個圓點,若想去掉,設定父級元素list style none即可。想要邊框合併可用margin left,margin top等...