簡單概述盒模型

2021-10-22 19:04:00 字數 1167 閱讀 5634

不同的元素產生的盒子型別可能不同

乙個元素,產生什麼樣的盒子,取決他css的display屬性

display:none 不生成盒子

display:inline 行盒

display:block 塊盒

display:其他屬性值

注:盒模型中只有外邊距(margin)可以給負值

背景色預設的渲染區域:包含內容、內邊距、邊框

padding(內邊距)取值:

給乙個值:表示 上 下 左 右 都是該值

例如:padding:10px 表示 上:10px、下:10px、左:10px、 右:10px

給兩個值:表示 上下、 左右

例如:padding:10px 20px 表示 上:10px、 下:10px、 左:20px、 右:20px

給三個值:表示 上、左右、下

例如:padding:10px 20px 30px 表示 上:10px 下:30px 左:20px、右:20px

給四個值:表示 上、右、下、左(順時針)

列如:padding:10px 20px 30px 40px 表示 上:10px 、下:30px、左:40px、右:20px

margin(外邊距)取值:

跟padding(內邊距)一樣

border-方向-style(樣式): dashed(虛線)solid(實線)等

border-方向-color(顏色):red(紅色)blue(藍色)等

border-方向-width(粗細):

css3新增:border-radius(圓角邊框):10px;

注:1.邊框的預設顏色是當前標籤的文字的顏色

2.邊框的粗細的預設值是3px(雙實線)

用css**利於邊框簡單呈現成三角形:

div

transparent (透明色)

優點:不佔畫素

缺點:不可以分別設定四個方向的值(即4個方向樣式統一)

例如:outline:5px solid red;

CSS盒模型概述

我們可以把每個元素都看成乙個盒子,盒子模型是由四個屬性組成的,如下表 屬性說明 content 內容,可以是文字或 margin 外邊距,定義當前元素與其他元素 或者當前標籤與標籤 之間的距離 padding 內邊距,定義內容與邊框之間的距離 border 邊框,用於定義,元素的邊框 內容區。內容區...

盒模型簡單理解

盒模型 由內而外,由context padding border margin組成的模型 分類 1.標準盒模型 2.ie盒模型 區別 ie盒模型的寬度由context padding border組成。標準盒模型的寬度為context寬度。css設定 標準 box sizing context bo...

盒模型的簡單理解

盒子模型有兩種,w3c和ie盒子模型 1 w3c定義的盒子模型包括margin border padding content 元素的width content的寬度 2 ie盒子模型與w3c的盒子模型唯一區別就是元素的寬度,元素的width content padding border 我個人認為w...