布局方式总结

最新推荐文章于 2024-07-25 15:42:10 发布

bjyx10050805szd_

最新推荐文章于 2024-07-25 15:42:10 发布

阅读量56

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/bjyx10050805szd_/article/details/130113896

版权

盒子布局

border:边框：1.none：表示无边框

2.hidden：与“none”相同，但是在运用于表内用来解决边框冲突

3.dotted：定义点状边框，在大多数浏览器中显示为实线。

4.dashed：定义虚线，在大多数浏览器中显示为实线。

5.solid：定义实线。

padding：内边距，内容距离边框的距离。

margin：外边距，边框距离页面的距离。

<!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: 20px;
margin-left: 100px;
}
</style>
</head>
<body>
     <div>11111</div>
</body>
</html>

浮动布局

float取值：1.left 2.none（不浮动） 3.right

<!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>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color:green;
}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body>
</html>

clear可以消除浮动属性的影响：1.none：两边都可以浮动

2.left：不允许左边浮动

3.right：不允许右边浮动

4.both：不允许两侧有浮动

<!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>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
float: left;
}
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
clear: both;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color:green;
float: left;
}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body>
</html>

定位布局

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

overflow

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

visible：默认值不剪切内容也不添加滚动条

auto ：在必需时对象才会被裁剪或者添加滚动条

hidden ：不显示超过对象尺寸的内容（会被隐藏）

scroll ：总会显示滚动

隐藏元素的方式：1.display:none;

2.width:0 height:0

3.overflow:hidden

<!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;
overflow: scroll;
}
</style>
</head>
<body>
<div class="main">
<img src="..\images\图片1.png" alt="">
</div>
</body>
</html>

zoom

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

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

number: 百分比/ 无符号的浮点数浮点数为 1.0 相当于 100% 相当于取值为 normal

<!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: 1000px;
height: 1000px;
border: 1px solid black;
}
img{
zoom: 1.0;
}
</style>
</head>
<body>
<div class="main">
<img src="..\images\图片1.png" alt="">
</div>
</body>
</html>

弹性盒子

设置弹性容器是通过 display 属性进行设置， ---------- display:flex 或则 inline-flex

<!DOCTYPEhtml>
<htmllang="en">
<head>
  <metacharset="UTF-8">
  <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <title>弹性盒子</title>
  <style>
    .flex-contain{
      width:400px;
      height:350px;
      background-color:orange;
      display:inline-flex;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black
}
;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
</body>
</html>

flex- direction

row ：左对齐（横向的从左到右排列），默认

row- reverse ：反向的横向排列（右对齐），从后往前排，最后一项排在最前面

column ：纵向排列

column-reverse ：反向纵向排列

<!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>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
flex-direction: column-reverse;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
</body>
</html>

flex-wrap

nowrap : 默认值，规定弹性元素不会换行

wrap : 弹性元素在需要的时候会换行

wrap-reverse : 会换行，但是是反方向

<!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>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
flex-wrap: wrap-reverse;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
<div class="flex-item">flex item4</div>
<div class="flex-item">flex item5</div>
<div class="flex-item">flex item6</div>
<div class="flex-item">flex item7</div>
<div class="flex-item">flex item8</div>
<div class="flex-item">flex item9</div>
<div class="flex-item">flex item10</div>
<div class="flex-item">flex item11</div>
</div>
</body>
</html>

flex-flow

<!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>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
/* flex-flow: column-reverse wrap; */
flex-direction: column-reverse;
flex-wrap: wrap;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
<div class="flex-item">flex item4</div>
<div class="flex-item">flex item5</div>
<div class="flex-item">flex item6</div>
<div class="flex-item">flex item7</div>
<div class="flex-item">flex item8</div>
<div class="flex-item">flex item9</div>
<div class="flex-item">flex item10</div>
<div class="flex-item">flex item11</div>
</div>
</body>
</html>

align-items

stretch：默认，项目被拉伸到适合容器

center：项目位于容器的中央

flex-start：项目位于容器的开头

flex-end：项目位于容器的末端

baseline：项目被定位到容器的基线

<!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>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: flex;
align-items: baseline;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
</body>
</html>

justify-content

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

flex-start：默认值，项目位于容器开头

flex-end：项目位于容器的结尾

center：项目位于容器的中央

space-between：项目位于行与行之间留有间隔

space-around：项目在行之前、行之间和行之后留有空间

<!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>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: flex;
justify-content: space-around;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</di>
</div>
</body>
</html>

align-content

stretch：默认值，行拉伸以占据剩余空间

center：朝着弹性容器的中央对行打包

flex-start：朝着弹性容器的开头对行打包

flex-end：朝着弹性容器的结尾对行打包

space-between：行均匀分布在弹性容器中

space-around：行均匀分布在弹性容器中，两端各占一半

<!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>
.flex-contain{
width: 300px;
height: 350px;
background-color: orange;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
</body>
</html>

bjyx10050805szd_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
布局方式总结

3.dotted：定义点状边框，在大多数浏览器中显示为实线。置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是。clear可以消除浮动属性的影响：1.none：两边都可以浮动。space-around：项目在行之前、行之间和行之后留有空间。space-around：行均匀分布在弹性容器中，两端各占一半。space-between：行均匀分布在弹性容器中。flex-start：朝着弹性容器的开头对行打包。border:边框：1.none：表示无边框。padding：内边距，内容距离边框的距离。
复制链接

扫一扫