CSS盒子模型
4盒子模型
4.1什么是例子模型
margin: 外边距
padding:内边距
border:边框
4.2边框
- 边框的粗细
- 边框的样式
- 边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1,ul,li body{
/*body总有一个默认的外边距 初始化margin:0* 常见操作*/
margin: 0;
padding: 0;
text-decoration: none;
}
/*border: 粗细，样式，颜色 */
#box{
width: 300px;
border:1px solid red ;
}
h2{
font-size: 16px;
background-color: #129211;
line-height: 30px;
margin: 0;
color: white;
}
form{
background: #8bd726;
}
div:nth-of-type(1)> input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed #281449;
}
div:nth-of-type(3) input{
border: 3px dashed #86352b;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名</span>
<input type="text">
</div>
<div>
<span>密码</span>
<input type="text">
</div>
<div>
<span>邮箱</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
4.3内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
</head>
<!--外边距的妙用：居中元素
margin: 0 auto;-->
<style>
#box{
width: 300px;
border:1px solid red ;
margin: 0 auto;
}
/*margin: 上下左右 顺时间*/
h2{
font-size: 16px;
background-color: #129211;
line-height: 30px;
color: white;
margin-top: 0;
}
form{
background: #8bd726;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名</span>
<input type="text">
</div>
<div>
<span>密码</span>
<input type="text">
</div>
<div>
<span>邮箱</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容宽度
4.4圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆形</title>
<style>
div{
width: 100px;
height: 50px;
margin: 30px;
background:red;
border-radius: 50px 50px 0px 0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框圆角</title>
<!--
左上 右上 右下 左下，顺时针方向
圆圈：圆角=半径！
-->
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4个角
4.5盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影</title>
<!-- margin: 0 auto:剧中
要求：块元素，块元素有固定宽度
-->
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div style="width: 500px;display: block;text-align: center"></div>
<div style="margin: 0 auto"></div>
<div></div>
</body>
</html>
浙公网安备 33010602011771号