盒模型基本概念
拿相框来作比较的话
盒模型
相框边框- > border
画和相框边框的距离-> padding
相框之间的距离-> margin
边框
这个和前面的p标签的边框的设置方法是类似的,也是3种方式
border-width 边框宽度(粗细)
border-color 边框颜色
border-style 边框样式
#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;
}
内边距padding和外边距margin
padding和margin 的三种设置方式
用padding 设置内边距
用margin 设置外边距
#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;
}
网页布局与盒模型
块级元素VS 行内元素
块级元素:以一个块的形式展现,跟同级的兄弟块依次竖直排列,左右撑满,比如
<div>
<h1>
<p>
;
行内元素:以普通的一个DOM 节点展现,跟同级的兄弟元素横向排列,排满后,自动换行,比如<span>
;
标准文档流
指在不使用其他与排列和定位相关的特殊CSS 规则时,各种元素的排列规则;
盒子在标准流中的定位
1 行内元素之间的水平margin
marin-right + margin-left
<span style="margin-right: 10px;border: 1px red solid;">块1</span>
<span style="margin-left: 10px;border: 1px red solid;">块2</span>
2 块级元素之间的竖直margin
<div style="margin-bottom: 10px;border: 1px red solid;">块1</div>
<div style="margin-top: 0px;border: 1px red solid;">块2</div>
Margin-bottom margin-top 以大的为标准
3 嵌套盒子之间的margin
<div style="margin: 100px;border: 1px red solid;">块1
<div style="margin-top: 20px;border: 1px red solid;">块2</div></div>
子块的margin 将以父块的内容为参考
4 margin 属性可以设置成负值
会在相应的向左移动
<span style="margin-right: 10px;border: 1px red solid;">块1</span>
<span style="margin-left: -20px;border: 1px green solid;">块2</span>