前端知识海底捞之CSS

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-caption
BFC布局规则：
    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.添加新元素 */

  

  

  

  


.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布局

圣杯布局

双飞翼布局