邊框border-color
同時設定邊框的顏色、粗細和樣式
.border
:1px solid #3a6587;
border
:1px dashed red;
margin
margin-top
:1px;
margin-right
:1px;
margin-bottom
:1px;
margin-left
:1px;
/*同時設定四個方向的邊距*/
margin
:3px 3px 3px 3px;
margin
:3px 5px;
margin
:8px
margin
:0px auto;
內邊距padding
用法和margin一樣
*
盒子模型總尺寸=border+padding+margin+內容寬度
box-sizing
: content-box | border-box | inherit;
border-radius
:20px 10px 50px 30px;
沒有時找對角利用border-radius屬性製作圓形的兩個要點
利用border-radius屬性製作半圓形的兩個要點
利用border-radius屬性製作扇形遵循
「三同,一不同「 原則
/*扇形*/
div:nth-of-type(2)
box-shadow
:inset x-offset y-offset blur-radius color,.....;
標準文件流組成
塊級元素(block)
、、、列表
內聯元素(inline)
、、
內聯標籤可以包含於塊級標籤中，成為它的子元素，而反過來則不成立
內聯元素預設不支援寬高，需設定display
display
:block;
display的特性float屬性
屬性值說明元素向左浮動
right
元素向右浮動
none
預設值。元素不浮動，並會顯示在其文字**現的位置
float
:left;
float
:right;
display:inline-block
float
clear屬性值
說明left
在左側不允許浮動元素
right
在右側不允許浮動元素
both
在左、右兩側不允許浮動元素
none
預設值。允許浮動元素出現在兩側
img
overflow屬性
absolute：絕對定位
fixed：固定定位
relative屬性值
#first
設定相對定位的盒子會相對它原來的位置，通過制定偏移 ，達到新的位置
設定相對定位的盒子仍在標準文件流中，它對父級盒子和相鄰的盒子都沒有任何影響
設定相對定位的盒子原來的位置會被保留下來
層級比浮動定位高
absolute屬性值
絕對定位的特性
設定了絕對定位但沒有設定偏移量的元素將保持在原來的位置。在網頁製作中可以用於需要使某個元素脫離標準流，而仍然希望它保持在原來的位置的情況
fixed屬性值
div:nth-of-type(1)
不會隨滾動條的移動而移動；
調整元素定位時重疊層的上下位置
.tiptext
說明舉例
opacity：x
x值為0~1，值越小越透明
opacity：0.4
filter:alpha(opacity=x)
x值為0~100,值越小越透明
filter:alpha(opacity=40);
網頁中的元素含有兩個對疊層級
改變設定絕對定位和沒有設定絕對定位的層的上下對疊順序，只需調整絕對定位層的z-index即可
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
html盒子模型 jquery盒子模型
最近學了jquery的盒子模型之後，感覺真的顛覆我之前對盒子模型的看法，我在最初以為盒子模型只存在於html,我們就來看看他們有何區別。1.html盒子模型 如果說js裡面萬物皆是物件，那麼html裡面的萬物皆是盒子。不是盒子的我們也可以用dispiay block 變成盒子。那他的盒子是怎麼計算的...