CSS 网页定位与布局

最新推荐文章于 2024-07-25 16:45:46 发布

静茹秋叶

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量2.1k

点赞数 3

分类专栏： CSS 文章标签： css 定位布局 float position

本文链接：https://blog.csdn.net/zhang_cherry/article/details/123016883

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

要想在网页上展示的内容合理、布局好看，那就少不了CSS定位与布局的应用。CSS网页定位分为三种：文档流定位、浮动定位和层定位，接下来分别讲一下这三种定位方式。

1 文档流定位

html中的元素按照是否独占一行可以分为：行内元素、块级元素和行内块元素。

行内元素：不能独占一行，使用width height属性无效。常见的行内元素有：span标签 a标签
块级元素：可以独占一行，通过width和height可以设置元素的宽、高。常见的块级元素：div table ul ol li p form h1 h2 ……
行内块元素：顾名思义，拥有行内元素和块级元素的特点。
这三者之间，可以通过display属性进行转换

display: none;  表示元素不会被显示
display: inline; 表示元素是行内元素
display: block; 表示元素是块级元素
display: inline-block; 表示元素是行内块元素

在这里插入图片描述

2 浮动定位

将元素设置成浮动定位后，元素将脱离文档流位置。浮动定位主要是float属性和clear属性。
float属性有三个值

float: none;    表示不浮动
float: left;    表示左浮动
float: right;   表示右浮动

接下来重点看一下左浮动和右浮动

2.1 文档流定位例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        #container {
            margin: 0 auto;
            width: 150px;
            height: 150px;
            background-color: #cccccc;
        }
        #box1 {
            width: 50px;
            height: 50px;
            background-color: #138eee;
        }
        #box2 {
            width: 50px;
            height: 50px;
            background-color: #66ccff;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="box1">box1</div>
        <div id="box2">box2</div>
    </div>
</body>
</html>

在这里插入图片描述

2.2 设置float为left

将box1和box2都设置为left定位

        #container {
            margin: 0 auto;
            width: 150px;
            height: 150px;
            background-color: #cccccc;
        }
        #box1 {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #138eee;
        }
        #box2 {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #66ccff;
        }

在这里插入图片描述

2.3 float设置为left和right定位

将box1设置成left布局，box2设置成right布局

        #container {
            margin: 0 auto;
            width: 150px;
            height: 150px;
            background-color: #cccccc;
        }
        #box1 {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #138eee;
        }
        #box2 {
            width: 50px;
            height: 50px;
            float: right;
            background-color: #66ccff;
        }

在这里插入图片描述

2.4 clear属性

首先看一下，若将上述例子中的box1设置float:left定位，box2仍然是文档流定位，看一下有何效果。

        #box1 {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #138eee;
        }
        #box2 {
            width: 50px;
            height: 50px;
            background-color: #66ccff;
        }

在这里插入图片描述
从效果看，box2和box1颜色重叠了，只是box2的字在下面。那怎么让box1和box2正常显示呢？可以使用clear属性，将box2的clear设置成both，或者left都可以。

        #box1 {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #138eee;
        }
        #box2 {
            width: 50px;
            height: 50px;
            /*clear: left;*/
            clear: both;
            background-color: #66ccff;
        }

clear属性有四个取值：

clear: left; 清除左浮动
clear: right; 清除右浮动
clear: both; 清除左右浮动
clear: none; 默认值，只在需要移除已指定的清除值时用到，例如，最开始指定clear: left,后来又要清除该值，可以设置成clear: none

3 层定位

3.1 position属性

静态布局static: 默认值,没有定位，元素出现在正常的流中，top right bottom left 和z-index无效。
相对定位relative: 元素并未脱离文档流，而是在原文档流位置上进行定位，可以使用top right bottom left和z-index进行定位
绝对定位absolute：元素脱离原来的文档流。以最近的非static元素为父级元素进行定位，若未找到最近的非static布局的父级元素，则以body为父级元素进行定位。可以使用top right bottom left和z-index进行定位
固定定位fixed：元素以body为父级元素，不随着滚动条而移动.可以使用top right bottom left和z-index进行定位

例如：要想实现下面这种布局样式，可以通过设置position属性实现。
在这里插入图片描述
这种样式属于两行三列，其中第二行整个box可以设置成绝对定位，然后里面都可以设置成绝对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #header {
            width: 100%;
            height: 50px;
            background-color: #66ccff;
        }
        #main_area {
            position: absolute;
            top: 50px;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: pink;
        }
        #menu_side {
            width: 100px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            background-color: #138eee;
        }
        #right_side {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 150px;
            background-color: #ccffff;
        }
        #content {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 100px;
            right: 150px;
            background-color: #ffc600;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">头部</div>
        <div id="main_area">
            <div id="menu_side">菜单栏</div>
            <div id="content">内容展示区</div>
            <div id="right_side">右侧栏</div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述
其实，也可以用float布局实现上图的效果。

参考资料：中国大学慕课网上的《Web前端开发》（作者：孙俏、王新阳、祖明、付慧）课程

静茹秋叶

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
CSS 网页定位与布局

要想在网页上展示的内容合理、布局好看，那就少不了CSS定位与布局的应用。CSS网页定位分为三种：文档流定位、浮动定位和层定位，接下来分别讲一下这三种定位方式。1 文档流定位html中的元素按照是否独占一行可以分为：行内元素、块级元素和行内块元素。行内元素：不能独占一行，使用width height属性无效。常见的行内元素有：span标签 a标签块级元素：可以独占一行，通过width和height可以设置元素的宽、高。常见的块级元素：div table ul ol li p form h1 h2 …
复制链接

扫一扫

专栏目录