css布局(盒子模型浮动定位)有图示

最新推荐文章于 2022-07-20 16:57:14 发布

乐多

最新推荐文章于 2022-07-20 16:57:14 发布

阅读量409

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44769592/article/details/106559956

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

布局（盒子模型浮动定位）

布局（盒子模型浮动定位）

三大学习核心：

盒子模型，
浮动，
定位

css盒子模型

盒子模型四个组成部分

border边框
content 内容
padding 内边距（内容和边框的距离）
margin 外边距（盒子之间的距离）

border

border:border-width  border-style border-color;

content

padding

margin

浮动

默认文档流是从左到右，从上到下的排列元素。

float

可以让上下堆叠的 块级元素 浮动成左右并列
注意前提是块级元素

举个例子：
单独给2设置float:left ，会让2覆盖3，且2浮动到浏览器最左位置
在这里插入图片描述
第二幅图中，若不想3浮动到2后面怎么办？
方法一：给3用clear：left/right/both
left :不允许左边有浮动对象
right :不允许右边有浮动对象
both :不允许有浮动对象

方法二：给1，2套上一个父元素，父元素是块级元素，3也是块级元素，那么这两者就不会重叠了

练习：做一个简易聊天框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		#ske{
			width: 500px;
		}
		#other{clear: both;float: left;}
		#me{clear: both;float: right;}
	</style>
	<body>
		<div id="ske">
			<div id="me">
				hhh
			</div>
			<div id="other">
				hhh
			</div>
		</div>
	</body>
</html>

position(定位)

relative：

相对于前一个对象偏移

absolute

会脱离文档流，相对于其最接近的一个具有定位设置（relative或absolute）的父对象进行绝对定位，如果不存在这样的父对象，则依据body对象。
其层叠通过z-index属性定义。

fixed

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的也不会移动。一般用户窗口右下角的小广告。

display：none或inline或block

inline或block可以变更元素的显示类型。

首先了解一下inline 和block

inline：内联元素
内联元素又名行内元素inline element，和其对应的是块元素block element，都是html规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，
即一个挨着一个，
都在同一行按从左至右的顺序显示，不单独占一行。
而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。
比如，我们完全可以把内联元素加上display:block这样的属性，
让它也有每次都从新行开始的属性
，即成为块元素。同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。
block：块元素
块元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。

乐多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css布局(盒子模型浮动定位)有图示

文章目录布局（盒子模型浮动定位）css盒子模型盒子模型四个组成部分bordercontentpaddingmargin浮动floatposition(定位)relative：absolutefixeddisplay：none或inline或block布局（盒子模型浮动定位）三大学习核心：盒子模型，浮动，定位css盒子模型盒子模型四个组成部分border边框content 内容padding 内边距（内容和边框的距离）margin 外边距（盒子之间的距离）border
复制链接

扫一扫