常用布局方式与常用css

目录

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;

.applications-card-box{
        width: 100%;
        height: calc(85vh - var(--navbar-height));
        display: grid;                        //必须写
        grid-template-columns: repeat(auto-fill, 31%);     // repeat()简化重复的值
        // 整个内容区域在容器里面的水平位置（左中右）

        justify-content: space-between;

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

        // align-content: center;

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

        // justify-items: center;

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

        // align-items: center;

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

        grid-row-gap: 2.5%;

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

        // grid-column-gap: 2.5%;
        overflow-y: auto;
      }

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的大小