HTML盒子模型冷知识！！！

一.边框 1.边框颜色 border-color 边框颜色(可以设置上边框，如:border-top-color,也可以整体设置，但是要注意顺序) 2.边框粗细 border-width 边框粗细(可以设置上边框，如:border-top-width,也可以整体设置，但是要注意顺序) 2.边框样式 border-style 边框样式(可以设置上边框，如:border-top-style,也可以整体设置，但是要注意顺序) 二.外边距 1.margin 盒子距离浏览器的距离 (可以设置上外边距，如:margin-top,也可以整体设置，但是要注意顺序) 2.居中 margin: 0px auto

三.内边距 1.padding 内容到盒子的距离 (可以设置上内边距，如:padding-top,也可以整体设置，但是要注意顺序)

四.盒子模型的尺寸尺寸默认：padding+margin+wigth+border box-sizing 方便计算盒子模型尺寸（默认为content-box，border-box代表随着内容的宽度高度变化而变化）

五.圆角 border-radius 圆角（左上，右上，右下，左下） /*如果想要一个圆，那么必须满足宽和高一致，圆角取宽度或者高度的二分之一*/ /*如果想要半圆，那么必须满足宽是高的2倍，圆角取宽度的二分之一*/ /*如果想要四分之一圆，那么必须满足宽和高相等，圆角取宽度相等值*/ 六.盒子阴影 box-shadow 默认为外阴影，内阴影为inset box-shadow: 5px -5px 20px black;

巴特西

HTML盒子模型冷知识！！！

最新文章

热门文章