前端Html5/Css3—div盒子模型

第六章 盒子模型

6.1 border边框

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

6.2 border-width粗细

thin/ medium /thick /像素值

div{
  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;
}

6.3 border-style边框样式

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

div{
  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;
}

6.4 border简写

div{
   border:1px solid #3a6587;
	 border: 1px dashed red;
}

6.5 margin外边距

网页居中的必要条件：

• 块元素
• 固定宽度

margin{0px,auto} /* 设置居中; */

div{
  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;
}

6.6 padding内边距

div{
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;
}

6.7 盒子模型尺寸

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

6.8 box-sizing

box-sizing：消除 padding和border边框把盒子撑大的效果，即盒子的大小不变，其设置的边距会往里缩。

div{
  box-sizing： border-box ;
  
  /* content-box:默认值，盒子的总尺度
  	border-box:盒子的宽度或高度等于元素内容的宽度或高度
  	inherit:元素继承父元素的盒子模型模式
 */
  box-sizing：content-box  |  border-box  |  inherit;

}

6.9 border-radius圆角边框

div{
  border-radius: 20px  10px  50px  30px;/*顺时针*/
}

6.9.1 制作圆形

border-radius属性制作圆形的两个要点：

• 元素的宽度和高度必须相同

• 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

div{
            width: 100px;
            height: 100px;
            border: 4px solid red;
            border-radius: 50%;
        }

• 另：span变圆：用padding撑开

  span{
  				padding: 0 6px;
  				background-color: pink;
  				color: white;
  				border-radius: 50%;
  			}
  

6.9.2 半圆

border-radius属性制作半圆形的两个要点

• 制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
• 制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

/* 右半圆 */
.div_one{
	width: 50px;
	height: 100px;
	border-radius: 0 50px 50px 0;
	
}
/* 左半圆 */
.div_two{
	width: 50px;
	height: 100px;
	border-radius:50px 0 0 50px ;
}

6.9.3 四分之一圆

利用border-radius属性制作扇形遵循“三同，一不同”原则

• 三同”是元素宽度、高度、圆角半径相同
• 一不同”是圆角取值位置不同

/* 左上四分之一 */
.div_six{
	width: 50px;
	height: 50px;
	border-radius: 50px 0 0 0;
}
/* 右下四分之一圆 */
.right_boo{
	width: 50px;
	height: 50px;
	border-radius: 0 0 50px 0 ;
}

6.10 box-shadow盒子阴影

box-shadow:inset x-offset y-offset blur-radius color;

inset：阴影类型内阴影/从外层的阴影（开始时）改变阴影内侧阴影s

x-offset :X轴位移，指定阴影水平位移量

blur-radius:半径

color:颜色

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

inset：阴影类型内阴影/从外层的阴影（开始时）改变阴影内侧阴影s

x-offset :X轴位移，指定阴影水平位移量

blur-radius:半径

color:颜色

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;