HTML+CSS \02
2019-04-26 本文已影响0人
237房间
-
页面布局
-
css盒模型
-
BFC
第一种：浮动
<section class="layout float">
<style media="screen">
.layout.float .left{
float:left;
width:300px;
background: red;
}
.layout.float .center{
background: yellow;
}
.layout.float .right{
float:right;
width:300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮动解决方案</h2>
1.这是三栏布局的浮动解决方案；
2.这是三栏布局的浮动解决方案；
3.这是三栏布局的浮动解决方案；
4.这是三栏布局的浮动解决方案；
5.这是三栏布局的浮动解决方案；
6.这是三栏布局的浮动解决方案；
</div>
</article>
</section>
第二种：定位
<!-- 绝对布局 -->
<section class="layout absolute">
<style>
.layout.absolute .left-center-right>div{
position: absolute;
}
.layout.absolute .left{
left:0;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right:0;
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
1.这是三栏布局的浮动解决方案；
2.这是三栏布局的浮动解决方案；
3.这是三栏布局的浮动解决方案；
4.这是三栏布局的浮动解决方案；
5.这是三栏布局的浮动解决方案；
6.这是三栏布局的浮动解决方案；
</div>
<div class="right"></div>
</article>
</section>
第三种：flex布局
<!-- flexbox布局 -->
<section class="layout flexbox">
<style>
.layout.flexbox{
margin-top: 110px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex:1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解决方案</h2>
1.这是三栏布局的浮动解决方案；
2.这是三栏布局的浮动解决方案；
3.这是三栏布局的浮动解决方案；
4.这是三栏布局的浮动解决方案；
5.这是三栏布局的浮动解决方案；
6.这是三栏布局的浮动解决方案；
</div>
<div class="right"></div>
</article>
</section>
第四种：表格布局
<!-- 表格布局 -->
<section class="layout table">
<style>
.layout.table .left-center-right{
width:100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格布局解决方案</h2>
1.这是三栏布局的浮动解决方案；
2.这是三栏布局的浮动解决方案；
3.这是三栏布局的浮动解决方案；
4.这是三栏布局的浮动解决方案；
5.这是三栏布局的浮动解决方案；
6.这是三栏布局的浮动解决方案；
</div>
<div class="right"></div>
</article>
</section>
第五种：网格布局（CSS最新增的，类似于bootstrap的栅格系统）
<!-- 网格布局 -->
<section class="layout grid">
<style>
.layout.grid .left-center-right{
width:100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left-center-right>div{
}
.layout.grid .left{
width: 300px;
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>网格布局解决方案</h2>
1.这是三栏布局的浮动解决方案；
2.这是三栏布局的浮动解决方案；
3.这是三栏布局的浮动解决方案；
4.这是三栏布局的浮动解决方案；
5.这是三栏布局的浮动解决方案；
6.这是三栏布局的浮动解决方案；
</div>
<div class="right"></div>
</article>
</section>
若高度不给，那么高度能自适应的只有 flex 布局和 表格布局，网格布局了，其他则不可以
CSS盒模型
有2种，标准模型 + IE模型
css如何设置这2种模型
- box-sizing：border-box; IE模型
- box-sizing：content-box; 标准模型（默认）
js如何设置获取盒模型对应的宽和高：
- dom.style.width/height 这个只能取到内联样式的宽高
- dom.currentStyle.width/height 拿到渲染后的宽高，但这个是IE支持的，其他不支
- dom.getComputerStyle.width/height 拿到渲染后的宽高，兼容谷歌和火
- dom.getBoundingClientRect().width/height 这个也能拿到，有4个值，还有2个是距离顶部和左边的距离
BFC（边距重叠解决方案）
-
概念：块级格式化上下文 ，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用
-
原理：如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器
-
如何创建BFC：
- 浮动元素，float 除 none 以外的值；
- 绝对定位元素，position（absolute，fixed）；
- display 不为none；
- overflow 除了 visible 以外的值（hidden，auto，scroll）
