前端---css---盒子模型
程序员文章站
2024-01-28 16:06:28
...
1.什么是盒子模型
规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
margin：外边距
padding： 内边距
border：边框
2.边框
边框有大小、样式、颜色的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一个默认的外边距margin: 0，常见操作*/
/*h1,ul,li,a,body{*/
/*margin: 0;*/
/*padding: 0;*/
/*text-decoration: none;*/
/*}*/
/*border: 粗细，样式，颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
}
form{
background: #3cbda6;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed #4d0b8c;
}
div:nth-of-type(2) input{
border: 2px dashed #008c27;
}
</style>
</head>
3.内外边距
内边距：按照上、右、下、左的顺序分别设置各边的内边距h1 {padding: 10px 0.25em 2ex 20%;}
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：padding-toppadding-rightpadding-bottompadding-left
外边距:与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的margin: top right bottom left
有时，我们会输入一些重复的值：p {margin: 0.5em 1em 0.5em 1em;}
也可以单边外边距属性为元素单边上的外边距设置值margin-topmargin-rightmargin-bottommargin-left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外边距的妙用：居中元素
margin: 0 auto;
-->
<style>
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
/*
顺时针旋转
margin:0
margin:0 1px
margin:0 1px 2px 3px
*/
h2{
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
margin:0 1px 2px 3px;
}
form{
background: #3cbda6;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px 2px;
}
</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.圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
左上 右上 右下 左下，顺时针方向
<!--
圆圈： 圆角 = 半径！
-->
-->
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- margin: 0 auto; 居中
要求： 块元素，块元素有固定的宽度
-->
<style>
img{
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div style="width: 500px;display: block;text-align: center">
<img src="images/tx.jpg" alt="">
</div>
</body>
</html>