盒子模型

最新推荐文章于 2024-04-02 00:16:05 发布

zhangzongxing_

最新推荐文章于 2024-04-02 00:16:05 发布

阅读量49

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/zhangzongxing_/article/details/114637273

版权

javaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

**综述**：任何标签都可以称为容器，标签之间相互作用，有了布局

四个参数

这是一个HTML页面的组成部分。
1.边框
border-style等载属性中总结过
2.内容
3.内补丁
padding: 四个参数 (上，右，下，左)
两个参数(上下左右)
一个参数（上下左右）
三个参数（上左右下）
padding-top 距页面上或夫标签向下移动的方向
padding-left：距离左页面或父标签向右移动的方向
padding-right：距离右页面或父亲=标签向左移动的方向
padding-bottom 距离下标签的位置向上移动的方向
4.外补丁
margin: 四个参数 (上，右，下，左)
两个参数(上下左右)
一个参数（上下左右）
三个参数（上左右下）
margin-top 距页面上或夫标签向下移动的方向
margin-left：距离左页面或父标签向右移动的方向
margin-right：距离右页面或父亲=标签向左移动的方向
margin-bottom 距离下标签的位置向上移动的方向

浮动

1.HTML标签：html标签分两种，块级标签和行内标签
块级元素
自己占一行，多个块级标签一起，一个占一行。可以包含所有的块级标签和行内标签
行内标签
宽度只与所包围内容的宽高有关，且多个行内标签一起显示，都会在同一行表示，除非一行占满了。只能包含文本或行内标签
行内标签和块级标签的转换
在行内样式表中加display属性来修饰某个标签。
display:inline;//强制转换为行内元素
display:block;//强制转换为块级元素

  <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#z{
				background-color: red;
				border-style: solid;
				border-width: 10px;
				padding: 10px;
				margin: 12px;
			}
		</style>
	</head>
	<body>
		<div id="z">
			hello
		</div>
		<div id="z">
			hello
		</div>
		//在同一行
		<span>adaf</span>
		<span>adaf</span>
		<span>adaf</span>
		<span>adaf</span>
		<span>adaf</span>
		<span>adaf</span>
		<span>adaf</span>
		<span>adaf</span>
		<span>adaf</span>
		<span>adaf</span>
	</body>
</html>

基本布局

1.常规流
老规则，块级元素独占鳌头，行类元素分站一行。如此反复，水平排序。
2.浮动
向左或右浮动，直到遇到父级元素或另一个浮动元素。打破了常规流显示，即使是块级元素也在同一行带着；直到装不下才换行。
3.属性
left right none 分别代表左浮动右浮动不浮动
4. 清除浮动
常规流会和浮动相冲突，从而显示异常。需要在行内样式表中对其进行清除浮动。从而显示正常。浮动元素会覆盖一些原来的元素，
none:两边都有浮动
both:两边都没有浮动
left:左边没有浮动
right：右边没有浮动

zhangzongxing_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型

**综述**：任何标签都可以称为容器，标签之间相互作用，有了布局四个参数这是一个HTML页面的组成部分。1.边框border-style等载属性中总结过2.内容3.内补丁padding: 四个参数 (上，右，下，左)两个参数(上下左右)一个参数（上下左右）三个参数（上左右下）padding-top 距页面上或夫标签向下移动的方向padding-left：距离左页面或父标签向右移动的方向padding-right：距离右页面或父亲=标签向左移动的方向p
复制链接

扫一扫