关于css布局方式简单总结

最新推荐文章于 2024-05-14 18:25:49 发布

三月清风谷

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量273

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/2301_76802665/article/details/130139463

版权

三大常用的布局方式

1.盒子布局

2.浮动布局

3.定位布局

一、盒子布局

如图所示

其中content中装载内容；

padding为内边距（是指内容与边框的距离）；

border为边框（上、下、左、右）；

margin为外边距（边框距离页面的距离，有上、下、左、右）

接下来给大家展示一下：

 <style>
        .hezi{
            width: 250px;
            height: 100px;
            color: black;
            background-color: greenyellow;
            padding: 50px 50px 50px 50px;
            border: 20px solid red;
            margin-top: 100px ;
        }
    </style>
</head>
<body>
    <div class="hezi">这是一个div</div>
</body>
</html>

效果如下：

其中还有关于元素的分类

1.行内元素（可以与其他行内元素位于同一行，不会以新行开始高度、宽度不能设置）

2.块级元素（每个块级元素都从新的一行开始，其后的元素也另起一行。默认排列方式：从上至下元素的高度、宽度、行高、内外边距都可设置）

3.行内块元素（和其他元素都在一行上元素的高度、宽度、行高、内外边距都可设置）

dispaly可以实现块级元素与行内元素之间的互换

其中属性取值有如下：

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block或 inline。

注意：css中隐藏元素的方式有两种

第一种：display：none；

第二种：width：0；

height：0；

二、浮动布局（float）

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

取值有：left，right，none（不浮动）
取值为right时

.hezi1{
            width: 250px;
            height: 50px;
            color: black;
            background-color: rgb(112, 46, 173);
            float: right;
        }
        .hezi2{
            width: 250px;
            height: 50px;
            color: black;
            background-color: rgb(58, 42, 73);
            float: right;
        }

效果如下：

取值为left时

 .hezi1{
            width: 250px;
            height: 50px;
            color: black;
            background-color: rgb(112, 46, 173);
            float: left;
        }
        .hezi2{
            width: 250px;
            height: 50px;
            color: black;
            background-color: rgb(58, 42, 73);
            float: left;
        }

效果如下：

如果要消除浮动可以通过clear属性

none：默认，允许两边都可以浮动

right：不允许右边浮动

left：不允许左边浮动

both：不允许两侧浮动

注意：如果取值是left（左浮动）时会对后面元素产生一定影响

三、定位布局

布局定位共有四种方式：

属性：position-------设置对象的定位方式

固定定位（fixed）

绝对定位（absolute）--------- 将对象从文档流中分离出来，用left，right，top，bottom 这四个方向去设置相较于父级对象的相对定位，如果不存在，那么父级就是 body

.hezi1{
            width: 250px;
            height: 50px;
            color: black;
            background-color: rgb(112, 46, 173);
           position: absolute;
           top: 50px;
           left: 250px;
        }
        .hezi2{
            width: 250px;
            height: 50px;
            color: black;
            background-color: rgb(58, 42, 73);
           
        }

效果如下：

相对定位（relative）--------- 对象不从文档流中分离出来，用left，right，top，bottom 这四个方向来设置相较于自身的相对定位

 .hezi1{
            width: 250px;
            height: 50px;
            color: black;
            background-color: rgb(112, 46, 173);
           position: relative;
           top: 200px;
           left: 250px;
        }
        .hezi2{
            width: 250px;
            height: 50px;
            color: black;
            background-color: rgb(58, 42, 73);
           
        }

效果如下：

静态定位（staic）----------默认

其他属性

overflow

    <style>
        #overflow{
            width: 50% ;
            height: 200px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div id="overflow"><img src="..\image\成龙.png" alt=""></div>
</body>
</html>

效果如下：

zoom

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

normal------默认值显示的是对象的实际尺寸

number------百分比，无符号的浮点数，浮点数为1.0相当与100%相当取值为normal

<style>
        #overflow{
            width: 50% ;
            height: 200px;
           border: 1px solid black;
        }
        img{
            zoom:0.5;
        }
    </style>
</head>
<body>
    <div id="overflow"><img src="..\image\成龙.png" alt=""></div>
</body>
</html>

效果如下：

好了，这期的分享就到这了，咱们下期再见。

三月清风谷

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css布局方式简单总结

绝对定位（absolute）--------- 将对象从文档流中分离出来，用left，right，top，bottom 这四个方向去设置相较于父级对象的相对定位，如果不存在，那么父级就是 body。属性：position-------设置对象的定位方式。静态定位（staic）----------默认。
复制链接

扫一扫