CSS盒子模型

边框

Border-color属性:边框颜色属性

属 性说 明示 例
Border-top-color设置上边框颜色Border-top-color:#369
Border-right-color设置右边框颜色Border-right-color:#369
Border-bottom-color设置下边框颜色Border-bottom-color:#FAE45B
Border-left-color设置左边框颜色Border-left-color:EFCD56;
Border-color设置四个边框同一颜色Border-color:#EEFF34
设置上下边框颜色为#369,左右边框颜色为#000Border-color:#369#000

Border-width属性:边框粗细属性

属 性说 明示 例
Border-top-width设置上边框粗细为5pxBorder-top-width:5px;
Border-right-width设置右边框粗细为10pxBorder-right-width:10px;
Border-bottom-width设置下边框粗细为8pxBorder-bottom-width:8px;
Border-left-width设置左边框粗细为22pxBorder-left-width:22px;
Border-width设置四个边框粗细都为5pxBorder-width:5px;
设置上、下边框粗细为20px;左右边框粗细为2pxBorder-width:20px 2px;
设置上边框粗细为5px;左右边框粗细为1px;下边框粗细为6pxBorder-width:5px 1px 6px;
设置上、右、下、左边框粗细分别为1px、3px、5px、2pxBorder-width:1px 3px 5px 2px;

Border-style属性:边框线类型

属 性说 明示 例
Border-top-style设置上边框为实线Border-top-style:solid;
Border-right-style设置右边框为实线Border-right-style:solid;
Border-bottom-style设置下边框为实线Border-bottom-style:solid;
Border-left-style设置左边框为实线Border-left-style:solid;
Border-style设置四个边框均为实线Border-style:solid;
设置上、下边框为实线;左、右边框为点线Border-style:solid dotted;
设置上边框为实线;左、右边框为点线;下边框为虚线Border-style:solid dotted dashed;
设置上、右、下、左边框分别为实线、点线、虚线、双线Border-style:solid dotted dashed double;

Padding属性:内边距属性

属 性说 明示 例
Padding-top设置上内边距Padding-top:1px;
Padding-right设置右内边距Padding-right:2px;
Padding-bottom设置下内边距Padding-bottom:2px;
Padding-left设置左内边距Padding-left:1px;
Padding设置上、右、下、左内边距分别是3px、5px、7px、4pxPadding:3px 5px 7px 4px;
设置上、下内边距为3px;左、右内边距为5pxPadding:3px 5px;
设置上外边距为3px;左、右内边距为5px;下内边距为7pxPadding:3px 5px 7px;
设置上、右、下、左内边距均为8pxPadding:8px;

Box-sizing属性:拯救布局

Content-box:默认值,盒子的宽度或高度=border+padding+(margin)+width/heith。

Border-box:盒子的宽度或高度等于元素内容的宽度或高度。

Inherit:此值使元素集成父元素的盒子模型模式。

Display属性:规定元素应该生成的框的类型。

none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block行内块元素。(CSS2.1 新增的值)
最后修改:2021 年 11 月 26 日
如果觉得我的文章对你有用,请随意赞赏