CSS相关方法

ZT_KeBei
204 阅读5分钟

css相关的常用方法

1.全屏遮罩层

.mask{
width:100%;
position:fixed;
top:0;
bottom:0;
background-color:#333;
opacity:0.7
}

2.上中下布局 中间自适应

//第一种：
首尾盒子固定定位，中间盒子使用padding放出高度，使用overflow:auto滚动
<template>
<div id="container">
        <header>头部</header>
    <section>
      <ul>
        <li>遇到这种布局，通常想到用fixed固定顶部和尾部，然后中间的有个和顶部尾部同值的上下            padding，好让内容撑开与上下的距离。但是这种布局会有bug。
        </li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项我是列表项我是列表项我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
      </ul>
    </section>
    <footer>底部</footer>
    </div>
</template>

<style>
  html,
    body {
      height: 100%;
    }
    body,ul {
      margin: 0;
    }
    header,
    footer {
      position: fixed;
      line-height: 48px;
        /*宽度与屏幕同宽*/
      left: 0;
      right: 0;
      z-index: 1;
      color: aquamarine;
      text-align: center;
      background: #333;
    }
    header{
      top: 0;
    }
    footer {
      bottom: 0;
    }
    section{
        /*放出顶部与底部距离*/
      padding: 68px 0; 
      overflow: auto;
      background: #eee;
    }
    li{
      padding: 10px;
    }
    </style>

//第二种：
首尾盒子使用固定定位，中间使用绝对定位，留出首尾盒子高度，中间盒子加上overflow-y:scroll或者auto

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size: 30px;
            text-align: center;
        }
        .top {
            width: 100%;
            height: 100px;
            background: #000;
            color:#fff;
            position:absolute;
            top:0;
            /*以上设置是重点必须的*/
            text-align:center;
            line-height:100px;
        }
        .bottom{
            width:100%;
            height:100px;
            background:#000;
            color:#fff;
            position:absolute;
            bottom:0;
            /*以上设置是重点必须的*/
            text-align:center;
            line-height:100px;
        }
        .mainBox{
            width:100%;
            position:absolute;
            top:100px;
            bottom:100px;
            overflow-y: auto ;
            /*以上设置是重点必须的*/
        }
  
    </style>
</head>
<body>
<div class="top">顶部，高度40px</div>
<div class="mainBox">
这是中间内容
</div>
<div class="bottom">底部，高度40px</div>
</body>
</html>

//第三种：
外部盒子使用grid布局（ display: grid;height: 100vh;grid-template-rows: auto 1fr auto;
），中间盒子添加overflow:auto开启滚动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.box {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
    /*以上为核心代码*/
}
header {
  background: lightpink;
}
main {
  background: coral;
  overflow: auto;
}
footer {
  background: wheat;
  text-align: center;
}
body {
  font-family: system-ui, sans-serif;
}
</style>
<body>
    <div class="box">
        <header>
            <h1>Header.com</h1>
        </header>
        <main>
            <div>这里面是主题内容</div>
        </main>
        <footer>Footer Content — Header.com 2020</footer>
    </div>
</body>
</html>

3.使用flex实现智能固定底部

<div class="container">
  <div class="main">我是内容区域</div>
  <div class="footer">规则说明</div>
</div>

<style>
 .container{
  height: 100vh;
  /* 关键css处 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main{
  /* 关键css处 */
  flex: 1;
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.footer{
  padding: 15px 0;
  text-align: center;
  color: #ff9a9e;
  font-size: 14px;
}
</style>

4.文本溢出隐藏

/*单行文本溢出省略号*/
.a{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*多行文本超过部分显示省略号，并且兼容数字或英文不换行问题*/
.a{
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //行数
    -webkit-box-orient: vertical;
    word-break: break-all;
}

5.移除type="number"的箭头

<input type="number" />
<input type="number" class="no-arrow" />
<style>
/* 关键css */
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
</style>

6.禁止选中

 user-select: none;

7.自定义选中文本样式

<div class="box">
  <p class="box-default">
   我是普通的文本~
  </p>
  <p class="box--custom">
    我是自定义选中的文本~
  </p>
</div>

<style>
.box-custom::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}
</style>

8.文本水平对齐

text-align可选值：

  left：默认值，左侧对齐

  right:右对齐

  center:居中对齐

  justify:两端对齐（两边都帖死，不留空白）/*很好用*/

9.文本垂直对齐

文本垂直对齐vertical-align
vertical-align可选值

baseline,默认值，子元素基线对齐（文字底边中线）

top:顶部对齐，子元素和父元素的基线对齐

bottom:底部对齐，子元素和父元素基线对齐

middle:居中对齐，子元素的中线和父元素的中线对齐

指定一个px，正数往上走，负数往下走。

之前说过，图片是一个替换元素，相当于文字，所以也有文字的基线，可以设置vertical-align:top/middle/bottom来全部压着边线

10.盒子阴影 与 文本阴影

box-shadow:横向偏移  纵向偏移 阴影扩散(单位px/rpx) 阴影颜色(16进制色)
t-shadow:横向偏移  纵向偏移 阴影扩散(单位px/rpx) 阴影颜色(16进制色)

11.巧用not选择器

li:(not)(:last-child){
   /*除最后一个li都有边框色*/
  border-bottom: 1px solid #ebedf0;
}

12.css变量（IE不兼容）

1.变量声明(大小写敏感)
--my-property:value
body{
     --foo:#2b4b6b       /*声明了一个foo的css变量*/
}

var()函数  用于读取变量的值
a{
  color:var(--foo)  
  /*
   color: var(--foo, #7F583F);       第二个值为默认值，若不存在该变量，则使用默认值
 */
}

var()函数还可以用在变量的声明。
:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

2.变量值的类型
如果是一个字符串，可以与其他字符串拼接
--bar: 'hello';
--foo: var(--bar)' world';

如果是数值，不能直接与数值单位连用
.foo {
  --gap: 20;
  margin-top: var(--gap)px;   /* 无效 */
}
--正确写法：
.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

13.画三角形

.triangle{
	width: 0px;
	height: 0px;
	border-bottom: 200px solid #cc7eb1;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
}

14.offset、client、scroll系列

元素偏移offset（获取元素距离定位父元素的位置）

element.offsetParent        返回该元素带有定位的父级元素 <!--父元素无定位返回body>  

<!-- 重点 -->
element.offsetTop        距离该元素上边框相对带有定位父元素上边框的偏移  <!-- 父元素无定位，则相对body-->
element.offsetLeft       距离该元素上边框相对带有定位父元素左边框的偏移  <!-- 父元素无定位，则相对body-->

element.offsetWidth      返回该元素包括padding+border+content（元素width）的宽度 （包含滚动条宽度）
element.offsetHeight     返回该元素包括padding+border+content（元素height）的高度 （包含滚动条高度）

元素可视区client系列 (获取元素边框大小，元素大小)

element.offsetParent        返回该元素带有定位的父级元素 <!--父元素无定位返回body>  

<!-- 重点 -->
element.clientTop         返回该元素 上边框大小
element.clientLeft        返回该元素 左边框大小
element.clientWidth       返回该元素包括padding+content的宽度,不含边框      <!--可视区宽度-->
element.clientWidth       返回该元素包括padding+content的宽度,不含边框

元素滚动scroll系列 （获取元素大小、滚动距离）

element.scrollTop          返回被卷去的上侧距离，从内容顶部到上内边框
element.scrollLeft         返回被卷去的左侧距离
element.scrollWidth       <!-- 返回该元素自身实际的宽度，不含边框-->  实际内容宽度
element.scrollHeight      <!-- 返回该元素自身实际的高度，不含边框-->

作用域


/*同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。
   即：变量的作用域就是它所在的选择器的有效范围。
*/
<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>
---------------------------------------
:root  全局变量放在根元素，确保任何选择器都可以读取
:root{
--main-color:#06c
}

兼容性处理

a {
  color: #7F583F;
  color: var(--primary);
}

vue中使用示例

<template>
  <div class="box" :style="styleVar">
  </div>
</template>
<script>
export default {
    props: {
        height: {
            type: Number,
            default: 94,
        },
        whith: {
            type: Number,
            default: 200,
        },
    },
    computed: {
        styleVar() {
            return {
                //给css变量赋值
                '--box-width': this.whith + 'px',
                '--box-height': this.height + 'px'
            }
        }
    },
}
</script>
<style scoped>
.box {
  height: var(--box-height);        /*使用css变量*/
  width: var(--box-width);
  background: red;
}
</style>
avatar
文章
阅读
粉丝