WEB_CSS盒子模型

什么是盒子模型,这是我在网上找到的一个盒子模型的示意图

打开浏览器,F12键,可以看到:

盒子模型总尺寸=border+padding+margin+内容宽度

边框

边框颜色

边框的顺序一般按照顺时针来说,分为上,右,下,左

属性	说明	示例
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;
border-color	上、下边框颜色：#369 左、右边框颜色：#000	border-color:#369 #000;
border-color	上边框颜色:369 左、右边框颜色：#000 下边框颜色：#f00	border-color:#369 #000 #f00;
border-color	上、右、下、左边框颜色：#369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f;

边框粗细

border-width：边框粗细

• thin
• medium
• thick
• 像素值

边框的顺序依旧按照顺时针,和边框颜色使用方式相同
示例:

border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
border-width:5px ;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;

边框样式

border-style：边框样式

• none
• hidden
• dotted
• dashed
• solid
• double

示例:

border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-style:solid ;
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;

边框简写

• 同时设置边框的颜色 ， 粗细和样式

border:1px solid #3a6587;
border: 1px dashed red;

外边距

margin

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin
  示例:

margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;

技巧:网页居中对齐
       网页居中对齐的必要元素是

• 块元素
• 固定宽度

matgin:0px auto;

内边距

padding

• padding-left
• padding-right
• padding-top
• padding-bottom
• padding
  示例:

padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;

圆角边框

语法:

border-radius: 20px 10px 50px 30px;

顺序依次为:

盒子阴影

格式:

box-shadow:inset x-offset y-offset blur-radius color;
	inset:阴影类型内阴影
	x-offset:X轴位移，指定阴影水平位移量
	y-offset:Y轴位移，用来指定阴影垂直位移量
	blur-radius:阴影模糊半径阴影向外模糊的模糊范围
	color:阴影颜色，定义绘制阴影时所使用的颜色