CSS盒子筆記

2021-06-18 06:33:12 字數 1938 閱讀 5149

,css選擇器,大家寫css選擇器的時候,能共用的選擇器盡量提取出來

2,差距生成的呢?

每天比別人落後一點,時間長了就跟不上了

這也是乙個態度的問題

總之,不要指望老師放慢速度,自己盡快適應

3,選擇器的繼承

和css樣式優先順序,有類似之處

關聯的選擇器 > id選擇器 > 類選擇器 > 元素選擇器

越精確的優先順序越高

4,css常用的屬性、值

字型屬性:

font-size:字型大小

color:字型顏色

font-style:字型樣式  italic是斜體

font-weight:字型加粗

font-family:字型族譜  宋體、黑體...

控制文字的屬性

letter-spacing:字母間隔

word-spacing:文字間隔

背景屬性

background-color:背景顏色

background-repeat:背景平鋪:

background-attachment:背景附件:

background-position:背景位置

div+css來布局**

21世紀初,2023年左右,**

搜尋引擎,開始反思了:如何判斷乙個網是好是壞?

結果:看內容,看搜尋引擎抓取內容的速度

div+css-----div只寫內容,然後css控制他的樣式

1,由於之前的table,布局**,層層巢狀,導致搜尋引擎抓取的障礙增大,所以被淘汰,div 抓取內容比較順利

2,table----顯示的時候,等整個table框架載入完畢一塊顯示,div---載入一部分顯示一部分,如果頁面太長的話,導致後面可能會出現空白

但是,**布局也並不是絕對的,現在資料包表,後台管理方面table比較方便的

1,內容、顯示相分離;

2,提高工作效率

3,利於改版和維護

4

,利於搜尋引擎優化

5

,**簡潔,提高訪問速度

盒子模型:

除錯工具:

ie系列瀏覽器: ie tester

非ie系列的瀏覽器:ff---firefox火狐瀏覽器---firebug外掛程式

工具---附加元件----frebug---安裝

安裝軟體:盡量不要出現中文、特殊字元、空格

任何乙個html的標籤我們都可以看成是乙個容器(盒子),既然有盒子肯定有 寬(width)、高(height),邊框(border),內容和邊框之間有乙個空隙(padding),如果有多個盒子,會存在盒子與盒子之間存在邊距,margin

需求1:

需求2:盒子這兩個字 和包含他的盒子的間距稍微大一點

需求3:盒子兩個字 居中顯示

谷歌瀏覽器下,margin-top 不起作用解決之道:

增加 float 浮動,即可

margin、padding  值複製

margin:25px;  如果只有乙個值,其他都會複製這乙個值

而且,margin、padding 順序,上右下左

1,如果是乙個值,其他三個方向都複製這乙個值

2,如果是兩個值,上下對應乙個值,左右對應乙個值

3,如果是3個值,也就是缺左邊的,於是複製右邊的

定位分為  relative,absolute,fixed,static

絕對定位:

文件流:瀏覽器載入頁面的時候,從上往下解析的

但是,如果把一段**,設定為絕對定位(absolute),這段**就會脫離文件流

飄起來了

position:absolute

相對定位:

relative ,相對於文件流,**在**寫的,就在那裡顯示

z-index 值高的會覆蓋值低的

css筆記 各種盒子

初始階段,只有 1.塊級盒子 box level box 2.內聯盒子 inline box 有個list item 預設顯示專案符號,乙個盒子解釋不了 那就再加乙個盒子,叫附加盒子 list item元素會出現專案符號是因為生成了乙個附加盒子 學名標記盒子專門來放原點,數字這些符號 ie瀏覽器下偽...

CSS筆記 盒子模型

一.盒子模型簡介 css將頁面中的所有元素都設定成了乙個矩形的盒子 將元素設定為矩形的盒子後,對頁面的布局就變成了將不同的盒子擺放到不同的位置 每乙個盒子都由以下幾個部分組成 內容區 content 內邊距 padding 邊框 border 外邊距 margin 二.內容區 content 使用w...

css盒子模型 CSS 盒子模型

css 盒子模型基本上是面試的必考題,因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調,其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型,你可能會說我知道呀,就是 margin 包 border,border 包 padding,padding 包 content ...