盒模型和边框圆角
2019-06-24 本文已影响0人
小透明进击战
盒模型
box-sizing
- 盒子模型width=border+padding+contentwidth（内容的宽）
height=border+padding+contentheight（内容的高）
因为网页如果加了浮动，当某一个元素添加padding或者border，超出了父盒子的宽度，就会造成其他子盒子往下溢出， 这种就容易影响整个页面布局。所以css3出现了盒模型，解决了这个问题。 - 盒模型有两个关键属性，分别是content-box和border-box。
- content-box，说明设定的宽度就是内容的宽度。
+border-box，说明设定的宽度是整个盒子的宽度，就是如果你添加padding，盒子宽度依旧是这么大，只是内容宽度会被压缩变小。
边框圆角
border-radius的圆角大小随着半径越大，圆角越大
image.png
- 安卓小机器人案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>安卓机器人</title>
<style>
* {
margin: 0;
padding: 0;
}
.android {
width: 500px;
height: 500px;
border: 1px solid red;
margin: 50px auto;
}
.an_head {
width: 250px;
height: 125px;
border-radius: 125px 125px 0 0;
background-color: darkgreen;
margin: 10px auto;
position: relative;
}
/*眼睛使用伪元素*/
.an_head::before,.an_head::after {
content: "";
/*行内元素转换成块级元素，方法有三，display，float，position*/
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #fff;
top: 70px;
}
.an_head::before {
left: 70px;
}
.an_head::after {
right: 70px;
}
.an_body {
width: 250px;
height: 250px;
background-color: darkgreen;
border-radius: 0 0 20px 20px;
position: relative;
margin: 0 auto;
}
.an_body::before,.an_body::after {
content: "";
width: 30px;
height: 180px;
border-radius: 10px;
background-color: darkgreen;
position: absolute;
top: 20px;
}
.an_body::before {
left: -40px;
}
.an_body::after {
right: -40px;
}
.an_footer {
width: 250px;
height: 100px;
margin: 0 auto;
position: relative;
}
.an_footer::before,.an_footer::after {
content: "";
position: absolute;
top: 0;
background-color: darkgreen;
width: 30px;
height: 100px;
border-radius: 0 0 10px 10px;
}
.an_footer::before {
left: 50px;
}
.an_footer::after {
right: 50px;
}
</style>
</head>
<body>
<div class="android">
<div class="an_head"></div>
<div class="an_body"></div>
<div class="an_footer"></div>
</div>
</body>
</html>
