盒子模型属性:
content:width宽,height高
padding:内边距
margin:外边距
border:边框
边框的使用方法:
border:
线型:(solid/dashed/dotted/double) 粗细(数值+单位)颜色;
solid:实线 dashed:虚线 dotted:点状线 double :双线
overflow:指定内容如果溢出一个元素的框会发生什么
text-overflow:指定当文本溢出包含它的元素会发生什么
padding用法:(用来调整子元素在父元素中的位置关系。padding属性需要添加在父元素上)
1.四个值:上 右 下 左
2.三个值:上 左右 下
3.两个值:上下 左右
4.一个值:四个方向
例:
<head>
<style type="text/css">
#div1{
width=100px;
height=100px;
background-color=red;
padding-left=10px; 盒子1 左内边距设置为10px, 效果:整体显示 盒子宽度多了10px
}
#div2{
width=100px;
height=100px;
background-color=blue;
margin-top=10px; 盒子2上外边距设置为10px, 效果:整体显示 距离盒子1 10px的距离
}
#div3{
width=100px;
height=100px;
background-color=pink;
border: solid red 5px; 盒子3边框设置为5px , 效果:整体显示 盒子宽度 高度都多了10px
}
#div4{
width=100px;
height=100px;
background-color=red;
margin:20px;
border:solid red 5px; 盒子4外边距设置为20px,边框设置5px 效果:距离盒子3 20px,距离左侧20px 整体宽高都
多10px
}
<style>
</head>
<body>
<div id="div1">
我是盒子1
<div> 创建盒子1
<div id="div2">
我是盒子2
<div> 创建盒子2
<div id="div3">
我是盒子3
<div> 创建盒子3
<div id="div4">
我是盒子3
<div> 创建盒子4
</body>
外边距的合并:
当两个盒子纵向排列的时候,他们的距离为两个盒子中最大的那个外边距;
当两个盒子水平排列的时候,他们的距离为两个盒子外边距距离之和。
横向排列 例:
<head>
<style type="css/text">
#div1{
width=100px;
height=100px;
background-color=red;
float:left;
margin-right=50px;
}
#div2{
width=100px;
height=100px;
background-color=blue;
float:left;
margin-left=50px;
} 效果:盒子1距离盒子2 100px的距离
</style>
</head>
<body>
<div id="div1">
我是盒子1
<div> 创建盒子1
<div id="div2">
我是盒子2
<div> 创建盒子2
</body>