css深入研究

徐小夕 等级 401 0 0

学习方法推荐

问题学习法:带着问题去学习,有利于集中注意力,目的明确,这既是有意学习的要求,也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的,必要时需经过意志努力,主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息,使学习有了明确的指向性,从而提高学习效率。

在介绍完问题学习法之后,进入我们今天的主题,接下来我会介绍css的一些底层的知识和比较诡异的现象,借此来让大家对css有更深入的理解。

一.css尺寸

1.首选最小宽度–实现复杂图形效果

在css中,图片和文字的权重远大于布局,因此当width:0时表现出来的宽度就是“首选最小宽度”。 中文的最小宽度为每个汉字的宽度,西方文字取决于连续的英文字符单元。

因此,我们可以跟据这个它特性,去实现一些复杂的图形,如下:

css深入研究 当鼠标经过时,变成了下面的样子:

css深入研究

代码如下:

.minW{
    display: inline-block;
    width: 0
}

.minW::before {
    content: "love 你 love";
    color: transparent;
    outline: 2px solid #cd0000;
}

.minW:hover::before{
    content: "你 love 我";
    color: transparent;
    outline: 2px solid #cd0000;
}

我们会发现,当容器宽度设置为0后,由于首选宽度的影响,出现了基于文字空间的形状。

2.2.子元素宽度设为100%时的奇怪现象原理探究

父元素的宽度 = 图片宽度 + 文字内容宽度
浏览器渲染原理:先下载文档内容,加载头部样式资源,然后按从上到下、自外而内的顺序渲染dom内容。 本例的现象产生的原因就是:当渲染到父元素时,子元素的width:100%并没有渲染,宽度就是图片加文字内容的宽度;等渲染到文字这个子元素的时候,父元素的宽度已经固定,此时的width:100%就是以固定好的父元素的宽度,宽度不够只能溢出。

css深入研究

.box{
    display: inline-block;
    white-space: nowrap;
}
    .text{
    display: inline-block;
    width: 100%;
}

理论上父元素宽度因该是子元素宽度之和,但是却出现了上图的现象,原因归根就在于浏览器渲染的顺序:自外而内,这点十分重要。

3.如何让元素支持height:100%效果

知识点:绝对定位的宽高百分比是基于padding-box的,而非绝对定位的宽高百分比是基于content-box

方法如下:

* 1.设置显示的高度值
* 2.使用绝对定位

4.任意高度元素的展开收起动画(max-height/min-height)

  • 1.min-height/min-width的初始尺寸为auto, max-height/max-width的初始尺寸为none
  • 2.min-height/min-width的优先级高于max-width/max-height

css深入研究

css深入研究

要想实现如上图所示的展开收起动画,就可以使用max-height/min-height:

.nav > .sub-nav{
    max-height: 0;
    overflow: hidden;
    transition: max-height .6s cubic-bezier(.17,.67,.76,1.41)
}
.nav:hover > .sub-nav{
    max-height: 400px;
}

二.内联元素深入探究

常见的内联元素有:display设置为inline,inline-block,inline-table的元素 内联盒模型:

  1. 内容区域:可以理解为文本选中的背景色区域(重点)
  2. 内联盒子:内联标签或者纯文本
  3. 行框盒子:由内联盒子组成的一行,每一行就是一个行框盒子
  4. 包含盒子:由行框盒子组成的盒子 幽灵空白节点:在HTML5文档声明中,内联元素的解析和渲染表现就像每个行框盒子的前面有一个空白节点一样。如下案例所示:

css深入研究

三.深入理解content

1.在web中,很多替换元素在没有明确尺寸设定的情况下,其默认的尺寸(不包含边框)为300*150,如video,iframe,canvas等,少数为0,如img,而表单元素的替换尺寸和浏览器自身有关。

2.对于img元素,如果有css尺寸,则最终尺寸由css尺寸决定(css尺寸 > html尺寸 > 固有尺寸)

3.当图片的src属性缺省时,图片不会有任何请求,是最高效的实现方式,如下展示的是使用此方式的图片占位代码(对于firefox浏览器,src缺省的img是一个普通的内联元素,宽高设置无效):

img { visibility: hidden; }
img[src] { visibility: visible; }

content内容生成技术

1.实现换行

::after{
    content: '\A';
    white-space: pre;
}

2.实现正在加载动画

css深入研究

 .dot{
    display: inline-block;
    width: 8em;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
.dot::after{
    display: block;
    margin-left: 5.2em;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot{
    33% { transform: translateY(-3em);}
    66% { transform: translateY(-2em);}
    99% { transform: translateY(-1em);}
}

3.属性值内容生成

css深入研究

<div class="icon" data-tip="江小白"></div>
/* 可以使用原生属性和自定义属性 */
.icon::after{
    content: attr(data-tip);
}

4.计数器属性---纯css实现技术器效果

css深入研究

css深入研究

css深入研究

.box1{
    counter-reset: count1;
}
.xigua:checked::before{
    content: counter(count1);
    counter-increment: count1;
    position: absolute;
    color: transparent;
}
.box1::after{
    content: counter(count1);
}
</style>
<div class="counter">
    <div class="box1">
        <div>西瓜<input class="xigua" type="checkbox" /></div>
        <div>香蕉<input class="xigua" type="checkbox" /></div>
        <div>萝卜<input class="xigua" type="checkbox" /></div>
    </div>
</div>

四.padding深入研究

1.对于盒模型设置为box-sizing: border-box的元素,如果padding足够大,那么width将失效:

css深入研究

width: 200px;
padding-left: 120px;
padding-right: 120px;
box-sizing: border-box;

2.对于内联元素,padding对视觉层和布局层都会有影响,如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条,否则如果父元素不设置设置overflow,只会在垂直方向上发生重叠,不会影响布局:

css深入研究

/* 父元素设置 */
.pd-2-1{
    overflow: auto;
}
.pd-2-1 > span{
    padding-top: 1em;
    padding-bottom: 1em;
}

3.padding的实际应用(具体实现可自行思考)

1.增加链接或按钮的点击区域的大小
2.利用内联元素的padding实现高度可控的分割线
3.用内联元素实现瞄点定位距离

4.利用padding百分比值实现等比例缩放图片效果:

.pd-3{
    padding: 10% 50%;
    position: relative;
}
.pd-3 img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

** 注:内联元素的垂直padding会让幽灵空白节点显现,此时可考虑设置font-size:0

5.padding与图形绘制

css深入研究

 /* 菜单 */
 .icon-menu{
    display: inline-block;
    width: 120px;
    height: 10px;
    padding: 35px 0;
    border-bottom: 10px solid;
    border-top: 10px solid;
    background-clip: content-box;
    background-color: currentColor;
}
/* 双层圆点 */
.icon-dot{
    display: inline-block;
    width: 60px;
    height: 60px;
    padding: 10px;
    border-radius: 50%;
    border: 10px solid;
    background-clip: content-box;
    background-color: currentColor;
}

五.margin深入研究

1.使用:nth-type-of(3n)去除子元素尾部margin

css深入研究

.mg-item:nth-of-type(3n){
    margin-right: 0;
}

注:如果容器可以滚动,在IE和firefox下会忽略padding-bottom的值,chrome则不会,此时可以通过margin-bottom实现滚动容器的底部留白

css深入研究

  • 其本质区别在于:chrome是子元素超过父元素content box尺寸触发滚动条显示,而IE和Firefox浏览器是超过padding box尺寸时触发滚动条显示

2.margin合并条件

  • 块级元素,但不包含浮动和绝对定位元素

  • 在默认文档流下只出现在垂直方向

margin合并的三种场景

  • 相邻兄弟元素
  • 父级和第一个/最后一个子元素
* 解决方案: 父级设置为块级格式化上下文元素
            父元素设置border-top/bottom值
            父元素设置padding-top/bottom值
            父元素设置高度
  • 空块级元素margin合并

3.margin合并的计算规则

“正正取大值”,”正负值相加”,”负负最负值”

4.深入理解margin:auto

  1. 如果一侧定值,一侧auto,则auto为剩余空间大小
  2. 如果两侧均是auto,则平分剩余空间
  3. 触发margin:auto计算的前提:width或height为定值时,元素是具有自动填充特性的

css深入研究

/* 1 */
margin-right: 20px;
margin-left: auto;
/* 2 */
margin-right:auto;
margin-left: auto;

4.绝对定位元素利用margin:auto实现水平垂直居中(兼容到ie8+)

css深入研究

.father{
    position: relative;
}
.child-2{
    position: absolute;
    left: 0; bottom: 0; right: 0; top: 0;
    width: 40px;
    height: 20px;
    margin: auto;
}

*** margin无效情形分析:

  1. display计算值为inline的非替换元素的垂直margin是无效的
  2. 对于内联替换元素,垂直margin有效,并且没有margin合并问题,所以永远不会发生margin合并
  3. 内联特性导致margin失效:一个容器里面有一个图片,图片设置margin-top,随着margin-top负值越来越大,达到某一具体负值时,图片将不再往上偏移

六.字母x与css中的基线

  1. 基线 字母x的下边缘
  2. x-height 指字母x的高度
  3. ex:ex指小写字母x的高度,是相对单位
  4. vertical-align:middle 指的是基线往上1/2 x-height高度

css深入研究

内联元素设置对齐方式时,是基于最前面的内联元素的基线,然后根据自己的vertical-align来调整对齐的

七.BFC–块级格式化上下文

  1. 表现: 元素内部的布局变化不会影响外部的元素.所以不会出现margin合并,可用来清除浮动的影响.
  2. 触发BFC的条件:
  • 根元素
  • float的值不为none
  • overflow的值为auto,scroll,hidden
  • display的值为table-cell,inline-block
  • position的值不为static或者relative
  1. 若元素具备BFC特性,则无需clear:both去清除浮动

  2. display:table-cell的特性: 宽度设置的再大,也不会超过表格容器的宽度

  3. overflow裁切界限:border box: 一个设置了overflow: hidden的元素同时设置了padding和border,则子元素超出容器宽高设置时,裁切的边界是border box内边缘而不是padding box内边缘

  4. 在PC端,默认滚动条均来自,PC端滚动高度可以用document.documentElement.scrollTop获取,在移动端用document.body.scrollTop获取

  5. PC端滚动条宽度约为17px

  6. 让页面滚动条不出现晃动的方法:

html{
    /* ie8 */
    overflow-y: scroll;
}
:root{
    overflow-y: auto;
    overflow-x: hidden;
}
:root body{
    position: absolute;
}
body{
    width: 100vw;
    overflow: hidden;
}

9.多行文本溢出显示省略号的css方法:

.ell-rows-2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

8.relative难点解析

  1. relative的定位位移是相对于自身的,如果left/top/right/bottom的值为百分比单位,则计算尺寸是基于父元素

  2. 如果left/right 或top/bottom这些对立属性同时出现时,只有一个方向的属性会生效,优先级与文档流的顺序有关,默认的文档流是自上而下,从左到右的,所以top优先级高于bottom,left优先级高于right

  3. relative的最小化原则

  1. 尽量不使用relative,可以采用无依赖绝对定位解决某些问题
  2. 如果一定要使用relative,则relative务必最小化(最小包含区域) –为了避免层级覆盖等问题
  1. 层叠上下文

    • 定位元素的默认z-index:auto;此时和普通元素一样,一旦z-index设置为任意数值,就创建了一个层叠上下文,顺序为:
    • 层叠上下文 < 负z-index < block < float < inline < z-index:auto < 正z-index
    • css3新属性的层叠上下文: ```
  2. flex

  3. opacity不为1

  4. transform不为none

  5. mix-blend-mode不为normal

  6. filter不为none

  7. isolation是isolate

  8. will-change为上面2-6的任意一个

  9. 元素-webkit-overflow-scrolling设为touch

  • z-index负值在block下面,实际应用: ```
  1. 可访问性隐藏
  2. ie8下的多背景隐藏 ``` 好啦,关于css的知识还有很多,有些问题也很难通过表象去解决,这个时候,让你脱颖而出的就是你对代码底层更深入的理解了。

    更多推荐:

收藏
评论区

相关推荐

css深入研究
学习方法推荐 问题学习法:带着问题去学习,有利于集中注意力,目的明确,这既是有意学习的要求,也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的,必要时需经过意志努力,主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息,使学习有了明确的指向性,从而提高学习
《css大法》之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附
《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
巧用css圆角实现有点意思的加载动画
作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画. 如果想学习更多css实用技巧, 可以参考笔者以下的文章: <div style"display:flex; flexwrap:wrap; alignitems: center;" <a href"https:/
2. web前端开发分享-css,js进阶篇
2. web前端开发分享css,js进阶篇 一,css进阶篇:   等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
前端面试题全覆盖整理
本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一面基础面应该没什么问题,二面也能应付大半,奉上: css相关 1. 万能居中 1.margin: 0 auto;水平 2.textalign: center;水平 3.行高,垂直 4.表格
好家伙,这些写 CSS 的新姿势你还不知道?
现在大部分搞前端的应该还是这样写 CSS 的: .mock {     margin: auto;     fontsize: 16px;     // ... } <div class'mock'mock</div 以上代码就是举个例子,大部分情况应该都是写一个类,然后整一堆样式进去。 但是这种方式写多了以后,你应该
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢? 1:抽离javascriptHome.vue<template <div <div :style"{ padding: '24px', back
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
你可能不知道的10个CSS新功能(2021版)
多年来,CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能,而在过去,您需要JavaScript或变通方法来实现这些功能。 为了庆祝它在2021年取得的成就,在这篇文章中,我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情,讨论用例,浏览器支持,并给你一个
Fower: 一个可在 Vue 和 React 方便使用的 CSS in JS 库
一年多没写过文章了,今天给大家介绍一个我断断续续花了半年开发的 CSS 项目: . Fower 是什么?Fower 是一个让你高效开发 UI 的样式工具库,目标是让你写 CSS 不再痛苦。Fower 的核心特点是原子化(Atomic/utilityfirst)、类型安全(Type Safe)、CSS in JS,它非常注重开发体验,让你快速且开心的开发界面。
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?