CSS选择器及优先级

选择器

  • id 选择器 #myid
  • 类选择器 .myclass
  • 属性选择器 a[ref='exnteds']
  • 伪类选择器 a:hover, li:nth-child
  • 标签选择器 li, div
  • 兄弟选择器 h1 + div, p + span
  • 子类选择器 ul > li
  • 后代选择器 ul li a
  • 通配符选择器 *

优先级

  • !important
  • 内联样式 1000
  • ID 选择器 100
  • 类选择器 、 属性选择器， 伪类选择器 10
  • 元素选择器 、 伪类选择器 1
  • 关系选择器、 通配符选择器 0

带!important 标记的样式属性优先级最高； 样式表的来源相同时： !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

常见的兼容性问题

  1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
  2. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性
  3. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
  4. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
  5. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

CSS3的新特性

  • 过渡， 所有属性从原始值到制定值的一个过渡 transition：all,.5s
  • 动画 animation: logo2-line 2s linear;

  • 形状转换 

    1. //transform:适用于2D或3D转换的元素
    2. //transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)
    3. transform:translate(30px,30px);
    4. transform:rotate(30deg);
    5. transform:scale(.8);  // 缩放

  • 选择器:nth-of-type() 指定标签的位置的选择器

  • 阴影 文字阴影: text-shadow: 2px 2px 2px #000;(水平阴影，垂直阴影，模糊距离，阴影颜色) 盒子阴影: box-shadow: 10px 10px 5px #999
  • 边框 border-image: url(border.png);
  • 背景
  • 文字
  • 渐变
  • Filter （滤镜）
  • 弹性布局， 栅栏布局， 多列布局
  • 媒体查询

Position 属性值有哪些 和 它们的区别

固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。

相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。

默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。

box-sizing 属性

box-sizing 规定两个并排的两个带边框的框 ， 语法为 box-sizing：content-box/border-box/inherit

  • content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。【标准盒子模型】
  • border-box：为元素设定的宽度和高度决定了元素的边框盒。【IE 盒子模型】
  • inherit：继承父元素的 box-sizing 值。

CSS盒子模型

CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容
CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。

在标准的W3C盒子模型中，width 指 content 部分的宽度。
在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。

标准盒模型： 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右)
怪异盒模型： 一个块的总宽度 = width+margin（左右）（既 width 已经包含了 padding 和 border 值）

BFC 块级格式上下文

BFC的概念

BFC是Block Formatting Context 的缩写， 即块级格式上下文。
BFC是CSS布局的一个概念， 是一个独立的渲染区域，内部 box 如何进行布局， 并且这个区域的子元素不会影响到外面的元素， 其中比较重要的布局规则 有内部 box 垂直放置 ，计算 BFC的高度的时候， 浮动元素也于计算

BFC的原理布局规则

  • 内部的Box会在垂直方向，一个接一个地放置
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反
  • BFC的区域不会与float box重叠
  • BFC是一个独立容器，容器里面的子元素不会影响到外面的元素
  • 计算BFC的高度时，浮动元素也参与计算高度
  • 元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

如何创建BFC

  • 根元素 ， 即HTML
  • float的值不为 none
  • position为 absolute | fixed
  • display的值为 inline-block | table-cell | table-caption
  • overflow 的值不为 visible

使用BFC的场景

  • 去除边距重叠现象
  • 清除浮动 （让父元素的高度包含子浮动元素）
  • 避免某元素被浮动元素覆盖
  • 避免多列布局由于宽度计算四舍五入而自动换行

让一个元素水平垂直居中

水平居中

  • 对于行内元素 ： text-align: center;
  • 对于确定宽度的块级元素
    • width 和 margin 实现 ： margin: 0 auto;
    • 绝对定位和 margin-left: margin-left: (父width - 子width）/2 , 前提是父元素position: relative
  • 对于宽度未知元素
    • （1）table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。
    • （2）inline-block实现水平居中方法, 。display：inline-block和text-align:center实现水平居中。将元素设置为行内块级元素，再使用 text-align: center;
    • （3）绝对定位+transform，translateX可以移动本身元素的50%。
    • （4）flex布局使用justify-content:center


垂直居中

  • 使用 line-height 实现居中 ， 适合纯文字类
  • 通过设置父容器 相对定位 ，子级设置 绝对定位 再通过 margin 实现自适应居中
  • 弹性布局 flex : 父级设置 display: flex; 子级设置 margin: auto 实现自适应居中
  • 父级设置相对定位， 子级设置绝对定位， 并且通过位移 transform实现
  • table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

隐藏页面中某个元素的方法

  1. opacity: 0, 该元素隐藏起来了，但不会改变页面的布局 ，并且，如果该元素已经绑定了一些事件，那么这个事件还是会触发
  2. visibility: hidden, 该元素隐藏起来了， 但不会改变页面布局，但是不会触发该元素绑定的事件，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
  3. diplay: none， 把元素隐藏起来， 并且会改变页面的布局， 页面不再显示对应的元素，在文档布局中不再分配空间 （回流 + 重绘）

使用CSS实现三角符号

  1. /*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
  2. div:after {
  3.   position: absolute;
  4.   width: 0;
  5.   heigth: 0;
  6.   content: "";
  7.   border-rigth: 100px solid transparent;
  8.   border-bottom: 100px solid transparent;
  9.   border-left: 100px solid transparent;
  10.   border-top: 100px solid #ccc;
  11.  }

页面布局

flex 布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex 是 Flexible Box 的缩写，意为”弹性布局”,用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。 简单的分为容器属性和元素属性。

容器的属性

  • flex-direction 决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap 决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
  • flex-flow
  • juestify-content 对齐方式，水平主轴对齐方式
  • align-items 对齐方式 ， 竖直轴线方向
  • align-content

item子类元素的属性

  • order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
  • flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
  • flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小
  • flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
  • flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
  • align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖
  • align-items，默认属 性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

REM 布局

首先 Rem 相对于根(html)的 font-size 大小来计算。简单的说它就是一个相对单例 如:font-size:10px; 那么（1rem = 10px）了解计算原理后首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem 布局的本质是等比缩放，一般是基于宽度。

优点：可以快速适用移动端布局，字体，图片高度

缺点：
①目前 ie 不支持，对 pc 页面来讲使用次数不多；
②数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；
③在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

使用 rem 或 viewport 进行移动端适配

rem 适配的原理 ： 改变了一个元素在不同设备上占据的CSS像素的个数
rem 适配的优缺点：

  • 没有破坏完美视口
  • px值转换rem太过于复杂(下面我们使用less来解决这个问题)

viewport适配原理 ： viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，等比的

viewport适配的优缺点

  • 在我们设计图上所量取的大小即为我们可以设置的像素大小，即所量即所设
  • 缺点破坏完美视口

清除浮动的方式

  • 添加额外的标签，并添加 clear属性 <div style="clear:both"></div>
  • 父级添加 overflow 属性，或者设置高度
  • 建立伪类选择器清除浮动 
    1. //在css中添加:after伪元素
    2. .parent:after{
    3.   /* 设置添加子元素的内容是空 */
    4.   content: '';
    5.   /* 设置添加子元素为块级元素 */
    6.   display: block;
    7.   /* 设置添加的子元素的高度0 */
    8.   height: 0;
    9.   /* 设置添加子元素看不见 */
    10.   visibility: hidden;
    11.   /* 设置clear：both */
    12.   clear: both;
    13. }

CSS预处理器 Sass 、 Less、 Stylus

CSS预处理器是一种语言用来为CSS增加一些变成的特性，无需考虑浏览器兼容问题，例如你可以在CSS中使用变量，简单的程序逻辑、函数等在编程语言中的一些基本技巧，可以让CSS更加简洁，适应性更强，代码更直观等诸多好处 基本语法区别