1、弹性盒布局方式

2、网格布局

3、百分比布局

4、三块布局

5、媒体查询

6、style中使用三元运算符

7、做一个透明盒子

8、根据条件加class

9、让背景根据屏幕拉伸

1、弹性盒布局方式

原文链接：CSS3弹性盒布局方式 - 简书

注意：需要在父元素中写：

display: flex;                                //必须写

flex-flow: wrap;         //是否换行

align-items: 属性值           //纵向对其方式

justify-content: flex-start; //横向对其方式

2、网格布局

原文链接：CSS Grid 网格布局教程 - 阮一峰的网络日志

注意，设为网格布局以后，容器子元素（项目）的

float、display: inline-block、display: table-cell、vertical-align和column-*

等设置都将失效。

注意：需要在父元素中写：

display: grid; //必须写

display: inline-grid; //整体设为行内元素

grid-template-columns: 100px 100px 100px; //每一列的列宽

grid-template-rows: 100px 100px 100px; //每一行的行高

grid-template-columns: repeat(auto-fill, 23%); // repeat()简化重复的值

grid-template-rows: repeat(auto-fill, 48%);

// 整个内容区域在容器里面的水平位置（左中右）

justify-content: start | end | center | stretch | space-around | space-between | space-evenl

// 整个内容区域的垂直位置（上中下）。

align-content: start | end | center | stretch | space-around | space-between | space-evenly;

// 属性设置单元格内容的水平位置（左中右）

justify-items: start | end | center | stretch;

// 属性设置单元格内容的垂直位置（上中下）

align-items: start | end | center | stretch;

// 属性设置行与行的间隔（行间距）

grid-row-gap: 20px;

// 属性设置列与列的间隔（列间距）。

grid-column-gap: 20px;

3、百分比布局

用calc辅助计算

页面百分比布局时，可以用calc来混合计算绝对单元，比如：

.foo {width: calc(100% - 50px);
}

4、三块布局

顶部标题栏可以这样写

<style lang="scss" scoped>
@import "~@/styles/variables.scss";.title{position: fixed;top: 0;right: 0;z-index: 9;width: calc(100% - #{$sideBarWidth});transition: width 0.28s;height: 80px;background-color: #fff;display: flex;justify-content: space-between;padding: 20px 30px;margin-top: 62px;
}
}

5、媒体查询

属性：

max-width：媒体类型小于或等于指定的宽度时，样式生效

min-width：媒体类型大于或等于指定的宽度时，样式生效

@media screen and (max-width:480px){.ads {display:none;}
}

多个媒体特性使用：

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){body {background-color:#f5f5f5;}
}

设备屏幕的输出宽度Device Width

在智能设备上，例如iPhone、iPad等，可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

下面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

下面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

@media not print and (max-width: 1200px){样式代码}

only关键词

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" /></pre>

另外在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。

原文链接：https://www.1117.work/article/100/article_detail/

6、style中使用三元运算符

根据data中的 click_edit 来判断使用的颜色，写完动态style，还可以再写一个正常style，不冲突

<p :style="{'color' :click_edit === true ? '#000' : '#B6B6B6'}">上线</p>

7、做一个透明盒子

.Offline{background-color: rgba(27, 27, 27, 0.4);position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: #FFFFFF;p{position: absolute;top: 50%;left: 50%;opacity: 1;transform: translate(-50%, -50%);z-index: 2;font-size: 18px;font-weight: bold;color: #ffffff;}}

8、根据条件加class

<div class="one":class="{red: this.color === 0,yellow: this.color === 1}"
>

9、让背景根据屏幕拉伸

代码如下：

height:calc(100% - 10px)

calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

常用布局方式与常用css相关推荐

1._请写出5种以上的android中界面常用布局方式,跳槽季“充电宝”Android面试题(一)...
1.请介绍下Android中常用的5种布局 Android中常用的5种布局分别为:FrameLaout(框架布局).LinearLayout(线性布局).AbsoluteLayout(绝对布局).Re ...
html常用布局和写法,HTML+CSS入门 css常用布局多行多列解析
CSS布局常用的方法:float : none | left | right 取值: none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边它是怎样工 ...
HTML常用布局方式
前言:对HTML的学习,在了解了基础的语法之后,需要学习与掌握的是,HTML的基础布局方式,这个是网页布局的基础,本文讲解是当前常用布局. 布局一示例图: 代码部分: <!DOCTYPE ht ...
css变成块级元素_css块级元素垂直居中常用布局方式
在项目中经常会用到垂直居中布局,本次通过常用的块级元素居中布局的实现方式来对过程中的技术点包括transform的使用,flex的使用进行梳理.让大家能够理解之后进行举一反三. 以下例子如果未特别说明 ...
Css 常用布局方式
1.CSS 参考手册 2.元素的分类首先我们要知道一共有几种元素 1.行内元素(可以与其他行内元素位于同一行,不会以新行开始高度.宽度不能设置) 2.块级元素(每个块级元素都从新的一行开始,其后的元 ...
flex布局常用布局方式（一行显示固定个数，自动换行显示）
一行显示固定个数,自动换行显示基于uni-app实现一行显示固定个数的元素,元素可以遍历生成的,并且自动换行显示,效果如下图所示代码实现: <template><view cla ...
CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...
前端页面的几种常用布局
一 .静态页面布局传统页面布局,网页上的所有元素的尺寸一律使用px作为单位. 静态页面布局通常有几下几种: 1.表格布局 2.层布局 3.div+css样式表布局表格布局: 表格布局容易把握,是最 ...
CSS布局方式有哪些
CSS布局方式有哪些静态布局自适应布局流式布局响应式布局弹性布局 1.静态布局最传统的布局方式,网页中所有尺寸都是由px作为单位,设置了min-width,如果宽度小于就会出现滚动条,如果 ...

常用布局方式与常用css

1、弹性盒布局方式

2、网格布局

3、百分比布局

4、三块布局

5、媒体查询

6、style中使用三元运算符

7、做一个透明盒子

8、根据条件加class

9、让背景根据屏幕拉伸

常用布局方式与常用css相关推荐

最新文章

热门文章

常用布局方式与常用css

1、弹性盒布局方式

2、网格布局

3、 百分比布局

4、三块布局

5、媒体查询

6、style中使用三元运算符

7、做一个透明盒子

8、根据条件加class

9、让背景根据屏幕拉伸

常用布局方式与常用css相关推荐

最新文章

热门文章

3、百分比布局