基本css知識點2

2021-09-30 00:02:50 字數 1247 閱讀 5448

一、盒子模型

(一)外邊距(margin)

1、設定標籤與標籤之間的間距

2、margin: 0 auto 是左右自動居中

3、設定標籤的位置(水平/垂直)

4、可能會遇到的問題:外邊距重疊(合併),外邊距塌陷 , 解決方法(巢狀一層標籤):

(1)設定overflow:hidden;

(2)設定邊框(border)

(3)設定浮動(float)

(4)設定定位(position)

外邊距塌陷**:

外邊距塌陷的執行結果:

解決外邊距的**:

解決外邊距塌陷問題的執行結果:

(二)邊框(border)

1、乙個盒子有四條邊

2、屬性:border-style(邊框樣式例如:直線、點線、虛線)/border-width(邊框寬度)/border-color(邊框顏色)

3、邊框的作用:修飾盒子邊框,製作小圖示:例如三角形;

設定三角形**:

執行結果:

(三)內邊距(padding)

1、設定內容與邊框的間距

2、padding-top(上)/padding-bottom(下)/padding-right(右)/padding-left(左)

3、作用:可以居中指定的內容

**首頁 		

執行結果:

(四)盒子設定內容大小:寬(width)高(height)

二、盒子計算方式

盒子計算方式:邊框+外邊距+內容大小

三、字型屬性

(一)font-size 字型大小

(二)font-style 字型樣式

(三)font-weight  字型粗細

(四)font-family  字型名稱

(五)color  字型顏色。

CSS 基本知識點梳理

通過box sizing設定 box sizing context box 標準盒子模型 寬度 內容的寬度 content border padding margin box sizing border box 怪異盒模型 寬度 內容寬度 content border padding margin ...

Falsk web 基本知識點2

一 傳送郵件二 wtf表單 第三 一 什麼是物件關係對映 大部分程式語言都是物件導向的,採用物件模型。而資料被儲存在關聯式資料庫中的,資料採用的是關係模式。關係模型和物件模型是有區別的,物件模型更加先進,能夠描述繼承 實現 關聯 聚合和組成等複雜的關係,而關係模型只能描述一對 一 一對多和多對多的關...

移動端css基本知識點

移動端css基本知識點 ppi pixels per inch 也叫dpi dots per inch 表示的是每英吋所擁有的畫素 pixel 數目。數值越高,代表顯示屏能夠以越高的密度顯示影象。適用於移動端的dtd html public wapforum dtd xhtml mobile1.0 ...