CSS
文章平均质量分 91
CSS基础知识
leelxp
前端码农,算法差。。。
展开
-
CSS基础之如何前端布局方式有哪些
我们知道html定义了前端页面的结构,css定义了页面的样子,JavaScript定义了用于的行为。页面的结构和样式,又可以简单的成为是布局,我们就来讲讲前端页面的布局有哪些?1、流体布局流体布局其实我们正常的布局,他其实就是一个盒子模型。在这种布局下我们其实能操作的布局样式很少,我这里主要提一下margin属性,我们可以通过margin:auto;对子元素进行水平居中。通过它可以让元素水平居中的原因在于 auto 的计算原理:auto会让盒子模型填充父元素剩下的宽度。也可实现盒子的垂...原创 2020-08-27 11:21:54 · 708 阅读 · 0 评论 -
CSS基础之浏览器的重绘和回流是什么
回流和重回一直以来是我们关注的重点,所以在讨论回流与重绘之前,我们要知道:浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM,把CSS解析成CSSDOM,DOM和CSSDOM合并就产生了Render Tree。 有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。 由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次原创 2020-08-26 10:26:34 · 563 阅读 · 0 评论 -
CSS基础之link和@import的区别是什么?
CSS基础之link和@import的区别是:1、从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。2、加载顺序区别加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。3、兼容性区别@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。原创 2020-08-24 18:37:45 · 300 阅读 · 0 评论 -
CSS基础之BFC布局
CSS布局中BFC是面试中常被问到的问题,那么我们就来总结一下的相关知识点。BFC的全名叫block formatting context,是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。没看懂什么意思。应该是这样:BFC的布局是一个独立的布局,和BFC之外的布局是互不印象的; BFC布局是可以通过一些条件触发的,从而实现布局上的需求或解决一些问题; BFC其实就是一个工具,理解功能和特性就OK。BFC触发的条件?根元素(<h.原创 2020-07-27 15:35:22 · 3847 阅读 · 0 评论 -
CSS基础之标准盒模型和怪异盒模型
标准盒模型和怪异盒模型:盒子的大小是由于盒子的content,padding,border,margin组成的。标准盒模型:主要是非IE浏览器。盒子的总宽度:width = content + padding + border + margin怪异盒模型:IE浏览器盒子的总宽度:content = content + padding + borderwidth = content +margin解决兼容性的方式:不要给元素本身添加固定的padding,给其父级元素添加;c.原创 2020-06-30 18:49:01 · 6036 阅读 · 0 评论 -
css基础之移动端1px问题
在了解为什么会出现1px的问题之前先讲解俩个概念:物理像素:物理像素是每个手机在出场的时候,每个手机的设备像素,也叫硬件像素。逻辑像素:逻辑像素是css记录的像素。为什么会出现1px问题(主要是iphone中出现)其实出现1px的原因还是在于,UI设计师要求的1px是物理像素,而我们开发写的css是逻辑像素,他们是不一样的,存在一个换算比例,通常JavaScript可以通过window.devicePixelRatio来获取,在iPhone上出现边框原因就是因为devicePixelRati原创 2020-06-23 11:48:07 · 838 阅读 · 0 评论 -
CSS基础之移动端适配问题
随着互联网行业的不断发展,移动互联网的比重越来越大,移动端开发适配问题是困扰大多数开发人员的难点,下面就简单聊聊这个问题:(1)媒体查询记得那还是上古时代,在开发pc端网页的时候,当浏览器视图窗口随意缩放的时候,我们要求所看到的页面大小要随窗口大小伸缩或者隐藏,当时,我们的解决方案就是通过媒体查询的方法,获取视图窗口的宽度,根据不同的视图宽度显示不同的宽度。@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/.原创 2020-06-22 19:12:42 · 311 阅读 · 0 评论