盒子常用的幾個屬性

2021-10-01 10:01:49 字數 489 閱讀 6890

div盒子的組成部分: 內容 內邊距 邊框 外邊距

邊框:border;常用定義盒子的邊框,更容易進行編輯調整

例:border:1px(邊框大小) solid(實線) color(邊框顏色)

(目前我學習用的較多的是margin,但兩個標籤大體相同)

內邊距:padding 邊框和內容之間的距離

如下:padding-top:上

padding-left:左

padding-right:右

padding-bottom:下

外邊距:margin 元素和元素之間的距離

同padding類似,但調整的是盒子與盒子之間的距離

例子如下:

彈性盒子常用屬性

display設定為flex屬性flex direction屬性 設定子元素的排列方式,同時設定主軸,預設的情況下x軸為主軸flex direction row column row reverse column reverse justify content屬性 設定主軸的排列方式,此屬性作用于父...

彈性盒子常用屬性

新增瀏覽器字首 webkit 也可用postcss自動新增 display webkit flex 如果用了彈性布局,子元素不需要浮動,webkit justify content 子元素水平排列方式方式。center 水平居中 space between 兩端對齊 space around 手拉手...

flex彈性盒子常用屬性

屬性值描述 display flex 定義乙個盒子為彈性盒子 flex direction row子盒子水平排列,從左到右 row reserve 子盒子水平反向排列 column 子盒子垂直排列,從上到下 column reserve 子盒子垂直反向排列 flex wrap no wrap 子盒子...