CSS 选择器的分类
基本的： 1.id选择器（id="name"） 2.类选择器（class="head"） 3.标签选择器（body, div, ul, li） 4.全局选择器（*）复杂的： 1.组合选择器（.head .head_logo） 2.后代选择器 （#head .nav ul li 从父集到子孙集） 3.群组选择器 (div, span, img {color:Red} 具有相同样式的标签分组显示) 4.继承选择器 5.伪类选择器（链接样式，a元素的伪类） 6.子选择器（div>p, 带大于号>） 7.CSS相邻相邻兄弟选择器（h1+p, 带加号+）不同级别：总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
BFC
理解：BFC是css布局的一个概念，是一块独立的渲染区域，一个环境，里面的元素不会影响到外部的元素如何生成BFC：（脱离文档流） 1.根元素，即HTML元素（最大的一个BFC） 2.float的值不为none 3.position的值为absolute或fixed 4.overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外） 5.display的值为inline-block、table-cell、table-captionBFC布局规则： 1.内部的Box会在垂直方向，一个接一个地放置。 2.属于同一个BFC的两个相邻的Box的margin会发生重叠 3.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果，设置float 4.BFC的区域不会与float box重叠。 5.计算BFC的高度，浮动元素也参与计算BFC作用： 1.自适应两栏布局 2.可以阻止元素被浮动元素覆盖 3.可以包含浮动元素---清除内部浮动 原理:：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内 4.分属于不同的BFC时，可以阻止margin重叠列举不同的清除浮动的技巧
/* 1.添加新元素 */<div class="outer"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="clearfix"></div></div>.clearfix { clear: both;}/* 2.为父元素增加样式：BFC */.clearfix { overflow: auto; zoom: 1; // 处理兼容性}/* 3.:after 伪元素方法 (作用于父元素) */.outer { zoom: 1; &:after { display: block; height: 0; clear: both; content: ' '; visibility: hidden; }}移动端 1px 边框的问题
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。
css中的 px 就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个 css 像素代表多少个物理像素。例如，在 Retina屏的 iphone上，devicePixelRatio的值为2，也就是说1个 css 像素相当于2个物理像素。 移动前端开发之 viewport 的深入理解
伪类 + transform 解决问题
单条border样式设置：
.scale-1px { position: relative; border:none;}.scale-1px:after { content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0;}四条boder样式设置：
.scale-1px { position: relative;}.scale-1px:after { content: ''; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top;}圣杯布局和双飞翼布局的区别
圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负 margin 让其跟中间栏div并排，以形成三栏布局。
不同在于解决“中间栏 div内容不被遮挡”问题的思路不一样：
- 圣杯布局，为了中间
div内容不被遮挡，将外层div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间 div。 - 双飞翼布局，为了中间
div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。css布局
圣杯布局
<style> * { margin: 0; padding: 0; } .left, .center, .right { position: relative; float: left; height: 300px; } .wrapper { padding: 0 300px; overflow: hidden; } .left { left: -300px; margin-left: -100%; width: 300px; background: red; } .right { right: -300px; margin-left: -300px; width: 300px; background: green; } .center { width: 100%; background: blue; } </style>双飞翼布局
<style> * { margin: 0; padding: 0; } .center { float: left; width: 100%; height: 300px; overflow: hidden; background-color: springgreen; } .content { margin: 0 300px; height: 100%; background-color: purple; } .left { float: left; width: 300px; height: 300px; background-color: pink; margin-left: -100%; } .right { float: left; width: 300px; height: 300px; background-color: pink; margin-left: -300px; }</style><body><div class="wrapper"> <div class="center"> <div class="content"></div> </div> <div class="left"></div> <div class="right"></div></div></body>文章转载于:https://www.jianshu.com/p/7652ff1bed37
原著是一个有趣的人,若有侵权,请通知删除
还没有人抢沙发呢~