css before 文字前面竖线_前端进阶: css必知的几个底层知识和技巧
学习方法推荐
问题学习法:带着问题去学习,有利于集中注意力,目的明确,这既是有意学习的要求,也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的,必要时需经过意志努力,主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息,使学习有了明确的指向性,从而提高学习效率。
在介绍完问题学习法之后,进入我们今天的主题,接下来我会介绍css的一些底层的知识和比较诡异的现象,借此来让大家对css有更深入的理解。
一.css尺寸
1.首选最小宽度–实现复杂图形效果
在css中,图片和文字的权重远大于布局,因此当width:0时表现出来的宽度就是“首选最小宽度”。中文的最小宽度为每个汉字的宽度,西方文字取决于连续的英文字符单元。
因此,我们可以根据这个它特性,去实现一些复杂的图形,如下:
当鼠标经过时,变成了下面的样子:
代码如下:
.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%就是以固定好的父元素的宽度,宽度不够只能溢出。
.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
要想实现如上图所示的展开收起动画,就可以使用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的元素 内联盒模型:
- 内容区域:可以理解为文本选中的背景色区域(重点)
- 内联盒子:内联标签或者纯文本
- 行框盒子:由内联盒子组成的一行,每一行就是一个行框盒子
- 包含盒子:由行框盒子组成的盒子 幽灵空白节点:在HTML5文档声明中,内联元素的解析和渲染表现就像每个行框盒子的前面有一个空白节点一样。如下案例所示:
三.深入理解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.实现正在加载动画
.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.属性值内容生成
"icon" data-tip="江小白">
/* 可以使用原生属性和自定义属性 */
.icon::after{
content: attr(data-tip);
}
4.计数器属性---纯css实现技术器效果
.box1{ counter-reset: count1;}.xigua:checked::before{ content: counter(count1); counter-increment: count1; position: absolute; color: transparent;}.box1::after{ content: counter(count1);}
"counter">
"box1">
西瓜"xigua" type="checkbox" />
香蕉"xigua" type="checkbox" />
萝卜"xigua" type="checkbox" />
四.padding深入研究
1.对于盒模型设置为box-sizing: border-box的元素,如果padding足够大,那么width将失效:
width: 200px;padding-left: 120px;padding-right: 120px;box-sizing: border-box;
2.对于内联元素,padding对视觉层和布局层都会有影响,如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条,否则如果父元素不设置设置overflow,只会在垂直方向上发生重叠,不会影响布局:
/* 父元素设置 */.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与图形绘制
/* 菜单 */ .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
.mg-item:nth-of-type(3n){ margin-right: 0;}
注:如果容器可以滚动,在IE和firefox下会忽略padding-bottom的值,chrome则不会,此时可以通过margin-bottom实现滚动容器的底部留白
- 其本质区别在于:chrome是子元素超过父元素content box尺寸触发滚动条显示,而IE和Firefox浏览器是超过padding box尺寸时触发滚动条显示
2.margin合并条件
块级元素,但不包含浮动和绝对定位元素
在默认文档流下只出现在垂直方向
margin合并的三种场景
- 相邻兄弟元素
- 父级和第一个/最后一个子元素
* 解决方案: 父级设置为块级格式化上下文元素 父元素设置border-top/bottom值 父元素设置padding-top/bottom值 父元素设置高度
- 空块级元素margin合并
3.margin合并的计算规则
“正正取大值”,”正负值相加”,”负负最负值”
4.深入理解margin:auto
- 如果一侧定值,一侧auto,则auto为剩余空间大小
- 如果两侧均是auto,则平分剩余空间
- 触发margin:auto计算的前提:width或height为定值时,元素是具有自动填充特性的
/* 1 */margin-right: 20px;margin-left: auto;/* 2 */margin-right:auto;margin-left: auto;
4.绝对定位元素利用margin:auto实现水平垂直居中(兼容到ie8+)
.father{ position: relative;}.child-2{ position: absolute; left: 0; bottom: 0; right: 0; top: 0; width: 40px; height: 20px; margin: auto;}
*** margin无效情形分析:
- display计算值为inline的非替换元素的垂直margin是无效的
- 对于内联替换元素,垂直margin有效,并且没有margin合并问题,所以永远不会发生margin合并
- 内联特性导致margin失效:一个容器里面有一个图片,图片设置margin-top,随着margin-top负值越来越大,达到某一具体负值时,图片将不再往上偏移
六.字母x与css中的基线
- 基线 字母x的下边缘
- x-height 指字母x的高度
- ex:ex指小写字母x的高度,是相对单位
- vertical-align:middle 指的是基线往上1/2 x-height高度
内联元素设置对齐方式时,是基于最前面的内联元素的基线,然后根据自己的vertical-align来调整对齐的
七.BFC–块级格式化上下文
- 表现: 元素内部的布局变化不会影响外部的元素.所以不会出现margin合并,可用来清除浮动的影响.
- 触发BFC的条件:
- 根元素
- float的值不为none
- overflow的值为auto,scroll,hidden
- display的值为table-cell,inline-block
- position的值不为static或者relative
若元素具备BFC特性,则无需clear:both去清除浮动
display:table-cell的特性: 宽度设置的再大,也不会超过表格容器的宽度
overflow裁切界限:border box: 一个设置了overflow: hidden的元素同时设置了padding和border,则子元素超出容器宽高设置时,裁切的边界是border box内边缘而不是padding box内边缘
在PC端,默认滚动条均来自,PC端滚动高度可以用document.documentElement.scrollTop获取,在移动端用document.body.scrollTop获取
PC端滚动条宽度约为17px
让页面滚动条不出现晃动的方法:
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难点解析
relative的定位位移是相对于自身的,如果left/top/right/bottom的值为百分比单位,则计算尺寸是基于父元素
如果left/right 或top/bottom这些对立属性同时出现时,只有一个方向的属性会生效,优先级与文档流的顺序有关,默认的文档流是自上而下,从左到右的,所以top优先级高于bottom,left优先级高于right
relative的最小化原则
- 尽量不使用relative,可以采用无依赖绝对定位解决某些问题
- 如果一定要使用relative,则relative务必最小化(最小包含区域) –为了避免层级覆盖等问题
- 层叠上下文
- 定位元素的默认z-index:auto;此时和普通元素一样,一旦z-index设置为任意数值,就创建了一个层叠上下文,顺序为:
- 层叠上下文 < 负z-index < block < float < inline < z-index:auto < 正z-index
- css3新属性的层叠上下文:
1.flex2.opacity不为13.transform不为none4.mix-blend-mode不为normal5.filter不为none6.isolation是isolate7.will-change为上面2-6的任意一个8.元素-webkit-overflow-scrolling设为touch
- z-index负值在block下面,实际应用:
1. 可访问性隐藏2. ie8下的多背景隐藏
好啦,关于css的知识还有很多,有些问题也很难通过表象去解决,这个时候,让你脱颖而出的就是你对代码底层更深入的理解了。
css before 文字前面竖线_前端进阶: css必知的几个底层知识和技巧相关推荐
- css 超出文字头尾相接滚动_前端的一些雕虫小技,从100%和滚动条说起
1.100%和滚动条 当我们在css中把html和body同时设为100%时,会出现滚动条 html,body {width: 100%;height: 100%;} 原因是html和body之间有8 ...
- 前端为什么有的接口明明是成功回调却执行了.catch失败回调_前端进阶高薪必看-手写源码篇(高频技术点)...
前言 此系列作为笔者之前发过的前端高频面试整理的补充 会比较偏向中高前端面试问题 当然大家都是从新手一路走过来的 感兴趣的朋友们都可以看哈 初衷 我相信不少同学面试的时候最怕的一个环节就是手写代码 大 ...
- 【转】进阶 JavaScript 必知的 33 个点【进阶必备】
转自:进阶 JavaScript 必知的 33 个点[进阶必备] 进阶 JavaScript 必知的 33 个点[进阶必备] Original 前端小菜鸡之菜鸡互啄 前端开发爱好者 2022-04-1 ...
- 前端进阶 -css的弱化与js的强化(11)
为什么80%的码农都做不了架构师?>>> web的三要素html, css, js在前端组件化的过程中,比如react,vue等组件化框架的运用,使html 的弱化与 js 的 ...
- css 竖行进度图_前端学习--汇集了大量 CSS 的使用和学习的示例代码
CSS-Inspiration 这里可以让你寻找到使用或者是学习 CSS 的灵感,以分类的形式,展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法. 目前已有上百种的CSS 实现示例, ...
- css grid随页面大小_前端开发中各种设置CSS间距的优点缺点及实例「实践」
前言 如果两个或多个元素很接近,那么用户就会认为它们以某种方式属于彼此.当对多个设计元素进行分组时,用户可以根据它们之间的空间大小来决定它们之间的关系.没有间距,用户将很难浏览页面并知道哪些内容相关而 ...
- fifo算法_前端进阶算法6:一看就懂的队列及配套算法题
引言 队列这种数据结构,据瓶子君了解,前端需要了解的队列结构主要有:双端队列.滑动窗口,它们都是算法中是比较常用的数据结构. 因此,本节主要内容为: 数据结构:队列(Queue) 双端队列(Deque ...
- css使两个盒子并列_前端学习CSS
一 CSS CSS是Cascading Style Sheets的缩写,层叠样式表,用来控制网页数据的显示,可以使网页的显示与数据内容分离. 二 引入方式 (1)行内式:在标记的style属性中设置C ...
- java前端div浮动靠左_前端进阶第5周打卡题目汇总
第一天 1.用css实现单行文本溢出省略以及多行文本溢出省略 2.用css实现一个音乐抖动条 css实现扇形可以用伪类矩形旋转一个角度,来遮挡父容器的圆形,父容器溢出隐藏 第二天 1. 写出3种js数 ...
最新文章
- iOS开发:沙盒机制以及利用沙盒存储字符串、数组、字典等数据
- 打开完成查看的CAD图纸如何一键进行打印?
- c语言中的常用函数的使用,C语言的常用库函数使用方法分析及用途
- 要啥给啥的写作AI:新闻评论小说都能编,题材风格随便选,真假难辨,16亿参数模型已开源...
- “无现金”社会来临,你还有安全感吗?
- 深度学习核心技术精讲100篇(五十九)-多业务融合推荐策略实战应用
- context_component_san具体解释
- 程序员过关斩将--你的面向接口编程一定对吗?
- Beyond Compare 4
- 剥开比原看代码15:比原是如何转帐的
- android https通过载入pfx证书获取数据
- docker本地构建kerberos单机环境
- 2016ICPC沈阳站总结
- c语言贪吃蛇游戏的关键技术,C语言的贪吃蛇游戏设计
- 基于JQUERY的WEB在线流程图设计器GOOFLOW 0.5版 数据值解析
- 关于ps的图片的批处理
- 【JS】用JS实现系统常见日周月时间按钮切换效果
- iOS 警告 Local declaration of 'XXX' hides instance
- python3 工作上一些正则表达式
- 拯救者R7000ubuntu18.04解决分屏问题(NVIDIA显卡驱动安装)
热门文章
- 编写jmeter测试用例_JMeter 编写接口测试用例遇到的问题及解决
- axure 8 表格合并_搞定LaTeX论文中的表格
- 五行中的土在哪个方位_土命人适合往哪个方向发展
- 面试了3个 85前 的嵌入式软件工程师
- 论嵌入式与单片机,相爱相杀。
- HDLBits答案(1)_Verilog语法基础
- 计算机一级应用基础选择题,计算机应用基础一级考试选择题
- 0xbc指令 st75256_CIRCUIT-BREAKER GEB3160FFM
- python找出主力合约价格_如何找出全部期货主力合约和次主力合约?
- python使用xml布局界面_Python:使用ElementTree更新XML文件,同时尽可能地保留布局...