通俗重制系列--CSS基础

CSS语法

语法一：样式语法

选择器{
  属性名:s属性值;
  /*注释*/
}

@语法

link 和 @import 都能导入一个样式文件，它们有什么区别嘛？

• link 是 HTML 标签，除了能导入 CSS 外，还能导入别的资源，比如图片、脚本和字体等；而 @import 是 CSS 的语法，只能用来导入 CSS；
• link 导入的样式会在页面加载时同时加载，@import 导入的样式需等页面加载完成后再加载；
• link 没有兼容性问题，@import 不兼容 ie5 以下；
• link 可以通过 JS 操作 DOM 动态引入样式表改变样式，而@import不可以。

@charst"UTF-8" //声明字符编码
@import url (2.css)// 导入额外的css文件
@media (min-width: 100px) and (max-width: 200px) {
  语法一
} //媒体查询

注意事项

1.@charset 必须放在第一行
2.前两个 at 语法必须以分号 ; 结尾
3.charset 是字符集的意思，但 UTF-8 是字符编码 encoding，这是历史遗留问题

优先级

文档流

流动方向

1. inline（内联） 元素从左到右，到达最右边才会换行
2. block（块） 元素从上到下，每一个都另起一行
3. inline-block（内联块） 也是从左到右,但是到达最后不会把自己分成两块

宽度

1. inline 宽度为内部 inline 元素的和，不能用 width 指定
2. block 默认自动计算宽度（不是100% ），可用 width 指定
3. inline-block 结合前两者特点，可用 width

高度

1. inline 高度由 line-height 间接确定，跟 height 无关
2. block 高度由内部文档流元素决定，可以设 height
3. inline-block 跟 block 类似，可以设置 height

overflow 溢出

当内容大于容器 当内容的宽度或高度大于容器的，会溢出 可用 overflow 来设置是否显示滚动条

1. auto 是灵活设置
2. scroll 是永远显示
3. hidden 是直接隐藏溢出部分
4. visible 是直接显示溢出部分
5. overflow可以分为 overflow-x 和 overflow-y

auto示例

脱离文档流

哪些元素脱离文档流

1. float
2. position: absolute / fixed

position: absolute示例

盒模型

• content-box：标准盒模型；
• border-box：IE 盒模型；

• content-box width = 内容宽度
• border-box width = 内容宽度 + padding + border

基本单位

长度单位

1.px 像素
2.em 相对于自身 font-size 的倍数
3.百分数
4.整数
5.rem：等你把 em 滚瓜烂熟了再问 rem
6.vw 和 vh
7.其他长度单位都用得很少，不用了解

说一下浮动

从三个方面回答：1、浮动的作用：常用于图片，可以实现文字环绕图片。

2、浮动的特点：脱离文档流，容易造成盒子塌陷，影响其他元素的排列。

3、解决塌陷问题： 流行用法：

• 父元素中添加overflow:hidden
• 给父元素添加高度、建立空白标签
• 添加clear
• 或者在父级添加伪元素

::after{
    content:'',
    clear:both,
    display:table
-}

如何清除浮动？

实践题，建议写博客，甩链接。

方法一，给父元素加上 .clearfix

.clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }

方法二，给父元素加上 overflow:hidden。

BFC 是什么

是什么：

避免回答，直接把 BFC 翻译成中文「块级格式化上下文，独立的渲染区域」即可，千万别解释。

怎么做：

背诵 BFC 触发条件，虽然 MDN 的这篇文章 列举了所有触发条件，但本押题告诉你只用背这几个就行了

• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块 inline block 元素
• overflow 值不为 visible 的块元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

解决了什么问题：

1. 清除浮动（为什么不用 .clearfix 呢？）
2. 防止 margin 合并
3. 某些古老的布局方式会用到（已过时）

优点： 无。

缺点： 有副作用。

怎么解决缺点： 使用最新的 display: flow-root 来触发 BFC 就没有副作用了，但是很多人不知道。

如何实现垂直居中？

1. 利用绝对定位，设置 left: 50%  和 top: 50%  现将子元素左上角移到父元素中心位置，然后再通过 translate  来调整子元素的中心点到父元素的中心。该方法可以不定宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2. 利用绝对定位，子元素所有方向都为 0 ，将 margin  设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}

3. 利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left  和 margin-top  以子元素自己的一半宽高进行负值赋值。该方法必须定宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

4. 利用 flex ，最经典最方便的一种了，不用解释，定不定宽高无所谓的。

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

其实还有很多方法，比如 display: grid  或 display: table-cell  来做，有兴趣点击下面这篇文章可以了解下：

如果 .parent 的 height 写死了，就很难把 .child 居中，以下是垂直居中的方法。

忠告：能不写 height 就千万别写 height。

1. table自带功能
2. 100% 高度的 afrer before 加上 inline block
   这个方法还有一个优化版本
3. div 装成 table
4. margin-top -50%
5. translate -50%
6. absolute margin auto
7. flex

得分点：flex 方案、grid 方案、transform 方案……