css 布局的几种方式

最新推荐文章于 2024-07-08 20:41:07 发布

Amanda_wmy

最新推荐文章于 2024-07-08 20:41:07 发布

阅读量1.2k

点赞数

分类专栏： HTML和CSS 文章标签： css布局

本文链接：https://blog.csdn.net/Amanda_wmy/article/details/88796915

版权

HTML和CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css 布局的几种方式

table布局：table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式。
display：table;dispaly:table-cell

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

body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100vh;
  display:table;
  text-align:center;
}
.header,.main,.footer{
  display:table-row;
}
.header{
  height:50px;
  background:tomato;
}
.main{
  width:100%;
  display:table;
  height:calc(100vh - 100px);
}
.main .left{
  width:300px;
  display:table-cell;
  background:#fcea96;
}
.main .right{
  display:table-cell;
  background:skyblue;
}
.footer{
  height:50px;
  background:#9d70ff;
}

在这里插入图片描述
2. flex布局：过多的就不讲了，参考上一篇：Flex布局语法
盒模型：content + padding + border + margin

3. float 布局：float 布局应该是目前各大网站用的最多的一种布局方式了，但是也特别复杂
浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。

对自身的影响
float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高（浮动的元素可设置宽高）
浮动元素的位置尽量靠上
尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求，则元素会往下掉
对兄弟元素的影响
不影响其他块级元素的位置
影响其他块级元素的文本
上面贴非 float 元素
旁边贴 float 元素或者边框
对父级元素的影响
从布局上 “消失”
高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 200px;
    background-color:red;
}

.left{
    background-color: yellow; 
    float: left;
    height: 50px;
    width:50px;
}
.right{
    background-color: yellow; 
    float: right;
    height: 50px;
    width:50px;
}
</style>
<body>
    <div class=container>       
        <span class=left>float</span>
        <span>我是字</span>
        <span class=right>float</span>
    </div>
    <div class="container" style="height: 200px;background: blue">      
    </div>
</body>
</html>

在这里插入图片描述
从图中可以看出，两个 float 元素虽然包含在第一个 container 中，但是却超出了第一个 container 的范围，在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。

但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
解决方法：
方法一：给父元素加一个 after 伪类 清除浮动的方法

   .container::after{
        content:'';
        clear:both;
        display:block;
        visibility:hidden;
        height:0; 
    }

在这里插入图片描述
方法二：通过在浮动元素的末尾添加一个空元素，设置 clear：both属性；

<div class="box1">
<div class="child-1">child-1</div>
<div class="child-2">child-2</div>
<div style="clear: both;"></div>
</div>
<div class="box2"></div>

方法三：通过设置父元素 overflow 或者display：table 属性来闭合浮动，给父元素添加overflow：hidden

两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 400px;
    height: 200px;
}

.left{
    background-color: yellow; 
    float: left;
    height: 100%;
    width:100px;
}
.right{
    background-color: red; 
    margin-left: 100px;
    height:100%;
}
.container::after{
    content: '';
    display: block;
    visibility: hidden;
    clear: both
}

</style>
<body>
    <div class=container>       
        <div class=left></div>
        <div class=right></div>
    </div>
</body>
</html>
margin-left: 100px;，这一句将浮动元素的位置空了出来，所以右边栏里面的元素不会影响到浮动的 div

在这里插入图片描述

三栏布局：思路主要是左边一个浮动元素，右边一个浮动元素。这里有个小问题，中间的元素要写在最后，因为中间元素假设有块级元素的话，会影响右边浮动元素的定位

<div class=container>       
        <div class=left></div>
        <div class="middle"></div>
        <div class=right></div>
    </div>

在这里插入图片描述
因为浮动元素会把块级元素的位置空出来，所以这里右边的浮动元素把上面的位置空了下来，所以正确的写法应该是

<div class=container>       
        <div class=left></div>
        <div class=right></div>
        <div class="middle"></div>
</div>

在这里插入图片描述
4. 响应式布局
meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1">
width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度

使用 rem
rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应
media query

@media screen and (max-width: 360px) {  
     html { font-size: 12px;    }
}
意思就是： 当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px。

可参考 https://www.cnblogs.com/haoyijing/p/5815394.html

Amanda_wmy

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
css 布局的几种方式

css 布局的几种方式table布局：table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式。display：table;dispaly:table-cell<div class="header">header</div><div class="main"> <div class="le...
复制链接

扫一扫

专栏目录