css常见布局

一、左右布局

1.使用浮动属性(左右自适应)

<div class="box clearfix">
    <div class="left"></div>
   <div class="right"></div>
 </div>
 <style>
    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
    .box{
      background:red;
    }
    .left{
      float:left;
      width:40%;
      height:300px;
      margin:10px;
      background:green;
    }
    .right{
      float:right;
      width:50%;
      height:300px;
      margin:10px;
      background:yellow;;
    }
 </style>

效果如图
这里写图片描述

二、左中右布局

1.利用浮动属性（三列自适应）

<div class="box clearfix">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
 </div>
 <style>
 .clearfix::after{
  content:'';
  display:block;
  clear:both;
}
.box{
  background:red;
}
.left{
  float:left;
  width:30%;
  height:300px;
  margin:10px;
  background:green;
}
.right{
  float:right;
  width:30%;
  height:300px;
  margin:10px;
  background:yellow;;
}

.middle{
  float:left;
  width:30%;
  height:300px;
  background:black;
  margin-top:10px;
}
 </style>

效果如图：
这里写图片描述

三、水平居中

1.内联元素：

给其父元素添加text-align:centar;属性。

2.块级元素：

自身拥有宽度后使用margin: 0 auto;即可水平居中。

四、垂直居中

1.内联元素：

使其line-height等于其内容高度即可

2.块级元素：

1.利用父元素padding填充使子元素垂直居中
2.利用定位属性position+margin的方式使快元素水平垂直居中
垂直居中方式：
父元素有一定高度，给父元素添加：

display:flex;
justify-content:center;
align-item:center;

五、等其他小技巧

1.子元素浮动，父元素会崩塌
给父元素添加一个类：

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

就可以解决崩塌问题。
2.div（块级）的高度是由其内部文档流元素的高度总和决定的。

文档流：文档内元素的流动方向
1.内联元素从左向右水平流动宽度不够就换行
2.块级元素占一行从上到下垂直流动

3.tip:给元素添加上边框用来调试
4.

element{word-break:break-all}中文宽度不够时会被截断
element{word-break:break-word}英文单词容器宽度不够时会被截断

5.字体大小指的是：文字最高点到文字最低点距离；内联元素行高（建议行高）一般是字体大小的1.4em(1.4倍)。
四线普基线对齐
6.高度尽量不要固定死，会出bug；尽量让内容充起高度，同时宽度也尽量不要写100%；
7.背景图片尺寸background-size:cover;背景图充满
8.css三角形

div{
  border:10px solid red;
  width:0px;
  height:0px;
  border-color:black transparent transparent yellow;
  border-top-width:0;
}

9.position:fixed元素脱离了文档流，会造成宽度（跨度没有固定）坍塌
10.非空标签都有伪类
默认都有一个::before和::after
例子div::before{content:'';display:block;}.还有清除浮动的；
11.

content-box：width=content
border-box(对元素使用：box-sizing:border-box)：width=content的宽度+padding+borde

12.inline-block属性可能会导致底部出现一空隙，添加：vaetical-align:top;即可解决；