CSS易忘知识点

lxyyyyyyy
229 阅读11分钟

伪类与伪元素

  • 什么是伪类？

伪类是选择器的一种，用于给 不能用简单的选择器表示的信息 或 元素的不同状态 设置样式

  • 有哪些常见的伪类？

:first-child、:last-child、:nth-of-type(n) 等

行为状态伪类：:link、:visited、:hover、:active 等

  • 伪类的使用场景
  1. 一些不能用简单选择器表示的信息，比如选择文本的第一行添加样式。一段文本信息如下，
.first{
    color:red
}

<div>
    <p>第一行</p>
    <p>第二行</p>
    <p>第三行</p>
    <p>第四行</p>
</div>

此时一个需求是给第一行文字添加样式为红色，如果为第一个p标签添加class，并且设置样式，如果文档头部需要新增一个p标签，就需要再次改动class。

.first{
    color:red
}

<div>
//段落开头新增一个p标签，需要再次设置class达到第一行为红色的效果
    <p>新增的第一行</p>
    <p class = 'first'>第一行</p>
    <p>第二行</p>
    <p>第三行</p>
    <p>第四行</p>
</div>

如果使用伪类，可以选择div元素下的第一个子元素，设置样式。使用:first-child达到效果

div p:first-child{
    color:red
}

<div>
    <p>新增的一行</p>
    <p>第一行</p>
    <p>第二行</p>
    <p>第三行</p>
    <p>第四行</p>
</div>
  1. 为元素不同状态设置样式，为a标签分别设置未访问状态，已访问状态，鼠标悬停状态和激活状态
    /* 未访问 */
a :link{
    color:red
}
    /* 已访问 */
a :visited{
    color:green
}
    /* 悬停 */
a :hover{
    color:blue
}
    /* 激活 */
a :active{
    color:yellow
}

<a></a>
  • 什么是伪元素？ 伪元素是用于创建一些文档中不存在的元素，并且设置样式。
  • 有哪些常见的伪元素 ::before、::after、::first-letter、::first-line
  • 伪元素的使用场景
  1. 文本的第一个字母添加样式（大写、加粗等等。。）
  2. 清除浮动。
  • 伪类与伪元素的区别
  1. 伪类是基于现有的元素，设置样式，不创建新的元素。伪元素会创建文档中不存在的元素，设置样式
  2. 书写方式。按照规范，:和::的区别。
  3. 可以同时使用多个伪类，同时只能使用一个伪元素

盒模型与box-sizing

  • 标准盒模型 标准盒模型，content-box，按照W3C标准的盒模型。 宽高属性设置的为内容区域content，不包含padding border margin
  • IE盒模型 IE盒模型，border-box 宽高属性设置的为包含border，padding和内容区域。
  • box-sizing box-sizing为css3新出现的属性，可以设置为content-box,border-box,inherit

使用哪种盒模型可以自行设置

BFC

  • 什么是BFC BFC使块级格式化上下文
  • BFC作用 BFC的作用是形成一个独立的渲染区域，内部元素的渲染不会影响外界
  • BFC使用场景
  1. 清除浮动
  2. 块元素上下边距重叠
  3. 高度塌陷
  • 如何开启BFC
  1. float不为none的浮动元素（影响布局
  2. 绝对定位元素，position为absolute（影响布局
  3. display设置为inline-block,flex,grid。
  4. overflow不为visible
  • 最好的BFC方式 = overflow：hidden
    • 其他方式会影响布局

清除浮动

  • 为什么要清除浮动 父元素因为子元素需要设置浮动引起的高度塌陷。父元素的高度需要子元素撑开，子元素脱离了文档流，父元素就不会被撑开。
    • 父元素需要子元素的高度撑开，但是里面所有的子元素都浮动，脱离文档流，这时父元素的高度就无法被撑开。
  • 如何清除浮动，以及原理
  1. 开启BFC（块级格式化上下文）给父元素设置overflow：hidden。 BFC所在的区域形成了独立的渲染区域，开启了BFC的元素不会影响外部的布局。
  2. 在浮动元素后面添加一个块级空元素。空元素设置clear:both清除浮动。浏览器从这个位置起就会清除浮动，因此父元素的高度会被撑开。
  3. 添加伪元素。和添加空元素的原理一样，在浮动元素的后面添加伪元素。子元素::after。设置content为空，并且使用clear:both清除浮动，设置display:block。这种方法不会产生大量空元素。

选择器优先级

0级：*通配选择器

1级：标签和伪类

2级：class

3级：id

4级：行内样式

5级：！important

min-width、max-width、width

max-width<width:显示max-width

width<max-width:显示width

min-width>width:显示min-width

width>min-width:显示width

position可以取哪些值？

  • static：默认。
  • relative：相对定位。相对于默认位置进行偏移（定位基点是元素的默认位置），也就是相对于自己的起点进行移动。
  • absolute：绝对定位：相对于父元素设置了relative的进行定位，如果父元素没有设置就向上寻找最近的设置relative的祖先元素。
  • fixed：固定定位。相对于视口（浏览器窗口）（viewport）进行偏移，定位基点是浏览器窗口，即使窗口滚动也不会移动。与文档流无关，与其他元素重叠。
  • sticky：粘滞定位。一些时候是relative相对于自身默认位置，一些时候自动变为fixed定位。
  • inherit：从父元素继承position属性的值。

rem em px vw/vh vmax/vmin

  • px绝对长度单位
  • rem em都是相对长度单位
    • rem相对于html根标签的font-size
    • em相对于父元素
  • vh与vw是相对于网页视口的单位，系统会将视口的宽度和高度分为100份，1vw占视口宽度的百分之一，1vh占视口高度的百分之一
  • 百分比参考的是父元素，vw/vh是以父元素为参考。
  • vmin与vmax。
    • vmin是vw与vh中较小的那个
    • vmax是vw与vh中较大的那个
    • 为了保证移动端开发屏幕旋转后尺寸不变。

CSS有哪几种布局的方式？

  • 单列布局
    • footer，header，content等宽
    • footer，header等宽，content略窄
  • 两栏布局：一列由内容撑开，另一列撑满剩余宽度。利用flex和grid
  • 三栏布局：中间自适应宽度，两侧固定宽度
    • 流体布局：浮动，left左浮动，right右浮动。中间自适应。先加载两侧，再加载中间
    • 圣杯布局：container中包含left center right，设置外侧盒子container的padding从而留出两侧盒子的位置。
    • 双飞翼布局：container中包含center。设置中间盒子center的margin从而留出两侧盒子的位置。
    • flex
    • grid
    • table

响应式布局和媒体查询

  • 响应式布局
    • 响应式布局是网页根据不同的设备，不同尺寸的窗口，显示不同的样式。
    • 特点：适配不同的设备，根据视口调整模块的大小和位置。
  • 实现响应式布局的方式：
    • 媒体查询：利用媒体查询可以根据不同的设备不同的状态分别设置样式。比如为小屏幕的手机设置2X图，大屏幕的手机设置3X图。
    • 百分比：当浏览器的宽高发生变化时，通过百分比，实现随着父元素发生变化。但是会造成布局复杂，不建议使用
    • vw/vh：vw表示相对视口的宽度，系统会将视口平均分为一百份，1vw就是视口宽度的百分之一。任意层级元素，vw都相对于视口。
    • rem。rem是相对于根元素的font-size属性。因此可以利用媒体查询，为不同设备改变html的font-size的值，实现响应式。
    • 或者可以使用框架中的栅格布局grid，实现响应式。

如何判断一个元素是否在可见区域内？

  • 什么场景下需要判断？
    • 图片懒加载
    • 列表的无限滚动 -。。。
  • 实现方式
    • 待续。。

flex布局相关要点：

  • 说一说弹性布局flex：
    • flex布局是弹性布局，可以通过display:flex给容器指定flex布局，容器中的元素就会变成flex项目。flex容器有两根轴，可以通过给容器设置flex-direction指定主轴方向，水平轴交叉轴。
    • 此外用的比较多的就是设置水平居中垂直居中，通过给容器分别设置justify-content和align-items：center实现。当然这两个属性也可以设置头对齐/尾对齐/两端对齐/平均分配等等。。
    • 还可以通过给容器设置gap，设置元素间的间距。
    • 以上是容器可以设置的属性，对于容器中的items，主要有flex-grow，flex-shrink，flex-basis，作用是在容器中的空间有剩余或者空间不足的时候每一个items的缩放比例。此外还可以设置align-self属性，允许单个项目与其他项目有着不一样的对齐方式。
  • 容器
    • display：flex
    • flex-direction：row/row-reverse/column/column-reverse
    • justify-content: center/flex-end/flex-start/space-between(两端对齐）/space-around（1/2空余）/space-evenly(平均分配）
    • align-items：center，flex-end。。。
    • gap：元素间间距
  • item
    • flex
    • flex-grow
    • flex-shrink
  • space-between产生的布局问题怎么解决？
    • 容器设置伪元素::after,等宽0高的伪元素
    • 5列以上在item后添加等宽0高的元素
    • 或者使用grid布局

CSS命名规范

  • BEM命名规范（块__元素--修饰符）
    • Block：块，独立的组件，可以在项目中反复使用，并为子元素提供命名空间
    • Element：元素
    • Modifier：修饰符，元素中处于的特定状态。

text-area如何实现自适应且不出现滚动条？

  • 为了避免输入框的出现可以通过一个div实现，给block元素加上contenteditable属性，实现可以编辑的功能。
  • 使用事件监听input事件，动态的设置输入框的高度为文字内容的高度ScrollHeight。
  • 先把元素隐藏，得到高度后再渲染出来（因为每次获取一次元素的宽高都会引起一次回流，为了减少回流和重绘）

居中对齐的几种方式

实现水平居中对齐

  • 对于行内元素：text-align:center
  • 对于父元素有定宽的元素：子元素设置margin:0 auto
  • 对于块级元素：
    • 可以使用flex实现，父元素设置flex，设置justify-content：center
    • 使用grid实现，父元素设置grid，justify-items：center
    • 水平垂直居中：父元素设置flex，当前元素设置margin：0 auto
    • 水平垂直居中，父元素相对定位，子元素绝对定位，四个方向的偏移都设置成0，margin：auto

实现垂直居中对齐

  • 对于行内元素，设置line-height为等高
  • 可以使用flex实现，父元素设置flex，设置align-items：center
  • 使用grid实现，父元素设置grid，设置align-items：center

如何设置小于12px的文字？

  • 使用webkit-transform
  • 使用zoom

如何绘制一个三角形？

  • 通过border实现：设置一个宽高都是0的box，设置border，在设置border-color，将前面两条边的颜色属性设置为transparent，后两条边的颜色属性设置成任意颜色
  • 通过canvas画布实现
    • 首先需要准备一个静态的canvas容器
    • 获取到这个容器定义一块画布
    • beginPath()开始绘制三角形，
 var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.moveTo(75, 50);
            ctx.lineTo(100, 75);
            ctx.lineTo(100, 25);
            ctx.fill();
        }

flex:1/auto/0/none

  • flex属性是flex-grow,flex-shrink,flex-basis的简写
    • flex-grow代表如果有剩余空间，是否扩大。0为不扩大
    • flex-shrink代表如果剩余空间不够，是否缩小。1为缩小
    • flex-basis为项目本身大小，auto默认为项目内容本身大小。0%为平均分
  • flex的默认值为0 1 auto,意思是不可扩大，可以缩小，项目为内容本身大小不会均分空间。
  • flex:1。表示1 1 0%,意思为可以扩大和缩小，项目不管内容多少都是均分空间。
  • flex:auto。表示1 1 auto,意思是可以扩大和缩小，但是项目本身内容多少就是多少。
  • flex:0。表示0 1 0%，意思是不可扩大但是可以缩小，项目均分。
  • flex:none 表示0 0 auto，意思是不可以扩大也不可以缩小，项目是本身内容大小。

如何设置文字第一行水平居中，第二行居左

  • 通过父元素设置text-align：center，子元素（文字）设置inline-block和text-align:left
  • 通过flex和grid实现：设置文字为display:flex，justify-content：center

动画的实现方式？

  • gif图片
  • animation，动画帧：复杂的动画效果。实现动画不需要触发事件，设定好时间以后可以自己执行
    • 动画帧的名字，一次持续时长，延迟执行时间、。。。
    • @keyframe，通过百分比划分帧，或者使用from和to
  • transition：简单的过渡效果，需要一个触发的事件（比如鼠标移动、点击等）才能执行，只有一组关键帧，开始和结束。
    • 设置的属性：延迟、持续时间、贝塞尔曲线
avatar
文章
阅读
粉丝