CSS核心概念与布局技巧-CSDN博客

本文链接：https://blog.csdn.net/chenzhizhuo/article/details/103108919

一. CSS 之 px, em, rem

背景简介

PX 为单位
*px 比较精准和固定。只要页面某个元素设置了px字体大小，其子元素/子孙元素未设置字体大小或者设置字体大小对应的CSS优先级没有父元素高，该子元素/子孙元素会继承其父原始px设置的大小；
*
这种方式存在一个问题，当用户通过滚动鼠标改变浏览器字体大小时，会使web页面布局被打破；
em 为单位
em 可以解决px 浏览器放大导致的布局打破问题，其实际字体大小依赖父级字体的大小变化而变化。em定义的大小最终实际大小取决与父元素的值！(可能存在多个参考值)
rem 为单位
rem 是相对于页面根原始 html 标签 , 这意味着只需要确定根元素一个参考值即可。其它原始设置rem大小都是以html 的字体大小设置为参考进行字体大小缩放；
字体大小值标准参考图：
代码实例:

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

讲解: 我在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算：1.2rem即 12px ，1.6rem即16px 。如果没有设置，将是以**浏览器默认的“16px”**为基准）

一个基于rem 的响应式实现实例

该实现方式有一个缺点对js会产生依赖，切js动态监听视口变化部分的代码要尽量的放在head 前第一个执行。

// js 部分
function refreshRem(){
        var docEl = document.documentElement;
        var width = docEl.getBoundingClientRect().width;
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        console.log(width, docEl.clientWidth)
      }
      var resizeEvt = 'orientationchange' in window? 'orientationchange' : 'resize';
      window.addEventListener(resizeEvt, refreshRem, false)
      document.addEventListener('DOMContentLoaded', refreshRem, false)

  // css 部分
  <style>
      html{
        font-size: 100px;
      }
      body{
        font-size: 12px;
      }
      #div1{
        width: 2rem;
        float:left;
        background: red;
      }
      #div2{
        width: 4rem;
        float: left;
        background: blueviolet;
      }
    </style>
    
    // html 部分
    <body>
    <div class="root">
      <div id="div1">flix item div1</div>
      <div id="div2">flix item div2</div>
    </div>
  </body>

二. CSS 盒模型

css盒模型及如何通过css告知不同的盒模型来渲染布局

w3c 的标准盒模型
盒子所占宽(高) = 设置的width(height) + margin + padding + border
IE盒模型
盒子所占宽(高) = 设置width(height) + margin。因为设置的width = content + padding + border.
CSS3中的 box-sizing属性
分别对应content-box 和 border-box

三. Flex 布局

Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
采用Flex布局的元素，称为Flex容器(flex container), 简称 “容器”。它的所有子元素自动称为容器成员，称为Flex项目(flex item), 简称"项目"
这里引用网上的一张图：
在这里插入图片描述
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

6个设置在容器上的属性

flex-direction
主轴的方向
row | row-reverse | column | column-reverse
flex-wrap
如何换行
flex-flow
flex-direction & wrap 的缩写方式（默认： row nowrap）
align-items
交叉轴方向如何对齐（容器需要设置宽高才能生效）
flex-start | flex-end | center | baseline | stretch;
align-content
产生多根轴线时的对齐方式设置（如果只有一根轴线/一行该属性无效）
flex-start | flex-end | center | space-between(左右两侧对齐，中间间隔一样大小) |
space-around(每个项目的左右间隔一样大小) | stretch(自动拉伸填充多余空间)
justify-content
项目在主轴上的对齐方式设置属性
flex-start | flex-end | center | space-between | space-around;

6个设置在项目上的属性

order
项目的排列顺序，越小越靠前。默认为：0
flex-grow
项目的放大比例设置，默认为： 0
flex-shrink
项目的缩小比例设置，默认为：1
flex-basis
项目占据固定的空间（可以与w,h值一样：如 600px）
flex
上面三个flex-xxx 的缩写形式。默认：auto(0 1 auto); none(o o auto)
align-self
单个项目(某个项目本身)的对齐方式设置。可覆盖align-items 属性。默认： auto

Flex 常用页面框架布局

圣杯布局

四. CSS动画

容易混淆的几个CSS属性

属性	含义
animation(动画)	用于设置动画属性，它是一个简写的属性，包含6个属性
transition(过渡)	用于设置元素的样式过渡，和animation有着类似的效果，但细节上有很大的不同
transform(变形)	用于元素进行旋转，缩放，移动，倾斜，和设置样式的动画并没有关系，就相当于color一样用来设置元素的"外表"
translate(移动)	translate只是transfrom的一个属性值，即移动

transition （过渡）
字面理解：元素由某个属性(color:red)过渡到(color: blue)，就是一个状态的转变，需要一种条件出发这种转变
比如利用： :hover, :focus, :checked, 媒体查询或者JavaScript。
不足：
(1) 需要时间触发，所以没法再页面加载时自动发生；
(2) 是一次性的，不能重复发生，除非一再触发；
(3) 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两种状态；
(4) 一条transtion规则，只能定义一个属性的变化，不能涉及多个属性；
语法： transition: property duration timing-function delay

值	描述
transition-property	规定设置过渡效果的CSS属性的名称
transition-duration	规定完成过渡效果需要多少秒/毫秒
transition-timing-function	规定速度效果的速度曲线
transition-delay	定义过渡效果何时开始

animation （动画）
官方介绍animation是transition属性的扩展，弥补了transition的很多不足。
语法：animation: name duration timing-function delay iteration-count direction play-state fill-mode

值	描述
name	用来调用@keyframes 定义好的动画，与@keyframes定义的动画名称一致
duration	指定元素播放动画所持续的时间
timing	规定速度效果的速度曲线，是针对每一个小动画所在时间范围的变换速率
delay	定义在浏览器开始执行动画之前等待的时间，值整个animation执行之前等待的时间
iteration-count	定义动画的播放次数，可选具体次数或者无限(infinite)
direction	设置动画播放方向: normal(按时间轴顺序)，reverse(时间轴反方向运行)， alternate(轮流，即来回往复进行)， alternate-reverse(动画先反运行，在正方向运行)
play-state	控制元素动画的播放状态，通过此来控制动画的暂停和继续： running(继续)， paused(暂停)
fill-mode	控制动画结束后，元素的样式。有四个值： none(回到动画没开始时的状态)， forwards(动画结束后动画停留在结束状态)， backwords(动画回到第一帧的状态)， both(根据animation-direction轮流应用forwards和backwards规则)，注意：与iteration-count 不要冲突(动画执行无限次)