snowy

Appearance

On this page

CSS ​

CSS三大特性 ​

层叠性 ​

解决样式冲突问题。

  • 样式冲突：就近原则
  • 样式不冲突：不会层叠

继承性 ​

优先级 ​

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行

用到多个后代样式时，优先级的情况：

  • 1.id个数多的优先级高
  • 2.id和class个数相等看元素个数
  • 3.优先级相同看选择器类型和个数

简单记忆法：通配符*和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器为100，行内样式表为1000，！important为无穷大。

权重叠加：

  • div ul li ---> 3
  • .nav ul li ---> 12
  • a:hover ---> 11
  • .nav a ---> 11

盒模型 ​

  • 四个属性：content（内容）、padding（内边距）、border（边框）、margin（外边距）
  • 两种类型：标准盒模型，怪异盒模型。标准盒模型的特点是content的宽度和高度只包括元素本身的内容，不包括padding、border和margin；怪异盒模型的特点是content的宽度和高度包括元素本身的内容、padding和border，但不包括margin。
  • css盒模型的类型可以通过box-sizing属性来设置。box-sizing: content-box表示使用标准盒模型；box-sizing: border-box表示使用怪异盒模型。
  • css盒模型可以影响元素在页面中占据的空间大小和位置，因此需要注意计算元素的实际宽度和高度，以及调整元素之间的间距。

边框 ​

border: border-width || border-style || border-color

内边距padding ​

外边距margin ​

典型应用：可以让块级盒子水平居中。

标准盒(W3C)和怪异盒(IE) ​

An imageAn image

水平垂直居中 ​

水平居中 ​

行内元素水平居中

只需给父元素设置text-align:center即可实现。

css
.center{
    text-align:center;
}
<div class="center">水平居中</div>

块级元素水平居中

1.定宽块级元素：只需给需要居中的块级元素加margin:0 auto即可，但这里需要注意的是，这里块状元素的宽度width值一定要有

js
.center{
    width:200px;
    margin:0 auto;
    border:1px solid red;
}
<div class="center">水平居中</div>

2.不定宽块级元素:

  • 方法1：设置table，通过给要居中显示的元素，设置display:table，然后设置margin:0 auto来实现
css
.center{
    display:table;
    margin:0 auto;
    border:1px solid red;
}
<div class="center">水平居中</div>
  • 方法2：子元素设置inline-block（多个块状元素），同时父元素设置text-align:center
css
.center{
    text-align:center;
}
.inlineblock-div{
    display:inline-block;
}
<div class="center">
    <div class="inlineblock-div">1</div>
    <div class="inlineblock-div">2</div>
</div>
  • 方法3：设置flex布局，只需把要处理的块状元素的父元素设置display:flex,justify-content:center;
css
.center{
    display:flex;
    justify-content:center;
}
<div class="center">
    <div class="flex-div">1</div>
    <div class="flex-div">2</div>
</div>
  • 方法4：position + 负margin；
  • 方法5：position + margin：auto；
  • 方法6：position + transform；

垂直居中 ​

单行文本垂直居中

  • 设置paddingtop=paddingbottom；或
  • 设置line-height=height；

多行文本垂直居中

  • 通过设置父元素table，子元素table-cell和vertical-align，vertical-align:middle的意思是把元素放在父元素的中部
css
.center {
    width: 200px;
    height: 300px;
    display: table;
    border: 2px solid blue;
}
.table-div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
}
<div class="center">
    <div calss="table-div">多行文本垂直居中</div>
</div>

块级元素垂直居中

  • 方法1：flex布局：父元素设置display: flex和align-items：center，要求：父元素必须显示设置height值
  • 方法2：利用position和top和负margin（需知宽高）：1.设置元素为absolute/relative/fixed；2.margin=负一半
  • 方法3：利用position和top/bottom和margin:auto（注意不是margin:0 auto），1.position：absolute/relative/fixed；2.top/bottom：0；3.margin：auto
  • 方法4：利用position和top和transform，transform中translate偏移的百分比就是相对于元素自身的尺寸而言的

水平垂直居中 ​

  • 方法1：绝对定位+margin:auto
css
div{
    width: 200px;
    height: 200px;
    background: green;
    
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
  • 方法2：绝对定位+负margin
css
div{
    width:200px;
    height: 200px;
    background:green;
    
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
}
  • 方法3：绝对定位+transform
css
div{
    width: 200px;
    height: 200px;
    background: green;
    
    position:absolute;
    left:50%;    /* 定位父级的50% */
    top:50%;
    transform: translate(-50%,-50%); /*自己的50% */
}
  • 方法4：flex布局
css
.box{
    height:600px;  
    
    display:flex;
    justify-content:center;  //子元素水平居中
    align-items:center;      //子元素垂直居中
    /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
    background: green;
    width: 200px;
    height: 200px;
}
  • 方法5：table-cell实现居中,父元素设置display: table-cell;text-align: center(子元素水平方向居中);vertical-align: middle(子元素垂直方向居中);

CSS实现三角形 ​

css
.box {
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
        border: 50px solid transparent;
        border-top-color: pink;
        margin: 100px auto;
    }

实现效果图：

An image

浮动 ​

浮动特性 ​

  • 浮动元素会脱离标准流（脱标）
  • 浮动的元素会一行内显示并且元素顶部对齐
  • 浮动的元素具有行内块元素的特性

清除浮动 ​

为什么清除浮动？

  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

清除浮动的方法：

  • 额外标签法（隔墙法）-W3C推荐
  • 父级添加overflow属性
  • 父级添加after伪元素
  • 父级添加双伪元素

定位 ​

position属性：

  • static默认值
  • relative相对定位
  • absolute绝对定位
  • fixed固定定位
  • sticky粘性定位

实现两栏布局右侧自适应、三栏布局中间自适应 ​

两栏布局 ​

思路1：

  • 使用 float 左浮左边栏
  • 右边模块使用 margin-left 撑出内容块做内容展示
  • 为父级元素添加BFC，防止下方元素飞到上方内容

代码：

html
<style>
    .box{
        overflow: hidden; 添加BFC
    }
    .left {
        float: left;
        width: 200px;
        background-color: gray;
        height: 400px;
    }
    .right {
        margin-left: 210px;
        background-color: lightgray;
        height: 200px;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

思路2：

  • 使用flex弹性布局

代码：

html
<style>
    .box{
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

三栏布局 ​

布局方式：

  • 两边使用 float，中间使用 margin
  • 两边使用 absolute，中间使用 margin
  • 两边使用 float 和负 margin
  • display: table 实现
  • flex实现
  • grid网格布局

其中flex布局：

html
<style type="text/css">
    .wrap {
        display: flex;
        justify-content: space-between;
    }
    .left,
    .right,
    .middle {
        height: 100px;
    }
    .left {
        width: 200px;
        background: coral;
    }
    .right {
        width: 120px;
        background: lightblue;
    }
    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>

CSS3新增属性 ​

新增选择器 ​

属性选择器

结构伪类选择器

伪元素选择器

盒模型 ​

CSS3中可以通过box-sizing来指定盒模型，有2个值：content-box、border-border，这样我们计算盒子大小的方式就发生了变化。

图片模糊 ​

滤镜filter

将模糊或颜色偏移等图形效果应用于元素。

filter: 函数(); 例如：filter: blur(5px); blur模糊处理，数值越大越模糊。

calc函数

在声明CSS属性时执行一些计算。

过渡 ​

flex ​

常见父项属性 ​

flex-direction设置主轴方向

  • row：默认值从左到右
  • row-reverse：从右到左
  • column：从上到下
  • column-reverse：从下到上

justify-content设置主轴子元素排列方式

  • flex-start：默认值 从头部开始，如果主轴是x轴，则从左到右
  • flex-end：从尾部开始排列

px、em、rem、vw、vh、vm ​

  • px 像素
  • em 相对长度单位
  • rem 相对单位
  • vw 根据窗口的宽度，分成100等分，100vw就表示满宽，50vw就表示一半宽
  • vh 窗口的高度

页面元素显示 ​

实现隐藏元素方式有如下几种：

display:none ​

将元素从渲染树中删除，不占据空间，并且元素及其内容都不可见。相当于元素不存在。

visibility:hidden ​

保留元素在渲染树中的位置和大小，但元素本身不可见。元素仍然占据空间。

opacity:0 ​

设置透明度为0，元素仍然占据空间，并且其子元素也会继承相同的透明度。

设置height、width模型属性为0 ​

position:absolute ​

clip-path ​