Box模型與CSS框架

2021-08-22 18:13:29 字數 1394 閱讀 3528

常用css樣式屬性

box模型

行級元素轉換為塊級元素為了換行或使用塊級元素才有的css樣式

注意:當框的屬性為block時,此元素前後帶有**換行符**。

h2

1、left 屬性規定元素的左邊緣,該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移;

2、right 屬性規定元素的右邊緣,該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

type="text/css">

img

style>

head>

this is a headingh1>

src="/i/eg_smile.gif" />

由於影象的 z-index 是 -1,因此它在文字的後面出現。p>

body>

html>

注意:塊級元素的垂直相鄰外邊距會合併,而行內元素實際上不佔上下外邊距;行內元素的的左右外邊距不會合併;浮動元素的外邊距也不會合併;允許使用負值,不過要謹慎使用;

外邊距合併:當兩個垂直(非水平)外邊距相遇時,合併後的外邊距高度等於兩個外邊距高度中的較大者

p

padding

:10px 5px 15px 20px;

//按順時針方向

//上內邊距是 10px

//右內邊距是 5px

//下內邊距是 15px

//左內邊距是 20px

style="float: left;">數學p>

style="float: right;">語文p>

style="clear: both;">

div>

div>

charset="utf-8">

:after清除浮動title>

.out

.out

:after

.instyle>

head>

class="out">

class="in"

style="background-color: blue;">

div>

class="in"

style="background-color: green;">

div>

div>

body>

html>

IE的box模型顯示bug

原作者charlee 原始鏈結http tech.idv2.com 2007 01 02 ie box model bug 以及本宣告。box模型即由等塊元素的 margin padding border width height 等屬性構成的顯示模型,它是css布局的基礎。通過設定的各種屬性,可以...

IE的box模型顯示bug

原作者charlee 原始鏈結 以及本宣告。box模型即由等塊元素的 margin padding border width height 等屬性構成的顯示模型,它是css布局的基礎。通過設定的各種屬性,可以得到任何想要的頁面效果。各個元素的含義如下 其中有問題的就是 width 和 height ...

IE的box模型顯示bug

原作者charlee 原始鏈結 以及本宣告。box模型即由等塊元素的 margin padding border width height 等屬性構成的顯示模型,它是css布局的基礎。通過設定的各種屬性,可以得到任何想要的頁面效果。各個元素的含義如下 其中有問題的就是 width 和 height ...