css必备知识点-CSDN博客

一、在一个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 （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
复制代码

逻辑操作符

not and only

在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)

写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。

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

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

十八、`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;
}

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;效果相同。

复制代码

margin同级元素之间应用

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

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

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;

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;

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

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

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

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

css必备知识点

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

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

三、使用flex布局

四、多行文字垂直居中

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

六、省略号

七、vertical-align: middle;

八、cursor的url属性

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

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

十二.修改全站字体

十三.px

十四. 媒体查询

十五、box-shadow

十六、scss中的@mixin与@function

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

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

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

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

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

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

二十二. em

十六、scss中的`@mixin`与`@function`

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

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

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