前端进阶—标准盒模型和怪异和模型—
相关要求： 1.正常盒子与怪异盒子对比 2.弹性盒子水平分栏，垂直分栏，排序(flex)，cloumn分栏 3.旧版弹性盒子居中布局
正常盒子与怪异盒子对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标准盒模型和怪异盒模型
</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.xiezi {
width: 100px;
height: 100px;
background: #5ca7ba;
}
.xiehe {
margin: 20px;
padding: 10px;
width: 100px;
height: 100px;
background: #c7ede9;
border: 5px solid #f00;
box-shadow: 5px 5px 5px rgba(172, 172, 172, .3);
}
.xiezi1 {
width: 100px;
height: 100px;
background: #5ca7ba;
}
.xiehe1 {
margin: 20px;
padding: 10px;
width: 130px;
height: 130px;
background: #c7ede9;
border: 5px solid #f00;
box-sizing: border-box;
box-shadow: 5px 5px 5px rgba(172, 172, 172, .3);
}
.col1 {
border: 2px solid #ddd;
padding: 20px;
margin: 20px;
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule: 2px dashed #999;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 2px dashed #999;
column-count: 3;
column-gap: 20px;
column-rule: 2px dashed #999;
}
.col2 {
border: 2px solid #ddd;
padding: 20px;
margin: 20px;
-moz-columns: 200px;
-moz-column-gap: 20px;
-moz-column-rule: 2px dashed #999;
-webkit-columns: 200px;
-webkit-column-gap: 20px;
-webkit-column-rule: 2px dashed #999;
columns: 200px;
column-gap: 20px;
column-rule: 2px dashed #999;
}
</style>
</head>
<body>
<div class="xiehe">
<div class="xiezi">
标准盒模型
</div>
</div>
<hr />
<div class="xiehe1">
<div class="xiezi1">
怪异盒模型
</div>
</div>
<hr />
<div class="col1">
This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.
</div>
<hr />
<div class="col2">
This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.
</div>
</body>
</html>
效果如下：
弹性盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flexbox
</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
li {
display: block;
list-style: none;
}
.content {
height: 200px;
width: 600px;
}
.flexbox {
margin: 20px;
background: #d1d1d1;
}
.flexbox li:nth-child(1) {
background: #accddf;
}
.flexbox li:nth-child(2) {
background: #addcff;
}
.flexbox li:nth-child(3) {
background: #affccd;
}
.flexbox li {
height: 50px;
-webkit-flex: 1;
}
.flexbox1 {
display: -webkit-flex;
display: flex;
}
.flexbox1 li:nth-child(3) {
-webkit-order: -1;
order: -1;
}
.flexbox2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
.flexbox3 {
display: -webkit-flex;
-webkit-flex-direction: column;
}
.flexbox4 {
width: 260px;
height: 260px;
margin:20px;
background: #addcff;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.flexbox5 {
width: 100px;
height: 100px;
background: #d1d1d1;
}
</style>
</head>
<body>
<div class="content">
<ul class="flexbox flexbox1">
<li>1,水平分栏、排序
</li>
<li>2,水平分栏、排序
</li>
<li>3,水平分栏、排序
</li>
</ul>
<ul class="flexbox flexbox2">
<li>1,垂直分栏
</li>
<li>2,垂直分栏
</li>
<li>3,垂直分栏
</li>
</ul>
<ul class="flexbox flexbox3">
<li>1,column分栏
</li>
<li>2,column分栏
</li>
<li>3,column分栏
</li>
</ul>
<div class="flexbox4">
<div class="flexbox5">居中布局
</div>
</div>
</div>
</body>
</html>
效果如下：
总结：一定要知道标准盒模型和怪异盒模型的差异。
从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 paying。IE盒子更多适用于手机，因为宽度固定；
转载请注明原文地址: https://ju.6miu.com/read-14779.html
