css
文章平均质量分 83
song854601134
这个作者很懒,什么都没留下…
展开
-
浏览器的解析渲染原理以及JS、CSS阻塞问题分析
浏览器的解析渲染原理以及JS、CSS阻塞问题分析输入Url地址按下回车发生了什么?1:根据网址进行DNS解析,将相应的域名解析为IP地址2:客户端根据IP地址去寻找对应的服务器并进行TCP三次握手,建立TCP连接3:客户端发起HTTP请求,请求对应资源4:服务器响应并返回相应数据(如:HTML文件)5:浏览器将获取的HTML文档由HTML解析器解析成DOM树6:同时由CSS解析器将CSS样式解析成CSS Rule Tree(CSS规则树)7:将生成的DOM树和CSS规则树合并生成Render原创 2022-03-23 09:00:54 · 1442 阅读 · 0 评论 -
BFC概念和清除浮动解决margin塌陷/共享
BFC概念和清除浮动解决margin塌陷/共享一、BFC概念BFC 即 Block Formatting Contexts (块级格式化上下文),是W3C CSS2.1规范中的一个概念,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。具有BFC特性的元素可以看做是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且BFC具有普通容器所没有的的一些特性。二、BFC生成条件只要元素满足下面任一条件即可触发BFC特性:body 根元素浮动元素:float 除 non原创 2021-11-23 19:12:40 · 352 阅读 · 0 评论 -
css盒子水平垂直居中
一.水平居中方案一:text-align:center给父元素添加`text-align:center`;子元素若为行内元素、行内块元素,文本,则可以实现水平居中。方案二:单个块级元素水平居中用margin凡是使用margin来居中(水平居中/垂直居中)子元素必须有宽度/高度,不然margin无效。子元素宽度必须`小于`父元素宽度。方案三:多个块级元素水平居中用行内块1.子元素设置 display: inline-block;2.给父元素添加 text-align:center;原创 2021-11-23 18:01:50 · 289 阅读 · 0 评论 -
scoped和deep的关系/写在scoped里css失效
虽然,在content组件中修改了button的border-radius属性,但是由于权重关系,生效的依然是组件内部的样式(即.button[data-v-2311c06a]定义的样式), 如果此时仍需修改样式,则必须加重我们需要修改的样式的权重。虽然,我们在content添加了scoped属性,但是.content .button 这句末尾添加的是content的scoped标记,最后我们实际上是找不到向对应的DOM节点的,也就不起作用啦。这就需要我们探讨scoped的作用了。原创 2023-05-25 16:48:53 · 637 阅读 · 0 评论 -
vue引入iconfont/引入svg原理
最佳实践应该是用户点击切换某一类主题时,就按需加载那一类主题的样式,再注入到应用中渲染,这样可以极大的提升整体性能.最佳实践方式可以参考社区内关于多主题切换的文章.那一栏可以看到我们导进去的图标展现到了页面上,接下来使用鼠标单击导进去的图标将其标记为选中,再点击页面左下角的。为图标库,一步步实践图标引入,使用以及管理的整个流程.另外在文章的后半部分,还会介绍一下多主题变色模式下。新增的开发需求不可避免的会增加新的图标,而。,最终图标的颜色也会发生改变,这就为我们完成多主题的开发需求提供了可能.原创 2022-12-15 09:18:36 · 1261 阅读 · 1 评论 -
图解事件坐标screenX、clientX、pageX, offsetX的区别
如图所示,假设页面中灰色圆点是鼠标点击处,黄色区域是鼠标触发事件对象1、screenX 和screenY2、clientX和clientY3、pageX和pageY4、offsetX和offsetY原创 2022-06-10 09:10:13 · 744 阅读 · 0 评论 -
flex布局及flex实现常见的前端布局
文章目录flex布局一、flex容器属性1、flex-direction2、flex-wrap3、flex-flow4、justify-content5、align-items6、align-content二、项目属性1、order**2、flex-grow****3、flex-shrink**4、flex-basis5、flex筛子布局单个Flex项两个Flex项三个Flex项六个Flex项九个Flex项flex布局flex布局两个属性,容器和项目。一旦我们开启弹性布局后,项目(也就是设为dispa原创 2021-11-21 14:51:05 · 3916 阅读 · 0 评论 -
深度选择器的使用
深度选择器vue2.x/deep/ &::v-deep .a { }vue3.x/deep/下面两种都可以( "vue": "^3.0.0")&::v-deep(.a) { }&::v-deep .a { }没生效的原因和解决方案搞了很久后,找到资料说,是由于vue的组件版本太低导致的,就是这俩货:"vue-loader": "^11.3.4","vue-style-loader": "^2.0.5",vue-原创 2022-04-20 18:04:44 · 1975 阅读 · 0 评论 -
CSS、Sass、Scss,以及sass和scss的区别
1、描述CSS 指层叠样式表 (Cascading Style Sheets)Sass (Syntactically Awesome StyleSheets),是由buby语言编写的一款css预处理语言,和html一样有严格的缩进风格,和css编写规范有着很大的出入,是不使用花括号和分号的,所以不被广为接受。 Sass 是一款强化 CSS 的辅助工具,是对 CSS 的扩展,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)原创 2022-04-20 16:35:18 · 1691 阅读 · 0 评论 -
width:fit-content
width: fit-content给一个固定宽度的div里面输入一厂串连续的英文字母,如果输入的足够多,文字会溢出来,就像这样:给外层标签添加 width:fit-content取代直接设置宽度。width:fit-content 可以实现 文字较少时居中显示,文字多时,末尾的一行左对齐显示 <div class="c"> <div class="fit"> 国家路过看看两个拉过来g案件共计拉工具栏绿咖喱鸡格拉阿纲解决了阿钢筋 &原创 2022-03-23 17:04:37 · 1997 阅读 · 0 评论 -
display: table-cell知识点总结
display: table-cell知识点总结1. 匿名表格元素创建CSS2.1表格模型中的元素,可能不会全部包含在除HTML之外的文档语言中。这时,那些“丢失”的元素会被模拟出来,从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象,使其符合table/inline-table、table-row、table- cell的三层嵌套关系。也就是说如下代码:<div id="table-cell">content</div>#tab原创 2022-01-02 16:59:19 · 1927 阅读 · 0 评论 -
css之overflow/ overflow-x和 overflow-y混合使用问题
css之overflow哪些元素上有效?首先 overflow 是应用到哪些元素上有效的,任意元素?当然不是,它只能应用于块容器上。那什么是块容器呢?简单来说:除了 table 和可替换(置换)元素之外的块级元素都是块容器元素;但是反过来说块容器元素一定是块级元素的吗?当然也是 NO ,这是因为对于非替换的 inline-block 元素和 table-cell 元素而言,他们是块容器元素但是却不是块级元素。作用overflow 属性指定了一个块容器元素在其内容溢出这个元素的时原创 2022-01-02 13:47:22 · 2179 阅读 · 1 评论 -
clientHeight offsetHeight scrollHeight offsetTop scrollTop
clientHeight和offsetHeightclientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。style.height //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)clientHei原创 2021-12-12 19:15:29 · 181 阅读 · 0 评论 -
H5属性变化
5.H5属性变化一、表单属性1.autofocus对input[所有类型]、select、textarea与button指定autofocus属性。让元素在页面加载后自动获得焦点。一个页面只能有一个元素有autofocus属性,同时设置多个,则第一个生效。例如登录页面,页面加载后用户可直接输入用户名。2.placeholder对input[text, search, url, telephone, email 以及 password]、textarea指定placeholder属性,它会对用户的输原创 2021-11-23 18:46:46 · 531 阅读 · 0 评论 -
块元素、行内元素、行内块元素
文章目录1.块元素的特性block常见块级元素2.行内元素 inline2.1常见的行内元素2.2行内元素的间距问题3.行内块元素inline-block4.H5新增属性及标签4.1新增的语义化标签 (结构标签)4.2表单标签4.3媒体标签1.块元素的特性block独占一行;宽度缺省是它父级元素的100%,除非设定一个宽度;高度、行高、外边距、内边距都可以设置可以容纳其他内联元素或者其他块元素,一般用于配合css完成网页的基本布局;常见块级元素div – 常用块级容器,也是CSS layo原创 2021-11-23 18:45:20 · 262 阅读 · 0 评论 -
CSS 三大特性
文章目录1.继承性2.层叠性3.优先级**!important****优先级的权重**1.继承性1.1 给父元素设置一些属性, 后代元素也可以使用, 这个我们就称之为继承性;1.2 只有以color/font-/text-/line-开头的属性才可以继承;1.3 继承性中的特殊性 a标签的文字颜色和下划线是不能继承的 h标签的文字大小是不能继承的应用场景:一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容body { }2.层叠性作用: 层叠性就原创 2021-11-23 18:47:23 · 49 阅读 · 0 评论