布局方式总结

一只赖克宝

已于 2023-04-12 17:40:35 修改

阅读量143

点赞数

文章标签：前端 javascript html css

于 2023-04-12 17:35:42 首次发布

本文链接：https://blog.csdn.net/2303_77243750/article/details/130107738

版权

文章介绍了HTML中的块级元素和行内元素的特点，包括它们在空间占用、排列方式和内容嵌套方面的区别。接着讨论了CSS中的布局方式，如浮动布局、定位布局和Flex布局，详细阐述了各种布局的工作原理和示例代码。

摘要由CSDN通过智能技术生成

块级元素：

主要的块级元素

<div><p><li><h1><h2><h3><h4><h5><h6>
<form><header><hr><ol><address><article>
<aside><audio><canvas><dd><dl><fieldset>
<section><ul><video>

特点：

比较霸道，自己独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。

注意：只有文字才能组成段落因此 p 里面不能放块级元素，特别是 p 不能放div，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

行内元素：

主要的行内元素

<span><a><lable><strong><b><small><abbr><button>
<input><textarea><select><code><img><br>
<q><i><cite><var><kbd>
<sub><bdo>

特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或则其他行内元素。

两者区别：

1.占有空间上的区别，

块级元素：占有整一个父元素的空间。
行内元素：占有其对应标签的空间，即使根据其内容的多少，占有父级元素多少的空间。

2.多个同级元素使用时的区别

块级元素：即使在设置宽度的情况下，都直接新起一行。
行内元素：除非所占父元素行空间已满，否则都不会换行，在行内向右排列，即使是同级的子标签都是如此。

3. 包含嵌套关系的区别

块级元素：包含行内元素和块级元素。
行内元素：只能包含行内元素，不能包含块级元素。

CSS常见的布局方式

1.盒子布局

如图所示盒子模型有以下几个属性：

margin：外边据可以改变元素上下左右的边距。

margin-left ：调整左边距。
margin-right：调整右边距。
margin-top：调整上边距。
margin-bottom：调整下边距。

padding：内边距

padding：内边距可以改变元素内部上下左右的边距。
padding-left ：调整左边距。
padding-right：调整右边距。
padding-top：调整上边距。
padding-bottom：调整下边距。

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

dispaly：none;
width:0;height:0;
overflow：hidden表示超出部分隐藏。
visible表示显示隐藏部分（这个一般在系统中是默认值）。

border:边框

边框主要有以下几种属性：

（1）color：颜色

例如：border-top-color表示上边框的颜色，也可调整其他几个方向的（bottom下，left左，right右）

style：样式

例如：border-top-style表示上边框的样式，可以是实线（solid），圆点（dotted）,虚线（dashed）等等。

width：宽度

thin 表示细 medium 表示中等 thick 表示粗也可使用像素来表示。

例如：border-width：xxpx。

height：高度。

例如：border-height：xxpx利用像素来设置高度。

radius：圆角边框（设置边框弧度）。

例如：border-radius：xxpx。

除此以外盒子模型还有浮动，清除浮动，定位等属性，

如下一一作答：float：浮动我们在做静态网页的时候经常会遇到某一块的图形不受控制，会超出我们所规定的范围，这时候我们就可以使用浮动。

2.浮动布局

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

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

语法：

float: none|left|right;

文档流

指元素在排版布局的过程中，元素会自动从左到右，从上到下的流式排列。添加浮动会脱离文档流，对后续元素产生影响。

1.空间丢失

第一个div设置浮动，第二个未设置。第一个会脱离文档流，第二个div向前填充。

<!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: 200px;
    height: 200px;
}

div:nth-of-type(1) {
    border: solid 2px red;
    /* 浮动后脱离文档流，会对后续元素产生影响 */
    float: left;
}

div:nth-of-type(2) {
    background: blue;
}
	</style>
</head>
<body>
	<div >
      
	</div>
	<div>
  
	</div>
</body>

</html>

若只有第二个div浮动

<!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: 200px;
    height: 200px;
}

div:nth-of-type(1) {
    border: solid 2px red;
}

div:nth-of-type(2) {
    background: blue;
    float: left;
}
	</style>
</head>
<body>
	<div >
      
	</div>
	<div>
  
	</div>
</body>

</html>

2.同时浮动

<!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: 200px;
    height: 200px;
}

div:nth-of-type(1) {
    border: solid 2px red;
	float: left;
}

div:nth-of-type(2) {
    background: blue;
    float: left;
}
	</style>
</head>
<body>
	<div >
      
	</div>
	<div>
  
	</div>
</body>

</html>

3.定位布局

语法：

position: static|absolute|fixed|relative|sticky|initial|inherit;

没开定位时

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
 
    <style type="text/css">
      .box {
        width: 600px;
        height: 600px;
        border: 5px solid rgb(56, 56, 56);
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
 
      .box2 {
        width: 100px;
        height: 100px;
        background-color: red;    
      }
 
      .box3 {
        width: 100px;
        height: 100px;
        background-color: green;
      }
 
      .s1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
 
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>

开启定位后

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
 
    <style type="text/css">
      .box {
        width: 600px;
        height: 600px;
        border: 5px solid rgb(56, 56, 56);
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
 
      .box2 {
        width: 100px;
        height: 100px;
        background-color: red;    
      }
 
      .box3 {
        width: 100px;
        height: 100px;
        background-color: green;
		position:relative;        
        left: 90px;
        bottom: 50px; 
      }
 
      .s1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
 
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>

4.Flex布局

justify-content：设置主轴上的子元素的排列方式。

align-items：设置交叉轴上的子元素的排列方式（单行）。

flex-direction：设置水平方向的排列方式。

flex-wrap：设置子元素是否可以换行。

flex-flow：简写属性，相当于flex-direction和flex-wrap的缩写形式。

align-content：设置交叉轴上的子元素的排列方式(多行)。

一、justify-content

此属性控制项目在主轴上的对齐方式，设置给容器。

flex-start：默认值，靠左对齐。

center：居中对齐。

flex-end：靠右对齐。

span-between：两端对齐，两端不留空间。

space-evenly：分散对齐，所有元素都平局空间。

space-around：跟space-evenly类似，但是左右两边的留白为平分空间的1/2。

<!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: rgb(255, 0, 93);
			display: flex;
			justify-content: space-around;

		}

		.flex-item {
			width: 100px;
			height: 100px;
			background-color: rgb(60, 0, 255);
			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-items

控制元素在交叉轴上的对齐方式（单行）( 单行项目使用 align-items 控制，如果项目占据了多行，此属性无效 )。

stretch：默认值，它会自动把子元素拉伸成容器的高度,只要设置容器的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: rgb(0, 255, 136);
			display: flex;
			align-items: baseline;
		}

		.flex-item {
			width: 100px;
			height: 100px;
			background-color: rgb(255, 0, 221);
			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>

三、 align-content

设置交叉轴上的子元素的排列方式（多行），当有多行项目，使用align-content替换align-items设置项目在交叉轴上的排列方式，两行之间就会有空隙。

flex-start：默认值，在交叉轴靠左对齐。

center：在交叉轴居中对齐。

flex-end：在交叉轴靠右对齐。

space-around：分散对齐，但是上下两边的留白为平分空间的1/2。

span-between：两端对齐，两端不留空间。

四、 flex-direction

此属性控制着水平方向是主轴还是交叉轴

flex-direction 属性的默认值是 row ，也就是说主轴与行一个方向，也就是水平方向是主轴。

flex-direction 如果设置为 column ，则垂直方向是主轴，水平方向就是交叉轴了。

（若flex-direction=column此时向控制项目水平对齐方式，应该使用 align-items ，垂直方向对齐方式，应使用 justify- content 属性）。

<!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;
			5.6.3 flex-wrap nowrap ---- 默认值，规定弹性元素不会换行 wrap ---- 弹性元素在需要的时候会换行 wrap-reverse ------ 会换行，但是是反方向 height: 350px;
			background-color: orange;
			display: inline-flex;
			flex-direction: column-reverse;
		}

		.flex-item {
			width: 100px;
			height: 100px;
			background-color: rgb(217, 255, 0);
			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

如果子元素有固定宽度，并且超出了容器的宽度，还不允许收缩的话，那么可以使用 flex-wrap 属性来让元素进行折行排列。

nowrap：默认值。规定弹性元素不会换行。

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

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

5.特殊样式

transform属性

transform 属性可以让元素在一个坐标系统中变形，这个属性包含一系列变形函数、可以进行无素的移动、旋转和缩放。默认值为none。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			border: 1px solid #000;
			background-color: rgb(0, 157, 255);
			float: left;
			margin: 50px;
		}
		.one{
			transform: rotate(30deg);   /*旋转30度*/
		}
		.two{
			transform: translate(20px,20px);     /* 向右向下移动20px*/
		}
		.three{
			transform: scale(2,1.5);  /*宽度为原来两倍，高度为原来1.5倍*/
		}
		.four{
			transform: skew(30deg,20deg);  /*在X轴上和Y轴上倾斜20度和30度*/
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
	<div class="four"></div>
</body>
</html>

一只赖克宝

关注

0
点赞
踩
0

收藏

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

比较霸道，自己独占一行。高度，宽度、外边距以及内边距都可以控制。宽度默认是容器（父级宽度）的100%。是一个容器及盒子，里面可以放行内或者块级元素。相邻行内元素在一行上，一行可以显示多个。高、宽直接设置是无效的。默认宽度就是它本身内容的宽度。行内元素只能容纳文本或则其他行内元素。两者区别：1.占有空间上的区别，块级元素：占有整一个父元素的空间。行内元素：占有其对应标签的空间，即使根据其内容的多少，占有父级元素多少的空间。2.多个同级元素使用时的区别。
复制链接

扫一扫