CSS 精简要点

网页布局思路

先整体再局部，从外到内，从上到下，从左到右。

CSS 实现思路

• 画盒子，调整盒子范围，宽、高、背景等。
• 调整盒子位置，flex 布局，内外边框等。
• 控制图片、文字内容样式。

Emmet 代码的简写方式

• 标签名.类名：类选择器。
• 标签名#id名：id 选择器。
• div+p：同级标签。
• div>p：父子标签。
• span\*3：多个相同标签。
• div{内容}：有内容的标签。
• CSS 一般是属性的首字母。

样式书写顺序，性能有关

• 浮动元素。
• 盒子模型属性。
• 文字样式。
• 圆角、阴影等修饰属性。
• 布局时从外到内，从左到右，从上到下。

::placeholder 选中 :placeholder 文字样式（特别关注，这是一个特殊选择器）

.search input::placeholder {
  font-size: 14px;
  color: #999;
}

标准流

也叫文档流，指的是标签在页面中排布规则。但是float浮动的标签会脱标。脱标后如果父元素没有高度，就撑不开父级容器了。

• 清除浮动影响办法一（了解）

额外标签法，在父元素内容的最后添加一个块级元素clearfix，设置css属性clear:both。

.clearfix {
  clear: both;
}

• 清除浮动影响办法二

单伪元素法，给浮动元素的父级元素添加伪元素。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

• 清除浮动影响办法三（推荐）

双伪元素法，给浮动元素的父级元素添加双伪元素。before解决margin塌陷问题，after解决浮动影响。

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

• 清除浮动影响办法四

父级元素添加css属性overflow:hidden。

overflow: hidden;

盒子水平居中，网页版芯效果

margin: 10px auto /*10px是上下间距*/;

页面居中定位

• 父级相对定位。
• 子级绝对定位。absolute。
• 水平、垂直边偏移为 50%。
• 子级向左、上移动自身尺寸的一半。

img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

或者

img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left:-265px  //自身宽度一半；
  margin-top:-127px   //自身高度一半；
}

文字控制属性之 line-height

• 值为像素或者数字，数字表示字体高度倍数。
• 单行文字垂直居中技巧，行高属性值等于盒子高度属性值。

文字控制属性之 font-famliy

font-family: "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC",
  "WenQuanYi Micro Hei", sans-serif;

文字控制属性之 font

字号和字体值必须有，否则样式不生效。【是否倾斜 是否加粗 字号/行高 字体】 (必须按照这个顺序写)。

font: 16px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
  sans-serif;

清除默认样式

/* 去除常见标签默认的 margin 和 padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
    sans-serif;
  color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

伪类选择器

如果要给超链接设置伪类选择器的四个状态，需要按照 LVHA(link、visited、hover、active) 顺序书写。

div:hover{
  xxx
}

选择器优先级公式

• 选中的范围越大优先级越低。!important 添加在属性值后面，权重最高。继承权重最低。
• 公式为：通配符选择器<标签选择器<类选择器<id 选择器 <行内选择器 < !important。
• 如果是复合选择器，则需要权重叠加计算。规则是：行内选择器个数，id 选择器个数，类选择器个数，标签选择器个数。从左到右依次比较个数，同一级个数多的优先级高。如果个数相同，则依次向后比较。

显示模式

• 块级元素 block：独占一行，宽度默认是父级的 100%，添加宽高属性生效。典型代表 div。不加高度，由内容撑开高度。
• 行内元素 inline：一行可以共存多个，尺寸由内容撑开，加宽高属性不生效。典型代表 span。
• 行内块元素 inline-block：一行可以共存多个，尺寸由内容撑开，加宽高属性生效。典型代表 img。

background

背景图复合属性，背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开，不区分顺序)

background：pink url(../Res/img.png) no-repeat center bottom/cover

结构伪类选择器，根据元素的结构关系查找元素

• div:first-child 查找第一个 div 元素。
• div:last-child 查找最后一个 div 元素。
• div:nth-child(N) 查找第 N 个 div 元素。第一个元素 N 值为 1。
• div:nth-child(公式) 根据元素的结构关系查找多个元素。

提示

偶数标签 2n
奇数标签 2n+1;2n-1
5 的倍数的标签 5n
第 5 个以后的标签 n+5
第 5 个以前的标签 -n+5

伪元素选择器，创建虚拟元素，用来摆放装饰性的内容。

• div::before 在 div 元素里面最前面添加一个伪元素。
• div::after 在 div 元素里面最后面添加一个伪元素。

提示

必须设置 content:""属性，用来设置伪元素的内容，如果没有内容，则引号留空即可。
伪元素默认是行内显示模式。
权重和标签选择器相同。

盒子模型

标准盒模型下盒子的大小 = content + border + padding + margin。

外边距问题-合并现象

垂直排列的兄弟元素，上下 margin 会合并。取两个 margin 中较大值生效。

外边距问题-塌陷现象

父子级的标签，子级的添加上外边距会产生塌陷问题，导致父级一起向下移动。

• 盒子外边框塌陷问题解决办法一：取消自己 margin，父级添加 padding

.father {
  width: 300px;
  height: 300px;
  background-color: brown;

  padding-top: 50px;
  box-sizing: border-box;
}
.son {
  width: 100px;
  height: 100px;
  background-color: #3fe23f;
}

• 盒子外边框塌陷问题解决办法二：父级添加overflow:hidden

.father {
  width: 300px;
  height: 300px;
  background-color: brown;

  overflow: hidden;
}
.son {
  width: 100px;
  height: 100px;
  background-color: #3fe23f;
  margin-top: 50px;
}

• 盒子外边框塌陷问题解决办法三：父级添加border-top

.father {
  width: 300px;
  height: 300px;
  background-color: brown;

  border-top: 1px solid #000;
}
.son {
  width: 100px;
  height: 100px;
  background-color: #3fe23f;
  margin-top: 50px;
}

<div class="father">
  <div class="son">son</div>
</div>

行内元素-内外边距问题

行内元素添加margin和padding，无法改变元素的垂直位置。解决办法：给行内元素添加line-height可以改变垂直位置。

盒子阴影效果

依次是：x轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

box-shadow: 0px 10px 10px 20px rgba(0, 0, 0, 0.5);

flex

• flex 布局也叫弹性布局，是浏览器推荐的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。不会产生脱标问题。父级没高度，子元素会撑开父元素的高度。
• 父元素添加flex，子元素可以自动挤压或拉伸。
• justify-content是主轴对齐方式不是水平轴，align-items是侧轴对齐方式，不是垂直轴。flex-direction改变主侧轴方向。align-self控制子元素自身对齐方式。
• flex控制弹性盒子（子元素）在主轴方向的尺寸。属性是整数数字值，表示占用父级剩余尺寸的份数。
• lign-content专门控制行的对齐方式。单行不生效。

input 去掉输入框和背景色

background-color: transparent;
outline: none;

父级是 flex 布局，子级自动转弹性盒子

自己设置宽高是自动生效的，不需要手动将子级非块元素转成块或者行内块元素。

vertical-align 专门处理行内块和行内垂直方向对齐方式

默认是基线baseline对齐方式。基线对齐的行内元素都被当成文字处理。字体有基线。所以图片与父元素底下会出现空白区域。

.user img {
  vertical-align: middle; //一句话图片和文字自动垂直居中
}

<a href="#">
  <img src="./uplaods/user.png" alt="" />
  <span>播仔学前端</span>
</a>

a 元素背景图片和文字对齐方式

.banner .left a {
  display: block;
  height: 46px;
  background: url(../images/right.png) right center; /*背景图片右侧对齐并垂直居中*/
  background-repeat: no-repeat;
  line-height: 46px;
  font-size: 16px;
  color: #fff;
}

.banner .left a:hover {
  background-image: url(../images/right-hover.png);
  color: #00a4ff;
}

relative 相对定位

• 相对原来的位置。
• 不脱标，占位。
• 标签显示模式是不变的。

absolute 绝对定位

• 子级绝对定位，父级相对定位(子绝父相)
• 脱标，不占位。
• 显示模式会改变。宽高会生效。

fixed 固定定位

• 元素在网页中滚动时位置固定不变。
• 脱标，不占位。
• 改变位置的参考物是浏览器窗口。
• 显示模式是行内块的特点。

堆叠层级 z-index

• 默认效果，按照标签书写顺序，后来者居上。z-index 改变定位元素的层级顺序，改变定位元素的显示顺序。
• 取整数值，默认是 0。值越大，元素越在上层。

CSS 精灵

许多小图整合成一张大图，再用background-position精确的定位出背景图片的位置。

• 创建盒子，盒子尺寸与小图尺寸相同。
• 设置盒子背景图为精灵图。
• 添加background-position属性，改变背景图位置。
  • 使用pxCook测量小图片左上角坐标。
  • 取负数坐标background-position属性值。

<style>
  div {
    width: 112px;
    height: 110px;
    background-color: pink;
    background: url(../RES/abcd.jpg) -256px -276px; /*复合写法*/
    /* background-position: -256px -276px; */
  }
</style>
<body>
  <div></div>
</body>

字体图标，图标网址：iconfont.cn

• 灵活性：灵活地修改样式。
• 轻量级：体积小，渲染快，降低服务器请求次数。
• 兼容性：几乎兼容所有主流浏览器。
• 使用方便：下载后即可使用。将下载后的iconfont.css文件引入项目中。

<link
  rel="stylesheet"
  href="../RES/download/font_4943477_g3ga6n55his/iconfont.css"
/>

• 标签使用字体图标类名。
  • iconfont:字体图标基本样式。
  • icon-xxx:图标对应的类名。

<style>
  .iconfont {
    font-size: 200px;
    color: chartreuse;
  }
</style>

<span class="iconfont icon-aixin"></span>

SEO 三要素

title description keywords提升搜索引擎排名。

input 宽度重置的问题

浏览器优先生效input标签的默认宽度，所以flex:1不生效。解决办法是重置 input 的默认宽度width:0

.search input {
  width: 0;
  flex: 1;
}

flex布局挤压纠正

如果父级宽度不够，子级就会被挤压变小，子级不想被挤小，就要增大父级尺寸。