CSS總結及常見問題彙總

2021-10-07 23:56:40 字數 2037 閱讀 8031

最近在學習html和css的一些基本應用,遇到過很多問題,剛開始會發現css像是不可控一樣,這次達到了預期效果,可能下一次就偏了十萬八千里,或者是「牽一髮而動全身」。其實對於計算機而言,沒有什麼是不確定的,如果有,那一定是學藝不精。以下是自己在學習過程中對css的一些總結。

css,(cascading style sheet層疊樣式表 ) ,學習css就是學習一堆選擇器和屬性的選擇和使用。我們常用css來進行布局的構造和整體美化。

布局:盒子模型設定、浮動設定、定位設定。

美化:字型設定、文字設定、列表設定、**設定。

字型設定:

文字設定:

text-indent: 首行空兩格

text-align:

line-height:設定行高

在需要對盒子內元素進行居中時,我們常會用到兩個屬性

text:align="center";

margin:0 auto;

在介紹margin:0 auto之前,先要講一下什麼是盒子模型,盒子模型是說html中的每個元素都是被包裹在乙個盒子裡面的,盒子主要分為四個部分,乙個是content(盒子內的區域),乙個是border(盒子邊框),在content和border之間的是padding(內填充區域),以及與父元素之間的距離即在border之外的margin(外填充區域)。因此居中對齊是使整體盒子在其父元素中居中margin:0 auto,意思是距父容器頂部距離為0px,而左右下三部分自動調整。而padding是對內的,padding的調整對盒子在整個頁面中的位置根本不能起任何作用。當使用margin:0 auto無法達到居中效果是可能是沒有設定盒子的width。

父子元素之間的重疊問題:

"box9">

"box10">我是乙個段落

按理說p標籤上面的應該有80px的margin ,實現是:只有50px margin 這種現象叫父子元素之間的margin重疊

解決:1)給父元素加border

2)給父元素加padding 只加乙個0px不行

"box9">

"box10">我是乙個段落

浮動元素的特點:

浮動是半脫離標準文件流。

貼靠性 如果都向同乙個方向浮動,這兩個浮動的元素會緊緊的貼在一起,如果後面的空間不夠貼靠的話,它會自動換行。

包裹性 如果是乙個塊級元素,在沒有設定寬度的情況下,只要它浮動了,那麼它的寬度會盡可能小。

乙個元素內部所有元素都浮動了,如果父元素在沒有設定高度的情況下,它的高度會變成0,也就說父元素的高度塌陷了。

如果乙個行內元素浮動了,就可以設定寬度和高度,也就是變成了塊級元素。

元素浮動會造成影響:

對父元素造成的影響 對後面的兄弟元素影響

我們需要清除浮動所造成的的影響,也叫清除浮動:

清除對父元素所造成影響

加高法overflow:hidden

元素浮動也會對它後面的元素造成影響:

後面的元素會鑽上去,但是文字不會,文字會形成字圍效果。 對兄弟元素造成影響,我們需要清除這種影響,也叫清除浮動。clear: left/right/bothclear:both

注意:clear:both只能寫在第1個受影響的元素上,寫在父元素上沒有什麼用。
後續有問題再進行補

css常見問題及技巧

1.父級元素如已經設定成了塊級元素 display block 子元素如 設定了float,這時父元素a依然無高度沒有被撐開 解決 在元素的樣式中新增overflow hidden 2.查詢功能 media screen and min width 1280px 這樣書寫瀏覽器可能不會解析成功,an...

IE下css常見問題總結及解決

1 div的垂直居中問題 解決方法 將行距增加到和整個div一樣高 複製 如下 div test 2 margin加倍的問題 ie6下,div設定為float時,左 右 margin會加倍。解決方法 在這個div裡面加上display inline 例如 3 ie6下頁面min width heig...

IE下css常見問題總結及解決

本文整理了ie中div的垂直居中問題 margin加倍的問題 ie6下頁面min width height與max width height問題 ie6 3px bug及ie6捉迷藏的問題等等,感興趣的朋友可以參考下哈 1 div的垂直居中問題 解決方法 將行距增加到和整個div一樣高 複製 如下 ...