随笔分类 -  css

网页布局——三列布局（左侧和右侧固定，中间自适应）
摘要：一：flex弹性布局 <!DOCTYPE> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0;margin: 0;} body{ display: flex; } . 阅读全文
posted @ 2019-11-03 11:21 Lsever 阅读(919) 评论(0) 推荐(0)
浅谈BFC
摘要：1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 2.BFC的生成 上文提到BFC是一块渲染区域 阅读全文
posted @ 2019-10-01 17:24 Lsever 阅读(175) 评论(0) 推荐(0)
css实现水平垂直居中
摘要：第一种：利用css3的transform和绝对定位 效果如图所示，并且不管如何改变页面的宽高，元素始终水平垂直居中。 第二种：利用css3的transform和相对定位 使用这种方法必须设置html,body的高度 第三种：利用margin和相对定位 使用这种方法必须设置html,body的高度及自 阅读全文
posted @ 2019-08-26 13:43 Lsever 阅读(200) 评论(0) 推荐(0)
响应式与自适应的区别
摘要：自适应的体验 http://m.ctrip.com/html5/响应式的体验 http://segmentfault.com/ 自适应：自己根据屏幕宽度的改变而改变（典型的写法不需要media判断，直接让每个元素通过相对的宽度，比如百分比、vh、em 、rem等来改变容器的大小，文字的大小） 响应式 阅读全文
posted @ 2019-07-01 19:02 Lsever 阅读(276) 评论(0) 推荐(0)
网页布局——左侧固定，右侧自适应
摘要：第一种方法：采用绝对定位+BFC（overflow:auto） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 阅读全文
posted @ 2019-04-23 16:11 Lsever 阅读(1245) 评论(0) 推荐(0)
nth-of-type与nth-child的区别
摘要：nth-of-type： 简单来说nth-of-type会忽略其它标签的顺序而按照标签自身种类的顺序进行筛选，也就是选择的参照点并不是DOM数，而是自身。下面我们结合具体的例子来了解下。 代码效果如下图所示，文本中的第3个p标签背景颜色发生改变。 nth-child： 它的属性就是按照所有类型标签的 阅读全文
posted @ 2019-04-16 20:28 Lsever 阅读(1025) 评论(0) 推荐(0)