css 布局 8.9

最新推荐文章于 2024-08-08 11:48:45 发布

溜溜梅353

最新推荐文章于 2024-08-08 11:48:45 发布

阅读量30

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_68597796/article/details/132194329

版权

本文介绍了CSS中的四种布局方式：table布局的简单示例，其局限性；flexbox布局的三栏布局和兼容性问题；float布局的特点及解决方法；以及CSS3的多列布局。

摘要由CSDN通过智能技术生成

css布局

table 布局
flex 布局
float 布局
多列布局

table 布局

table 布局是最简单的布局方式了，下面我们来看一个简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
.container{
    height:200px;
    width: 200px;
}
.left{
    background-color: red
}
.right{
    background-color: green
}
</style>
<body>
    <table class=container>
        <tbody>
            <tr>
                <td class=left> 左 </td>
                <td class=right> 右 </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果如下
在这里插入图片描述

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

但是它也有自身的局限性，比如 table 比其它 html 标记占更多的字节（造成下载时间延迟,占用服务器更多流量资源），table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)，但是某些情况下，当采用其他方式不能很好的达到自己的效果时，采用 table 布局能适应当前场景。

flex 布局

flexbox 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度，来看一个经典的三栏布局的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
.container{
    height:200px;
    width: 200px;
    display: flex
}
.left{
    background-color: red; 
    flex: 1;
}
.middle{
    background-color: yellow; 
    flex: 1;    
}
.right{
    background-color: green;
    flex: 1;
}
</style>
<body>
    <div class=container>
        <div class=left></div>
        <div class=middle></div>
        <div class=right></div>
    </div>
</body>
</html>

效果如下
在这里插入图片描述
但是 flexbox 布局方式浏览器的支持不是太好，有一些兼容性的问题，但是是未来布局的趋势。

以下是flex的属性：
fiex-direction:改变主轴方向row x轴为主轴 colum y轴加上-reverse后会反向排列
flex-wrap：wrap；自动换行
flex-flow：综合属性
justify-content：定义子盒子在主轴位置space-between两端对齐 -around将剩余空间分为元素的两倍设置为他们的间距 -evenly平均分配
align-itrms：flex-end；定义子盒子在侧轴位置
align- self：单独定义一个子盒子在侧轴位置

float 布局

float 布局应该是目前各大网站用的最多的一种布局方式了

浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。

那么它有什么特点呢

使用浮动回出现的问题；

对附近的元素布局造成改变，使得布局混乱（覆盖）
因为元素脱离了文档流，会造成一种坍塌的现象。简单的说就是原来的父元容器是被元素撑开的，当浮动之后，父容器的高度就会坍塌

解决方法就是在浮动后清楚浮动：

方式一：给前面一个父元素设置高度；缺点：元素容器不可以自适应高度
方式二：在浮动的元素后面加一个空元素，设置属性为 clear：both。在浮动元素后面的元素设置
clear：both。缺点：成本太高，添加了一个元素，难维护
方式三：通过设置父容器 css 的样式“overflow：hidden”通过 overflow:hidden;来清除浮动，其实
overflow 无形中对父容器高度进行了测量，是设置父容器高度的另一种方法。
方式四：after 伪类：对父元素的 after 伪类进行设置。用伪元素选择器和内墙法结合使用来给元素清除浮动

多列布局

CSS3 可以将文本内容设计成像报纸一样的多列布局·
column-width：列宽

colimn-cout：分为几列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.newspaper
{
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

<div class="newspaper">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>

</body>
</html>

在这里插入图片描述

溜溜梅353

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 布局 8.9

table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式而且也加入了 display：table;浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。flexbox 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度，来看一个经典的三栏布局的例子。但是 flexbox 布局方式浏览器的支持不是太好，有一些兼容性的问题，但是是未来布局的趋势。使用浮动回出现的问题；
复制链接

扫一扫