![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端之CSS
码飞_CC
热爱生活与技术,偏于前端,潜心学习,乐于分享
展开
-
让ChatGPT回答:从浏览器输入url开始,到页面渲染出来,详细的过程
浏览器也会对CSS规则进行继承和层叠的处理,最终将CSS规则应用到对应的DOM节点上,形成渲染树。这个过程被称为布局或回流,浏览器会对页面上所有的海报进行遍历和计算,以便计算出每个元素的布局和位置信息。此时,用户可以在浏览器中看到完整的页面,可以进行交互和操作。在HTML解析的过程中,如果浏览器遇到HTML标签、文本和注释等内容,就会将其转换成对应的DOM节点。以上就是从输入URL到页面渲染完成的11个步骤的详细解释,希望能够帮助您更加深入地了解浏览器的工作原理和Web页面的渲染过程。原创 2023-04-23 10:59:11 · 1153 阅读 · 1 评论 -
CSS改变鼠标选中文字的样式
CSS改变鼠标选中文字的样式。原创 2022-09-13 17:16:47 · 929 阅读 · 0 评论 -
Chrome 控制台调试hover样式以及hover后才出现的元素
Chrome 控制台调试hover样式以及hover后才出现的元素原创 2022-02-23 15:22:58 · 9127 阅读 · 1 评论 -
如何将页脚(footer)保持在页面底部
文章目录1. 问题描述2. 解决方案2.1 使用position属性实现(兼容较老的浏览器)2.2 使用Flex实现2.3 使用Grid实现1. 问题描述将footer保持在视觉窗口的底部是常见的需求。当页面的内容主体高度较大(超出屏幕可视区域的高度)时,footer元素直接跟在内容后面即可。但是,当一个 HTML 页面包含少量的内容时,footer元素就会坐落在页面的中间,在下面留下空白,这看起来很糟糕,尤其是在大屏幕上。如下图:2. 解决方案我们先给出基础的页面代码:<!DOCTYP原创 2020-08-24 19:16:24 · 18357 阅读 · 0 评论 -
CSS3中的calc()函数以及在less中的使用
1. calc()函数在css3中我们可以通过calc()函数来动态计算长度值,如:#div { width: calc(100% - 100px);}它的语法是calc(expression)expression参数是必须的,它是一个数学表达式,结果将采用运算后的返回值。使用calc() 函数时需要注意的点:运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);任何长度值都可以使用calc()函数进行计算calc()函数支持"+", "-"原创 2020-08-07 21:39:19 · 3879 阅读 · 0 评论 -
浮动元素的位置,只参考前一个元素的位置即可
如下图,1、2、3三个元素左浮动,虚线为父容器,此时再添加一个左浮动的元素4,总宽度超出了父元素宽度,那么4号元素的位置应该是这样的?它的位置不是A也不是B:浮动元素的位置,其实只参考前一个元素的位置即可。所以元素4的位置只需考虑元素3的位置即可,如下:我们换一下位置,同理可以得到如下结果(只需考虑元素1的位置):float属性会导致父元素的高度塌陷,解决方法可查看:CSS float浮动规则以及父元素高度塌陷的解决方法...原创 2020-05-31 12:51:14 · 1840 阅读 · 1 评论 -
纯CSS实现气泡框
文章目录用CSS画三角形气泡框正三角形的气泡框斜三角形的气泡框总结在工作中,我们可能会遇到气泡框相关的需求,如下图:这个气泡框我们可以使用纯CSS代码来实现。接下来跟我一起一步步实现吧!用CSS画三角形用CSS画个三角形,相信大家都很熟悉了吧。主要思路:将元素的的宽高设置为0;然后设置相应的边框即可实现。详细来讲就是给某一方向的边框添加宽度以及颜色,然后将其旁边两个方向(或一个)的...原创 2020-03-16 20:33:52 · 3470 阅读 · 0 评论 -
display: none、visibility: hidden与opacity: 0的区别
文章目录1. display: none、visibility: hidden与opacity: 0的区别2. 补充:其他隐藏元素的方法1. display: none、visibility: hidden与opacity: 0的区别display: none、visibility: hidden与opacity: 0都可以让元素隐藏,它们之间的区别见下表:特性(行为)displa...原创 2020-01-21 14:31:39 · 2129 阅读 · 0 评论 -
避免在移动端页面中使用100vh
100vh带来的问题在CSS中,视口单位(Viewport units)听起来不错。如果要设置一个元素的样式使它占据整个屏幕的高度,那么你可以设置height: 100vh,这样你就拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可惜的是,事实并非如此。100vh在移动浏览器中以一种微妙但基本的方式被破坏,使其几乎无用。最好避免使用100vh,而应该通过javascript设置高度的方...翻译 2019-12-06 18:29:35 · 4972 阅读 · 6 评论 -
小练手——Finish line自动打开低于一定折扣的商品
Finish line是美国的一个运动品牌网站,我平时比较喜欢海淘鞋子,时不时可能想看看有没有什么好货,但是呢,每次都要自己点击然后再一个个查看比较麻烦,故自己想弄一些自动化地筛选,自动选出性价比高的东西。废话不多说,上源码(chrome浏览器,筛选鞋子可行):let timer = setInterval(()=>{ // 第一步:找到“下一页”的按钮,并触发点击事件 docu...原创 2019-09-27 22:00:51 · 1134 阅读 · 0 评论 -
CSS实现自适应布局:子元素项目整体居中,内部项目左对齐
日常工作时,我们可能遇到这样一个布局:一个父元素框框(随着浏览器大小自适应宽度)里面有许多按钮,然后这些按钮(宽度固定)的整体需要在父元素内居中对齐,而按钮整体的内容又是从左往右排列。这里提供一个解决方法,示例如下:有如下代码:<div class="wrap"> <button class="btn">1</button> <butt...原创 2019-08-28 10:38:29 · 4813 阅读 · 2 评论 -
修改input元素placeholder样式的方法
我们时常需要跟input输入框打交道,很多情况下都要对placeholder的内容进行修改,例子:{/* React的写法 */}<input type="text" placeholder={'placeholder'}/>默认情况下的显示如下:我们是没法直接对input元素设置样式来更改placeholder,需要通过伪元素 ::-webkit-input-placeh...原创 2019-06-14 20:36:39 · 25553 阅读 · 1 评论 -
React实现浏览器打印部分内容
React 浏览器打印原创 2019-05-14 20:05:34 · 4829 阅读 · 0 评论 -
前端学习资料整理(2021.6.4更新)
react小书:从解决问题的角度一步步带领大家认识为什么这样设计,帮助大家更深入地理解知识。原创 2018-11-27 10:17:28 · 1313 阅读 · 0 评论 -
align-items和align-content的区别
文章目录1. stack overflow上的回答(翻译)2. 自己动手实践2.1 子项为单行的情况2.1.1 flex容器不设置高度2.1.2 flex容器设置高度2.2 子项为多行的情况2.2.1 flex容器不设置高度2.2.2 flex容器设置高度3. 总结在用flex布局时,发现有两个属性功能好像有点类似:align-items和align-content,乍看之下,它们都是用于定义f...原创 2019-03-05 21:20:15 · 49606 阅读 · 19 评论 -
italic和oblique的区别
在CSS中,font-style属性用于指定文本的字体样式,取值有如下4种:值描述normal默认值。标准的字体样式italic斜体的字体样式oblique倾斜的字体样式inherit从父元素继承的样式我们看一下不同取值的效果如何:HTML代码: &lt;p class="normal"&gt;这是一个段落,正常。normal&lt;/p&...原创 2019-02-18 21:20:54 · 5110 阅读 · 0 评论 -
CSS的一些小技巧
之前做的一个笔记,在一个github上翻译而来,原文哪来的忘了。CSS样式重置:*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0;}继承box-sizing:html { box-sizing: border-box;}*,*::before,*::after ...翻译 2019-01-14 20:54:05 · 483 阅读 · 1 评论 -
CSS深入理解之absolute
CSS深入理解之absolute原创 2016-11-14 18:51:40 · 933 阅读 · 0 评论 -
Web前端工程师知识脉络图
Web前端工程师知识脉络图转载 2016-11-17 17:15:16 · 860 阅读 · 0 评论 -
CSS深入理解之float浮动
CSS深入理解之float浮动原创 2016-11-14 15:56:46 · 906 阅读 · 0 评论 -
提高网站打开速度的7大秘籍
提高网站打开速度的7大秘籍转载 2016-12-01 11:05:33 · 655 阅读 · 0 评论 -
CSS深入理解之overflow
CSS深入理解之overflow原创 2016-11-15 14:35:50 · 6163 阅读 · 0 评论 -
HTML5样式的使用
HTML5样式的使用原创 2016-12-30 15:14:52 · 704 阅读 · 0 评论 -
CSS深入理解之padding
CSS深入理解之padding原创 2016-11-14 09:38:03 · 1985 阅读 · 1 评论 -
CSS float浮动规则以及父元素高度塌陷的解决方法
本文不讲float的所有内容,只浅谈float对不同高度块之间浮动结果的规则以及父元素高度塌陷的解决方法。首先看一个小问题,就是float会导致父容器的高度塌陷,如下代码:<style> .container { border: solid red 1px; } .fl { float: left; ...原创 2018-04-13 12:57:50 · 4514 阅读 · 1 评论 -
安装react-tagsinput遇到的坑
react-tagsinput是用于标签输入的一个简单易用的高可定制React组件(npm地址:https://www.npmjs.com/package/react-tagsinput),由于对npm的原理还不是很熟,故闹出了一些笑话。1. 安装使用: 命令:npm install react-tagsinput --save 2. 在项目中导入:语句:import TagsInput ...原创 2018-09-12 21:31:29 · 1656 阅读 · 1 评论 -
React实现元素块随页面滚动而固定在浏览器顶部的一种方式
有一个需求:一个元素块A本来在页面中的正常位置,随着滚动条向下滚动到该元素块时变为固定在浏览器顶端,当滚动条向上滚动到元素块A时又恢复到原来的位置。 解决方法:我们首先在react组件中添加一个boolean类型的状态needFixed,用于判断该元素块A是否需要固定。然后在通过document.getElementById('A_ID').offsetTop获取需要固定的元素块A距...原创 2018-10-24 21:20:24 · 9704 阅读 · 2 评论 -
前端页面对后端数据的换行显示
有时我们会遇到这种情况,后端传递了一大段包含了换行符的文本内容,在React中,我们直接将这部分内容展示的话,并不会出现换行的效果。如下例子:/* content为从后端获取的数据,例如: content=`hello world! hello world!hello world! hello world!hello world!hello world!`*/&amp;amp;lt;div&amp;amp;g...原创 2018-12-20 20:40:46 · 19725 阅读 · 2 评论 -
CSS深入理解之line-height
line-height的定义:行高,两行文字基线之间的距离。第一节:line-height与行内框盒子模型 4包含3,3包含2,2和1没啥关系第二节:line-height的高度机理 内联元素的高度是由行高决定的。 只不过正好:内容区域高度(content area)+行间距(vertical spacing) = 行高(line-heigh...原创 2016-11-16 15:13:50 · 814 阅读 · 1 评论