布局方式总结

最新推荐文章于 2024-07-12 20:49:16 发布

叁叶

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量43

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/2302_76637343/article/details/130084734

版权

1、盒子布局:使用border（边框，上左下右）

2、元素分类

3、浮动布局：通过float属性设置（left none right）

4、定位布局

5、其他属性

6、弹性盒子：是由弹性容器（Flexible或者Flexbox）和弹性元素(Flex-item)组成

6.1常见属性

6.2 flex- direction

6.3 flex-wrap

6.4 align-items：设置的弹性容器中元素在侧轴(纵轴）的对齐方式

6.5 justify-content：设置的弹性容器中元素在主轴（横轴）的对齐方式

6.6 align-content：修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线

1、盒子布局:使用border（边框，上左下右）

属性：

none	定义无边框
hidden	与none相同，但应用表时除外，对于表，hidden用于解决边框冲突
dotted	定义点状边框（在大多浏览器中表现为实线）
dashed	定义虚线边框（在大多浏览器中表现为实线）
soild	实线

padding：内边距（内容距离边框的距离）上左下右

margin：外边距（边框距离页面的距离）

2、元素分类

块级元素：独占一行，div p hn hr 标签可以设置宽度和高度

行类元素：不会自动换行a span 标签不可以设置宽度和高度

display:实现块级元素和行类元素的互换

属性：

none	元素不显示
block	元素显示为块级元素，此元素前后有换行符
inline	默认值，元素显示为内联元素，元素前后无换行符

注：css中隐藏元素的方式：

display：none
width：0，height：0

<!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: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: red;
            display:inline ;
        }
        .two{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: blue;
            display:block ;
        }
        .three{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: pink;
            display: block;
        }
    </style>
</head>
<body>
    <div class="one">这是第一个div</div>
    <div class="two">这是第二个div</div>
    <div class="three">这是第三个div</div>
</body>
</html>

3、浮动布局：通过float属性设置（left none right）

注：如果浮动取值为left，会对后面的元素产生影响

消除浮动：通过clear属性

none	默认，允许两边都可以浮动
left	不允许左边的浮动
right	不允许右边的浮动
both	不允许两测有浮动

4、定位布局

position：设置对象的定位方式

属性：

static	静态定位
absolute	绝对定位:将对象从文本中分离出来，设置left top right bottom这四个方向去设置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是body
relative	相对定位：对象不从文档流中分离出来，设置left top right bottom这四个方向去设置相较于自身的相对定位

<!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>
        .main{
            width: 600px;
            height: 600px;
            border: 1px solid black;
        }
       .box1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
            position: absolute;
            left: 300px;
            
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 1px solid  black;
            background-color: green;
            /* position: relative;
            left: 200px; */

        }
        .box3{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="main">
    <div class="box1">这是第一个div</div>
    <div class="box2">这是第二个div</div>
    <div class="box3">这是第三个div</div>
</div>
</body>

5、其他属性

5.1 overflow：设置对象内容超过指定的高度或者宽度的时候如果管理它的内容

visible	默认值不剪切内容也不添加滚动条
auto	在必需时对象才会被裁剪或者添加滚动条
hidden	不显示超过对象尺寸的内容（会被隐藏）
scroll	总显示滚动条

5.2 zoom：设置或者检索对象的缩放比例

normal	默认值显示的是对象的实际尺寸
number	百分比 /无符号的浮点数浮点数为1.0相当于100%相当于取值为normal