5盒子模型
2019-03-22 本文已影响0人
行之北斗
盒子之间的距离
margin: 10px;
内边距
padding: 10px 15px 20px 25px;
一个参数 上下左右填充都相同
两个参数 上下 左右
三个参数 上 左右 下
四个参数 上 右 下 左
div
division分区，利用div对网页进行布局
盒子模型
最里层是content-padding-border-margin
padding-内边距 盒子内部填充
margin-外边距 盒子和另外的盒子之间的距离
可以单独设置上下左右的内边距和外边距，如果不写方向，就是所有方向都有起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.items{
width: 1024px;
height: 768px;
border:1px solid green;
}
.item1,.item2{
width:200px;
height: 200px;
border:2px double darkgreen;
background-color: red;
/*margin: 10px;*/
margin-top: 10px;
}
.item1-1-1{
width: 100px;
height: 100px;
background-color: black;
padding: 20px;
}
</style>
</head>
<body>
<div class="items">
<div class="item1">
<div class="item1-1-1"></div>
</div>
<div class="item2"></div>
</div>
</body>
</html>
小技巧
margin: 0 auto; 可以实现水平居中
border-width:1px 2px 3px 4px; 上右下左
border-width:1px 2px 3px; 上 左右 下
border-width:1px 2px; 上下 左右
元素默认样式(了解)
**重置默认样式 **
/*默认样式重置(css reset)*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
margin: 0;
font-size: 12px;
/* 中文字体大小的最小值 */
}
ol,ul {
list-style: none;
/* 去除列表样式 */
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
元素分类：
三大类：行级inline 块级block 行块级inline-block
行级：默认在一行摆放，只有一行放不下的时候才折行 span a em i 不支持宽高,靠内容撑开宽高。
块级：默认独占一行 p div 支持宽高
行块级：兼有行级和块级元素的特点，他不独占一行，却可以为他设置宽高 img
我们可以用disply属性更改他的分类
display:none可以隐藏元素，我们可以通过none和其他值的切换控制元素显示还是隐藏
<div id="parent">parent
<div class="item-1">
</div>
<div class="item-2">
</div>
</div>
<style>
#parent {
width: 600px;
height: 400px;
border: 2px solid #FF0000;
}
.item-1,.item-2{
width:200px;
height: 150px;
border:1px dotted white ;
margin: 10px;
background:#8A2BE2;
display: inline-block;
}
.item-1,.item-2{
width:200px;
height: 150px;
border:1px dotted white ;
margin: 10px;
background:#8A2BE2;
display: inline-block;
}
.........
