【CSS】知识点总结

一、CSS基础部分

1.引入方式：内联、嵌入（头部）、外联、@import

2.基本样式

• color：rgb（0-255、#）、hsl、transparent
• font：size/line-height、family、weight（bold）、style（italic）
• background-repeat
• background-size：cover（等比例缩放到完全覆盖容器）  contain（等比例缩放到与容器宽高相等）
• background-origin
• background-clip

• background-position

• border
• text-decoration-line：underline、line-through
• text-decoration-color
• text-decoration-style：solid、wave、dotted、dashed

• white-space: normal  nowrap  pre;

• text-indent：2em

• text-transform: uppercase  lowercase  capitalize

• text-align：center、justify（给父元素设置）（文本、a、span、行内替换元素）
• line-height：
• vertical-align：middle（行内元素）
• etter/word-spacing
• overflow：hidden、auto、scroll、visible

3.基础选择器

• ！import
• 行内<div style = "width:200px">
• id
• class
• 标签
• 通配符
• 默认
• 继承

4.组合选择器

• 后代 ul li
• 子代 ul>li
• 兄弟 ul+ol、ul~ol
• 并集 ul.con ulli
• 交集（群组） ul，ol

5.元素整体显示

• display：none、block、inline-block、inline
• visibility：hidden、visible
• opacity
• background-color/image/repeat/position

6.盒子模型

• margin：
  • 块元素横向居中 0 auto、
  • 父级塌陷：浮动、overflow：hidden、inline-block
• border-width/color/style/方向
• padding：不支持负值
• content
• 清除浮动方法：
  • overflow：hidden
  • 额外标签：给连续浮动的元素最后添加一个兄弟元素，给兄弟元素设置一个clear：both
  • 伪元素：display：block；clear：both
  • 设置父元素高度
• BFC：块级格式化上下文（清除浮动、解决父级塌陷）
  • overflow不为visible
  • display为inline-block
  • 浮动
  • 定位：absolute/fixed
• 定位：static、relative、absolute、fixed z-index
• 布局：
  • 三列布局-浮动
  • 三列布局-定位
  • 三列布局-圣杯布局
  • 三列布局-双飞翼布局
  • 等高布局
  • 粘连布局-原始
  • 粘连布局-怪异盒子模型
  • 粘连布局-calc
  • 水平居中-transform
  • 水平居中-定位

二、CSS3部分

1、css3 pointer-events

此属性会阻止hover、active、onclick等触发事件

1. pointer-events 更像是JavaScript，它能够：

• 阻止用户的点击动作产生任何效果
• 阻止缺省鼠标指针的显示
• 阻止CSS里的 hover 和 active 状态的变化触发事件
• 阻止JavaScript点击动作触发的事件

1. 具体用法：

1	pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

pointer-events属性有很多值，但是对于浏览器来说，只有auto和none两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

1. pointer-events属性值详解

• auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
• none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。
• 其它属性值为SVG专用，这里不再多介绍了。

2、图片不拉伸属性 object-fit

1 2 3

width: 100%; height: 100%; object-fit: cover;

3、css鼠标点击的五种状态

1 2 3 4 5

1、a:link{color:#fff}  未访问时的状态（鼠标点击前显示的状态）   2、a:hover{color:#fff}  鼠标悬停时的状态   3、a:visited{color:#fff}  已访问过的状态（鼠标点击后的状态）   4、a:active{color:#fff}  鼠标点击时的状态   5、a:focus{color:#fff}  点击后鼠标移开保持鼠标点击时的状态（只有在<a href="#"></a>时标签中有效）

4、阴影效果

1 2 3 4 5 6

box-shadow:2px 2px 5px #000; //正常 box-shadow:inset 2px 2px 5px #000; //内阴影 box-shadow:0px 0px 5px 10px #000;//拓展阴影长度 box-shadow:0px 0px 0px 3px #bb0a0a, 0px 0px 0px 6px #2e56bf, 0px 0px 0px 9px #ea982e;//多重阴影

逼真的阴影效果示例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<div class="box11 shadow"></div> /********************************************/ .box11 { width: 300px; height: 100px; background: #ccc; border-radius: 10px; margin: 10px; } .shadow { position: relative; max-width: 270px; box-shadow: 0px 1px 4px rgba(0,0,0,0.3), 0px 0px 20px rgba(0,0,0,0.1) inset; } .shadow::before, .shadow::after { content:""; position:absolute; z-index:-1; } .shadow::before, .shadow::after { content:""; position:absolute; z-index:-1; bottom:15px; left:10px; width:50%; height:20%; } .shadow::before, .shadow::after { content:""; position:absolute; z-index:-1; bottom:15px; left:10px; width:50%; height:20%; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); } .shadow::after{ right:10px; left:auto; transform:rotate(3deg); }

5、实现a标签禁用

1. 需求分析:业务中遇到一个需求-根据当前数据类别进行权限限制,当我为新用户数据时,开放编辑操作,当我为旧用户数据时,禁用编辑操作

2. 代码:

   1. css代码:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

/**设置a标签禁用 */ a.disabled { pointer-events: none; filter: alpha(opacity=50); /*IE滤镜，透明度50%*/ -moz-opacity: 0.5; /*Firefox私有，透明度50%*/ opacity: 0.5; /*其他，透明度50%*/ color: gray; } //因为pointer-events会阻止hover事件,所以在外层进行判断,同时变为行内元素 .disabledbox { display: inline-block } .combox { display: inline-block } .disabledbox:hover { cursor: not-allowed; }

1. html部分调用代码--示例中是在:antd中table组件中试用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//新旧渠道商标识 const CHANNELBZ = { OLD: 0, NEW: 1 } .... { title: '推荐折扣', dataIndex: 'discount', width: 100, render: (value, item) => ( <div> <span>{value}</span> <div className={item.sourceType == CHANNELBZ.OLD ? style.disabledbox : style.combox}> <a className={item.sourceType == CHANNELBZ.OLD ? style.disabled : ""} style={{ marginLeft: 10 }} onClick={() => { console.log(item.sourceType, "itemmmmmm") }} > 编辑 </a> </div> </div> ), },

6、实现父元素半透明，子元素不透明

CSS实现父元素半透明，子元素不透明。 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明，而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明。但是这样实现的半透明有个问题，那就是这个属性会被子元素所继承。

如下代码，则子元素中也将是半透明效果，无论你将子元素的半透明值重置还是如何都不会改变这一情况。

1 2	>.parent{opacity:0.9; background-color:#fff;} >.child{opacity:1.0; background-color:#fff; height:200px;}

1. 解决:其实在新的CSS3规则里面的属性 GRBA已经可以方便的实现父元素透明，而子元素不透明了。

1 2	//使用背景色透明可以限制子类不继承,防止下方按钮也变得半透明 background:rgba(255,255,255,0.9) ;

7.伪类选择器

• link（未访问过的链接） > visited（已访问过的链接） > hover（鼠标悬停的链接） > active（鼠标点击的链接）

• :focus（获取焦点的表单元素）

• :enabled（未被禁用的表单元素）

• :disabled（被禁用的表单元素）

• :checked（被选中的表单元素）

• ul li:first-child（ <ul> 中的 <li>，且该元素是第一个子元素）

• ul li:last-child

• ul li:nth-child(n)

• ul li:first-of-type（<ul> 中的第一个 <li>）

• ul li:last-of-type

• ul li:nth-of-type(n)

• ul li:only-child

• :nth-child(even) （偶数元素）
  :nth-child(2n)

• :nth-child(odd) （奇数元素）
  :nth-child(2n+1)

• :not(.active) （不匹配的元素）

8.伪元素选择器

• ::before （在元素内部的最前面插入内容，必须设置 content 属性）

• ::after （在元素内部的最后面插入内容，必须设置 content 属性）

• ::first-letter （元素的首字母）

• ::first-line （元素的首行）

•  ::selection （元素中被选中的部分） 

  9.文本阴影

• text-shadow: 1px 1px 2px black；

  • offset-x：水平方向的偏移量（必要），正数向右，负数向左

  • offset-y：垂直方向的偏移量（必要），正数向下，负数向上

  • blur-radius：模糊距离

  • color：阴影颜色

10.过渡动画

（1）过渡 transition

• transition-property：设置需要过渡的 CSS 属性

• transition-duration：过渡执行时间

• transition-timing-function：速度曲线函数

  • ease：逐渐变慢（默认）

  • linear：匀速

  • ease-in：加速

  • ease-out：减速

  • ease-in-out：先加速，再减速

• transition-delay：过渡延迟时间

（2）动画 animation

• animation-name：动画（关键帧）名称

• animation-duration：动画执行时间

• animation-timing-function：速度曲线函数

• animation-delay：动画延迟时间

• animation-iteration-count：动画执行次数

  • infinite：无限次

• animation-direction：动画方向

  • alternate：来回播放

• animation-play-state：动画的播放和暂停

  • running：播放动画

  • paused：暂停动画

• animation-fill-mode：动画开始和结束状态

  • none：动画等待时和动画结束后，不会对元素的样式产生改变

  • forwards：动画结束后，元素的样式为动画的最后一帧

  • backwards：在动画等待时间内，元素的样式为动画的第一帧

  • both：在动画等待时和动画结束后，元素的样式分别为动画第一帧和最后一帧

11.弹性布局

（1）主轴方向 flex-direction

• flex-direction: row;（水平向右）
• flex-direction: row-reverse;
• flex-direction: column;（垂直向下）
• flex-direction: column-reverse;

（2）主轴对齐 justify-content

• justify-content: flex-start;
• justify-content: center;
• justify-content: flex-end;
• justify-content: space-between;（均匀排列, 首个弹性元素位于主轴起始位置, 最后一个弹性元素位于主轴结束位置）
• justify-content: space-around;（均匀排列, 每个弹性元素周围分配相同的空间）
• /* 弹性元素均匀排列, 每个弹性元素之间的间隔相同 */
• justify-content: space-evenly;

（3）侧轴对齐 align-items

• align-items: stretch;（弹性元素未设置宽高时, 在侧轴方向上拉伸至撑满弹性容器（默认））
• align-items: flex-start;
• align-items: center;
• align-items: flex-end;
• align-items: baseline;

（4）侧轴对齐 align-content

• align-content: flex-start;
• align-content: center;
• align-content: flex-end;
• align-content: space-between;
• align-content: space-around;
• align-content: space-evenly;

（5）换行排列 flex-wrap

• flex-wrap: nowrap;
• flex-wrap: wrap;
• flex-wrap: wrap-reverse;

（6）复合属性 flex-flow

• flex-flow: column wrap;（主轴方向 换行排列）

• 等价于 
  flex-direction: column;
  flex-wrap: wrap;

（7）侧轴对齐 align-self

• align-self: stretch;/
• align-self: flex-start;
• align-self: center;
• align-self: flex-end;
• align-self: baseline;

（8）富余空间 flex-grow

给弹性元素按比例分配富余空间，默认为 0，表示不分配。

.outer {
  width: 300px;
}

.box1 {
  flex-grow: 1; /* 100px */
}

.box2 {
  flex-grow: 2; /* 200px */
}

（9）收缩规则 flex-shrink

按比例压缩弹性元素，默认为 1，表示等比例压缩。

/* 默认等比例压缩 */
flex-shrink: 1;

/* 不压缩 */
flex-shrink: 0;

（10）基准宽度 flex-basis

弹性元素被压缩时的基准宽度，默认为 auto。

.container {
  display: flex;
  width: 500px;
}

.container div:nth-child(1) {
  width: 200px; /* 125px */
}

.container div:nth-child(2) {
  width: 200px; /* 250px */
  flex-basis: 400px;
}

.container div:nth-child(3) {
  width: 200px; /* 125px */
}

（11）复合属性 flex

/* 弹性元素等比例分配富余空间或等比例压缩，且被压缩时的基准宽度为 0 */
flex: 1;

/* 等价于 */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

12.响应式布局

（1）媒体查询

/* 在屏幕上, 并且最小宽度为 900px 时（屏幕宽度大于 900px）的样式 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

• type：媒体类型

  • all：用于所有设备

  • print：用于打印机

  • screen：用于屏幕

• feature：媒体特性

  • width：宽度

  • min-width：最小宽度

  • max-width：最大宽度

（2）引入资源

<!-- 在屏幕上, 并且最小宽度为 320px 时（屏幕宽度大于 320px）引入资源 -->
<link rel="stylesheet" href="./style.css" media="screen and (min-width: 320px)" />

（3）移动端适配

/* PC */
html {
  font-size: 50px;
}

@part: 10;

/* 320 iPhone 5 */
@media screen and (min-width: 320px) {
  html {
    font-size: 320px / @part;
  }
}

/* 375 iPhone 6/7/8 */
@media screen and (min-width: 375px) {
  html {
    font-size: 375px / @part;
  }
}

// ...

@media screen and (min-width: 750px) {
  html {
    font-size: 750px / @part;
  }
}

（4）常用阈值

/* 超小屏幕 */
@media screen and (max-width: 576px) {
  width: 100%;
}

/* 小屏幕 */
@media screen and (min-width: 576px) and (max-width: 768px) {
  width: 540px;
}

/* 中等屏幕 */
@media screen and (min-width: 768px) and (max-width: 992px) {
  width: 720px;
}

/* 大屏幕 */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  width: 960px;
}

/* 超大屏幕 */
@media screen and (min-width: 1200px) {
  width: 1140px;
}

13.视口单位适配页面

（1）仅使用vw作为CSS单位

•  对于设计稿的尺寸转换为vw单位，使用Sass函数编译

//iPhone 6尺寸作为设计稿基准
$vm_base: 375; 
@function vw($px) {
    @return ($px / 375) * 100vw;
}

• 无论是文本还是布局高宽、间距等都使用 vm 作为 CSS 单位

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10); // 内间距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10); // 字体大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40); // 宽度
                height: vm(40); // 高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}

 

• 物理像素线（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情况）采用 transform 属性 scale 实现。

.mod_grid {
    position: relative;
    &::after {
        // 实现1物理像素的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}

 

• 对于需要保持高宽比的图，应改用 padding-top 实现

.mod_banner {
    position: relative;
    padding-top: percentage(100/700); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}

 

（2）搭配vw和rem，布局更优化

vw依赖于视口大小而自动缩放，无论视口过大还是过小，它也随着视口过大或者过小，失去了最大最小宽度的限制。 rem 弹性布局的核心在于动态改变根元素大小：

• 给根元素大小设置随着视口变化而变化的 vw 单位，这样就可以实现动态改变其大小。
• 限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度

这样就能够实现对布局宽度的最大最小限制。因此，根据以上条件，我们可以得出代码实现如下：

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

 

12.变形  13.渐变  14.多栏布局