css进阶01 |CSDN创作打卡

1. 浮动

浮动样式的由来

浮动样式的原理

• 普通文档流

  浏览器在默认情况下规定一个块元素在父元素内的排列规则：

  • 从上往下排列

  • 从左开始排列

  • 一个块元素占一行

  <style>
      .parent{width:800px; height:400px; border:10px solid blue;}
  ​
      .box1{width:250px; height:80px; background-color:#ed7d31;}
      .box2{width:400px; height:100px; background-color:#70ad47;}
      .box3{width:200px; height:200px; background-color:#7030a0;}
  </style>
  <div class="parent">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
  </div>

  

• 浮动之后的文档流

  <style>
      .parent{width:800px; height:400px; border:10px solid blue;}
  ​
      .box1{float:left; width:250px; height:80px; background-color:#ed7d31;}
      .box2{width:400px; height:100px; background-color:#70ad47;}
      .box3{width:200px; height:200px; background-color:#7030a0;}
  </style>
  <div class="parent">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
  </div>

  

  

各种浮动情况

• box1 box2 都浮动

  box1 box2不再遵循普通文档流的占据一行规则，变得可以水平排布。box3往上占据空出来的文档流位置。

  <style>
    .parent{width:800px; height:400px; border:10px solid blue;}
  ​
    .box1{float:left; width:250px; height:80px; background-color:#ed7d31;}
    .box2{float:left; width:400px; height:100px; background-color:#70ad47;}
    .box3{width:200px; height:200px; background-color:#7030a0;}
  </style>
  <div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

  

• box1 box2 box3都浮动

  box1 box2 box3都脱离原来的文档流，水平排布，但是因为父级宽度不够，所以box3换行显示。

  <style>
    .parent{width:800px; height:400px; border:10px solid blue;}
  ​
    .box1{float:left; width:250px; height:80px; background-color:#ed7d31;}
    .box2{float:left; width:400px; height:100px; background-color:#70ad47;}
    .box3{float:left; width:200px; height:200px; background-color:#7030a0;}
  </style>
  <div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

  

• box1 box2 box3都浮动，box1高度比box2高

  同上box3会换行显示，但是在过程中会被box1“卡住”。

  <style>
    .parent{width:800px; height:400px; border:10px solid blue;}
  ​
    .box1{float:left; width:250px; height:100px; background-color:#ed7d31;}
    .box2{float:left; width:400px; height:80px; background-color:#70ad47;}
    .box3{float:left; width:200px; height:200px; background-color:#7030a0;}
  </style>
  <div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

  

• box1 box2向右浮动，box3 box4向左浮动

  各自按照对应的方向排列。

  <style>
    .parent{width:800px; height:400px; border:10px solid blue;}
  ​
    .box1{float:right; width:150px; height:100px; background-color:#ed7d31;}
    .box2{float:right; width:150px; height:80px; background-color:#70ad47;}
    .box3{float:left; width:150px; height:200px; background-color:#7030a0;}
    .box4{float:left; width:150px; height:150px; background-color: #9293a3;}
  </style>
  <div class="parent">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </div>

  

• 图文环绕

  不给img加浮动情况下，图片的底端会与第一行文字的底端对齐。给img加浮动之后，可以实现图文环绕的布局效果。

  <style>
    .parent{width:435px; height:400px; border:10px solid blue;}
    img{float: left;}
  </style>
  <div class="parent">
    <img src="http://static.zzhitong.com/lesson-files/html/img/9-10.jpg" height="210" alt="">
    豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。 时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。
  </div>

  

浮动元素父级高度塌陷

当父级元素没有设置高度时，高度会由文档流内容撑开。

而当子元素浮动之后，脱离了文档流，所以父级高度不会被撑开，这对我们后续的布局结构会造成很多困扰。

解决高度塌陷方法：

• 方法1 -- 子元素加clear

  在浮动元素后面加一个空的子元素，并给其CSS属性clear；

  <div style="clear:both"></div

  clear取值： left 清除左浮动 | right 清除右浮动 | both 清除所有浮动

• 方法2 -- 父元素加宽高

  直接规定父元素的宽高，就不存在塌陷问题了。缺点是，得手动计算合适的宽高，并且扩展性不好。

• 方法3 -- 父元素BFC(Block formatting context)化

  父元素满足下列条件之一即可：

  • 根元素

  • float属性不为none

  • position不为static和relative

  • overflow不为visible（较常用，通常设置overflow : hidden来解决高度塌陷）

  • display为inline-block / table-cell / table-caption / flex / inline-flex

• 方法4 -- 父元素利用伪类after

  当前最主流的方式，利用伪元素，相当于给父级多加了一个子元素，同时我们可以将样式公用，所有需要清除浮动的父元素加上一个相同的class名clear就可以解决：

  .clear{zoom: 1;}/*IE6,7不支持::after伪类，所以没法用下面的代码，这个神奇的zoom可以直接解决IE6,7的清除浮动问题*/
  .clear::after{ content: ""; display: block; clear:both; }

补充

• 注意：元素浮动之后，不再支持margin:auto，只支持margin确切的值。

• 遇到父元素时浮动元素会停止不动。(浮动元素不会超出父元素的边界)

• 设置浮动元素的上一个元素是普通文档流中的元素,元素相对于水平垂直位置不动。

• 推荐使用浮动来做横向布局而不是inline-block

  inline-block布局的基线对齐处理较为麻烦，浮动不用担心这个问题；

  inline-block布局空格会被解析显示在页面中，浮动不用担心这个问题。

• list-style:none;清除ul或ol的默认项目符号。

• min-width max-width

2. 布局 flex布局

布局全解

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

基本概念

采用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 决定主轴的方向

  • flex-wrap 控制换行

  • justify-content 主轴上的对齐方式 (横)

  • align-items 项目在交叉轴上如何对齐 (竖)

项目的属性

• order 项目的排列顺序。数值越小，排列越靠前，默认为0。

• flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

• align-self 允许单个项目有与其他项目不一样的对齐方式

3. 定位

什么是定位

定位position属性，可以让我们将元素从文档流中取出，然后使用方位词属性（left top right bottom）精准的控制它的位置。

不同的定位值可以使元素拥有不同的表现形式，例如放在另外一个元素上面或者固定在浏览器的显示区某个位置。

取值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。
relative	生成相对定位的元素，相对于其正常位置进行定位。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

• relative

  相对定位能让元素保持原文本流位置的同时，可以通过方位属性进行相对于原位置的偏移。

  （定位元素才有的方位属性： top | bottom | left | right，值一般使用px单位或%值。）

  • 特点

    不会脱离文档流

    不影响元素本身的任何特性

    如果不加方位词偏移那么没有任何影响

• absolute

  绝对定位能让元素脱离文档流，使用方位属性相对于最近的有定位的父级元素进行偏移；

  注意！方位属性初始值不是0，而是auto。

  方位属性left和top 优先级比 right和bottom高，比如一个元素既拥有left也拥有right，最终位置以left为准。

  • 特点

    脱离文档流

    元素宽高默认值为0

    找不到最近的定位父级则相对于body标签

    一般配合绝对定位使用

    会将元素转换成块元素

    设置了绝对定位,没有设置层级;html后写居上

    margin:auto 暂时失效

• fixed

  固定定位能让元素脱离文档流，使用方位属性相对于浏览器可视区进行偏移；

  • 特点

    脱离文档流

    元素宽高默认值为0

    margin:auto失效

层级

定位元素之间，如果出现覆盖问题，那么越到后面的元素优先级越高，当然我们可以使用z-index层级属性来调整优先级。

z-index属性只针对定位元素有效

取值为一个整数数字，默认auto 或 0 ，可正可负

盒子居中

使用定位让元素在父级中居中的方式：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

或者：

position: absolute;
top: 50%;
left: 50%;
margin-left: -自身宽度一半;
margin-top: -自身高度一半;