内容(content)、内边距(padding)、边框(border)、外边距(margin)
oder:1px solid red; 边框的粗细 边框的样式（虚线还是实线） 边框的颜色
border中也有一些属性可以直接调某一个方向上的边框的粗细，样式，颜色
border-left\border-right 调左右边框的粗细
border-style:边框样式
solid:实线 dashed:虚线 none:无边框
border- color:边框颜色
boder-radius:边框弧度
.box1{
background-color: aqua;
width:180px;
heigth:180px;
/* 内容区就是放置标签内容的区域
weigthheight 只是设置标签内容区的大小
内边距：内容和边界border的距离
变迁大小=内容区大小+内边距大小+边框*/
padding: 10px;/* 内边距 */
/*padding-left: 20px;
padding: 10px 20px; 上下内边距为10px，左右内边距为20px
padding: 5px 10px 15px 20px; 顺序依次为上右下左（顺时针方向）*/
border:2px red solid;
border-top-left-radius:10px ;
border-top-right-radius:10px ;/*圆弧程度 */
}.box2{
width:200px;
height: 100px;
background-color: blue;
margin-top: 10px;
margin-bottom: 10px;
/* margin-left: auto;
margin-right:auto;*/
margin:10px auto;
/*
外边距值可以设置为auto:
左右设置auto时,两边外边距相等 标签水平居中
上下没置auto,外边距为0，上下外边距需要给具体的值
外边距不影响标签大小,只是影响标签的位置
外边距是一个标签到另一个标签的距离
*/
}元素的总宽度计算公式：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
浮动：
网页默认是一个二维平面，在网页中一行行摆放标签，块标签会占一行，行标签只占自身大小。
这种情况下实现网页布局就需要一些方法改变默认的摆放顺序，所以这里引入浮动功能
标准文档流：
不采用特殊定位，和其他排列方法的，默认的排列规则（从左至右，从上至下）。//一般默认的在背景框中的元素都属于标准文档流
浮动的元素会和父级元素分层，左右浮动时，直到遇到外边框或其他浮动元素才会停止（背景这个层级的行内元素会被无视，块级元素照样独占一行）
浮动后的标签不占原来的文档流空间
下面的标签就会向上移动会影响后面的网页布局
解决浮动问题:
1.为父级标签设置一个高度，把父级标签撑开
.father{
height: 200px;
line-height: 180px;
}
2.在浮动的标签后，使用清除浮动属性
<div style="clear: left;">
css相对定位&绝对定位：
相对定位：相对于起点开始移动，移动后原来的位置依旧被占用着，可以用left right top bottpm 四个属性来设置标签偏移量
1.开启标签相对定位后，而不设置偏移量，标签不会发生任何变化
2.先对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流
绝对定位：开启绝对定位，文档即脱离文档流，绝对定位不占用空间
（以其最近的开启定位的父级标签作为参照物）
1.开启绝对定位会使标签脱离文档流
2.如果不设置偏移量，标签位置不变
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位
(一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位)
如果所有父级标签都没有开启定位，则会相对于浏览器窗口进行定位
<body>
<div class="box1">
div1
</div>
<div class="box2">
div2
</div>
</body> <style>
.box1{
width: 100px;
height:100px;
background-color:aqua;
/* 开启绝对定位，标签立即脱离文档流
离他最近的开起来定位的父级标签如果所有的父级标签都没有开启定位，
那么以浏览器窗口为参照物开启了标签的绝对定位，
都会开启父级标签的相对走位；*/
position:relative;
left: 100px;
top:100px;
}
.box2{
width:100px;
height:100px;
background-color:darkcyan;
}
.box3{
width:200px;
height:200px;
background-color:green;
position:absolute;
/* relative 相对定位
absolute 绝对定位
fixed 固定定位*/
}
</style>
610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
