CSS從入門到精通（盒子模型）

時間 2019-12-05

標籤 css 入門精通盒子模型欄目 CSS 简体版

原文原文鏈接

主要介紹盒子模型。 css

盒子模型

生活中的盒子

網頁中的盒子模型

盒子模型的概念

盒子模型用來「放」網頁中的各類元素。
網頁設計中內容，如文字、圖片等元素，均可是盒子(DIV嵌套)

那些html元素能夠設置高和寬屬性

塊級元素

<p>、<div> 、 <h1> ~ <h6> 、<ul> 、<li> 、<ol> <dl> 、<dt> 、<dd>等
複製代碼

替換元素

<img>、<input>、<textarea>等
複製代碼

html標籤分類

塊級標籤:佔據一行，換行。

<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>
<h1>~<h6>、<p>、<form>、<hr>......
複製代碼

行內標籤:在一行，不換行。非替換元素:

<b>、<em>、<a>、<span>......
複製代碼

替換元素:

<img>、<input>、<textarea>...
複製代碼

邊框屬性

邊框寬度(border-width)
邊框顏色(border-color)
邊框樣式 ( border-style)
4個方向來表示(上、下、左、右)

設置元素邊框寬度

border-width : thin | medium | thick | 長度值
複製代碼

設置元素邊框顏色

border-color : 顏色 | transparent
複製代碼

設置元素邊框樣式

border-style : 值 | none | hidden
複製代碼

邊框屬性

值	描述
none	定義無邊框，默認值
hidden	與「none」相同。除非在表格元素中解決邊框衝突時
dotted	定義點狀邊框。在大多數瀏覽器中呈現爲實線
dashed	定義虛線。在大多數瀏覽器中呈現爲實線
solid	定義實線
double	定義雙線
groove	定義 3D 凹槽邊框
ridge	定義 3D 壟狀邊框
inset	定義 3D inset 邊框
outset	定義 3D outset 邊框
inherit	規定應該從父元素繼承邊框樣式。

不一樣方向表示:html

寬度

border-[left | right | top | bottom]-width 
複製代碼

顏色

border-[left | right | top | bottom]-color
複製代碼

樣式

border-[left | right | top | bottom]-style
複製代碼

縮寫

邊框縮寫:

border : [寬度] | [樣式] | [顏色]

複製代碼

不一樣方向:

border-top : [寬度] | [樣式] | [顏色] 
border-left : [寬度] | [樣式] | [顏色] 
border-right : [寬度] | [樣式] | [顏色] 
border-bottom :[寬度] | [樣式] | [顏色]
複製代碼

內邊距屬性

設置元素的內容與邊框之間的距離(內邊距或填充),瀏覽器

分4個方向 (上、右、下、左)bash

– padding-top : 長度值 | 百分比
– padding-right :長度值 | 百分比
– padding-bottom :長度值 | 百分比
– padding-left :長度值 | 百分比 說明:值不能爲負值

複製代碼

內邊距屬性縮寫

padding : 值1; //4個方向都爲值1
padding : 值1 值2 ; // 上下=值1，左右=值2
padding : 值1 值2 值3;// 上=值1，左右=值2，下=值3 padding : 值1 值2 值3 值4;// 上=值1，右=值2，下=值3,左=值2
複製代碼

外邊距屬性

設置元素與元素之間的距離(外邊距),微信

4個方向(上、右、下、左)spa

– margin-top : 長度值 | 百分比 | auto
– margin-right : 長度值 | 百分比 | auto
– margin-bottom : 長度值 | 百分比 | auto
– margin-left : 長度值 | 百分比 | auto 說明:值可爲負值
複製代碼

外邊距屬性縮寫

設置元素與元素之間的距離(外邊距),設計

4個方向(上、右、下、左) margin : 值1; //4個方向都爲值13d

margin : 值1 值2 ; // 上下=值1，左右=值2
margin : 值1 值2 值3;// 上=值1，左右=值2，下=值3
margin : 值1 值2 值3 值4;// 上=值1，右=值2，下=值3,左=值2
複製代碼

通常經驗

默認狀況下，相應HTML塊級元素存在外邊距 body、h1~h六、p......
聲明margin屬性，覆蓋默認樣式

body, h1, h2, h3, h4, h5, h6, p{
	margin: 0;
}
複製代碼

margin值爲auto , 實現水平方向居中顯示效果

外邊距合併

垂直方向，兩個相鄰元素都設置外邊距，外邊距會發生合併
合併後外邊距高度=兩個發生合併外邊距的高度中最大值

盒子模型計算

標準盒子模型

在 CSS 中，width 和 height 指的是內容區域的寬度和高度
增長內邊距、邊框和外邊距不會影響內容區域的尺寸
但會增長元素框的總尺寸

ie盒子模型

統一塊兒來

增長DOCTYPEcode

<!DOCTYPE html>
複製代碼

display屬性

inline 元素將顯示爲內聯元素，元素先後沒有換行符
block元素將顯示爲塊級元素 , 元素先後會帶有換行符
inline-block 行內塊元素，元素呈現爲inline，具備block相應特性
none 此元素不會被顯示

-------------------------華麗的分割線--------------------orm

看完的朋友能夠點個喜歡/關注，您的支持是對我最大的鼓勵。

我的博客番茄技術小棧和掘金主頁

想了解更多，歡迎關注個人微信公衆號：番茄技術小棧

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。