前端基礎 04 盒子模型

2021-08-10 19:37:32 字數 1431 閱讀 8765

#他是由內容、內邊距、外邊距、邊框

border:邊框 型別 顏色;

border-width

border-style solid實線 dashed虛線 dotted點線 double雙邊框

border-color

乙個值的時候: 代表四個方向值一樣 上右下左(順時針)

二個值的時候: 上下 右左

三個值的時候: 上 右左 下

四個值的時候: 上 右 下 左

div

#padding  內邊距,邊框與內容之間的距離

乙個值的時候: 代表四個方向值一樣 上右下左(順時針)

二個值的時候: 上下 右左

三個值的時候: 上 右左 下

四個值的時候: 上 右 下 左

p

#margin 外邊距 元素與其他元素的距離(邊框以外的距離)

乙個值的時候: 代表四個方向值一樣 上右下左(順時針)

二個值的時候: 上下 右左

三個值的時候: 上 右左 下

四個值的時候: 上 右 下 左

margin: auto; 左右才有居中效果,上下沒有用處

*/*

盒子大小=樣式寬 + 內邊距 + 邊框

盒子寬度=左border+右border+width+左padding+右padding

盒子高度=上border+下border+height+上padding+下padding

div

width=200+10*2+20*2=260px

# float:浮動的特點

如果只給前面的元素浮動,後面的要佔據他的位置

ul li

#清除浮動三種方式:

1.給父級增加高度(不推薦使用)

2.給父級加overflow:hidden;

3.給父級加乙個類

.clearfix:after

div

p .clearfix:after

#position 定位

1.static 靜態定位(沒有定位),預設

2.relative 相對定位,相對於元素起始位置進行定位,元素占有位置=相對位置+元素本身位置

.box1

3.absolute 絕對定位,沒有佔據位置,

沒有定位父級,則相對於整個文件發生偏移

參考最近非static定位的父級進行定位

.box2

4.fixed 固定定位,相對於瀏覽器視窗進行定位

.box3

#方向分為4個:

left

right

topbottom

web前端基礎 盒子模型

盒子模型的概念 盒子模型用來 放 網頁中的各種元素。網頁設計中內容,如文字 等元素,都可是盒子 div巢狀 寬度屬性 寬度 width 長度值 百分比 auto 最大寬度 max width 長度值 百分比 auto 最小寬度 min width 長度值 百分比 auto 高度屬性 高度 heigh...

0416 盒子模型

css盒子模型樣式 定義 margin 外邊距,圍繞在元素邊框的空白區,在元素外建立額外的空白。border 邊框,圍繞元素內容和內邊距的一條或多條線。padding 內邊距,在邊框和內容區之間。屬性 margin 外邊距也叫作空白 接受任何長度單位,百分數值和負值,還可設定為auto。margin...

3 盒子模型

盒子模型是我學習css中使用頻率最高的模型,其中主要還是理解整個盒子的構成,以及其中各屬性的作用,最重要的問題就是合併巢狀問題。盒子模型 外邊距margin 邊框border 內邊距padding 內容 border color 邊框顏色 border width 邊框寬度 border style...