CSS复习笔记

画 1px 高的线，不同浏览器的效果一致

<div style="height:1px; overflow: hidden; background: red"><div>

盒模型

盒模型分为两种：IE 盒模型（怪异盒模型）、W3C 盒模型（标准盒模型） 盒模型是由 内容(content)、填充（padding）、边界（margin）、边框（border）组成 而 IE 盒模型的内容区域包括 border 和 padding 可以使用box-sizing: border-box设置成IE盒模型

CSS 清除浮动的几种方法

• 在浮动元素下再放一个标签，使用 clear:both 清除浮动

<ul>
  <li>11li>
  <li>22li>
  <li>33li>
  <span>span>
ul>

<style>
  ul {
    background: yellow;
  }
  li {
    background: red;
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
  }
  span{
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
  }
style>

• 创建格式化上下文（BFC）

<ul>
  <li>11li>
  <li>22li>
  <li>33li>
ul>

<style>
ul {
  background: yellow;
  overflow: hidden;
  float: left;
  /* position: fixed; */
  /* position: absolute; */
  /* display: inline-block; */
  /* display: table-cell; */
  /* display: table-caption; */
  /* overflow: hidden; */
  /* overflow: scroll; */
  /* overflow: auto; */
}

li {
  background: red;
  float: left;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
}
style>

• 添加::after伪元素

<ul class="clearfix">
  <li>11li>
  <li>22li>
  <li>33li>
ul>
<style>
  li {
    background: red;
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
  }

  ul {
    background: yellow;
  }

  /* 添加伪元素 */
  .clearfix::after {
    content: "";
    height: 0;
    display: block;
    clear: both;
  }
style>

如何隐藏元素

div {
  /* 设置透明度 占用空间*/
  opacity: 0;

  /* 隐藏 占用空间*/
  visibility: hidden;

  /* 定位：设置top left 为负值 占用空间*/
  position: absolute; /* flexd */
  top: -99999px;
  left: -99999px;

  /* 隐藏 不占用空间 */
  display: none;
}

link 和 @import 的区别

• link 是标签，没有兼容性，页面加载时会同步加载，可以用 js 来操作
• @import 是 css 的用来导入样式表的，只有在 CSS 加载完后才会引用其他CSS, IE5+ 才能识别

伪类与伪元素的区别

• 伪类使用单冒号 :，伪元素使用双冒号 ::
• 伪类是用于已存在的元素，在某种状态时为其添加样式，比如：:link :hover :active
• 伪元素是用于创建一些不存在DOM中的元素并为其添加样式， 如 ::after ::before

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul   id > class > tag  
  important 比 内联优先级高

CSS3新增伪类举例：
  p:first-of-type 选择属于其父元素的首个 
 元素的每个 
 元素。
  p:last-of-type  选择属于其父元素的最后 
 元素的每个 
 元素。
  p:only-of-type  选择属于其父元素唯一的 
 元素的每个 
 元素。
  p:only-child    选择属于其父元素的唯一子元素的每个 
 元素。
  p:nth-child(2)  选择属于其父元素的第二个子元素的每个 
 元素。
  :enabled、:disabled 控制表单控件的禁用状态。
  :checked，单选框或复选框被选中。

行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

• 块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

• 内联元素(inline)特性：

和相邻的内联元素在同一行; width\height\padding-top\padding-bottom\margin-top\maring-bottom都不可变

• 默认 inline-block 的元素

、 、 、、。

什么是外边距重叠？重叠的结果是什么？

外边距重叠就是 margin-collapse。

在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

rgba()和 opacity 的透明效果有什么不同？

rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度， 而 rgba() 只作用于元素的颜色或其背景色

文字居中和水平方向重叠的方法

垂直方向：line-height 水平方向：letter-spacing

如何垂直居中

• 绝对定位

.main {
  width: 100px;
  height: 100px;
  /* 重点 */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

.main {
  width: 100px;
  height: 100px;
  /* 重点 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.main {
  width: 100px;
  height: 100px;
  /* 重点 */
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

• flex布局

<div id="box">
  <div id="main">div>
div>

#box {
  display: flex;
  /* 设置内盒垂直居中 */
  align-items: center;
  /* 设置内盒水平居中 */
  justify-content: center;
}
#main {
  width: 200px;
  height: 200px;
  background: red;
}

• img 居中

.content {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

BFC

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

形成 BFC 的条件

• 浮动元素，float 除 none 以外的值
• 定位元素，position（absolute，fixed）
• display 为以下其中之一的值 inline-block，table-cell，table-caption
• overflow 除了 visible 以外的值（hidden，auto，scroll）

BFC 的特性

• 内部的 Box 会在垂直方向上一个接一个的放置。
• 垂直方向上的距离由 margin 决定
• bfc 的区域不会与 float 的元素区域重叠。
• 计算 bfc 的高度时，浮动元素也参与计算
• bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。