CSS學習筆記總結和技巧

跟葉老師說專案，他叫我寫乙個靜態首頁，看起來挺簡單的，但是下手才發現在真的不會怎麼下手啊，什麼模型啊模組啊都不懂，寫毛線啊！！

如圖：頁面下拉還有側欄，中間內容等。

可是答應跟老師做了，不能慫啊，於是硬著頭皮，花兩三天看在慕課網上學習bootstrap（講得挺好的，建議大白去看一下），其實我剛看完不久，裡面很多東西其實作者都總結得很不錯，還有演示。

收穫很多，打算再看一下html的div+css布局，花一兩天時間就可以寫完那個介面。就是這麼自信，哈哈哈~不逼自己一把，你永遠不知道自己有多優秀。

css的盒子模型，這個必須懂

這個是我看書看到的，覺得比較容易理解就拍下來了

選擇器一、基本分類：

1，標籤選擇器

2，類選擇器class

3，id選擇器id

二、優先順序：id > class > 標籤

三、偽選擇器：其實就是元素的一種狀態

在定義這些狀態時，有乙個順序：l v h a

id和class屬性名稱使用限制

無論是應用到div,還是其他物件的id中，同一名稱的id在當前頁面中只能使用一次，而class屬性名稱可以重複使用多次。

框架中百分比的關係

例如，container等外層div的寬度設定為80%,是相對瀏覽器視窗而言的比例。而後面content和side這兩個內層div的比例是相對於外層div而言的，即在container寬度的基礎上而言的。

visibility和display屬性的區別

visibility和display都可以達到隱藏頁面元素的目的，但是還是有區別的。

如果想隱藏某元素，但還想在頁面上保留該元素的空間，則使用visibility:hidden。

如果想在隱藏某元素的同時，讓其他內容填充空白空間，則使用display:none。

在html中匯入css檔案技巧

為了提高相同的樣式的復用性以及可擴充套件性，可以將多個標籤樣式進行單獨定義，並封裝成css檔案。

如：p.css     div.css   . . .  

在乙個總的css檔案中使用css的import將多個標籤樣式檔案匯入到總的css檔案中，

然後在html頁面上，使用link標籤匯入這個總的css檔案即可。

all.css

@import url(「p.css」);
@import url(「div.css」);
在html中匯入：

屬性列舉：

布局屬性：margin、padding、float(包括clear)、position(top,right,bottom,left即上右下左)、display、visibility、overflow等。

自身屬性：width、height、background、border等。
文字屬性：font、color、text-align、text-decoration、text-indent等。
其他屬性：list-style(列表樣式)、vertical-vlign、cursor、z-index(層疊順序)、zoom等。

CSS 學習筆記總結

1.概念 cascading style sheets 層疊樣式表 層疊 多個樣式可以作用在同乙個html的元素上，同時生效 2.好處 1.功能強大 2.將內容展示和樣式控制分離 降低耦合度。解耦 讓分工協作更容易 提高開發效率 3.css的使用 css與html結合方式 1.內聯樣式 在標籤內使用...

css 技巧總結

img 方法2 除了top值，還可以設定為text top middle bottom text bottom，甚至特定的和值都可以 img 方法3 test為img的父元素 test 2.如何讓某個元素充滿整個頁面？html,body test 3.文字超出隱藏 overflow hidden t...

CSS 技巧總結

方法一 img方法二 img除了top值，還可以設定為text top middle bottom text bottom，甚至特定的和值都可以 方法三 test test為img的父元素 test 首先需設定將文字強制在一行內顯示，然後將溢位的文字通過overflow hidden截斷，並以tex...