1、css3的display屬性:inline:內聯
inline-block:可以設定寬高的內聯
block:設定為塊:
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>css3盒子型別
title
>
<
style
>
/*inline:內聯，inline-block:可以設定寬高的內聯,*/p
span
style
>
head
>
<
body
>
<
p>這是一段測試文字
p>
<
p>這是一段測試文字
p>
<
span
>這是一段測試文字
span
>
<
span
>這是一段測試文字
span
>
body
>
html
>
inline-table:內聯**:
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>line-table屬性
title
>
<
style
>
/*inline-table:內聯**
*/table
table td
style
>
head
>
<
body
>
我是上面文字
<
table
>
<
tr>
<
td>單元1
td>
<
td>單元1
td>
<
td>單元1
td>
tr>
<
tr>
<
td>單元1
td>
<
td>單元1
td>
<
td>單元1
td>
tr>
<
tr>
<
td>單元1
td>
<
td>單元1
td>
<
td>單元1
td>
tr>
table
>
我是下面文字
body
>
html
>
list-item:把元素設定為列表項:
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>list-item屬性
title
>
<
style
>
/*list-item:把元素設為列表項。可設定列表項樣式
*/div
style
>
head
>
<
body
>
<
div>我是一段測試文字
div>
<
div>我是一段測試文字
div>
<
div>我是一段測試文字
div>
body
>
html
>
2、盒子的大小計算方式:box-sizing屬性：
border-box:此情況下設定的寬高為整個盒子(包含padding)的寬高;
content-box:此情況下設定的寬高為盒子內容(不包含padding)的寬高;
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>盒子的box-sizing屬性
title
>
<
style
>
/*下面兩個div寬高此情況下是一樣的，
*/#div1
#div2
style
>
head
>
<
body
>
<
div
id="div1"
>
div>
<
div
id="div2"
>
div>
body
>
html
>
2015 12 13複習之CSS3盒子樣式
box sizing content box，border box 預設值是content box content box 內容大小不把border，padding包含在內 通俗的講就是，首先設定好了寬高分別為100px，再設定border和padding分別為1px，此時，容器總大小為104px，...
CSS3盒子陰影box shadow
來自w3cschool的解釋 語法 box shadow h shadow v shadow blur spread color inset 值描述 h shadow 必需。水平陰影的位置。允許負值。v shadow 必需。垂直陰影的位置。允許負值。blur 可選。模糊距離。spread 可選。陰影...
css3 盒子型別
盒子的型別 使用display來定義 一 3種常見情況 block inline inline block block 塊級 inline 內聯 inline block 行內塊 我們都知道 乙個塊級元素占領一行，且可以設定寬高 而乙個內聯元素後面可以跟內聯元素，一行可以有很多個內聯元素，但是內聯元...