CSS
文章平均质量分 85
我不是你不是我
生有热烈,藏与俗常
展开
-
(11):说说flexbox(弹性盒布局模型),以及适用场景
面试官:说说flexbox(弹性盒布局模型),以及适用场景?一、是什么1、flexible box 简称 flex,意为 ”弹性布局” ,可以简便、完整、响应式地实现各种页面布局2、采用 flex 布局的元素,称为 flex 容器 container3、它的所有子元素自动成为容器成员,称为 flex 项目 item4、容器中默认存在两条轴, 主轴 和 交叉轴 ,呈90度关系。项目默认沿主轴排列,通过 flex-direction 来决定主轴的方向5、每根轴都有起点和终点,这对于元素的对齐非常原创 2021-10-03 15:35:09 · 789 阅读 · 0 评论 -
(13):对css预编语言的理解
对css预编语言的理解一、是什么1、 css 作为一门标记性语言,语法相对简单,对使用者的要求较低,但同时也带来一些问题2、需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 css 编写经验而很难写出组织良好且易于维护的 css 代码3、 css 预处理器 便是针对上述问题的解决方案预处理语言1、扩充了 css 语言,增加了诸如 变量 、 混合(mixin) 、 函数 等功能,让 css 更易维护、方便2、本质上,预处理是 css原创 2021-10-06 23:54:32 · 146 阅读 · 0 评论 -
(14):回流跟重绘
理解回流跟重绘,什么场景下会触发一、是什么1、在HTML中,每个元素都可以理解成一个盒子,在浏览器解析过程中,会涉及到 回流 与 重绘 :(1) 回流: 布局引擎会根据各种样式计算每个盒子在页面上的大小与位置(2) 重绘: 当计算好盒模型的位置、大小及其他属性后,浏览器根据每个盒子特性进行绘制2、具体的 浏览器解析渲染 机制如下所示:(1)解析HTML,生成DOM树,解析CSS,生成CSSOM树(2)将DOM树和CSSOM树结合,生成渲染树(Render Tree)(3) Lay原创 2021-10-07 16:27:51 · 254 阅读 · 0 评论 -
(10):对BFC的理解
对BFC的理解一、BFC 是什么1、我们在页面布局的时候,经常出现以下情况:(1)这个元素高度怎么没了?(2)这两栏布局怎么没法自适应?(3)这两个元素的间距怎么有点奇怪的样子?…2、原因是元素之间相互的影响,导致了意料之外的情况,这里就涉及到 BFC 概念BFC (Block Formatting Context),即块级格式化上下文,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则:(1)内部的盒子会在垂直方向上一个接一个的放置(2)对于同一个 BFC 的俩个相邻原创 2021-10-01 22:24:00 · 120 阅读 · 0 评论 -
(8):CSS画一个三角形
1、CSS画一个三角形(1)原理:边框的均分原理(2)代码如下: div { width: 0px; height: 0px; border-top: 10px solid red; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid transparent; }...原创 2021-09-30 11:22:03 · 72 阅读 · 0 评论 -
(18):实现两栏、三栏布局
实现两栏布局,右侧自适应。三栏布局中间自适应一、背景在日常布局中,无论是两栏布局还是三栏布局,使用的频率都非常高两栏布局两栏布局实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满,比如 Ant Design 文档,蓝色区域为主要内容布局容器,侧边栏为次要内容布局容器这里称宽度较小的列父元素为次要布局容器,宽度较大的列父元素为主要布局容器这种布局适用于内容上具有明显主次关系的网页三栏布局三栏布局按照左中右的顺序进行排列,通常中间列最宽,左右两原创 2021-10-08 15:58:40 · 762 阅读 · 0 评论 -
(16):css3动画
css3动画一、是什么1、 CSS动画(CSS Animations) 是为层叠样式表建议的允许可扩展标记语言(XML)元素使用CSS的动画的模块即指元素从一种样式逐渐过渡为另一种样式的过程2、常见的动画效果有很多,如 平移 、 旋转 、 缩放 等等,复杂动画则是多个简单动画的组合3、 css 实现动画的方式,有如下几种:(1) transition: 实现渐变动画(2) transform: 转变动画(3) animation: 实现自定义动画二、实现方式1、transiti原创 2021-10-07 23:58:08 · 454 阅读 · 0 评论 -
(17):css性能优化
css性能优化一、前言1、每一个网页都离不开 css ,但是很多人又认为, css 主要是用来完成页面布局的,像一些细节或者优化,就不需要怎么考虑,实际上这种想法是不正确的2、作为页面渲染和内容展现的重要环节, css 影响着用户对整个网站的第一体验3、因此,在整个产品研发过程中, css 性能优化 同样需要贯穿全程二、实现方式实现方式有很多种,主要有如下:(1)内联首屏关键CSS(2)异步加载CSS(3)资源压缩(4)合理使用选择器(5)减少使用昂贵的属性(6)不要使用@im原创 2021-10-08 00:27:55 · 169 阅读 · 0 评论 -
(30):css选择器
css选择器有哪些,优先级,哪些属性可以继承一、选择器1、CSS选择器是CSS规则的第一部分2、它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式3、选择器所选择的元素,叫做“选择器的对象”4、先从一个Html结构开始<div id="box"> <div class="one"> <p class="one_1"> </p > <p cla原创 2021-10-24 23:12:43 · 262 阅读 · 0 评论 -
(31):css隐藏页面元素
css隐藏页面元素的方式,区别一、前言1、在平常的样式排版中,我们经常遇到将某个模块隐藏的场景2、通过css隐藏元素的方法有很多种,它们看起来实现的效果是一致的3、但实际上每一种方法都有一丝轻微的不同,这些不同决定了在一些特定场合下使用哪一种方法二、实现方式通过css实现隐藏元素方法有如下:(1)display: none(常用)(2)visibility: hidden(常用)(3)opacity: 0(4)设置height、width模型属性为0(5)position: abs原创 2021-10-24 23:28:37 · 135 阅读 · 0 评论