css(二)盒子模型和不同元素型別

2021-07-07 06:37:43 字數 750 閱讀 1134

塊級元素

、 、、、、、

轉化為塊級元素display:block;

特點:(1)每個塊級元素都從新的一行開始,並且其後的元素也另起一行。(2)元素的高度、寬度、行高以及頂和底邊距都可設定。(3)元素寬度在不設定的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定乙個寬度。

內聯元素、、、、

display:inline內聯塊狀元素

display:inline-block

特點:(1)和其他元素都在一行上(2)元素的高度、寬度、行高以及頂和底邊距都可設定。

盒子模型(塊狀元素具有)

邊框: border:2px solid red;

border-width:2px;

border-style:solid;//dashed(虛線),dotted(點線)

border-color:red;

注:可以只為乙個邊框設定樣式,即不同邊框設定不同的樣式

填充和邊界

padding:20px 10px 15px 30px;//上右下左

margin:20px 10px 15px 30px;

CSS 盒子模型(標準盒模型和怪異盒模型)

所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子,也就是乙個盛裝內容的容器。每個矩形都由元素的內容 content 內邊距 padding 邊框 border 和外邊距 margin 組成。所有的文件元素 標籤 都會生成乙個矩形框,我們稱為元素框 element ...

CSS盒子模型和元素溢位

盒子模型 1 重要的組成元素 content 內容 padding 內邊距 border 邊框 margin 外邊距 2 margin margin 100px auto 100px 表示的是上下的外邊距 auto表示的左右水平居中 margin 10px,20px,30px,40px 上,右,下,...

CSS盒子模型和層元素

盒子模型針對css中每個元素 padding後加元素格式 四元素 上 右 下 左 三元素 上 左右 下 兩元素 上下 左右 也可以 margin border和padding同樣擁有以上一樣規則。content1 content box width 50px height 50px backgrou...