HTML CSS問題小集合

2021-10-08 20:56:18 字數 2573 閱讀 9016

1.常用到的塊狀元素如:(自帶換行)

~< form>   < aside>
行級行行級元素有:

.

斜體刪除線下劃線

2.多行文字如何垂直居中?

div margin padding vertical-align

<1>table布局 display:table+display:table-cell 缺點:不相容ie6,ie7。

ccs中的verticle-align屬性只對擁有vertical-align特性的html標籤起作用,但是在css中有個display屬性可以模擬table,就可以使用這個讓div模擬table運用vertical-align屬性,使用display:table和display:table-cell,在這裡需要注意的是,前者需要設定在父標籤中,後者設定在子標籤中。

父元素使用display:table和子元素使用display:table-cell屬性來模擬**,

子元素設定vertical-align:middle即可垂直居中

<2>使用display:inline-block

父元素設定對應的height和line-height,

對子元素設定vertical-align:middle屬性和display:inline-block屬性,轉換成行內塊元素,

相當於變成多個單行文字。

新增line-height屬性,覆蓋繼承自父元素的行高。

缺點:文字的高度不能超過外部盒子的高度。

父元素設定對應的height和line-height,

對子元素設定vertical-align:middle屬性和display:inline-block屬性,轉換成行內塊元素,

相當於變成多個單行文字。

新增line-height屬性,覆蓋繼承自父元素的行高。

缺點:文字的高度不能超過外部盒子的高度。

.a_box1

.a_box_span

3.垂直居中1、line-height 在單行裡能用

2、設定padding (最佳)

4.行級元素和塊級元素的特點

特點:(1)可設定寬高

(2)在沒有設定寬高的時候獨佔一行(內容決定高度)

(3)換行

行級元素 不換行的 內嵌元素

特點:(1)不可設定寬高

(2)寬高就是內容寬高

(3)不換行

img是乙個特殊的內嵌元素,是乙個有塊元素屬性的內嵌元素

4.父元素塌陷

解決辦法: 清除父元素塌陷帶來的危害

1.給父元素設定高度,只是通過css的解決(不能接觸父元素塌陷的危害,一般不用)

2.給父元素設定末尾乙個最小的「兒子」,給父元素裡面設定乙個div,屬性設定為clear:both

設定div很麻煩,設定乙個偽類.clear:after(方法4)

3.給父元素設定overflow:hidden (溢位隱藏)(非常規方法)

4.給父元素設定乙個after 給after設定clear:both (最佳)

5.在給子元素設定margintop的時候,margintop會作用與父元素

解決辦法:

1.子元素設定float,讓子元素脫離文件流

2.給父元素新增overflow:hidden

3.給父元素新增乙個內容

4.給父元素乙個上內邊距

5.給父元素乙個邊框

6.外邊距在使用過程中會遇到問題:

1.左右外邊距相加

2.上下外邊距取最大 如果脫離文件流上下依舊相加

3.子元素設定上下外邊距會將這個外邊距作用於子元素

隱藏方式:

1.overflow 溢位隱藏 不佔據位置

2.visbility:hidden 是否可見 佔據位置

3.display:none 消失 不佔據位置

4.opacity 透明度 佔據位置

7. 背景展示不完全。

a.寬度設定100%,用margin設定內容,內容多高背景展示多高

8.背景透明的兩種方式

rgba 背景透字不透

opacity 全部內容透明

層疊頁面下拉,尾部出現成疊的效果,先寫好footer,看好高度,再設定body裡下外邊距

EXT 最小集合

想把ext放入自己的專案,需要自己整理一下,因為發布包裡的東西並非都是必要的,比如文件,比如例子,比如源 必要的最小集合是這樣 ext all.js,adapter ext ext base.js,build locale ext lang zh cn.js和整個resources目錄。ext al...

文字框驗證小集合

本次集合了幾種常見的驗證,用的時候只要在頁面載入的時候初始化一次即可。核心 檢測型別 if options.rule break case decimal quens.push isdecimal obj.bind keypress function e break 檢測整數數字 function ...

51nod 最小集合

最小集合 system message 命題人 基準時間限制 1 秒 空間限制 131072 kb 分值 80 a君有乙個集合。這個集合有個神奇的性質。若x,y屬於該集合,那麼x與y的最大公因數也屬於該集合。但是他忘了這個集合中原先有哪些數字。不過幸運的是,他記起了其中n個數字。當然,或許會因為過度...