css
文章平均质量分 93
鱼叔子
黑夜,留给我们想象的空间;白天,为之梦中幻想而奋斗。
展开
-
第八篇《BFC》
一、常见定位方案在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案:普通流 (normal flow)在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (float)在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动原创 2021-12-10 09:15:50 · 283 阅读 · 0 评论 -
第七篇《css优先级》
什么是权重权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。当很多的样式被应用到某一个元素上时,权重是一个决定哪种样式生效,或者是优先级的过程。每个选择器都有自己的权重。你的每条css规则,都包含一个权重级别。 这个级别是由不同的选择器加权计算的,通过权重,不同的样式最终会作用到你的网页中 。如果两个选择器同时作用到一个元素上,权重高者生效。权重记忆口诀:从0开始,一个行内样式+1000,一个id选择器+100,一个属性选择器、class或者伪类+原创 2021-12-10 09:10:54 · 607 阅读 · 0 评论 -
第六篇《CSS选择器》
简介选择器是 CSS 规则的一部分且位于 CSS 声明块前。选择器可以被分为以下类别:简单选择器(Simple selectors):通过元素类型、class 或 id 匹配一个或多个元素。属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素。伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,或元素是 DOM 树中一父节点的第一个子节点。伪元素(Pseudo-elemen原创 2021-12-10 09:07:06 · 258 阅读 · 0 评论 -
第五篇《盒子模型》
盒模型的认识基本概念:标准模型+IE模型。 包括margin,border,padding,content标准模型和IE模型的区别css如何设置获取这两种模型的宽和高js如何设置获取盒模型对应的宽和高根据盒模型解释边距重叠BFC(边距重叠解决方案,还有IFC)解决边距重叠一、基本概念:标准模型+IE模型**什么是盒模型:**盒模型又称框模型(Box Model),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:由于原创 2021-12-10 09:05:24 · 118 阅读 · 0 评论 -
第四篇《CSS3新特性》
1.前言css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性,以及基础的用法,感觉css3的魅力!如果想要用好css3,这个得靠大家继续努力学习,寻找一些讲得原创 2021-12-10 09:00:06 · 645 阅读 · 0 评论 -
第三篇《CSS性能优化》
提高性能的方法有哪些?合并css文件,如果页面加载10个css文件,每个文件1k,那么也要比只加载一个100k的css文件慢。减少css嵌套,最好不要嵌套三层以上。不要在ID选择器前面进行嵌套,ID本来就是唯一的而且权限值大,嵌套完全是浪费性能。建立公共样式类,把相同样式提取出来作为公共类使用。减少通配符*或者类似[hidden=“true”]这类选择器的使用,挨个查找所有…这性能能好吗?巧妙运用css的继承机制,如果父节点定义了,子节点就无需定义。拆分出公共css文件,对于比较大的项目可以原创 2021-12-10 08:56:12 · 181 阅读 · 0 评论 -
第二篇《CSS样式隔离》
CSS 发展我们在书写 css 的时候其实经历了以下几个阶段:手写源生 CSS使用预处理器 Sass/Less使用后处理器 PostCSS使用 css modules使用 css in js手写源生 CSS在我们最初学习写页面的时候,大家都学过怎么去写 css,也就以下几种情况:行内样式,即直接在 html 中的 style 属性里编写 css 代码。内嵌样式,即在 html h 中的 style 标签内编写 class,提供给当前页面使用。导入样式,即在内联样式中 通过 @im原创 2021-12-10 08:55:11 · 1101 阅读 · 0 评论 -
第一篇《层叠上下文》
零、世间的道理都是想通的在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈。比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上。再比如说话语权,老婆的话永远是对的,领导的话永远是对的。在CSS届,也是如此。只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等。但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了。例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的。那对于CSS世界中的元素而言,所谓的“冲突”指什么呢,其原创 2021-12-10 08:51:55 · 366 阅读 · 0 评论