HTML的布局方式

最新推荐文章于 2024-05-25 10:40:54 发布

miracle-boy

最新推荐文章于 2024-05-25 10:40:54 发布

阅读量187

点赞数 2

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_49137360/article/details/120264099

版权

盒子布局

<div>加上css进行布局

案例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   #box1{
      width: 200px;
      height: 200px;
      border: 1px solid black;
   }
   #box2{
      width: 50px;
      height: 50px;
      border: 1px solid red;
      margin: 0 auto;
      margin-top: 30px;
   }
   </style>
</head>
<body>
   <div id="box1">
      <div id="box2"></div>
   </div>
</body>
</html>

效果如下

浮动布局

在css中通过设置float属性进行的布局

none 不浮动

left 左浮动，会对后面的元素产生影响

right 右浮动

浮动布局的时候，左浮动会造成后面元素的布局错乱的现象

所以得在css中加入clear（清除浮动）

clear 可以取

none 默认，允许两边浮动

left 不允许左边浮动

right 不允许右边浮动

both 不允许两边浮动

案例


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   #box1{
      width: 200px;
      height: 200px;
      border: 1px solid black;
   }
   #box2{
      width: 50px;
      height: 50px;
      float: left;
      border: 1px solid red;
   }
   #box3{
      width: 50px;
      height: 50px;
      float: right;
      border: 1px solid red;
   }
   #box4{
      width: 50px;
      height: 50px;
      float: none;
      border: 1px solid red;
      background-color: red;
      clear: right;
   }
   </style>
</head>
<body>
   <div id="box1">
      <div id="box2">左浮动</div>
      <div id="box3">右浮动</div>
      <div id="box4">不浮动</div>
   </div>
</body>
</html>

效果如下

定位布局

属性：position

static（默认值）静态定位 ------- 根据每个元素的默认值

absolute ------ 将对象从文档流中拖出，使用left，right，top,bottom等属性进行绝对定位此时对象不具有边距，但仍有补白和边框

relative ------- 相对定位:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

fixed -------生成绝对定位的元素，相对于浏览器窗口进行定位。

案例


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
.main{
width: 600px;
height: 600px;
border: 1px solid black;
margin: 200px;
position: relative;
}
.box{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
position: fixed;
top: 300px;
left: 100px;
}
</style>
</head>
<body>
<div class="main">
<div class="box">这是一个div</div>
<div class="box1">这是一个div</div>
<div class="box2">这是一个div</div>
<div class="box3">这是一个div</div>
</div>
</body>
</html>

效果如下

miracle-boy

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的布局方式

盒子布局<div>加上css进行布局案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box1{ width: 200px; height: 200px; borde...
复制链接

扫一扫