CSS布局方式总结

最新推荐文章于 2024-09-09 11:03:57 发布

hqq181011

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量52

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/hqq181011/article/details/130114824

版权

CSS布局方式

在这里插入图片描述
1.盒子布局

border----边框
属性：
none:无边框
hidden:隐藏
dotted:点状边框
dashed:虚线边框
soild:实线

padding ---- 内边距------内容距离边框的距离上右下左
margin ------外边距 ------ 边框距离页面的距离

margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px

margin:10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px

margin:10px;
所有 4 个外边距都是 10px
padding
padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px
padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px
padding:10px;
所有 4 个内边距都是 10px
示例
演示结果：
在这里插入图片描述
代码：

<!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>盒子布局</title>
    <style>
div
{
    width: 100px;
    height: 100px;
    background-color: red;
    border: 1px solid black;
    padding-left: 40px;
    border-bottom: 10px solid black;
    margin-left: 10px;
}
    </style>
</head>
<body>
  <div>这是第一个div</div>  
</body>
</html>

浮动布局
通过float属性去设置浮动布局
取值：left none(不浮动) right
注意：如果浮动取值是Left的话（左浮），会对后面的元素产生一定的影响
演示结果：
在这里插入图片描述
html代码：

<!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></title>
    <link rel="stylesheet" href="..\5\.css">
</head>
<body>
 <div id="box1">第二个</div>   
 <div id="box2">第一个div</div>
 <div id="box3">第三个</div>
</body>
</html>

css代码

#box1
{
    width: 200px;
    height: 200px;
    background-color: azure;
float: left;
}
#box2
{
    width: 200px;
    height: 200px;
    background-color: red;
clear:both
}
#box3
{
    width: 200px;
    height: 200px;
    background-color:blue;
float:left;
}

clear：消除浮动
clear 属性规定元素的哪一侧不允许其他浮动元素。
属性值：
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

定位布局

属性：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>定位布局</title>
<style>
.main{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 200px;
position: relative;
}
.box1{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
position:absolute;
top: 100px;
left: 200px;
}
.box2{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: blue;
/* position: relative;
left: 200px; */
}
.box3{
width: 100px;
height: 100px;
border: 1px solid black;
background-color:green;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</div>
</body>
</html>