css盒模型
程序员文章站
2022-07-09 21:28:13
...
1. css盒模型
1) 盒模型基本概念
2) 边框
3) 内边距 padding
4) 外边距 margin
5) 网页布局与盒模型
6) 盒子在标准流中的定位
1) 盒模型基本概念
盒模型： 相框边框 -> border 画和相框边框的距离 -> padding 相框之间的距离 -> margin
2) 边框
border-width 边框宽度(粗细)
border-color 边框颜色
border-style 边框样式
<style type="text/css">
#outerBox1{
border-width: 2px;
border-color: red;
border-style:solid;
}
#outerBox2{ border: thick blue dashed; }
#outerBox3{
border-top: thick blue dashed;
border-right: 2px red solid;
border-bottom: thin yellow dotted;
border-left: 2px red solid;
}
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>
3) 内边距 padding
<style type="text/css">
#outerBox1{
border-width: 2px;
border-color: red;
border-style:solid;
padding: 40px;
}
#outerBox2{
border: thick blue dashed;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 2px;
}
#outerBox3{
border-top: thick blue dashed;
border-right: 2px red solid;
border-bottom: thin yellow dotted;
border-left: 2px red solid;
padding: 20px 10px 5px 2px;
}
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>
4) 外边距 margin
<style type="text/css">
#outerBox1{
border-width: 2px;
border-color: red;
border-style:solid;
padding: 40px;
margin: 10px;
}
#outerBox2{
border: thick blue dashed;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 2px;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 2px;
}
#outerBox3{
border-top: thick blue dashed;
border-right: 2px red solid;
border-bottom: thin yellow dotted;
border-left: 2px red solid;
padding: 20px 10px 5px 2px;
margin: 20px 10px 5px 2px;
}
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>
5) 网页布局与盒模型
5.1 标准文档流 标准文档流：指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则； 5.2 块级元素 VS 行内元素 块级元素：以一个块的形式展现，跟同级的兄弟块依次竖直排列，左右撑满，比如<div>； 行内元素：以普通的一个 DOM 节点展现，跟同级的兄弟元素横向排列，排满后，自动换行，比如<span>； <h1>块级元素</h1> <div>块1</div> <div>块2</div> <div>块3</div> <h1>行内元素</h1> <span>块1</span> <span>块2</span> <span>块3</span> </body>
6) 盒子在标准流中的定位
6.1 行内元素之间的水平margin marin-right + margin-left <span style="margin-right: 10px;">块1</span> <span style="margin-left: 10px;">块2</span> 6.2 块级元素之间的竖直margin margin-bottom margin-top 以大的为标准 <div style="margin-bottom: 10px;">块1</div> <div style="margin-top: 5px;">块2</div> 6.3 嵌套盒子之间的margin 子块的margin将以父块的内容为参考 <div style="margin: 10px;">块1 <div style="margin-top: 20px;">块2</div></div> 6.4 margin属性可以设置成负值 <span style="margin-right: 10px;">块1</span> <span style="margin-left: -30px;">块2</span>
上一篇： 本地电脑WIN10连接阿里云WINDOWS服务器上搭建的MySQL数据库
下一篇： 多线程和线程池