CSS布局总结（进来看看吧）

已于 2022-03-30 14:13:32 修改
阅读量137 收藏
点赞数 1
文章标签： html html5 css
于 2021-12-03 12:07:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteuko/article/details/121621140
版权

浮动和清除

属性描述
float属性规定元素如何浮动
clear属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

float属性

值描述

left

元素浮动到其容器的左侧
right 元素浮动在其容器的右侧
none元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit元素继承其父级的 float 值
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
       #one{
       	float: right;
       }
       #two{
       	float: left;
       }
	</style>
</head>
<body>
	<img src="哆啦A梦.jpg" id="one">
	<img src="pp.jpg" id="two">
</body>
</html>

效果图

 clear属性

值描述

none 

允许两侧都有浮动元素。默认值
left左侧不允许浮动元素
right右侧不允许浮动元素
both左侧或右侧均不允许浮动元素
inherit元素继承其父级的 clear 值

未使用clear时：

 使用clear时：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      img{
      	float: left;
        clear: both;
      }
     
	</style>
</head>
<body>
   <img src="pp.jpg" class="one"/>
   <img src="pp.jpg" class="two"/>
</body>
</html>

 定位布局（总结常用两种）

属性：position

值描述
absolute绝对定位
relative相对定位

absolute：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      img{
      	position: absolute;
      	left: 200px;
      	top: 200px;
      }
     
	</style>
</head>
<body>
   <img src="pp.jpg"/>
</body>
</html>

 绝对定位以上面的粗红点相对与顶角来定位

 relative:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      .one{
      	position: relative;
        left: 30px;
      }
      .two{
      	position:relative;
      	left: -30px;
      }
	</style>
</head>
<body>
  <h2>正常位置的标题</h2>
  <h2 class="one">这是一个相对正常位置向右移动的标题</h2>
  <h2 class="two">这是一个相对正常位置向左移动的标题</h2>
  <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
  <p>样式 "left:-30px" 从元素的原始左侧位置减去 30 像素。</p>
  <p>样式 "left:30px" 向元素的原始左侧位置增加 30 像素。</p>
</body>
</html>

 CSS3弹性盒子：

弹性盒子
属性值
dispalyflex
主要属性
属性描述
flex-direction弹性盒子中子元素的排列方式
flex-wrap设置子元素超过父元素后是否自动换行
flex-flowflex-direction和flex-wrap的简写
align-items设置弹性盒子在侧轴（纵轴）上的对齐方式
align-content对flex-wrap的一个修改，和align-items相似，但不是设置对齐方式
justify-content设置弹性盒子在横轴（主轴）上的对齐方式

                                                        flex-direction:

值描述
row默认值。作为一行，水平地显示弹性项目。
row-reverse等同行，但方向相反。
column作为列，垂直地显示弹性项目。
column-reverse等同列，但方向相反。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.one{
		height: 600px;
		width: 600px;
		border: 1px solid black;
		background: grey;
		/*不加任何属性时，默认的是行排列*/
		display: flex;
	}
	.two{
		height: 100px;
		width: 100px;
		background: red;
		margin: 5px;
	}
	</style>
</head>
<body>
	<div class="one">
		<div class="two">弹性盒子1</div>
		<div class="two">弹性盒子2</div>
		<div class="two">弹性盒子3</div>
		<div class="two">弹性盒子4</div>
		<div class="two">弹性盒子5</div>
		<div class="two">弹性盒子6</div>
		<div class="two">弹性盒子7</div>
		<div class="two">弹性盒子8</div>
		<div class="two">弹性盒子9</div>
		<div class="two">弹性盒子10</div>
	</div>
</body>
</html>

                                                                    效果图：

                                                              加上flex-direction

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.one{
		height: 600px;
		width: 600px;
		border: 1px solid black;
		background: grey;
		/*不加任何属性时，默认的是行排列*/
		display: flex;
		/*加上flex-direction,让弹性盒子纵向排列*/
		flex-direction:column;
	}
	.two{
		height: 100px;
		width: 100px;
		background: red;
		margin: 5px;
	}
	</style>
</head>
<body>
	<div class="one">
		<div class="two">弹性盒子1</div>
		<div class="two">弹性盒子2</div>
		<div class="two">弹性盒子3</div>
		<div class="two">弹性盒子4</div>
		<div class="two">弹性盒子5</div>
		<div class="two">弹性盒子6</div>
		<div class="two">弹性盒子7</div>
		<div class="two">弹性盒子8</div>
		<div class="two">弹性盒子9</div>
		<div class="two">弹性盒子10</div>
	</div>
</body>
</html>

效果图：

 由代码可见，不加display的属性，会呈现下面的效果

 现就可以知道弹性盒子的作用了，会自动调节盒子，使子盒子能在父盒子里面全部容纳

flex-wrap

值描述
nowrap默认值。规定弹性项目不会换行。
wrap规定弹性项目会在需要时换行。
wrap-reverse

规定弹性项目会在需要时换行，以反方向。

上一张效果图加上flex-wrap属性就会换行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.one{
		height: 600px;
		width: 600px;
		border: 1px solid black;
		background: grey;
		 display: flex;
		/*换行属性*/
		flex-wrap: wrap;
	}
	.two{
		height: 100px;
		width: 100px;
		background: red;
		margin: 5px;
	}
	</style>
</head>
<body>
	<div class="one">
		<div class="two">弹性盒子1</div>
		<div class="two">弹性盒子2</div>
		<div class="two">弹性盒子3</div>
		<div class="two">弹性盒子4</div>
		<div class="two">弹性盒子5</div>
		<div class="two">弹性盒子6</div>
		<div class="two">弹性盒子7</div>
		<div class="two">弹性盒子8</div>
		<div class="two">弹性盒子9</div>
		<div class="two">弹性盒子10</div>
	</div>
</body>
</html>

效果图:

 flex-flow:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.one{
		height: 600px;
		width: 600px;
		border: 1px solid black;
		background: grey;
		 display: flex;
		/*把flex-direction和flex-wrap属性简写*/
		flex-flow: row wrap;
	}
	.two{
		height: 100px;
		width: 100px;
		background: red;
		margin: 5px;
	}
	</style>
</head>
<body>
	<div class="one">
		<div class="two">弹性盒子1</div>
		<div class="two">弹性盒子2</div>
		<div class="two">弹性盒子3</div>
		<div class="two">弹性盒子4</div>
		<div class="two">弹性盒子5</div>
		<div class="two">弹性盒子6</div>
		<div class="two">弹性盒子7</div>
		<div class="two">弹性盒子8</div>
		<div class="two">弹性盒子9</div>
		<div class="two">弹性盒子10</div>
	</div>
</body>
</html>

效果图：

 align-items

值描述
stretch默认。项目被拉伸以适合容器。
center项目位于容器的中央。
flex-start项目位于容器的开头。
flex-end项目位于容器的末端。
baseline项目被定位到容器的基线
align-content
值描述
stretch默认值。行拉伸以占据剩余空间。
center朝着弹性容器的中央对行打包。
flex-start朝着弹性容器的开头对行打包。
flex-end朝着弹性容器的结尾对行打包。
space-between行均匀分布在弹性容器中。
space-around行均匀分布在弹性容器中，两端各占一半。
justify-content
值描述
flex-start默认值。项目位于容器的开头。
flex-end项目位于容器的结尾。
center项目位于容器中央。
space-between项目在行与行之间留有间隔。
space-around项目在行之前、行之间和行之后留有空间。

Y9186
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS常见布局整理
Web_boom的博客
01-03 2759
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
【css】最全布局总结
qq_45406325的博客
08-13 5808
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
关于css布局方式简单总结
2301_76802665的博客
04-14 242
绝对定位（absolute）--------- 将对象从文档流中分离出来，用left，right，top，bottom 这四个方 向去设置相较于父级对象的相对定位，如果不存在，那么父级就是 body。属性：position-------设置对象的定位方式。静态定位（staic）----------默认。
css布局总结
MZYJP的博客
11-14 247
网格是由一系列水平及垂直的线构成的一种布局模式。一个网格通常具有许多列与行，以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽(gutter)
CSS布局总结
pan303121的博客
11-23 400
css的布局主要分为三种布局：盒子布局，浮动布局，定位布局。 1.盒子布局 如图所示，我们需要将整个css视为一个大的盒子，其中每一个元素当作盒子的一个个组成成分。 其中每一个元素之间的分界线我们一般是使用border属性来展现。 border 简写属性在一个声明设置所有的边框属性。 border-width 规定边框的宽度。参阅：border-width中可能的值。 border-style 规定边框的样式。参阅：border-style中可能的值。 border...
布局用CSS+DIV的优点总结
10-30
布局用CSS+DIV的优点总结
CSS两列布局实现方式总结
01-21
两列布局大概是最经典的一种网页布局方式了，本博客就是采用的这种布局。两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。...
css布局小技巧分享(必看)
09-24
下面小编就为大家带来一篇css布局小技巧分享(必看)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
常见的CSS布局总结
前端小工
10-13 2006
两行布局：头部高度固定，尾部高度为剩余高度方法：尾部元素设置 position: absolute; top:顶部元素的高度，bottom：0；<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{
CSS布局方式总结
caoxinhui521的博客
08-16 1904
一、显示（display） 1.1 盒模型（box-model） 1.2 行内元素（inline）+块元素（block） 1.3 行内块元素（inline-block） 1.4 flex 1.5 none 二、位置（position） 三、补充 3.1 浮动（float） 3.2 层叠（z-index） 3.3 溢出
CSS常见布局总结
越努力，越幸运！
03-15 3478
css实现水平垂直居中布局小结
常见 五大CSS 布局方式 总结
tzllxya的博客
06-24 7814
常见 五大CSS 布局方式 总结 之所以总结是因为最近也是在看css方面，让我迷惑的是有很多文章 关于布局名词都没有听说过，工作中也很少用。但是我们要与时俱进，叫的多了，它就成为正式名词了。比如 '双飞翼 '圣杯’？？并且我还发现我几乎看了好多文章，他们在从大的角度总结时候，几乎很少有相同，分类角度不尽相同。其实这也没关系，本来就没有一个统一标准，但是还是希望有个相对能够理解 概括角度看c...
各种CSS布局总结
qx1995318的博客
08-08 262
原文地址：点击打开链接 一、两栏布局（左边固定宽度，右边自动适应） 方法1、左浮动其中一个DIV，使其脱离文档流，另一个DIV不设置浮动即可。注意：DIV的顺序不能改变 PS：设置浮动可以让元素脱离正常的文档流，使后面的元素占据浮动元素本身的位置。但是浮动元素只能影响后面的元素的位置，而不能够影响前面的元素，也不能叠加在前面的元素上。 （view类样式只是为了层便于识别）； .view{ 
网页布局居然还可以这样写！！！
Da_Bao_zi的博客
09-06 128
居中布局 居中均以不定宽为前提，定宽情况包含其中 1、水平居中 1.1 inline-block+text-align .parent{ text-align: center; } .child{ display: inline-block; } 1.2 table+margin 也是一个水平居中 .child{ display: table; margin: 0 auto; } 1.3 absolute+transform 定位实现 .parent{.
前端:css页面布局总结
lululul123的博客
12-05 6946
W3C标准：是万维网制定的一系列标准，包括结构化标准语言（html、xml），表现 标准语言（css），行为标准语言（DOM，ECMAScript<javascript>)组成。这个标准倡 要将结构，样式，行为分离。 在网页制作中，面对设计图，网页制作人员一般要遵循的原则： 先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化， 然后在考虑布局和表现形式。 今天主要对css的页面布局做过总结： css的页面布局模型分为三大种模式： （1）流动模型（标准文档流）（2）浮动模型（定位）
CSS知识点总结
qq_26409411的博客
11-28 334
目录 css总结 文字属性 外观属性 行内元素和块级元素 背景属性 选择器 标签选择器(元素选择器) 类选择器 多类名选择器 id选择器 通配符选择器 链接伪类选择器 结构(位置)伪类选择器 目标伪类选择器(CSS3) 嵌套 CSS复合选择器 选择器优先级 交集选择器 并集选择器 后代选择器 子元素选择器 属性选择器 伪元素选择器（CSS3) 盒模型 外边距实现盒子居中 清除元素的默认内外边距 content宽度和高度 盒子模型布局稳定性 css3盒
html css布局
最新发布
08-25
根据引用，HTML和CSS布局方式可以分为以下几种：浮动布局、定位布局、flex布局、table-cell表格布局、网格布局。 浮动布局是通过设置元素的浮动属性来实现元素的排列。通过设置元素的float属性为left或right，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值