随笔分类 -  前端-CSS

flex布局
摘要：参考链接： https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb写的非常好 一、为什么要引入flex弹性布局？ css标准中为我们提供了三种布局：标准文档流、浮动布局和定位布局。 但是这些布局在使用时回去缺少语义并且不够灵活。 此时就出现了flex布局，可以 阅读全文
posted @ 2019-09-05 14:31 晴之万里，温暖向西 阅读(425) 评论(0) 推荐(0)
CSS中常见的布局
摘要：一、css中常见的布局有哪些？ （1）两列布局 （2）三列布局 （3）弹性布局 （4）圣杯布局 （5）双飞翼布局 二、具体实现 （1）两列布局 https://www.cnblogs.com/qing-5/p/11442906.html （2）三列布局 https://www.cnblogs.com 阅读全文
posted @ 2019-09-01 20:15 晴之万里，温暖向西 阅读(1166) 评论(0) 推荐(0)
CSS两列布局
摘要：方法1:左边设置绝对定位，右边设置左外边距，大小和左边的宽度相等 最终结果： 阅读全文
posted @ 2019-09-01 17:23 晴之万里，温暖向西 阅读(735) 评论(0) 推荐(0)
CSS重排和重绘
摘要：一、什么是重绘Repaint和重排 （回流 reflow） 二、引起重绘Repaint和重排（回流reflow ）的属性 2.1 引起重绘Repaint的属性 2.2 引起重排（回流reflow）的场景和属性 6.设置style属性 三、如何减少重绘（Repaint）和重排（reflow） 参考文章 阅读全文
posted @ 2019-08-16 00:37 晴之万里，温暖向西 阅读(3431) 评论(0) 推荐(0)
CSS三列布局
摘要：方法1:左右div设置浮动，脱离标准流，中间那块元素就会上去。 （注意：html代码中中间部分的div必须放到左右div的后面） 方法2:左右绝对定位的两块div元素,脱离标准流，中间那块元素就会上去 （注意：中间部分的div必须放到左右div的后面） 方法3:设置flex:1;可以自适应剩余空间 阅读全文
posted @ 2019-08-12 13:10 晴之万里，温暖向西 阅读(550) 评论(0) 推荐(0)
div上中下布局中间自适应
摘要：需求1： 头尾固定高度，中间自适应 1.上部（header）Div高度固定100px，宽度100%； 2.下部（footer）Div高度固定100px，宽度100%； 3.中部（middle）DIV高度根据屏幕高度，自适应充满（是根据内容自动填满），宽度100%； 4.用纯DIV+CSS实现，不采用 阅读全文
posted @ 2019-08-12 09:11 晴之万里，温暖向西 阅读(3054) 评论(0) 推荐(0)
CSS垂直居中的方法
摘要：方法1：display:flex+align-items 只需要给父元素设置属性 1 <style> 2 .parent{ 3 position: absolute; 4 width: 100px; 5 height: 100px; 6 border: 1px solid red; 7 8 disp 阅读全文
posted @ 2019-08-11 21:27 晴之万里，温暖向西 阅读(129) 评论(0) 推荐(0)
浏览器从输入URL到渲染完页面的整个过程
摘要：从输入URL到渲染出整个页面的过程包括三个部分： 1、DNS解析URL的过程 2、浏览器发送请求与服务器交互的过程 3、浏览器对接收到的html页面渲染的过程 一、DNS解析URL的过程 DNS解析的过程就是寻找哪个服务器上有请求的资源。因为ip地址不容易记忆，一般会使用URL域名（如www.bai 阅读全文
posted @ 2019-07-03 15:08 晴之万里，温暖向西 阅读(14554) 评论(0) 推荐(3)