关于网页的布局管理

2024-01-15 11:50:49

布局管理

1.1盒子布局

首先了解盒子的结构
关于网页的布局管理

<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="UTF-8">
 <title>Document</title>
  <style type="text/css">
   *{ padding: 0; margin: 0; }
   .box{width: 100px; height: 100px; border:1px solid black; background-color: red; }
   </style>
    </head> 
    <body>
    <div class="box"> 这是一个div </div>
</body> 
</html>

关于网页的布局管理
注意的是： .box设置的属性中 width,height 设置的是content的范围,而不是整个盒子的范围

<!DOCTYPE html>
 <html lang="en"> 
 <head>
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <style type="text/css"> *{ padding: 0; margin: 0; }
 .box{width: 100px; height: 100px; border:1px solid black; background-color: red; }
 .box1{ width: 100px; height: 100px; border:1px solid black; background-color: blue; }
 .box2{ width: 100px; height: 100px; border:1px solid black; background-color: green; }
 a{ width: 200px; height: 200px; }</style>
  </head>
  <body><div class="box"> 这是一个div </div> 
  <div class="box1"> 这是二个div </div> 
  <div class="box2"> 这是三个div </div>
   <a href="#">这是第一个a标签</a>
    <a href="#">这是第二个a标签</a> 
    <a href="#">这是第三个a标签</a> 
    </body> 
    </html>

关于网页的布局管理
这是简单的块级元素与内联元素的区分（块级元素独占一行，内联元素不影响，并且块级元素可以设置宽和高，内联元素不可设置宽和高）

但是！块级元素能和内联元素相互转换
通过display 进行转换
display:block 是内联元素转换为块级元素
display:inline 是块级元素转换为内联元素
display:none 可以隐藏元素

 .box{width: 100px; height: 100px; border:1px solid black; background-color: red; display: inline;}
 .box1{ width: 100px; height: 100px; border:1px solid black; background-color: blue;display: inline; }
 .box2{ width: 100px; height: 100px; border:1px solid black; background-color: green; display: inline;}
 a{ width: 200px; height: 200px; display: block;}

这是设置后的效果
关于网页的布局管理

1.2浮动布局

通过设置float属性进行的布局
none-------- 不浮动
left ------- 左浮动，会对后面的元素产生影响
right----- 右浮动

float:left;

<!DOCTYPE html>
 <html lang="en"> 
 <head>
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <style type="text/css"> *{ padding: 0; margin: 0; }
 .box{width: 100px; height: 100px; border:1px solid black; float: left;}
 .box1{ width: 100px; height: 100px; border:1px solid black; background-color: blue; float: left;}
 .box2{ width: 100px; height: 100px; border:1px solid black; background-color: green; }
 </style>
  </head>
  <body><div class="box"> 这是一个div </div> 
  <div class="box1"> 这是二个div </div> 
  <div class="box2"> 这是三个div </div>
    </body> 
    </html>

关于网页的布局管理
很清楚的发现 第一个div本来没有设置颜色，但是颜色是第三个的颜色
而第三个div的文字在第一个的div的下方
第二个div整体在第一个div的右方

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

浮动布局的时候，浮动会造成后面元素的布局错乱的现象，如何解决这种现象？
clear -------- 清除浮动
none ------ 默认值，允许两边有浮动
left -------- 不允许左边有浮动（清除左边浮动）
right-------- 不允许右边有浮动
both -------- 不允许两边有浮动

 .box2{ width: 100px; height: 100px; border:1px solid black; background-color: green; clear:left;}

效果如图所示：
关于网页的布局管理

1.3定位布局

属性：position
static（默认值） 静态定位 ------- 根据每个元素的默认值
absolute ------ 绝对定位 ：将对象从文档流分离出来，通过设置top、left、right、bottom这四个
方向的值进行定位（相较于父级的定位），如果没有这样的父级，默认的父级是body
relative ------- 相对定位:对象不从文档流里面分离，通过设置top、left、right、bottom这四个方向
的值进行定位（相较于自身的定位）
注意的是：relative 的默认父级是body

<!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; } </style> 
  </head> 
  <body>
  <div class="main"> 
  <div class="box">这是一个div</div>
   <div class="box1">这是一个div</div>
    <div class="box2">这是一个div</div>
     </div>
      </body> 
     </html>

关于网页的布局管理

1.4其他属性

1.4.1overflow
visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条（总是显示滚动条）

<!DOCTYPE html> <html lang="en">
 <head><meta charset="UTF-8">
 <title>定位</title>
 <style type="text/css">
  .box{ width: 50px;height: 50px; border: 1px solid black; background-color: red;}</style> 
  </head> 
  <body>
  <div class="box">这是一个div这是一个div这是一个div</div>
      </body> 
     </html>

关于网页的布局管理
这种情况称为文字溢出，这时设置overflow可以解决这种问题

  .box{ width: 50px;height: 50px; border: 1px solid black; background-color: red; overflow: auto}

关于网页的布局管理
1.4.2zoom属性
缩放
zoom : number 百分比

 .box{ width: 100px;height: 100px; border: 1px solid black; background-color: red; zoom:2;}

关于网页的布局管理

会将整个盒子缩放为原来的两倍大小

1.5弹性盒子

将盒子设置为flex
display：flex；

 .main{ width: 600px; height: 600px; border: 1px solid black; margin: 200px; display: flex; }
  .box{ width: 200px;height: 200px; border: 1px solid black; background-color: red;} 
  .box1{ width: 200px; height: 200px; border: 1px solid black; background-color: red; } 
  .box2{ width: 200px; height: 200px; border: 1px solid black; background-color: red; } </style> 
  </head> 
  <body>
  <div class="main"> 
  <div class="box">这是一个div</div>
   <div class="box1">这是一个div</div>
    <div class="box2">这是一个div</div>

关于网页的布局管理

flex-direction
设置方向
row 默认值。作为一行，水平地显示弹性项目。
row-reverse 等同行，但方向相反。
column 作为列，垂直地显示弹性项目。
column-reverse 等同列，但方向相反。

.main{ width: 600px; height: 600px; border: 1px solid black; margin: 200px; display: flex; flex-direction: column;}
  .box{ width: 200px;height: 200px; border: 1px solid black; background-color: red;} 
  .box1{ width: 200px; height: 200px; border: 1px solid black; background-color: red; } 
  .box2{ width: 200px; height: 200px; border: 1px solid black; background-color: red; }

关于网页的布局管理

flex-wrap
flex-wrap 属性规定弹性项目是否应换行。
nowrap 默认值。规定弹性项目不会换行。
wrap 规定弹性项目会在需要时换行。
wrap-reverse 规定弹性项目会在需要时换行，以反方向。
.main{ width: 600px; height: 600px; border: 1px solid black; margin: 200px; display: flex; flex-wrap: nowrap;} .box{ width: 200px;height: 200px; border: 1px solid black; background-color: red;} .box1{ width: 200px; height: 200px; border: 1px solid black; background-color: red; } .box2{ width: 200px; height: 200px; border: 1px solid black; background-color: red; }
关于网页的布局管理

flex-flow
flex-flow 属性是以下属性的简写属性：

flex-direction
flex-wrap

justify-content
center 这一行居中
flex-start 默认值 左对齐
flex-end 右对齐
space-around 每个盒子的开头和结尾有空格
space-between 盒子之间有空格

align-items
stretch 默认。项目被拉伸以适合容器。（容器不设置高度)
center 项目位于容器的*。
flex-start 项目位于容器的开头。
flex-end 项目位于容器的末端。
baseline 项目被定位到容器的基线。

align-content
stretch 默认值。行拉伸以占据剩余空间。
center 朝着弹性容器的*对行打包。
flex-start 朝着弹性容器的开头对行打包。
flex-end 朝着弹性容器的结尾对行打包。
space-between 行均匀分布在弹性容器中。
space-around 行均匀分布在弹性容器中，两端各占一半。
子元素的属性
order 子元素的顺序
flex-grow 规定某个元素占用的比例
flex-shrink 项目相对于其余弹性项目的收缩量。
flex-basis 属性规定弹性项目的初始长度。
flex 是以下属性的简写属性：

flex-grow
flex-shrink
flex-basis

align-self 相对于弹性盒子的对齐方式
auto 默认。元素继承其父容器的 align-items 属性，如果没有父容器，则为 “stretch”。
stretch 定位元素以适合容器。
center 元素位于容器的*。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的末端。
baseline 元素被定位到容器的基线。

上一篇：绝对定位


下一篇：css文字滚动