总结布局方式

最新推荐文章于 2024-06-02 15:45:53 发布

傻傻笑了没

最新推荐文章于 2024-06-02 15:45:53 发布

阅读量55

点赞数

文章标签： html

本文链接：https://blog.csdn.net/2303_77256369/article/details/130175632

版权

文章目录

一、盒子布局
二、元素的分类
三、浮动布局
四、定位布局
五、其他属性
- 1.overflow
- 2.zoom
六、弹性盒子
总结：

一、盒子布局

在这里插入图片描述
border~指边框的上下左右
border的值及作用：

none	定义无边框
hidden	与none相同，应用于表时除外，对于表，它用于解决边框的冲突
dotted	定义点状边框
dashed	定义虚线
solid	定义实线

padding_内边距内容距边框的距离
margin_外边距边框距页面的距离

二、元素的分类

1.块级元素~它独占一行（自动换行）如 div p hr，可以设置宽度和高度
2.行内元素~不会自动换行如：a span，不可以设置宽度和高度（设置了没有作用），display可以实现行内元素和块级元素的转化
display的值及作用：

none	此元素不会被显示
block	此元素变为块级元素，且有了自动换行
inline	此元素变为行内元素，且没了自动换行

三、浮动布局

浮动布局通过float属性去设置布局
它的取值：left none right
当float取值left时，会对后面的元素产生一定影响（后面的一个元素会覆盖原来的元素）.
具体的实例如下：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 500px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .two{
            width: 500px;
            height: 200px;
            background-color:wheat ;
        }
        .three{
            width: 500px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="one">第一个盒子</div>
    <div class="two">第二个盒子</div>
    <div class="three">第三个盒子</div>
</body>
</html>

效果图：
在这里插入图片描述
如果我们需要消除这种影响（浮动）时，可以通过在浮动元素的被影响元素添加clear属性
none：默认两边都可浮动
left：不允许左边浮动
right：不允许右边浮动
both：不允许两边有浮动

四、定位布局

通过position属性实现
它的值及作用如下

static	默认值静态定位
absolute	绝对定位，将对象从文档流分离出来，设置left top right bottom这四个方向去设置相对于父级对象的相对定位，如果无父级对象，那么父级为body
relative	相对定位，对象不从文档流分离出来，设置left top right bottom这四个方向去设置相较于自身对相对定位

五、其他属性

1.overflow

设置对象内容超过知道的宽度或高度时管理它的内容.
它的值及作用如下：

visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

2.zoom

设置对象的缩放比例
它的值及作用如下：

normal	默认值及实际尺寸
number	百分比1.0相当于原尺寸

六、弹性盒子

弹性盒子是由弹性容器（flexible或flexbox）和弹性元素（flex-item）组成
设置弹性容器通过display属性设置display-flex或inline-flex
一个弹性容器可包含多个弹性元素
弹性盒子中的弹性元素可自动填充位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .contain{
            width: 1000px;
            height: 600px;
            background-color: red;
            display: flex;
        }
        .flex-item{
            width: 200px;
            height: 200px;
            background-color:wheat ;
            border: 2px solid black;
        }
    </style>
</head>
<body>
<div class="contain">
    <div class="flex-item">item1</div>
    <div class="flex-item">item2</div>
    <div class="flex-item">item3</div>
</div>
</body>
</html>