css3设计模式，常用布局
2021-02-19 本文已影响0人
肥羊猪
1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。
2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局
3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,
css设计模式
OOCSS——Object Oriented CSS
SMACSS——Scalable and Modular Architecture for CSS
层级嵌套不要太深
避免使用元素选择器
垂直水平均分：
父标签：
display: flex;
flex-direction:column;(row为水平方向，column为垂直方向)；
子类标签：
flex: 1;
子元素纵向等距排列：
.fu{
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
}
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
// 弹性布局 移动端
父元素
display: flex;
flex-direction 属性指定了弹性子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content: flex-start | flex-end | center | space-between | space-around
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
align-content: flex-start | flex-end | center | space-between | space-around | stretch
传统盒子模型计算：盒子宽度=css设置的width+border+padding content-box
CSS3盒子模型：盒子宽度=css设置的width（其中包含了border和padding，不会撑大盒子） border-box
移动端可以全部兼容CSS3盒子模型，PC端如果需要完全兼容则用传统盒子模型，不考虑兼容问题，就选择CSS3盒子模型。
/* CSS3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮我们需要清除 设置为transparent透明 */
-webkit-tap-highlight-color: transparent;
/* 移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
/* 禁用长按页面时的弹出菜单 */
img.a { -webkit-touch-callout: none; }
CSS 盒子模型(Box Model).png
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
多栏布局——栅格系统
栅格系统就是利用浮动实现的多栏布局，在bootstrap中用的非常多。
多列布局
栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块。
弹性布局（Flexbox）
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
对一个容器中的子元素进行排列、对齐和分配空白空间。
流式布局（Fluid）
固定布局和流式布局在网页设计中最常用的两种布局方式。
固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。
瀑布流布局
瀑布流布局是流式布局的一种
响应式布局（Responsive）
实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
三栏布局.png
1.表格布局
<!--公用布局-->
<style media="screen">
html * {
padding: 0;
margin: 0;
}
.layout article div {
min-height: 150px;
}
</style>
<!--表格布局-->
<section class="layout table">
<style>
.layout.table .left-center-right {
display: table;
height: 150px;
width: 100%;
}
.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.这是三栏布局的解决方案；
</div>
<div class="right"></div>
</article>
</section>
2.浮动布局
<!--浮动布局 -->
<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.这是三栏布局的浮动解决方案；
</div>
</article>
</section>
3.绝对布局
<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>
html同1.表格布局
4.flexbox布局
<style>
.layout.flexbox .left-center-right {
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: red;
}
.layout.flexbox .center {
background: yellow;
flex: 1;
}
.layout.flexbox .right {
width: 300px;
background: blue;
}
</style>
html同1.表格布局
5.gird布局
<style>
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-columns: 300px auto 300px;
grid-template-rows: 150px;
}
.layout.grid .left {
background: red;
}
.layout.grid .center {
background: yellow;
}
.layout.grid .right {
background: blue;
}
</style>
html同1.表格布局
双飞翼布局
双飞翼布局.png
双飞翼布局
<style>
.container {
min-width: 600px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.center .inner {
margin: 0 200px;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
</style>
<article class="container">
<div class="center">
<div class="inner">双飞翼布局</div>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
