几种常见的css布局方式

html-css020

几种常见的css布局方式,第1张

四种方式

比如想要做这样一个布局，有哪几种方式。

最简单、最快捷的方式。

element-ui提供的布局容器，el-header头标签，有height属性。el-aside左侧边栏标签，有width属性。el-footer底部标签，有height属性。其他样式可以通过class进行控制。

相对简单的方式。

利用el-col将每行分为24等分的特性，进行布局。其他属性通过class进行控制。

原生css布局的方式，float布局，也是最基础的方式。

将aside向左浮动，固定好宽度。main向右浮动，注意固定好宽度是 100vw - 左侧边栏的宽度 ，注意高度是 100vh - 上下header和footer高度之和 。footer也由于浮动而被挤到到最下面，这边指定float为left、right都是可以的，都可以达到浮动到最下方的效果。

原生css布局的方式，position布局，也是最基础的方式。

sideBar设置好宽度，利用绝对定位将固定在最左边（由于是绝对定位，所以注意已经脱离了文档流）。main设置margin-left为侧边栏宽度，这样就可以使得main不会被遮挡。footer设置为固定定位，bottom为0固定在底部。其他height、width的值也要注意计算哦~

一般情况下，根据分辨率加载pc端 wap端 pad端三个css文件，示例：

<link rel="stylesheet" type="text/css" href="./css/style.css" media="all">

<link rel="stylesheet" href="./css/phone.css" media="(max-width:620px)">

<link rel="stylesheet" href="./css/pad.css" media="screen and (max-width:1024px) and (min-width:621px)">

只有一个css文件情况下，根据分辨率调整css样式，示例：

@media screen and  (max-width:620px){

.logo{width: 300pxmargin-left: -140px}

}

@media screen and  (max-width:1024px) and (min-width:621px) {

.logo{width: 220pxmargin-left: -99px}

.nav li:nth-of-type(2),.nav li:nth-of-type(3){width: 8%}

.nav li:nth-of-type(5),.nav li:nth-of-type(6){width: 12%}

}

vue2.0 + webpack做移动端项目，如果在项目中使用了CSS3 animation动画属性，会发现在ios上完全没问题，但是在安卓手机上依然失效，尽管把animation在五大浏览器各种兼容都写了还是不行，原因其实很简答。其实在 vue-cli脚手架package.json配置文件里面就有对浏览器的版本做css的前缀处理"browserslist": [">1%","last 2 versions","not ie <= 8"]意思是 只兼容主流浏览器的最新两个版本。如果我们要兼容所有的就必须把这改成"browserslist": [">1%","last 5 versions","Android >= 4.0","not ie <= 8"]就可以了。CSS部分我们也需要做好兼容写法，优雅降级和渐进增强都可以。.audio-play-show {-webkit-animation: say 12s linear infinite-moz-animation: say 12s linear infinite-ms-animation: say 12s linear infinite-o-animation: say 12s linear infiniteanimation: say 12s linear infinite}@-webkit-keyframes say {0% {}100% {-webkit-transform: rotateZ(360deg)}}@-moz-keyframes say {0% {}100% {-moz-transform: rotateZ(360deg)}}@-ms-keyframes say {0% {}100% {-ms-transform: rotateZ(360deg)}}@-o-transforms say {0% {}100% {-o-transform: rotateZ(360deg)}}@keyframes say {0% {}100% {transform: rotateZ(360deg)}}