css怎么布局?

CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局(早期),float 浮动布局和 flex 布局,还有针对于移动端的响应式布局。

下面我们来看一下css布局的几种方法:

一、table 布局

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

<!DOCTYPE html>
<html>
<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>
        <tbody>
            <tr>
                <td> 左 </td>
                <td> 右 </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果如下

1.jpg

table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式

而且也加入了 display:table;dispaly:table-cell 来支持 teble 布局。用法如下

<style>
.table{
    display: table
}
.left{
    display: table-cell;
}
.right{
    display: table-cell
}
</style>

<div class=table>
    <div class=left></div>
    <div class=right></div>
</div>

但是它也有自身的局限性,比如 table 比其它 html 标记占更多的字节(造成下载时间延迟,占用服务器更多流量资源),table 会阻挡浏览器渲染引擎的渲染顺序。

但是某些情况下,当采用其他方式不能很好的达到自己的效果时,采用 table 布局能适应当前场景。

二、flex 布局

盒模型

在介绍 flex 布局之前,我们先了解一下盒模型的概念,这个是 css 最基础的概念,首先,我们引用一张图来解释

2.jpg

我们通常设置的 height 和 width 就是设置的这部分的长度。内容区外部是 padding 区域,这部分指的是内容区到边框的区域,即我们常说的内边距。

然后就是 border 区,border 区本身也是占据空间的。边框外面是 margin 区,这部分指的是当前元素与其他元素的距离,即常说的外边距。

首先要明白我们平常说的宽度和高度指的是内容区的宽度和高度。

然后计算一个盒子占用的空间是 content + padding + border + margin

display / poistion

display 有如下几个值

  • block(元素表现为块级元素,有固定宽高,独占一行)

  • inline(元素表现为行内元素,不能设置宽高)

  • inline-block (对外表现为行内元素,对内表现为块级元素)

position 有如下几个值

  • static(默认情况,存在文档流当中)

  • relative(根据元素本身原来所应该处的位置偏移,不会改变布局的计算)

  • absolute(绝对定位,脱离文档流,不会对别的元素造成影响,相对的是父级最近的 relative 或者 absolute 定位元素)

  • fixed(绝对定位,脱离文档流,相对于的是屏幕,就是那些浮动的广告那样,怎么拉都固定在同一个位置,而 absolute 元素离开屏幕就看不见了)

position 的层叠是按顺序层叠的,不过可以通过设置 z-index 来改变层叠顺序,只有 relative,absolute,fixed 可以设置 z-index。

三、flexbox 布局

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

<!DOCTYPE html>
<html>
<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>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

效果图:

3.jpg

四、float 布局

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

float布局特点:

对自身的影响

  • float 元素可以形成块,如 span 元素。可以让行内元素也拥有宽和高,因为块级元素具有宽高

  • 浮动元素的位置尽量靠上

  • 尽量靠左(float:left)或右(float:right),如果那一行满足不了浮动元素的宽度要求,则元素会往下掉

对兄弟元素的影响

  • 不影响其他块级元素的位置

  • 影响其他块级元素的文本

  • 上面贴非 float 元素

  • 旁边贴 float 元素或者边框

对父级元素的影响

  • 从布局上 “消失”

  • 高度塌陷

五、响应式布局

meta 标签

最简单的处理方式是加上一个 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

css2 允许用户根据特定的 media 类型定制样式,基本语法如下

@media screen and (max-width: 360px) {  
     html { font-size: 12px;    }
}

以上就是css怎么布局?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏