![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端 CSS
宇六岁鸭
小憨包一枚
展开
-
【前端学习 - CSS(22)BFC、IFC、GFC、FFC】
1. BFC、IFC、GFC、FFC 是什么?Block formatting context(BFC)--块级格式化上下文; Inline formatting context(IFC)--内联格式化上下文; Grid formatting context(GFC)--网格布局格式化上下文; Flex formatting context(FFC)--自适应格式化上下文、...原创 2022-02-23 21:32:34 · 148 阅读 · 0 评论 -
【前端学习 - CSS(21)border:none 与 border:0 】
1.border:none 与 border:0 的区别?首先是性能差异:{border:0;}: 把 border 设置为 0 像素,虽然在页面上看不到,但是按 border默认值理解,浏览器依然对 border-width/border-color 进行了渲染,即已经占用内存值; {border:none;}被理解为 border-style:none。boder:0;比 border:none多渲染了一个border-width:0,也就是为什么 border:none 的性能要比 bord原创 2022-02-22 08:15:00 · 512 阅读 · 0 评论 -
【前端学习 - CSS(20)回流(重排)和重绘】
1. 回流(重排)和重绘区别?回流(重排),reflow:当 render tree 中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变时而需要重新构建;重绘(repaint):当 render tree 中的一些元素需要更新属性,而这些属性只影响元素的外观,风格,而不会影响布局时,称其为重绘,例如颜色改变等。注意:每个页面至少需要引发一次重排+重绘,而且重排(回流)一定会引发重绘。触发重排(回流)的条件:增加或者删除可见的 dom 元素; 元素的位置发生了改变; 元素的尺寸发原创 2022-02-22 08:00:00 · 197 阅读 · 0 评论 -
【前端学习 - CSS(19)CSS 优化、提高性能】
1.CSS 优化、提高性能的方法有哪些?多个 css 可合并,并尽量减少 http 请求 属性值为 0 时,不加单位(margin: 0) 将 css 文件放在页面最上面(CSS会阻塞渲染,在CSS文件请求、下载、解析完成之前,浏览器将不会渲染任何已处理的内容。如果放在下面,当html结构渲染完以后,解析css,又会重新渲染一次,导致页面闪动) 避免后代选择符,避免链式选择符过长 使用紧凑的语法(margin: 8px 6px 7px 5px; ) 使用语义化命名,便于维护(属于优化) 尽量原创 2022-02-22 07:30:00 · 145 阅读 · 0 评论 -
【前端学习 - CSS(18)为什么要初始化 CSS 样式】
1. 为什么要初始化 CSS 样式?因为浏览器的兼容问题,不同浏览器对标签的默认值是不同的,如果没有对浏览器的 CSS 初始化,会造成相同页面在不同浏览器的显示存在差异。原创 2022-02-22 01:15:00 · 262 阅读 · 0 评论 -
【前端学习 - CSS(17)CSS3 新特性】
1. CSS3 有哪些新特性?选择器(E:last-child 匹配父元素的最后一个子元素E。); 圆角(border-raduis); 多列布局(multi-column layout); 阴影(shadow)和反射(reflect); 文字特效(text-shadow); 文字渲染(text-decoration); 线性渐变(gradient); 旋转(rotate)/缩放(scale)/倾斜(skew)/移动(translate); 媒体查询(@media); RGBA 和透明原创 2022-02-22 01:00:00 · 216 阅读 · 0 评论 -
【前端学习 - CSS(16)CSS 属性继承】
1. CSS 有哪些属性可以继承?字体系列属性:如 font,font-family,font-size,font-weight,font-style 文本系列属性:如 color,text-indent(文本缩进),text-align(文本水平对齐),line-height,word-spacing(字间隔) 元素可见性:visibility 表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout原创 2022-02-22 00:45:00 · 174 阅读 · 0 评论 -
【前端学习 - CSS(14)常见单位】
1. 常见单位px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了 font-size 按自身来计算(浏览器默认字体是 16px),整个页面内 1em 不是一个固定的值 rem:相对单位,可理解为”root em”, 相对根节点 html 的字体大小来计算,CSS3 新加属性,chrome/firefox/IE9+支持 vw:viewpoint width,视窗宽度,1vw 等于视窗宽度的 1% vh:viewpoint height,视窗高度,1vh 等原创 2022-02-21 20:21:48 · 90 阅读 · 0 评论 -
【前端学习 - CSS(14)实现单行和多行文本溢出添加省略号】
1. 实现单行和多行文本溢出添加省略号单行溢出:p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}多行溢出:overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; //3行溢出...原创 2022-02-21 20:20:39 · 61 阅读 · 0 评论 -
【前端学习 - CSS(13)用 css 画三角形】
1. 用 css 画三角形.triangle { width: 0; height: 0; border-width: 100px; border-style: solid; border-color: tomato transparent transparent transparent; //3边透明,一边不透明}技巧--记住透明边框的数量:3点一线 (总共 4 条线,有 3 条变成点了,即变透明了,另外一条边还是线,即不透明)...原创 2022-02-21 20:19:03 · 174 阅读 · 0 评论 -
【前端学习 - CSS(12)margin 重叠】
1. margin 重叠margin 重叠的规则当两个 margin 都是正值的时候,取两者的最大值; 当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从 0 位置,负向位移; 当有正有负的时候,先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加,即取和的绝对值margin 重叠主要有四种情况的解决:相邻兄弟元素 margin-bottom 和 margin-top 重叠。可以将其中一个设为 BFC; 父子元素 margin原创 2022-02-21 20:17:48 · 793 阅读 · 0 评论 -
【前端学习 - CSS(11)布局 - 两侧定宽,中间自适应】
1. 布局1-1 两侧定宽,中间自适应浮动 左侧设置左浮动,右侧设置右浮动即可,中间会自动地自适应。 绝对定位 左侧设置为绝对定位, left:0px。右侧设置为绝对定位, right:0px。中间设置为绝对定位,left 和 right 都为 300px,即可。中间的宽度会自适应。 flexbox布局 将左中右所在的容器设置为 display: flex,设置两侧的宽度后,然后让中间的 flex = 1,即可。 表格布局 设置整个容器的宽度为 100%,设置三个部分均为表格(display:原创 2022-02-21 09:00:00 · 354 阅读 · 0 评论 -
【前端学习 - CSS(10)浮动】
1. 浮动清除浮动的方法:父级盒子定义高度(height); 最后一个浮动元素后面加一个 div 空标签,并且添加样式 clear: both; 包含浮动元素的父级标签添加样式 overflow 为 hidden/both; 父级 div 定义 zoom;最好的方法:clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0;原创 2022-02-21 08:45:00 · 81 阅读 · 0 评论 -
【前端学习 - CSS(9)定位】
1. 定位1-1 基本含义相对定位,将元素的 position 设为 relative,元素相对于自身 content box 定位,仍占据原来位置空间; 绝对定位,将元素的 position 设为 absolute,元素相对于第一个 position 不为 static 的祖先元素的 padding box 定位,元素不占据原来位置空间; 固定定位,将元素的 position 设为 fixed,元素相对于浏览器窗口顶部定位,不占据原来位置空间1-2 水平居中通用方案:行内元素:父元素原创 2022-02-21 08:30:00 · 88 阅读 · 0 评论 -
【前端学习 - CSS(8)BFC】
1. BFCBFC 指的是格式化上下文1-1 当一个元素形成 BFC 后:其内部元素的布局不会影响外部元素 外部元素的布局不会影响内部元素。1-2 如何形成 BFC根元素 浮动元素:float 除 none 以外的值 绝对定位元素:position (absolute、fixed) display 为 inline-block、table-cells、flex 表格类元素 overflow 除了 visible 以外的值 (hidden、auto、scroll)【最常用】原创 2022-02-21 08:00:00 · 82 阅读 · 0 评论 -
【前端学习 - CSS(7)伪类和伪元素的区别】
1. 伪类和伪元素的区别两者都是描述不在文本流中的东西。其中伪类用单冒号表示,当元素处于某种状态时,为该元素添加样式,如 a 标签的 hover; 伪元素用双冒号表示,为了兼容老浏览器,有时候也会用单冒号表示,作用是创建不在文本流中的元素,并为其添加样式,如 ::before,在指定元素前添加元素。...原创 2022-02-21 02:00:00 · 86 阅读 · 0 评论 -
【前端学习 - CSS(5)选择器怎么解析的】
1. 选择器怎么解析的样式系统从关键选择器开始,从右向左依次查找,如果出现未匹配的情况会放弃规则,否则会左移直至匹配完成。因此在写样式时,应尽量选择 ID 选择器或 class 选择器作为关键选择器,并且减少样式的层级,降低消耗。...原创 2022-02-20 21:30:13 · 285 阅读 · 0 评论 -
【前端学习 - CSS(4)css 盒模型】
1. css 盒模型css 中,有两种盒模型,通过 box-sizing 切换:当设置为 content-box 时,属于标准盒模型,在设置宽度和高度时,只包含 content,不包含 padding 和 border; 而设为 border-box 时,属于 IE 盒模型,设置宽度和高度时,包含 content、padding 和 border。 标准(W3C)盒子模型:width = 内容宽度(content) + border + padding + margin 低版本I原创 2022-02-20 21:28:26 · 84 阅读 · 0 评论 -
【前端学习 - CSS(3)元素消失的方法】
1.使元素消失的方法 visibility:hidden 该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件 display:none 把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删掉 z-index=-1 把元素遮盖起来,并且不会改变页面布局,可以理解被其它元素压在下面了 opacity:0, 该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定了一些事件,如 click 事件也能触发 ,常用于设置图片透明度为 0 ,然后原创 2022-02-20 21:27:14 · 1275 阅读 · 0 评论 -
【前端学习 CSS (2)响应式布局-Flex 布局】
1. 响应式布局从目前了解的情况,pc 和 h5 使用一套响应式的代码的场景比较少了,大多是 pc,h5 各自维护一套代码。1.使用CSS3媒体查询@media 查询@media screen and (max-width:980px ) { body{ background-color: red; }}2.flex布局弹性盒布局模型是css3规范中提出的一种新的布局方式。目的:提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间优势:这种布局模式已被主原创 2022-01-10 08:00:00 · 1016 阅读 · 0 评论 -
【前端学习 - CSS (1)Hover 事件】
1. 如何解决 a 标点击后 hover 事件失效的问题?改变 a 标签 CSS 属性的排列顺序:(爱恨原则)link -> visited -> hover -> activea:link:未访问的样式 a:visited:已经访问的样式 a:hover:鼠标移上去时的样式 a:active:鼠标按下的样式按照这样书写:可以解决 a:link 样式被 a:visited 样式覆盖问题。在 CSS 中,如果对于相同元素针对不同条件的定义,适宜将最一般的条件放在最上原创 2022-01-09 23:38:14 · 1388 阅读 · 0 评论