css如何让两个div上下排列_CSS知识总结

一、CSS简介

CSS，全拼Cascading Style Sheets，层叠样式表，是由Tim Berners Lee的同事赖先生（Håkon Wium Lie）首先提出的，目前使用最广泛的版本为CSS2.1。

二、CSS语法

① 选择器 {
属性名：属性值；}

② @语法
@charset "UTF-8";
@import url(2.css);
@media (min-width：100px) and (max-width: 200px){
语法①
}

注意事项：@charset "UTF-8" 必须放在第一行，charset是字符集，UTF-8是字符编码encoding。

三、如何调试CSS

主要是Border调试法

四、文档流

文档流动方向

• inline元素，从左到右，直到一行排满再重起一行。
• block元素，从上到下，依次排列，每个元素占一行。
• inline-block，也是从左到右的。

宽度

• display为inline元素的宽度由里面inline元素的宽度决定，不能用width，不要再inline元素中加block元素。
• block默认自动计算宽度，可用width制定（但尽量不要写width：100%）。
• inline-block默认于inline一样，但可用width制定。

高度

• inline高度由行高（line-height）间接确定，跟height、padding无关。
• bolck高度由里面的文档流中的元素决定，可以设height。
• inline-block 类似于block。

五、overflow 溢出

• 当内容大于高度或宽度（容器）时，内容会溢出
• 可用overflow来设置是否显示滚动条
• auto是灵活设置，超出时有，不超出时没有
• scroll是一直有
• hidden直接隐藏溢出部分
• visible直接显示溢出部分

六、脱离文档流

position： absolute；
float：left；
脱离文档流的元素高度不包含在div中

七、两种盒模型

①content-box内容盒，宽度只包含content

②border-box边框盒，宽度包含border、padding、content

一般用boeder-box

八、margin合并

只有上下合并，左右不合并

①父子margin合并，爸爸的上边距与第一个儿子上边距合并，爸爸的下边距与最后一个儿子下边距合并。
②兄弟margin合并

阻止父子合并可使用 padding/border/overflow：hidden
阻止兄弟合并使用display：inline-block，兄弟合并是符合预期的。

九、CSS布局

1. Float布局（可用于IE浏览器）

• 步骤
  子元素加float：left和width父元素加class =.clearfix

.clearfix: after{
            content: '';
            display: block;
            clear: both;

        

一般写CSS时，去掉原来的样式

*{margin: 0;padding: 0;box-sizing: border-box;}

• 经验
  最后一个div先不设width
  IE6/7存在双倍margin问题，有两种解决办法：
  ①将错就错，把margin减半

margin-left: 10px;
-margin-left: 5px;

②加display: inline-block;

1. flex布局

父元素container是一个弹性容器，items为子元素

让一个元素变成flex容器

.container{
            display: flex; /*or inline-flex*/}

改变items流动方向

.container{
            flex-direction: column / row / row-reverse / column-reverse;}

默认的是row横着布局，column是竖着布局，row-reverse是从右往左排，column-reverse是从下往上排

改变折行

.container{
             flex-wrap: nowrap / wrap / wrap-reverse;}

默认为nowrap不折行，wrap是折行，wrap-reverse是倒着折行

横轴对齐方式

.container{
            justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly;}

flex-start左对齐，flex-end右对齐，center居中，space-between把空间放在子元素之间，space-around把空间放子元素周围，每个子元素两边相等，space-evenly平均围绕，横轴对齐方式需在flex-direction不变的情况下

纵轴对齐方式

.container{
            align-items: center / flex-start / flex-end / stretch;}

1. Grid布局
   grid也分container和items，成为container

.container{
            display: grid / inline-grid;}

行和列

.container{
            grid-template-columns: 40px 50px auto 50px;
            grid-template-rows: 25% 100px auto;
}

控制所占行数，以线为准

.container{
            grid-row-start: 1;
            grid-row-end: 4;
}

控制所占列数

.container{
            grid-column-start: 1;
            grid-column-end: 4;
}

十、CSS动画浏览器渲染原理

• 根据HTML构建HTML的树（DOM）
• 根据CSS构建CSS的树（CSSOM）
• 将两颗树合并为一颗渲染树（Reder Tree）
• layout布局（文档流、盒模型、计算大小和位置）
• paint绘制（把边框颜色、文字颜色、阴影等画出来）
• composite合成（根据层叠关系展示画面）

不同的属性，渲染流程不同

• 全走一遍div.remove() 会触发当前小时，其他元素重新布局，再绘制合成
• 跳过layout改变背景颜色，不需要再布局，直接绘制合成
• 跳过layout、paint改变transform，只需重新合成

十一、CSS 动画的两种做法（transition 和 animation）

1. transition 过渡

• 作用
  补充中间帧
• 语法
  transition：属性名 时长 过渡方式 延迟（transitio：left 1s linear）
  可以用逗号分隔两个不同属性（transition：left 1s，top 2s）
  可以用all代表所有属性（transition：all 1s）
  过渡方式有： linear/eas（默认的）/ease-in/ease-out/ease-in-out……

注意：并不是所有属性都能过渡
display：none =>block无法过渡，一般改成visibility：hidden =>visible
background无法过渡
opacity透明度无法过渡

1. animation 动画
   当有中间点时可使用animation，因为transition需要使用两次transform

• 需声明关键帧@keyframes，两种写法
  from to

@keyframes slidein{
          from{
            transform: translateX(0%);
           }
          to{
            transform: translateX(100%);
          }
}

百分数

@keyframes identifier{
        0%{top: 0; left: 0;}
        30%{top: 50px;}
        68%, 72%{left: 50px;}
        100%{top: 100px; left: 100%;}
}

• 添加动画
• 语法
  animation：时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名
  时长：1s或1000ms
  过渡方式：跟transition取值一样
  次数：3或2.4或infinite（无穷尽）
  方向：reverse（相反）/alternate（轮流）/alternate-reverse（交替反转）
  填充模式：none/forwards/backwards/both
  是否暂停：paused/running