C3盒模型以及他出现的必要性和圆角边框/前端三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--css3盒模型
旧盒模型 盒子宽度=width+padding*2+border*2
css3新盒子模型 盒子宽度=width(padding*2+border*2)
box-sizing:border-box 新盒模型
box-sizing:content-box 旧盒模型
-->
<style>
*{
width: 0;
height: 0;
box-sizing: border-box;/*全部是新盒，模型*/
}
#box{
width: 400px; /*有效+padding*2+border*2 */
height: 400px;
padding: 80px;
box-sizing: border-box;/*新盒模型*/
box-sizing: content-box;/*旧盒模型*/
background-color: green;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>C3盒模型出现的必要性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 50%;
height: 600px;
background-color: grey;
margin: 0 auto;
padding: 30px;
}
</style>
<!--移动端内减不行 说不通---》新盒模型 -->
<!--手机屏幕小，电脑宽度到手机上之后会出现滚动条 用户体验不好-->
</head>
<body>
<div class="box"></div>
</body>
</html>圆角边框：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
margin: 0 auto;
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
/*正方形会变成圆，长方形会变成椭圆*/
/*
border-radius: 30px 50px;
*/
border-radius: 20px/100px; /*水平方向20px 弧度,垂直方向100px 弧度*/
-webkit-border-radius: 150px/150px;
-moz-border-radius: 150px/150px;
-ms-border-radius: 150px/150px;
border-radius: 150px/150px;
-o-border-radius:150px/150px ;
}
.box1 {
margin: 0 auto;
width: 200px;
height: 100px;
background-color: red;
border-radius: 50%;
}
/*长方形会变成椭圆*/
</style>
</head>