wyx8267
wyx8267

CSS进阶（杂乱笔记系列）

一、CSS布局

主要使用：

  • normal flow
  • float + clear
  • position relative + absolute
  • display inline-block
  • 负margin

1. Float布局

2. Flex布局

全屏里居中：

height: 100vh;
box-sizing: border-box;
/*!!!*/
display: flex;
justify-content: center;
align-items: center;
/*!!!*/

3. 水平居中

  • child宽不确定
    margin-left: 20px;
    margin-right:20px;
  • child宽度确定
    margin-left: auto;
    margin-right: auto;
  • parent
    .parent{
     text-align: center;
    }
    .child{
     display: inline;
    }

4. 垂直居中

  • child高确定
    .parent{
     padding-top: 20px;
     padding-bottom: 20px;
    }
  • child高不确定（同上）

尽量避免parent高确定的情况

  • parent高度确定：

    • IE——table、div(table)布局

    • chrome、移动端——flex布局

二、文档流

div高度由其内部文档流元素的高度的总和决定

脱离文档流：

  1. float: left
  2. position: absolute
  3. position: fixed

position: relative不会脱离文档流，可相对原位置设置定位以偏离原始位置。

文字省略溢出

text-overflow:ellipsis;
overflow:hidden;

文字垂直居中

设置line-height与上下padding

margin合并

border、padding可以有效取消margin合并的问题

overflow:hidden 同样有效但不推荐使用

内联元素

可用padding margin影响宽度，高度由行高决定

一比一div

仅用padding-top: 100%就可实现

三、堆叠

堆叠顺序

由底到顶：定位元素（负z-index）< background < border < div / 块级元素 < 浮动元素 < 文字 / 内联元素 < 定位元素（正z-index）

z-index：只有定位元素可加，默认为0

堆叠上下文

  • 根元素 (HTML),
  • z-index 值不为 "auto"的 绝对/相对定位，
  • 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
  • opacity 属性值小于 1 的元素（参考 the specification for opacity），
  • transform 属性值不为 "none"的元素，
  • mix-blend-mode 属性值不为 "normal"的元素，
  • filter值不为“none”的元素，
  • perspective值不为“none”的元素，
  • isolation 属性被设置为 "isolate"的元素，
  • position: fixed
  • 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
  • -webkit-overflow-scrolling 属性被设置 "touch"的元素

四、图标（icon）

  1. 切图，使用photoshop。
  2. background-image：背景图不会因div大小变形
  3. CSS sprites（雪碧图、精灵图）
  4. iconfont-HTML
  5. iconfont-CSS
  6. SVG-icon
  7. CSS画图标：https://cssicon.space/

五、移动端页面（响应式）

媒体查询（media query）

@media (max-width: 800px){
 body{
 background: red;
 }
}/*媒体查询，满足最大宽度不超过800px时执行其中内容*/
​
@media (min-width:321px) and (max-width: 375px){
 body{
 background: red;
 }
}/*321~375*/

手机端所需meta

移动端特点

  1. 没有hover
  2. 有touch事件
  3. 没有resize
  4. 没有滚动条

六、FLEX

Flex布局特点：

  1. 块级布局侧重垂直方向、行内布局侧重水平方向，flex布局与反向无关
  2. flex布局可以实现空间自动分配、自动补齐
  3. flex适用于简单的线性布局，复杂布局要使用grid布局

  1. flex container的属性

    • flex-direction：方向
    • flex-wrap：换行
    • flex-flow：上面两个的缩写
    • justify-content：主轴方向对齐方式
    • align-items：侧轴对齐方式
    • align-content：多行/列内容对齐方式（使用频率少）

  2. flex item的属性

    • flex-grow：增长比例（空间过多时）
    • flex-shrink：收缩比例（空间不够时）
    • flex-basis：默认大小（一般不用）
    • flex：上面三个的缩写
    • order：顺序（代替双飞翼）
    • align-self：自身的对齐方式

七、Grid（网格布局）

  1. grid container的属性

    • display: grid | inline-grid | subgrid
    • grid-template-columns(rows) ：设置各列（行）名称和宽度（高度）
    • grid-template-areas：设置区域组成，搭配grid-area
    • grid-template：一次性使用以上三属性
    • grid-colomn(row)-gap：列（行）之间空隙
    • justify-items：start | end | center | stretch 水平轴
    • align-items：start | end | center | stretch 纵轴
    • justify-content：设置网格行轴对齐方式
    • align-content：设置网格列轴对齐方式
    • grid-column(row)：以行列第 n / m 条线之间来定位网格

  2. grid items的属性

    • grid-column(row)-start(end)：定位网格

八、BFC

块格式化上下文（Block Formatting Context）是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

BFC元素特性表现原则：内部子元素无论如何不会影响外部元素。

display: flow-root，一个特殊CSS3新属性，专用于触发BFC。

  • 同一个BFC中的相邻块级盒之间的竖直margin会合并
  • 一个BFC包括创建它的元素内部所有内容，除了被包含于创建新的BFC的后代元素内的元素

CSS规范中对 BFC 的描述

9.4.1 块格式化上下文

浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文

在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并

在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）

MDN 对 BFC 的描述

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

一个块格式化上下文由以下之一创建：

  • 根元素或其它包含它的元素
  • 浮动元素 (元素的 float 不是 none)
  • 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
  • 内联块 (元素具有 display: inline-block)
  • 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
  • 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  • 具有overflow 且值不是 visible 的块元素，
  • display: flow-root
  • column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

九、动态REM

手机专用的自适应方案

什么是REM

em: 一个m的宽度 / 一个汉字宽度 rem: root em 根元素的font-size vh: viewport height 视口高度 vw: viewport width 视口宽度

REM和EM的区别

em：所在子元素的font-size rem：根元素的font-size

手机端方案的特点

屏幕比例多，不可能记住每一种及做出每一种对应页面，要保证不同屏幕中网页的视觉比例效果相同，可响应不同手机。

使用JS动态调整REM

使用JS设置font-size与页面宽度相联系、对应，使rem可用于移动端页面效果的响应。

var pageWidth = window.innerWidth
document.write('