CSS布局详解-优快云博客

本文链接：https://blog.youkuaiyun.com/chenxiaodan_danny/article/details/53428097

css布局方式有三种
1. 标准文档流（盒子模型-流式布局）
2. 浮动定位布局
3. 绝对定位布局

一. 标准文档流

关键词：块级元素，行内元素，盒子模型（margin, padding,border）

1. 应用场景：最简单的标准文档流，从上到下，从左到右

demo:

<img src="" height="50px" width="50px">
<img src="" height="50px" width="50px">
<img src="" height="50px" width="50px">

2. 知识点与特点

块元素：独占一行，碰触到边缘后，自动换行
div，p等

行内元素：
span,img等

3. 盒子模型: border, margin, padding

盒子模型结构：
第一层（最内层） content+padding
第二层： boder
第三层：background-image
第四层：background-color
第五层： margin

二. 浮动布局（没有脱离标准文档模型，即有margin,padding等）

关键词： float, margin,clear:both; width:100%(或固定宽度)+overflow:hidden

1. 应用场景：用的比较多的布局方法，一行多列

2. demo

<html>

<head>
<title>我的第一个 HTML 页面</title>
<style>
body {
   margin: 0
}
.header {
    height: 20px;
    background: red;
}
.main {
   height: 200px;
   background: black;
   overflow: hidden;
}
.left {
   height: 100%;
   width: 10%;
   background: pink;
   float: left;
}
.middle {
   height: 100%;
   width: 45%;
   background: green;
   float: left;
}
.right {
   height: 100%;
   width: 45%;
   background: white;
   // 也可以用float: right
   float:right;
}

.footer {
   height: 20px;
   background: blue;
}
p {
  background: yellow;
   clear: both;
}
</style>
</head>

<body>
<div class="header">header</div>
<div class="main">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
<div class="footer">footer</div>
</body>

</html>

4. 相关知识点与特点

float, margin配合使用；
float只影响紧邻后边的一个同级元素，如class=”left” 影响 class=”middle”元素；
【重要】float的元素，若没有设置宽度，会变成随着元素内容方法缩小，float紧邻的后边的一个同级会跟着元素跑；
如果不想float【紧邻】的后边一个同级元素跟着浮动元素跑，给紧邻的元素加上clear:both
如果float元素的父元素，受到了float元素影响，高度发生改变，为了解决这个问题，给父元素增加width: 100%(或固定宽度)；overflow: hidden

三. 绝对定位布局

应用场景：横向多列和很多复杂的布局，如遮罩层效果的弹出框，全屏广告等

关键词： position, left, top, right,bottom,z-index(有偏移，有z-index)
绝对定位分：静态定位（static），相对定位（relative）, 绝对定位（absolute）,固定定位（fixed）

static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative:相对元素自身原有位置偏移，没有脱离文档流（有margin,padding等）
absolute: 【重要】脱离文档流，若元素没有设置宽度，随着元素内内容变化宽度，absolute元素偏移定位分两种情况：
a. 祖先没有定位，根据进行偏移定位
b. 祖先有定位，根据离的最近的定位祖先元素进行偏移定位

absolute使用场景：一行两列，一列宽度固定，另一列自适应，但是有两个特点
1. 固定宽度列的高度一定要固定且大于自适应列的高度
2. 父容器要为定位元素，设置父元素postion：relative，自身设置position: absolute;top:0;margin-left（或margin-right）大于等于固定列宽度

说明：因为第一个原因用absolute做一行两列布局，非常少。
demo

<html>

<head>
<title>我的第一个 HTML 页面</title>
<style>
body {
   margin: 0

}

.main {
   width: 700px;
   height: 100%;
   background: black;
   // 注意这里， 父元素设置定位
   position: relative;
}
.left {
   height: 600px;
   width: 200px;
   background: pink;

}

.right {
   // 高度小于固定宽度元素
   height: 800px;
   background: white;
   position: absolute;
   top: 0; 
   left: 200px; 
}


</style>
</head>

<body>

<div class="main">
    <div class="left"></div>
    <div class="right">11111111111111</div>
</div>

</body>

</html>