一、边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 1px solid red">abc</div>
<div style="border: 1px dotted blue">abc</div>
</body>
</html>
#style="border: 1px //边框1像素
#solid //实线； dotted //虚线；还可以设置左、右；
#颜色
二、其他样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 45px; width: 80%; border: 1px solid red">abc</div>
<div style="height: 45px;
width: 200px;
border: 1px solid red;
font-size: 20px;
text-align: center;
line-height: 45px;
font-weight: bold;
">abc</div>
</body>
</html>
height //高度,百分比
width //宽度像素，百分比
text-align:ceter //水平方向居中
line-height //垂直方向根据标签高度居中
color //字体颜色
font-size //字体太小
font-weight //字体加粗
三、float样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 20%; background-color: red; float: left">1</div>
<div style="width: 80%; background-color: blue; float: right">2</div>
</body>
</html>
float //让标签飘起来，块级标签也可以堆叠；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0 auto"> #去掉顶部空隙
<div class="pg-header">
<div style="float: left;">收藏本站</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
</div>
<div style="width: 300px; border: 1px solid red;">
<div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div> #div会逐个拼接；
<div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
<div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
<div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
<div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
<div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
<div style="clear: both"></div>
</div>
</body>
</html>
四、display样式
行内标签：无法设置高度，宽度，padding margin
块级标签：可以设置高度，宽度，padding margin
display:none； //让标签消失
display:inline； //让块级标签变成行内标签
display:block； //让行内标签变成块级标签
display:inline-block；
//具有inline默认自己有多少占多少；
//具有block，可以设置高度，宽度，padding margin；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red; display: inline">abc</div>
<span style="background-color: red; display: block">abc</span>
</body>
</html>
五、内外边距
margin //外边距
padding //内边距
原文地址：https://www.cnblogs.com/weiyiming007/p/10817141.html
时间： 2024-08-12 04:55:01