结果展示:
|
|
 |
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding和margin对栅栏的影响</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<script src="../js/jquery-1.11.0.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container height_max" style="border: 1px solid navy;">
<div class="row height_50 bor_blue">
第一栏
</div>
<div class="row height_50 bor_green">
<div class="col-md-1 inherit_h_100 bor_black">对比</div>
<div class="col-md-1 inherit_h_100 bor_black"></div>
<div class="col-md-1 inherit_h_100 bor_black"></div>
<div class="col-md-1 inherit_h_100 bor_black"></div>
<div class="col-md-1 inherit_h_100 bor_black"></div>
<div class="col-md-1 inherit_h_100 bor_black"></div>
<div class="col-md-1 inherit_h_100 bor_black"></div>
<div class="col-md-1 inherit_h_100 bor_black"></div>
<div class="col-md-1 inherit_h_100 bor_black"></div>
<div class="col-md-1 inherit_h_100 bor_black"></div>
<div class="col-md-1 inherit_h_100 bor_black"></div>
<div class="col-md-1 inherit_h_100 bor_black"></div>
</div>
<!--**************************************************************************************************************-->
<h3><font color="red" size="24px">重 点：</font>.row的行内元素宽高不是固定的，而是随其边距(padding和margin)而改变【此行内元素指的是col元素】</h3>
<h2>格子测试</h2>
<div class="row height_50 bor_red">
<div class="col-md-4 inherit_h_100 bor_black">col-md-4</div>
<div class="col-md-8 inherit_h_100 bor_black">col-md-8</div>
</div>
<div class="row height_50 bor_red">
<div class="col-md-8 inherit_h_100 bor_black">col-md-8</div>
<div class="col-md-4 inherit_h_100 bor_black">col-md-4</div>
</div>
<div class="row height_50 bor_red">
<div class="col-md-3 inherit_h_100 bor_black">col-md-3</div>
<div class="col-md-6 inherit_h_100 bor_black">col-md-6</div>
<div class="col-md-3 inherit_h_100 bor_black">col-md-3</div>
</div>
<!--**************************************************************************************************************-->
<h2>padding控制行内部大小<small>padding使用在<font color="red">row</font>中</small></h2>
<div class="row height_50 bor_yellow">
<div class="col-md-4 inherit_h_100 bor_black">
<div class="inherit_100 bg_red" >不使用任何边距(padding和margin)</div>
</div>
<div class="col-md-8 inherit_h_100 bor_black">
<div class="inherit_100 bg_red" >内部div默认就是padding：0px 15px;</div>
</div>
</div>
<div class="row height_50 bor_black" style="padding: 0px 40px;">
<div class="col-md-4 inherit_h_100 bor_blue">使用style="padding: 0px 40px;"</div>
<div class="col-md-8 inherit_h_100 bor_green">使这一整行的行内元素继承的宽度左右减少 了40px，但还是可以等分成12份</div>
</div>
<div class="row height_50 bor_yellow" style="padding: 10px 0;">
<div class="col-md-4 inherit_h_100 bor_black">使用style="padding: 10px 0;"</div>
<div class="col-md-8 inherit_h_100 bor_black">使这一行的行内元素继承的高度上下被减去了10px</div>
</div>
<!--**************************************************************************************************************-->
<h2>padding控制列内部大小<small>padding使用在<font color="red">col</font>中</small></h2>
<div class="row height_50 bor_yellow">
<div class="col-md-4 inherit_h_100 bor_black">
<div class="inherit_100 bg_red" ></div>
</div>
<div class="col-md-8 inherit_h_100 bor_black">
<div class="inherit_100 bg_red" >内部div默认就是padding：0px 15px;</div>
</div>
</div>
<div class="row height_50 bor_black">
<div class="col-md-4 inherit_h_100 bor_black" style="padding: 0px 15px;">
<div class="inherit_100 bg_red" >看，使用了padding：15，就是这么大吧</div>
</div>
<div class="col-md-8 inherit_h_100 bor_black" style="padding: 0;">
<div class="inherit_100 bg_red" >改变padding：0使内部空间变化
style="padding: 0;"</div>
</div>
</div>
<div class="row height_50 bor_yellow ">
<div class="col-md-4 inherit_h_100 bor_black" style="padding: 10px 15px;">
<div class="inherit_100 bg_red" >style="padding: 10px 15px;"</div>
</div>
<div class="col-md-8 inherit_h_100 bor_black" style="padding: 0px 80px;">
<div class="inherit_100 bg_red" >style="padding: 0px 80px;"</div>
</div>
</div>
<!--**************************************************************************************************************-->
<h2>margin控制每行的间距<small>margin使用在<font color="red">row</font>中</small></small></h2>
<div class="row height_50 bor_green">啥都没用，这是个对比，行内的元素完全继承了宽高</div>
<div class="row height_50 bor_black" style="margin: 0;">
style="margin: 0;"<br />一旦改变了.row的默认样式(padding和margin)，其内部就会默认使用padding:0px 15px;
</div>
<div class="row height_50 bor_green" style="margin: 15px 0px;">
style="margin: 15px 0px;"<br />使这一行与上间距15px，与下间距15px
</div>
<div class="row height_50 bor_black" style="margin: 0px -15px;">
style="margin: 0px -15px;"<br />使用margin左右-15px抵消了padding的左右15px；相当于没有操作
</div>
<div class="row height_50 bor_black" style="margin: 0px -15px;">
<div class="col-md-4 inherit_h_100 bor_black"></div>
<div class="col-md-8 inherit_h_100 bor_black">这一行说明了上面一行的结论</div>
</div>
<!--**************************************************************************************************************-->
<h2>margin控制每行的间距<small>margin使用在<font color="red">col</font>中</small></h2>
<div class="row height_50 bor_green">啥都没用，这是个对比，行内的元素完全继承了宽高</div>
<div class="row height_50 bor_yellow">
<div class="col-md-4 inherit_h_100 bor_black" style="margin: 0;">
<div class="inherit_100 bg_red" >style="margin: 0;"</div>
</div>
<div class="col-md-8 inherit_h_100 bor_black" style="margin: 0;">
<div class="inherit_100 " >style="margin: 0;"</div>
</div>
</div>
<div class="row height_50 bor_black">
<div class="col-md-4 inherit_h_100 bor_black" style="margin: 15px 0px;">
<div class="inherit_100 bor_blue" >style="margin: 15px 0px;"<br />使这个小格子与上下间隔了15px</div>
</div>
<div class="col-md-8 inherit_h_100 bor_black" style="margin: 0px 15px;">
<div class="inherit_100 " >style="margin: 0px 15px;"<br />使这个小格子与左右间隔了15px，原来的位置放不下了，就自动换行，把下面的格子压到后面去了</div>
</div>
</div>
<div class="row height_50 bor_yellow ">
<font color="red">这个row还在这里，但里面的格子被压下去了。row还在这里是因为没有对row进行padding和margin操作</font>
<div class="col-md-9 inherit_h_100 bor_blue">
<div class="inherit_100" >我们兄弟被压到这里来了</div>
</div>
<div class="col-md-3 inherit_h_100 bor_blue" style="padding: 0px 80px;">
<div class="inherit_100 " >我们反抗不了，回不去的</div>
</div>
</div>
<div class="row height_50 bor_yellow">
<s><font color="yellowgreen">这是下一行row，但是由于上面一行row没动，所以要紧贴上一行row，但是自己的col-*-*已经没有地方了，只能跟着上一行的，继续往下压</font></s>
</div>
<!--**************************************************************************************************************-->
<div class="row" style="margin-top: 50px;">
<h1><font color="red">总结</font></h1>
<p><font size="5" >栅栏系统就是一行行的格子，padding和margin对谁（行row和列col）操作，谁就受影响</font></p>
</div>
</div>
</body>
</html>
CSS代码：
body{
font-size:18px ;
}
.row{
text-align: center;
}
.bor_yellow{
border: 1px solid yellow;
background-color: whitesmoke;
}
.bor_green{
border: 1px solid lightgreen;
background-color: wheat;
}
.bor_red{
border: 1px solid red;
background-color: aquamarine;
}
.bor_blue{
border: 1px solid blue;
background-color: rosybrown;
}
.bor_black{
border: 1px solid black;
background-color: azure;
}
.height_max{
height: 2000px;
}
.height_900{
height: 900px;
}
.height_600{
height: 600px;
}
.height_300{
height: 300px;
}
.height_100{
height: 100px;
}
.height_50{
height: 50px;
}
.inherit_h_100{
height: 100%;
}
.inherit_w_100{
width: 100%;
}
.inherit_100{
width: 100%;
height: 100%;
}
.bg_red{
background-color: red;
}
.bg_blue{
background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
}
td{
border: 1px solid rgb(141,141,141);
background-color: whitesmoke;
}
.col1{
width: 160px;
}
.col2{
width: 140px;
}
.col3{
width: 200px;
}
/ *小白一个，仅留做自我学习记忆，时常修改，有不对不全之处还望不吝赐教！* /
扫一扫
2230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
