您的位置：首页 > Web前端

前端进阶---标准盒模型和怪异和模型---

2017-03-09 18:39 323 查看

前端进阶—标准盒模型和怪异和模型—

相关要求：

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>
<!-- S 标准盒模型 -->
<div class="xiehe">
<div class="xiezi">
标准盒模型
</div>
</div>
<!-- E 标准盒模型 -->
<hr />
<!-- S 怪异盒模型 -->
<div class="xiehe1">
<div class="xiezi1">
怪异盒模型
</div>
</div>
<!-- E 怪异盒模型 -->
<hr />
<!-- 分栏开始 -->
<!-- S 列数固定，宽度自适应分栏 -->
<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>
<!-- E 列数固定，宽度自适应分栏 -->
<hr />
<!--S 宽度固定、列数不固定分栏 -->
<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>
<!--E 宽度固定、列数不固定分栏 -->
</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;
}
/*垂直分栏样式结束*/
/*column分栏样式开始*/

.flexbox3 {
display: -webkit-flex;
-webkit-flex-direction: column;
}
/*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>

b36f
</ul>
<!-- 水平分栏、排序结束 -->
<!-- 垂直分栏开始 -->
<ul class="flexbox flexbox2">
<li>1,垂直分栏</li>
<li>2,垂直分栏</li>
<li>3,垂直分栏</li>
</ul>
<!-- 垂直分栏结束 -->
<!-- column分栏开始 -->
<ul class="flexbox flexbox3">
<li>1,column分栏</li>
<li>2,column分栏</li>
<li>3,column分栏</li>
</ul>
<!-- column分栏结束 -->
<!-- 居中布局开始 -->
<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盒子更多适用于手机，因为宽度固定；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端盒模型

相关文章推荐

新的分享

章节导航