css面试知识点合集以及链接

原创 于 2021-07-27 23:16:15 发布 · 306 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

css面试知识点合集以及链接

层叠样式

<!DOCTYPE html>
<html>
    <head>
        <style>
            .red {
                color: red
            }

            .blue {
                color: blue
            }
        </style>
    </head>
    <body>
        <div class="red blue">123</div>
        <div class="blue red">123</div>
    </body>
</html>

上面代码的文字颜色均为蓝色。

position（共7个属性）

  • 属性值：

    • static: 默认值。没有定位，元素出现在正常的流中（忽略top,bottom, left, right或者z-index声明）

    • fixed：生成固定定位的元素，相对于浏览器窗口进行定位

    • relative: 生成相对定位的元素，相对于其正常位置进行定义。元素的位置通过left、top、right、bottom属性进行规定。

    • absolute: 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left、top、right、bottom属性进行规定。

    • sticky：粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative； 而当页面滚动超出目标区域时，它的表现就像 position:fixed：它会固定在目标位置。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。【 Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。】

      • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

    • inherit：规定应该从父元素继承position属性的值。

    • initial:设置该属性为默认值。

  • 子绝父相，子样式可以生效。

文档的布局（盒模型、flex布局）

css盒模型的理解，CSS基础框盒模型介绍
  • 当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的CSS基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子。CSS决定这些盒子的大小、位置以及属性。边距，边框，填充，和实际内容。
  • 宽度的计算：
    • 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
    • IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    • 解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。DOCTYPE声明：浏览器使用W3C的标准解析渲染页面。
      在这里插入图片描述
Flex布局语法教程, 30分钟彻底弄懂flex布局

  • 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。

  • Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。主要有flex，inline-flex两种。注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

  • 基本概念

    • 利用flex布局的元素，成为Flex的容器（flex container），它的所有子元素自动成为容器成员，成为flex项目（flex item）。
    • flex默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认沿主轴排列。

  • 容器的属性

    • 6个属性设置在容器上：flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
    • flex-direction: row | row-reverse | column | column-reverse
    • flex-wrap: 默认情况下，项目都排在一条线（又称轴线）上。flex-wrap属性定义，如果一条轴线排不下，该如何换行。
      • flex-wrap: nowrap（默认） | wrap | wrap-reverse;
        1. nowrap:默认不换行
        2. wrap：换行，第一行在上方
        3. wrap-reverse：换行，第一行在下方
    • flex-flow: 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
      • flex-flow: <flex-direction> <flex-wrap>
    • justify-content：定义了项目在主轴上的对齐方式
      • justify-content: flex-start（默认） | flex-end | center | space-between | space-around
    • align-items：定义项目在交叉轴上如何对齐。
      • align-items: flex-start | flex-end | center | baseline | stretch(默认，占满整个高度)
    • align-content: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
      • align-content: flex-start | flex-end | center | space-between | space-around | stretch(默认)

  • 项目的属性

    • 6个属性：order, flex-grow, flex-shrink, flex-basis, flex, align-self

    • order: 定义项目的排列顺序，数值越小，排列越靠前。

      • order: <integer>

    • flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

      • flex-grow: <number>
      • 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目得flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

    • flex-shrink:定义了项目的缩小比例，默认为1，即如果空间不足，该项目会被缩小

      • flex-shrink: <number>; /*default 1*/

    • flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否又多余空间。它的默认值为auto，即项目的本来大小。

      • flex-basis: <length> | auto; /* default auto */

    • flex：是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选

      • 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)，auto表示所有项目会占满整个空间，none表示用原始大小，不放缩。

      • flex：n

        flex-grow：n；
flex-shrink：1；
flex-basis：0%；

    • align-self: 允许单个项目由与其他项目不同的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

      • align-self: auto | flex-start | flex-end | center | baseline | stretch
CSS实现水平垂直居中的n种方式

概述：

  • 仅居中元素定宽定高适用：absolute + 负margin，absolute + margin auto，absolute + calc
  • 居中元素不定宽高：absolute + transform, line-height, writing-mode, table, css-table, flex, grid
定宽定高

公共代码：

/* 公共代码 */
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}
/* 公共代码 */
  1. absolute + 负margin：
/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
  1. absolute + margin auto（这种方法兼容性也很好，缺点是需要知道子元素的宽高）
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
  1. absolute + calc （这种方法兼容性依赖calc的兼容性，缺点是需要知道子元素的宽高）
/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}
居中元素不定宽高
  1. absolute + transform：修复绝对定位的问题，还可以使用css3新增的transform，transform的translate属性也可以设置百分比，其是相对于自身的宽和高，所以可以讲translate设置为-50%，就可以做到居中了。这种方法兼容性依赖translate2d的兼容性+++
/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

  1. writing-mode:

    • writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

      horizontal-tb: 水平方向自上而下的书写方式。

      vertical-lr: 垂直方向内容从上到下，水平方向从左到右。

/* 定位代码 */
.wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}
  1. table：单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了
<table>
    <tbody>
        <tr>
            <td class="wp">
                <div class="box">123123</div>
            </td>
        </tr>
    </tbody>
</table>

.wp {
    text-align: center;
}
.box {
    display: inline-block;
}
  1. css-table
<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}
  1. flex：推荐
<div class="wp">
    <div class="box">123123</div>
</div>

.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}
  1. grid：css新出的网格布局，由于兼容性不太好，一直没太关注，通过grid也可以实现水平垂直居中。代码量也很少，但兼容性不如flex，不推荐使用。
<div class="wp">
    <div class="box">123123</div>
</div>

.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

总结：

下面对比下各个方式的优缺点，肯定又双叒叕该有同学说回字的写法了，简单总结下

  • PC端有兼容性要求，宽高固定，推荐absolute + 负margin
  • PC端有兼容要求，宽高不固定，推荐css-table
  • PC端无兼容性要求，推荐flex
  • 移动端推荐使用flex
css常见的布局方式（五大布局），只了解了flex
一、 单列布局

  • header,content和footer等宽的单列布局

  • header与footer等宽，content略窄的单列布局

  • <div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div> 
.header{ 
 margin:0 auto; 
 max-width: 960px; 
 height:100px; 
  
} 
.content{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 400px; 
  
} 
.footer{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 100px;  
}
二、两列自适应布局

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

//html部分同上 
.parent { 
display:flex; 
} 
.right { 
margin-left:20px; 
flex:1; 
}
三、三栏布局

特征：中间列自适应宽度，旁边两侧固定宽度，实现三栏布局有多种方式：

 <style> 
 .layout.flexbox .left-center-right{ 
 display: flex; 
 } 
 .layout.flexbox .left { 
 width: 300px; 
 background: red; 
 } 
 .layout.flexbox .center { 
 background: yellow; 
 flex: 1; 
 } 
 .layout.flexbox .right { 
 width: 300px; 
 background: blue; 
 } 
 </style>

 <h1>三栏布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>flexbox解决方案</h2> 
 1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
 </div> 
 <div class="right"></div> 
 </article>
四、等高列布局？？？

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。

五、粘连布局

特点

  • 有一块内容，当的高康足够长的时候，紧跟在后面的元素
    会跟在元素的后面。
  • 当元素比较短的时候(比如小于屏幕的高度),我们期望这个
    元素能够“粘连”在屏幕的底部

主要的部分设置高度和填充内容：min-height:100%;padding-bottom: 50px;

margin-top:-50px;

<html>
<head>
    <style type="text/css">
        #wrap { 
            min-height: 100%; 
            background: pink; 
            text-align: center; 
            overflow: hidden; 
        } 
        #wrap .main { 
            padding-bottom: 50px; 
        } 
        #footer { 
            background: deeppink; 
            text-align: center; 

            height: 50px; 
            line-height: 50px; 
            margin-top: -50px; 
        } 
    </style>
</head>
<body>
    <div id="wrap"> 
        <div class="main"> 
            <div>123124313</div>
            <div>123124313</div>
        </div> 
    </div>
    <div id="footer">footer</div> 
</body>
</html>

h5适配各种设备

  • css的px等于设备中的很多px
  • rem是相对于根元素的字体大小。
移动端1px解决方案
  • 1.使用meta标签对viewport进行设置达到1css像素等于1个设备像素 以dpr为2为例。meta标签中写入meta name="viewport" content="width=device-width,initial-scale=0.5,max-scale=0.5,min-scale=0.5">，主要是宽度
  • 2.将屏幕分为固定的块数10：作为1rem所代表的px值 ,并给html设置font-size为这个值

BFC (Block fomatting context)

定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

  • Box：css布局的基本单位：block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
  • Formatting Context：最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
  • BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC的布局规则

  • 内部的Box会在垂直方向，一个接一个地放置。

  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

  • 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

  • BFC的区域不会与float box重叠。

  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

  • 计算BFC的高度时，浮动元素也参与计算。

创建BFC
  • 1、float的值不是none。
  • 2、position的值不是static或者relative。
  • 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  • 4、overflow的值不是visible
BFC的作用

1.利用BFC避免margin重叠。

2.自适应两栏布局

3.清除浮动。

总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

CSS预处理

CSS:Cascading Style Sheet-级联样式表.

基本语法和核心机制一直没有本质上的变化，如今网站的复杂度已经不可同日而语，原生 CSS 已经让开发者力不从心。

  • sass
  • less
  • stylus

优点：主要特性：变量（variables），代码混合（ mixins），嵌套（nested rules）以及 代码模块化(Modules)。

缺点：额外的编译配置，编译成本，学习成本，调试。

回归CSS

CSS 自定义属性（CSS Custom Properties)，又叫 CSS 变量（CSS Variable）,允许你自己在样式中声明变量，并通过 var() 函数使用。

/* declaration */
--VAR_NAME: <declaration-value>;
/* usage */
var(--VAR_NAME)

/* root element selector (global scope), e.g. <html> */
:root {
  /* CSS variables declarations */
  --main-color: #ff00ff;
  --main-bg: rgb(200, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}

body {
  /* use the variable */
  color: var(--main-color);
}

直接通过 JS 获取变量值并进行修改：

//GET
getComputedStyle(document.documentElement).getPropertyValue('--color-border')
//SET
document.documentElement.style.setProperty('--color-border', 'custom');
Custom Theme

使用 CSS 变量，定制和动态切换网站主题非常简单方便：

首先定义好不同主题下的变量，然后正常书写样式即可。

html {
  --hue: 210; /* Blue */
  --text-color-normal: hsl(var(--hue), 77%, 17%);
  ...
}
html[data-theme='dark'] {
  --text-color-normal: hsl(var(--hue), 10%, 62%);
  ...
}

通过 JS 改变元素属性，动态切换主题：

document.documentElement.setAttribute('data-theme', 'dark')
document.documentElement.setAttribute('data-theme', 'light')

css实践

.box2{ 
    width: 30%;
    height: 0;
    padding-bottom: 30%;
}

.box2{ 
    width: 30vw;
    height: 30vw;
}

  • div，画一个正三角形，填充满。, 纯 CSS 实现绘制各种三角形（各种角度）

    • 均使用border完成，考察的是对盒模型的理解。

    • <html>
    <head>
        <style>
            .tri {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 100px 100px 100px 100px;
                border-color: red green blue yellow;
            }
        </style>
    </head>
    <body>
        <div class="tri"></div>
    </body>
</html>

    • 显示如图所示：在这里插入图片描述

    在这里插入图片描述

    • 更多的显示效果：

    • <html>
    <head>
        <style>
            .tri {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 100px 100px 100px 100px;
                border-color: red green blue yellow;
            }

            .tri2 {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 100px 100px 100px;
                border-color: transparent transparent blue transparent;
            }

            .tri3 {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 100px 100px 0 0;
                border-color: red transparent transparent transparent;
            }

            .tri4 {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 100px 100px 0 5px;
                border-color: red transparent transparent transparent;
            }
        </style>
    </head>
    <body>
        border的样式：
        <div class="tri"></div>

        上三角：
        <div class="tri2"></div>

        下三角（直角）：
        <div class="tri3"></div>


        下三角（锐角）：
        <div class="tri4"></div>
    </body>
</html>

在这里插入图片描述

CSS动画

基础属性讲解

animation的子属性有：

  • animation-delay: 设置延迟，即从元素加载完成之后到动画序列开始执行的这段事件
  • animation-direction: 运行完成后是反向运行还是重新回到开始位置重复运行
  • animation-duration: 设置动画一个周期的时长
  • animation-name: 指定由@keyframes描述的关键帧名称
  • animation-iteration-count: 设置动画重复次数，可以指定infinite无限次重复动画

animation-play-state

允许暂停和恢复动画。

animation-timing-function

设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。

animation-fill-mode

指定动画执行前后如何为目标元素应用样式。

画0.5px的线

height: 1px;
transform: scaleY(0.5);

<!DOCType html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .hr {
            width: 300px;
            background-color: #000;
        }
        .hr.half-px {
            height: 1px;
            transform: scaleY(0.5);
            transform-origin: 50% 100%;
        }
        .hr.one-px {
           height: 1px;
        }
    </style>
</head>
<body>
    <p>0.5px</p>
    <div class="hr half-px"></div>
    <p>1px</p>
    <div class="hr one-px"></div>
</body>
</html>

页面滑动

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值