css必备知识点

FruitBro
1,248 阅读16分钟

一、在一个div中实现未知图片上下左右居中

<body>
    <style>
        .outer {
            position: relative;
            width: 600px;
            height: 600px;
            background: red;
        }
        .innerImg {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    <div class="outer">
        <img class="innerImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551859237655&di=070c00eb8908bdecc2b10b67400a7723&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2Fda30383dgy1fue1s8rswsj20et0dugw5.jpg" alt="">
    </div>
</body>

效果如下：

二、使用display:table-cell和水平居中、垂直居中来实现图片居中

<body>
    <style>
        .outer {
            display: table-cell;
            width: 600px;
            height: 600px;
            margin: 0 auto;
            text-align: center;
            vertical-align: middle;
            background: rebeccapurple;
        }
        img{
            vertical-align:middle;
        }
    </style>
    <div class="outer">
        <img class="innerImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551859237655&di=070c00eb8908bdecc2b10b67400a7723&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2Fda30383dgy1fue1s8rswsj20et0dugw5.jpg" alt="">
    </div>
</body>

三、使用flex布局

<body>
    <style>
        .outer {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 600px;
            height: 600px;
            background: rebeccapurple;
        }
    </style>
    <div class="outer">
        <img class="innerImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551859237655&di=070c00eb8908bdecc2b10b67400a7723&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2Fda30383dgy1fue1s8rswsj20et0dugw5.jpg" alt="">
    </div>
</body>

效果与上图相同

四、多行文字垂直居中

<body>
    <style>
        .outer {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 600px;
            height: 600px;
            background: pink;
        }
        p {
            width: 300px;
        }
    </style>
    <div class="outer">
      <p>豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。</p>
    </div>
</body>

效果图：

五、已知宽高的上下左右居中

<body>
    <style>
        .outer {
            position: relative;
            width: 600px;
            height: 600px;
            background: rebeccapurple;
        }
        .inner {
            position: relative;
            width: 200px;
            height: 300px;
            left: 50%;
            top: 50%;
            margin-left: -100px; // 或 transform: translateX(-50%)
            margin-top: -150px; // 或 transform: translateY(-50%)
            background: white;
        }
    </style>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

效果如下：

六、省略号

单行文本省略号，部分浏览器需要加width属性。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; //规定段落中的文本不进行换行

多行文本

（1）webkit浏览器或移动端的页面

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

跨浏览器兼容方案

p {
    position: relative;
    line-height: 2em;
    height: 6em;
    overflow: hidden;
}
p::after {
    content: "...";
    font-weight: bold;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 1px 45px;
}

注意：

1.height高度是line-height的3倍；

2.要支持IE8，需要将::after替换成:after

七、vertical-align: middle;

如何让div里的图片和文字同时上下居中

img标签是行内元素，设置文本和图片垂直居中时需要把div的line-height和height的值设置相同即可。
并且img需要设置vertival-align：middle；

vertical-align css的属性vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素。

vertical-align：baseline/top/middle/bottom/sub/text-top;

八、cursor的url属性

cursor的属性如果为url，需要使用图片作为效果时，图片的大小不能超过128px*128px

九、transfrom的rotate属性在span标签下失效

因为span标签是inline属性，rotate只在inline-block或block属性时生效。

十、flex实现内部元素三等分

<body>
    <style>
        .tab {
            display: flex;
            width: 100%;
            height: 100px;
            background: blue;
            list-style: none;
        }
        li {
            flex: 1; // 表示子元素之间平均分配
            background: red;
        }
        li:nth-child(2){
            background: yellow;
        }
    </style>
    <ul class="tab">
        <li>flex1</li>
        <li>flex2</li>
        <li>flex3</li>
    </ul>
</body>

效果如下：

flex-grow属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。

flex-grow：<number>; /* 数值，可以是小数，默认值是0 */

flex-grow不支持负值，默认值是0，表示不占用剩余的空白间隙扩展自己的宽度。如果flex-grow 大于0，则flex容器剩余空间的分配就会发生变化，具体规则如下：

  • 所有剩余空间总量是1。
  • 如果只有一个flex子项设置了flex-grow属性值：
    • 如果 flex-grow值小于1，则扩展的看空间就总剩余空间和这个比例的计算值。
    • 如果flex-grow值大于1，则独享所有剩余空间。
  • 如果有多个flex设置了flex-grow属性值：
    • 如果flex-grow值总和小于1，则每个子项扩展的空间就总剩余空间和当前元素设置的flex-grow比例的计算值。
    • 如果flex-grow值总和大于1，则所有剩余空间被利用，分配比例就是flex-grow属性值的比例。 例如所有flex子项都设置flex-grow:1,则表示剩余空白间隙大家等分 ，如果设置的flex-grow比例是1：2：1，则中间的flex子项占据一半的空白间隙，剩余的前后两个元素等分。

flex属性是 flex-grow, flex-shrink和 flex-basis的缩写。

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

其中第2和第3个参数是可以选的，默认值为0 1 auto。

十一.column-count实现三列布局

一般用于在线文档

column-count: 3;

十二.修改全站字体

html[lang=en-RU] body *{
  @import url('http://fonts.googleapis.com/css?family=Roboto:400,700');
  font-family: 'Roboto' !important;
}

十三.px

在不同的屏幕上，css像素所呈现的物理尺寸是一致的，而不同的是css像素所对应的物理像素数是不一致的。在普通屏幕下1个css像素对应1个物理像素，而在Retina屏幕下，1个像素对应的却是4个物理像素。

CSS像素

css像素是一个抽象的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，css像素称为与设备无关的像素（device-indpendent pixel）,简称DIPs.

屏幕密度

屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少个像素来计算（PPI）

物理像素

物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

推荐一篇文章：再谈Retina下1px的解决方案

十四. 媒体查询

1.什么是媒体查询

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向：横向或纵向)为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
  1. 逻辑操作符

not and only

  1. 在html中写入media
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

参数详解：

  • width=device-width: 宽度等于当前设备的宽度
  • initial-scale=1: 初始的缩放比例 （默认为1）
  • minimum-scale=1: 允许用户缩放到的最小比例（默认为1）
  • maximun-scale=1: 允许用户缩放到的最大比例 （默认为1）
  • user-scalable=no: 用户是否可以手动缩放（默认为no)
  1. 写Media中的代码
/* 当页面大于1200px时，大屏幕，主要是PC端 */
@media (min-width: 1200px) {
    
}
/* 在992 和 1199像素之间的屏幕里，中等屏幕，分辨率低的pc */
@media (min-width: 992px) and (max-width: 1199px) {
    
}
/* 在768 和 991 像素之间的屏幕里，小屏幕，主要是PAD */
@media (min-width: 768px) and (max-width: 991px) {
    
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {

}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
    
}

十五、box-shadow

/* x偏移量 | y偏移量 | 阴影模糊半径 |阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0,0,0, 0.2);
任意数量的阴影，以逗号分隔

模糊距离和扩散半径的区别：

相同点： 都会产生额外长度区域。

不同点： 模糊距离产生的额外长度带有模糊效果。

十六、scss中的@mixin与@function

scss是Sass3引入的新语法，语法完全兼容CSS3，且继承了Sass的强大功能。所有在CSS中正常工作的代码也能在SCSS中正常工作。

@mixin

// 定义
@mixin rounded($amount) {
    -moz-border-radius: $amount;
    border-radius: $amount;
}
// 使用
.box {
    border: 3px solid #777;
    @include rounded(5px);
}
// 结果
.box {
    border: 3px solid #777;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

@function

// 定义 pc端2560设计稿
@function v($px) {
    @return round($px * 10000 / 2560) /10000 * 100vw;
}
// 使用
.root {
    width: v(2560);
}
// 结果
.root {
    width: 100vw;
}

@mixin 用于被多次声明的样式。符合DRY原则（Don't Repeat youself）.

@function 类似于声明一个函数，调用后计算返回相应的结果

十七、选择器 ~ 和 + 的区别

相邻兄弟选择器+ 相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者有相同的父元素。 如果要增加紧接在h1元素后出现的段落上的边距，写法如下：

h1 + p {marign-top: 20px;}

这个选择器：选择器紧接在h1元素后出现的段落，h1和p元素拥有共同的父元素。

相同的父元素~ 为所有相同的父元素中位于p元素之后的所有ul元素设置背景：

p~ul {background: #000000;}

p~ul 选择器：p之后出现的所有ul；两种选择器必须拥有相同的父元素，但是ul不必是直接紧随p。

区别： +是必须紧邻的兄弟元素。 ~是元素后边的同级元素，不必是紧邻的。

两个选择器都必须拥有相同的父元素。

附：选择器大于号 >

大于号表示为子选择器（child selector），限定在第一级子元素中选择第一个子元素

十八、align-items和 align-content的区别

align使成一行

align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。align-items属性定义项目在交叉轴上如何对齐。

display: flex;
align-items: flex-start | flex-end | center | stretch | baseline;

align-content对单行是没有效果的，此属性只适用于多行的flex容器，并且当侧轴上有多余空间使用flex线对齐。align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

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

align-items和align-content有相同的功能，不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

十九、box-sizing的有效值以及所对应的盒模型规则

盒模型是css的基石之一。页面上的每一个元素都被看做一个矩形框，这个框由元素的内容、内边距、边框、外边距组成。

外边距是透明的，一般使用它来控制元素之间的间隔。

box-sizing属性可以定义要使用哪种盒模型。

box-sizing: content-box | border-box;

content-box: width = 内容的宽度；height = 内容的高度；宽度和高度的计算值都不包含内容的边框（border）和内边距（padding），是默认值，标准盒子模型。 如果你设置一个元素的宽为100px，那么这个元素的内容区还有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素的宽度中。

border-box: width 和 height 属性包括内容，内边距和边框，但是不包括外边距。属于IE盒模型。 尺寸的计算公式： width = border + padding + 内容的宽度; height = border + padding + 内容的高度;

二十. img标签的默认间隙问题

问题：这个是浏览器的一个设计问题

1.上下间距问题
2.左右间距问题
3.四周间距问题

1.上下间距问题
1.1 对img加上 vertical-align: top 或者 vertical-align: bottom 属性，但此属性只能解决图片产生的上下默认边距问题。
img {
    vertical-align: top; // 或 vertical-align: bottom;
}
1.2 对父元素 div 加上 line-height: 0; 属性，但此属性只能解决图片产生的上下默认边距的问题。
div {
    line-height: 0;
}

2.左右间距问题
2.1 产生左右默认间距的问题是由于代码换行问题识别而产生，可以在img代码后加注释进行连接。
2.2 代码不换行（不建议使用）
2.3 float来解决，或者将img ，display：block； 但此时则会出现img换行问题又得继续进行float操作！（如div没设置高度，同时还会此时高度塌陷的问题！高度塌陷可以用其他方式来解决）

3.四周间距问题
3.1 在父元素上加上 font-size ： 0；能同时解决四周所产生的边距问题！（但在父元素下同时存在文本的情况下，这需要单独对文本进行 font-size 声明大小！）

div {
    font-size: 0; // 也可以解决div中img标签不垂直居中的问题
}

3.2 用float来解决
img {
    float: left;
}

参考

二十一. 代码实现左边div宽度100px,右边自适应的布局

方法一：float

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.layout {
    background: yellow;
}
.layout .left {
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
.layout .right {
    height: 100px;
    background: blue;
    // overflow: auto; 如果左右高度不一致，可用此属性触发BFC
}
</style>

效果如下：

方法二：flex

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.layout {
    background: yellow;
    display: flex;
}
.layout .left {
    flex: none; // flex-grow: 0; flex-shrink: 0; flex-basis: auto;
    width: 100px;
    height: 100px;
    background: red;
}
.layout .right {
    height: 100px;
    background: blue;
    flex: 1;
}
</style>

效果如下：

方法三：table

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.layout {
    background: yellow;
    display: table;
}
.layout .left {
    display: table-cell;
    width: 100px;
    height: 100px;
    background: red;
}
.layout .right {
    display: table-cell;
    height: 100px;
    background: blue;
}
</style>

方法四：css计算宽度

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.layout {
    background: yellow;
}
.layout .left {
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
.layout .right {
    float: right;
    height: 100px;
    background: blue;
    width: calc(100% - 100px)
}
</style>

二十一. margin的auto的真正含义

auto 可以理解为自动、自适应的概念

margin: 0 auto;
就是上下边距为0，左右变为为auto，就是自动适应。

margin-left: auto;
就是左侧自适应，如果右侧为0，则会居右。和float: right;效果相同。
  1. margin同级元素之间应用

margin在水平方向的值不会合并，竖直方向的边距会合并（等于外边距中较大的一个）。

另： 当一个元素同时设置了 margin-top 和 margin-bottom,但是内容为空，那么这两个margin值也会叠加，值为两者最大的一个，它类似与竖直方向上两个盒子margin值的叠加。

  1. margin在父元素和子元素之间的应用

2.1 在子元素中设置水平方向的margin值，margin-left、margin-right。 在子元素中设置margin-left，其值实际上是子元素的左边框距离父元素左padding内侧的距离。

2.2 在子元素中设置竖直方向的margin值，我们希望子元素的上部距离父元素的上部为100px，可是我们看到的却是父元素的上部距离浏览器页面的上部有100px的距离，这是为什么呢？哪里出现问题了呢？实际上这是因为当父元素没有设置padding值以及border值时，出现了一个bug--父元素的上方与子元素的上方完全重合在了一起，无法分开。所以才会导致上述这种父元素和子元素同时向下的情况。

对于这种问题解决方法有下面几种：

  • 方法一：给父元素添加padding-top值;
  • 方法二：给父元素添加border值;
  • 方法三：给父元素添加属性overflow:hidden;
  • 方法四：给父元素或者子元素声明浮动float;
  • 方法五：使父元素或子元素声明为绝对定位：position:absolute;
  • 方法六：给父元素添加属性 overflow:auto; positon:relative;
  1. margin值的单位为%

3.1 如果margin值是以%为单位，实际上这个时候百分比（%）是相对于该元素的父元素（容器）的宽度，相对于同级元素和父子元素都是如此。 同级元素之间在竖直方向上使用margin，当值的单位为%时，也是相对于父元素的宽度。

3.2 父子元素使用值为%的margin。对于父子元素，如果在子元素中使用单位为% margin，那么这个marign值是相对于父元素的宽度和高度。 例如我设置了margin-left的值为20%，margin-top的值为20%，父元素的width为500px,父元素的height为300px.此时margin-left和margin-top都为100px，因此子元素的marign-top值最终同样是相对于父元素的宽度而非高度。

参考

二十二. em

.div {
    font-size: 1.2em;
    line-height: 1.5em;
}
// 若父元素字体大小为10px，则div的字体大小为12px，行高为18px,以当前元素的 font-size 为准。

font简写规则 font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: normal; font-stretch: normal; font-size: 2em; line-height: 2em; font-family: Arial;

<div style="font-size: 10px">
  <p style="font: 2em/2em Arial">测试</p>
</div>
// p标签的font-size为20px，line-height为40px；

font: 2em/2em Arial等同于
font-size: 2em;
line-height: 2em;
font-family: Arial;

  1. line-height与font-size存在什么关系

line-height如果为em或1.2等则继承自身font-size，1.5em则为字体大小的1.5倍

  1. line-height与所属元素的height有什么关系

height为元素的高度，line-height为内部字体的行高

二十三、自定义滚动条

webkit内核浏览器自定义滚动条样式

以垂直方向的滚动条为例：

overflow-y: scroll;
整个滚动条
::-webkit-scrollbar {
    width: 5px;
}

滚动条的轨道
::-webkit-scrollbar-track {
    background-color: #ffa336;
    border-radius: 5px;
}

滚动条的滑块
::-webkit-scrollbar-thumb {
    background-color: #ffc076;
    border-radius: 5px;
}

做出的滚动条如下：

IE浏览器自定义滚动条样式

IE的滚动条可以自定义的样式相比较来说就少了许多，只能控制各个部分显示的颜色，定制性比较低。

滚动条三角箭头的颜色: scrollbar-arrow-color

滚动条上滚动滑块颜色: scrollbar-face-color

滚动条轨道、按钮背景的颜色: scrollbar-track-color

滚动框上滑块边框的颜色: scrollbar-shadow-color

符： 控制滚动条的显示和隐藏

上面我们提到，设置y轴的滚动条，可以用以下的属性。

overflow-y: scroll;

但是问题来了，如果高度没有超过一定的限制，比如当高度超过200px时显示滚动条，当高度小于200px时隐藏滚动条，此时该怎么做呢？你是不是想到了用js来控制？jquery演示如下：

// 判断滚动条是否展示
  function scrollHide () {
    if ($('ul>li').length < 3) {
      $('ul').css('overflow-y','hidden')
    }
  }

你以为上面的方法就解决了问题，但是...

overflow-y: auto;

只需要把overflow-y: scroll;变为overflow-y: auto;就解决了上面的问题...你还在用js来控制吗？

二十四、checkbox妙用

checkbox用的好，js代码肯定少。 今天有这样一个需求，点击右侧的箭头（至于箭头是怎么用css实现的，自己google），展示全部的文字，多次点击可以来回切换。本来以为用几行js实现以下这个效果就可以了。细细一想，觉得有点low，还是用css来实现吧。

第一步：DOM结构

<div class="model">
  <input class="arrow" type="checkbox" value="" />
  <p class="model-text">
    孔子曰："诗三百，思无邪。不学诗，无以言"，诗三百指的就是中国古代第一部诗歌总集《诗经》。
    《诗经》最初称《诗》，汉武帝始称《诗经》，收集了自西周初年到春秋中期各地的诗歌，诗的作者
    已无考，传由尹吉普采集，孔子编选。《诗经》共计311首诗，分为风雅颂三部分，其中6篇为笙诗。
  </p>
</div>

第二部：SCSS

.model {
    width: 462px;
    margin: 10px auto 0;
    display: flex;
    justify-content: space-between;
    .model-text {
      width: 440px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      order: -1;
    }
    .arrow {
      margin-top: 4px;
      width: 0;
      height: 0;
      border-top: 12px solid #999999;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-bottom: 9px solid transparent;
      cursor: pointer;
      -webkit-appearance: none;
      outline: none;
      transition: 0.2s all ease-in-out;
      transform: rotate(0);
      transform-origin: 9px 6px;

      &:checked {
        transform: rotate(180deg);
        & + .model-text {
          display: inherit;
        }
      }
    }
  }

这样，在没有js的情况下就实现了点击箭头来隐藏和展示文字的效果。

总结：

  1. input标签要写在p标签的前边，方便在css中使用 + 号选择器，代表紧邻在input标签后的所有p标签。
  2. 在使用flex的时候，p标签要使用 order: -1;(order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。)或者使用 flex-direction: row-reverse;(row-reverse：主轴为水平方向，起点在右端。)

二十五、让 HTML 识别 string 里的 '\n' 并换行

html 识别不了 '\n',只要一行代码就可以达到这种效果了：

white-space: pre-line;

相关文档：developer.mozilla.org/zh-CN/docs/…

二十六、径向渐变radial-gradient

实现代码

background: radial-gradient(circle at left center, transparent 4px, #ff5353 0) top left/51% 100% no-repeat, radial-gradient(circle at right center, transparent 4px, #ff5353 0) top right/51% 100% no-repeat;

<position>、 <shape>、 <size>、 <color-stop> 其参数：<position>、 <size>、 <color-stop>对应为circle at left center、transparent 4px、#ff5353 0,含义为左侧的圆形，为4px的透明色，其余地方的颜色为#ff5353

span {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 4px;
  background:
    radial-gradient(circle at left  center, transparent 4px, #ff5353 0) top left/51%  100% no-repeat,
    radial-gradient(circle at right center, transparent 4px, #ff5353 0) top right/51% 100% no-repeat;
}

解析：

  • 1.border-radius: 4px将span标签形成4px的圆角。
  • 2.我们指定的形状是一个圆形circle，形状不受外部容器尺寸影响。将整个span铺满。circle at left center圆心的位置在左侧和垂直方向中心的位置。
  • 3.transparent 4px圆心为4px的透明色。
  • 4.#ff5353为外层的色值,渐变为 0，即没有过度颜色，不会从transparent过度到#ff5353,而是直接显示#ff5353。

参考：www.zhangxinxu.com/wordpress/2…

developer.mozilla.org/zh-CN/docs/…

二十七、box-shadow中模糊距离和阴影扩散半径的区别

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 12px 12px 0px 10px rgba(0, 0, 255, .2);

阴影模糊半径为0，阴影扩散半径为0时的效果：

box-shadow: 12px 12px 0px 0px rgba(0, 0, 255, .2);

阴影模糊半径为0，阴影扩散半径为10时的效果：

box-shadow: 12px 12px 0px 10px rgba(0, 0, 255, .2);

阴影模糊半径为10，阴影扩散半径为0时的效果：

box-shadow: 12px 12px 10px 0px rgba(0, 0, 255, .2);

总结：

相同点：都会产生额外的长度区域。

不同点：模糊半径产生的额外长度区域带有模糊效果。而阴影扩散半径只是在原有的基础上扩散了半径，没有模糊效果。

二十八、渐变文字效果实现

  1. 使用background-clip + text-fill-color实现
<h1 class="text-gradient">Hello World</h1>

.text-gradient {  
    display: inline-block;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#FFBECF));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
};
  1. 使用mask-image属性
<h1 class="text-gradient">Hello World</h1>

.text-gradient {  
    display: inline-block;
    position: relative; 
}  
  
.text-gradient[data-text]::after {  
    content: attr(data-text);  
    color: #FFBECF;  
    position: absolute;  
    left: 0;  
    z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#FFBECF));

参考： www.zhangxinxu.com/wordpress/2…

二十九、<a>标签套<img>标签时，元素底部有空白

如上图，<a>标签套<img>标签，<img>的高度只有160px，但<a>标签的高度却有167px.

<a>标签是inline的，框模式是：行内框。行内框没有包含图片的表现，<img>的标签就好像放在一条公路上一样。要想让<img>能想放进一个盒子一样，就要使用块级框。如：

display: block;
或
display: inline-block;

<img>标签底下有空白，是因为“基线（baseline）”导致的。参考链接：www.zhihu.com/question/21…

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。vertical-align属性可被用于两种环境：1. 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本的内的图片<img> 2.垂直对齐表格单元内容 参考文档：developer.mozilla.org/zh-CN/docs/…

实际上，

  1. inline 的图片下面那一道空白正是 baseline 和 bottom 之间的这段距离。即使只有图片没有文字，只要是 inline 的图片这段空白都会存在。

  2. top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline与 bottom 之间的距离也变为0，那道空白也就不见了。

  3. 如果没有设置 line-height，line-height 的默认值是基于 font-size 的，视渲染引擎有所不同，但一般是乘以一个系数（比如1.2）。因此，在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然，这样做的后果就是不能图文混排了。

解决办法：

1. 处理基线

a {display: block;}
img {vertical-align: bottom;}

2. 强行去掉<a>标签行高
a{display: block;line-height: 0;}

3. 没有设置行高的时候可以去掉字体大小
a{display: block;font-size: 0;}

三十、div中多个span、img等元素水平居中

div {
    vertical-align: middle;
}
span {
    vertical-align: middle;
}
img {
    vertical-align: middle;
}

三十一、word-break

可选值

word-break: break-all;效果： 实际文案： Car & Motorbike

word-break: break-word;效果：

其它属性值：unset、 inherit、 initial、 keep-all、 normal

三十二、CSS的inherit、initial、unset

从字面上来理解：

inherit: 继承

initial: 初始值

unset: 不固定值、未设定

inherit

inherit是继承的意思，即继承父类的css属性，从IE8（标准版）开始支持。子元素height:inherit或者背景background继承等，都是非常实用的场景。

initial

initial表示初始值的意思。

如果是按钮使用了style="all: initial",会把浏览器内置按钮的CSS也全部变成初始值了，border边框，background背景全部都没了，结果最后就是一个纯文本一样的按钮。

unset

unset表示不固定值，特性如下，当前元素浏览器或用户设置的css忽略，然后如果是具有继承特性的css，如color，则使用继承值；如果是没有继承特性的css属性，如background-color，则使用初始值。

参考文章：www.zhangxinxu.com/wordpress/2…

三十三、为什么img、input等内联元素可以设置宽高

因为<img>、<input>属于替换元素，替换元素一般有内在尺寸和宽高比(auto时起作用)，所以具有width和height，可以设定。

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如<div>和<span>就不同，而<strong>和 <p>也不一样。

1. 替换和不可替换元素

从元素本身的特点来讲，可以分为替换和不可替换元素。

替换元素

替换元素 : 浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来;根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。HTML中的<img>、<input>、<textarea>、<select>都是替换元素。这些元素往往没有实际的内容，即是一个空元素,浏览器会根据元素的标签类型和属性来显示这些元素。

不可替换元素

HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。

例如<p>段落的内容</p>，段落<p>是一个不可替换元素，文字“段落的内容”全被显示。

2.块级和行内元素

除了可替换元素和不可替换元素的分类方式外，CSS2.1中元素还有另外的分类方式：块级元素（block-level）和行内元素（inline-level，也译作“内联”元素）。

块级元素

在视觉上被格式化为块的元素，最明显的特征就是默认在横向充满其父元素的内容区域，而且在其左右两边没有其他元素，即独占一行。

典型的块级元素有：<div>、<p>、<h1>到<h6>，等等；通过CSS设定了浮动（float属性）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。但是浮动元素比较特殊，由于浮动，其旁边可能会有其他元素的存在。而“list-item”（列表项<li>），会在其前面生成圆点符号，或者数字序号。

行内元素

行内元素不形成新内容块，即在其左右可以有其他元素。

例如<a>、<span>、<strong>等，都是典型的行内级元素。display属性等于“inline”的元素都是行内元素。

结语

  1. 几乎所有的替换元素都是行内元素，例如<img>、<input>等等。不过元素的类型也不是固定的，通过设定CSS 的display属性，可以使行内元素变为块级元素，也可以让块级元素变为行内元素。
  2. 替换元素一般有内在尺寸，所以具有width和height，可以设定。例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度。对于表单元素，浏览器也有默认的样式，包括宽度和高度。
  3. inline元素默认是基线对齐的 vertical-align=baseline

三十四、css巧妙实现带圆角的三角形

最终效果如上图所示,实现思路(使用伪元素实现)：

  1. 实现一个正方形。本例为：width: 60px;height: 60px;
  2. 实现圆角。本例为：border-radius: 6px;
  3. 旋转、形变。本例为：transform: rotate(46deg) skew(10deg, 10deg);
  4. 将超出的部分隐藏。overflow: hidden;
price-label {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    height: 100px;
    width: 400px;
    border-radius: 6px;
    background: linear-gradient(
      90deg,
      rgba(45, 45, 45, 1) 0%,
      rgba(70, 70, 70, 1) 100%
    );
    &::before {
      position: absolute;
      left: -25px;
      content: '';
      display: inline-block;
      width: 60px;
      height: 60px;
      border-radius: 6px;
      background: rgb(45, 45, 45);
      transform: rotate(46deg) skew(10deg, 10deg);
    }
  }
avatar
文章
阅读
粉丝
相关推荐
下一代 CSS 框架：Mojo CSS
22k阅读
 · 
85点赞
前端知识点查缺补漏之CSS篇
503阅读
 · 
11点赞
中级前端必备知识点
12k阅读
 · 
319点赞
CSS 还原拉斯维加斯球数字动画
37k阅读
 · 
339点赞
React&Vue 系列：CSS 知识要点
1.1k阅读
 · 
8点赞
重学 CSS
8.3k阅读
 · 
143点赞
2023不得不看CSS知识点(巨详细)
4.2k阅读
 · 
73点赞
项目进度类知识要点
2.1k阅读
 · 
4点赞
HTML、CSS知识点整理
465阅读
 · 
2点赞
CSS In 2023
17k阅读
 · 
242点赞

友情链接：