Web前端学习_CSS盒子模型
content
padding
border
margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子模型</title>
<style>
</style>
</head>
<body>
<div class="demo">yanxiao正在学习web喃，你在干吗? 学个蛋，摆烂</div>
<div class="demo1">yanxiao学习就想睡觉，为什么喃? 因为没有学习web</div>
</body>
</html>
1.边框宽度 格式 颜色
<style>
.demo{
border:10px solid #8b1a01;
}
</style>
2.内联块__文本与边框大小同步
.demo{
border:10px solid #8b1a01;
display: inline-block;
}
3.设置背景颜色
background-color: #0066cc;
4.边框大小
border-width: 10px 20px 40px 60px;
border-width:10px 20px 40px 60px; /*上右下左*/
/*边框宽度
当给一个值的时候，上右下左同步;
当个两个值的时候，上下同步，左右同步;
当给它三个值的时候,上 左右同步 下
当给它四个值的时候,上右下左
同理可以设置四个颜色，四个格式；
*/
5.padding_文本与边框的距离
padding:50px;
6.边框四个格式
border-style:solid dashed dotted double;
/*
上边（top）: solid（实线）
右边（right）: dashed（虚线）
下边（bottom）: dotted（点线）
左边（left）: double（双线）
*/
7.编辑单个边框
border-left: 30px solid #fda543;
上边（top）: solid（实线）
右边（right）: dashed（虚线）
下边（bottom）: dotted（点线）
左边（left）: double（双线）
原文地址：https://blog.csdn.net/2301_80284843/article/details/144120188
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！