html 和css 效果 整理集合篇

2022-11-24 21:11:17 字數 1370 閱讀 5004

一、如何用一張做背景圖,並且自適應div的大小

background: url("../stu_wengu.png") center center no-repeat;

background-size: cover;

/*

實現在整個頁面中的完全顯示效果

*/body

二、子div設定margin-top使得父div也跟著向下移動

這個問題發生的原因是根據規範,一個盒子如果沒有上補白(padding-top)和上邊框(border-top),那麼這個盒子的上邊距會和其內部文件流中的第一個子元素的上邊距重疊。

再說白點就是:父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己“領導”(父元素,祖先元素)的麻煩。只要給領導設定個有效的 border或

者padding就可以有效的管制這個目無領導的margin防止它越級,假傳聖旨,把自己的margin當領導的margin執行。

解決方法: 

1、修改父元素的高度,增加padding-top樣式模擬(padding-top:1px;常用) 

2、為父元素新增overflow:hidden;樣式即可(完美) 

3、為父元素或者子元素宣告浮動(float:left;可用) 

4、為父元素新增border(border:1px solid transparent可用) 

5、為父元素或者子元素宣告絕對定位

三、外層div已經設定了text-align:center;,裡面的div為啥還是不居中

display:block;元素 用屬性margin: 0 auto;搞定左右居中

display:inline-block;元素 用屬性text-align: center;搞定左右居中

四、font-weight引數:

normal : 正常的字型。相當於number為400。宣告此值將取消之前任何設定

bold : 粗體。相當於number為700。也相當於b物件的作用

bolder : ie5+ 特粗體

lighter : ie5+ 細體

number : ie5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

詳細基礎加粗知識請進css手冊中的font-weight手冊。

html常規加粗標籤

以前html直接對物件加粗的標籤如下:

兩者效果相同。

html css定位篇

position absolute相對於父元素移動,不在父元素範圍內時,可能和其他元素重疊 relative相對於初始位置來進行移動 fixed相對於瀏覽器進行定位,無論滑輪如何滾動,始終出現在瀏覽器的同一個位置 sticky粘性定位,該定位基於使用者滾動的位置。頁面滾動超出目標區域之前,表現和 p...

html css 佈局篇

float 做了float後有一些不好的影響。1 背景不能顯示 由於浮動產生,如果對父級設定了 css background背景 css背景顏色或css背景,而父級不能被撐開,所以導致css背景不能顯示。2 邊框不能撐開 如上圖中,如果父級設定了css邊框屬性 css border 由於子級裡使用了...

HTML和CSS 2

認識html檔案基本結構 這一節中我們來學習html檔案的結構 一個html檔案是有自己固定的結構的。講解 1.稱為根標籤,所有的網頁標籤都在中。2.標籤 在和標籤之間的文字內容是網頁的標題資訊,它會出現在瀏覽器的標題欄中。網頁的title標籤用於告訴使用者和搜尋引擎這個網頁的主要內容是什麼,搜尋引...