24-Web-CSS布局相关属性

于 2020-08-03 12:00:56 发布
阅读量262 收藏
点赞数
文章标签： html 定位 css js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48486897/article/details/107760791
版权

1.标准流布局

<!-- 
1.什么是标准流布局
标签在没有添加布局的样式的时候默认的布局方式就是标准流布局：
块级标签：一个占一行；默认宽度是父标签的宽度，默认高度是内容的高度；设置宽高有效。（例如：p、h1~h6、ul、ol、dl、li、div等）
行内标签：一行可以显示多个; 默认大小是内容大小；设置宽高无效。(例如：a、span、font)
行内块标签：一行可以显示多个;默认大小是内容大小；设置宽高有效。（例如：img、input输入框）

2.display属性
修改标签样式的display属性，可以修改标签的类型
block  	- 块
inline 	- 行内
inline-block 	- 行内块
none 	-  隐藏标签
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- ====================标签类型======================= -->
		<!-- 1.块级标签 -->
		<h1>1.块级标签</h1>
		<p style="background-color: indianred; width: 200px; height: 50px;">我是段落1</p>
		<p style="background-color: skyblue; width: 120px;">我是段落2</p>
		<div id="">
			我是div1
		</div>
		<div id="" style="background-color: lemonchiffon;">
			我是div2
		</div>
		
		<!-- 2.行内标签 -->
		<h1>2.行内标签</h1>
		<a href="https://www.baidu.com" style="background-color: mistyrose; width: 100px; height: 100px;">百度</a>
		<a href="https://www.jd.com" style="background-color: aquamarine;">京东</a>
		<span style="width: 200px; height: 400;">佛挡杀佛</span>
		<!-- 3.行内块 -->
		<h1>3.行内块</h1>
		<img src="img/luffy.jpg" style="width:150px; height: 150px;">
		<img src="img/luffy.jpg" >
		
		
		<!-- ====================display属性======================= -->
		<!-- 1.block -->
		<h1>4.block</h1>
		<a style="display: block; background-color: sandybrown; width: 120px;" href="#">百度</a>
		<a href="#">爱奇艺</a>
		
		<!-- 2.inline和inline-block -->
		<h1>5.inline和inline-block</h1>
		<div style="background-color: silver; display: inline; width: 100px;">
			div3
		</div>
		<div style="background-color: yellow; display: inline-block; width: 100px;">
			div4
		</div>
		
	</body>
</html>

2.网页布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 行内块的问题：
		多个行内块在显示的时候中间有间隙
		 -->
		<div style="height: 120px; background-color: lavender;">阿萨德</div>
		<div style="background-color: sandybrown; display: inline-block;width: 30%; height: 800px;"></div>
		<div style="background-color: khaki; display: inline-block; width: 50%; height: 800px;"></div>
	</body>
</html>

3.浮动

<!-- 
1.浮动可以让标签脱流：给标签样式的float属性赋值
left  -  左浮动(在屏幕的左边找位置显示标签)
right - 右浮动（在屏幕的右边找位置显示标签）
 -->
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.浮动可以脱流 先从上>左找位置放-->
		<!-- <div style="background-color: khaki; height: 100px; width: 30%; float: left;"></div>
		<div style="background-color: seagreen; height: 100px; width: 70%; float: left;"></div>
		<div style="background-color: moccasin; height: 100px; width: 100px; float: left;"></div>
		<div style="background-color: magenta; height: 100px; width: 100px; float: right;"></div> -->
		
		<!-- 2.浮动的原理 -->
		<!-- <div style="background-color: hotpink; height: 200px; width: 600px;float: left;"></div>
		<div style="background-color: green; height: 250px; width: 300px;"></div>
		<div style="background-color: skyblue; height: 250px; width: 300px; float: right;"></div> -->
		
		<!-- 3. 示例 -->
		<div style="background-color: red; height: 100px; width: 200px;"></div>
		<div style="background-color: green; height: 100px; width: 120px; float: left;"></div>
		<div style="background-color: blue; height: 100px; width: 120px; float: right;"></div>
		<div style="background-color: yellow; height: 200px; width: 120px; float: left;"></div>
		<div style="background-color: deeppink; height: 300px; width: 100%;"></div>
		
	</body>
</html>

4.浮动的应用


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.浮动可以让竖着显示的标签横着显示 -->
		<!-- 2.做文字环绕的效果 -->
		<div style=" background-color: aqua; float: left;">
			<img src="img/luffy4.jpg" >
		</div>
		<div id="">
			<p>=======记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。
记者从贵州安顺市应急管理局获悉：7月7日，安顺市一辆车牌号为贵G02086D的2路公交车坠湖，驾驶员已死亡。
初步查明，驾驶员张某钢，男，52岁，安顺市西秀区人，执A1驾照，1997年至今一直在驾驶2路公交车。相关详细情况正在作进一步调查。</p>
		</div>
		
		<hr >
		<div style="width: 200px; height: 300px;">
			
			<div style="float: right; width: 120px; height: 120px; background-color: palevioletred;"></div>
			<div id="">
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
				<a href="">超链接1</a>
			</div>
			
			
		</div>
		
		
	</body>
</html>

5.清楚浮动

<!-- 
	清除浮动指的是清除因为浮动而产生的高度塌陷的问题
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
		1. 高度塌陷：如果父标签没有设置高度，子标签有浮动，那么这个父标签的高度就会塌陷（相对后面的标签
		2. 清除浮动
		1）空盒子法 - 在高度会塌陷那个标签中的最后添加一个空的div，并且设置空的div的clear样式属性的值为both
		2）设置overflow属性 - 设置高度会塌陷的标签的overflow样式属性为hidden
		3) 万能清除法 - 
		 -->
		 <!--====== 1.高度塌陷 ======-->
		<div style="background-color: red; height: 120px;"></div>
		<div style="background-color: blue;">
			<div style="background-color: slateblue; height: 120px; width: 300px; float: left;"></div>
			<div style="background-color: green; height: 200px; width: 400px; float: right;"></div>
		</div>
		<div style="background-color: thistle; height: 120px;"></div>
		
		<!-- ====2.空盒子法清除浮动 =====-->
		<!-- <div style="background-color: salmon; height: 120px;"></div>
		<div style="background-color: blue;">
			<div style="background-color: slateblue; height: 1020px; width: 300px; float: left;"></div>
			<div style="background-color: green; height: 200px; width: 400px; float: right;"></div>
			<div style="clear: both;"></div>
		</div>
		<div style="background-color: thistle; height: 120px;"></div> -->
		
		<!-- ======3.设置overflow清除浮动!!!!最常用！！！======= -->
		<!-- <style type="text/css">
			.clear-float{
				overflow: hidden;
			}
		</style>
		<div style="background-color: salmon; height: 120px;"></div>
		<div class="clear-float" style="background-color: blue;">
			<div style="background-color: slateblue; height: 120px; width: 300px; float: left;"></div>
			<div style="background-color: green; height: 200px; width: 400px; float: right;"></div>
		</div>
		<div style="background-color: thistle; height: 120px;"></div> -->
		
		
		<!--====== 4.万能清除法，不常用！！！ ======-->
		<!-- <style type="text/css">
			#div2:after{
				display: block;
				clear: both;
				content: '';
				visibility: hidden;
				height: 0;
			}
			#div2{
				zoom: 1;
			}
		</style>
		<div style="background-color: salmon; height: 120px;"></div>
		<div id="div2" style="background-color: blue;">
			<div style="background-color: slateblue; height: 120px; width: 300px; float: left;"></div>
			<div style="background-color: green; height: 200px; width: 400px; float: right;"></div>
		</div>
		<div style="background-color: thistle; height: 120px;"></div> -->
		
	</body>
</html>

6.定位

<!--
 1.定位属性：top、bottom、left、right
 top  - 当前标签的顶部到另外一个标签顶部的距离
 bottom - 当前标签的底部到另外一个标签底部的距离
 left - 当前标签的左边到另外一个标签左边的距离
 right - 当前标签的右边到另外一个标签右边的距离
 
 2.设置定位的参考对象：position
 initial/static  -  默认值，不定位(body标签的position属性不是initial/static)
 absolute  - 绝对定位；相对第一个非initial/static的父标签进行定位
 relative  - 相对定位；相对当前标签在标准流中的位置进行定位。
            （注意：relative一般用在父标签中，让它的子标签能够将这个标签作为absolute的参考对象）
 fixed   -  相对浏览器定位
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- =====1.不定位=========== -->
		<h1>1.不定位</h1>
		<style type="text/css">
			#div1{
				left: 200px;
			}
		</style>
		<div id="div1" style="width: 100px; height: 100px; background-color: bisque;"></div>
		
		<!-- =====2.绝对定位=========== -->
		<h1>2.绝对定位</h1>
		<style type="text/css">
			#div2{
				right: 0px;
				bottom: 10px;
				position: absolute;
			}
		</style>
		<div style="background-color: red; width: 500px; height: 500px;">
			<div style="background-color: yellow; width: 350px; height: 350px; position: relative;">
				<div style="background-color: yellowgreen; width: 200px; height: 200px; ">
					<div id="div2" style="background-color: hotpink; width: 100px; height: 100px;">
						
					</div>
				</div>
			</div>
		</div>
		
		<!-- =====3.相对定位=========== -->
		<h1>3.相对定位(相对标准流，一般不用)</h1>
		<style type="text/css">
			#div3{
				top: 20px;
				left: 50px;
				position: relative;
			}
		</style>
		<div id="div3" style="width: 100px; height: 100px; background-color: cornflowerblue;"></div>
		
		<!-- =====4.相对浏览器定位=========== -->
		<h1>4.相对浏览器定位</h1>
		<style type="text/css">
			#div4{
				right: 10px;
				bottom: 50px;
				position: fixed;
			}
			
			#div5{
				top: 0;
				position: fixed;
			}
		</style>
		<div id="div4" style="width: 100px; height: 45px; background-color: antiquewhite;">
			回到顶部
		</div>
		<div id="div5" style="width: 100%; height: 100px; background-color: rgba(20, 120, 130, 0.3);">
		</div>
		
	</body>
</html>

7.盒子模型

<!--
 1.盒子模型
 每一个可见标签其实都是一个盒子模型，由4个部分组成：内容、padding、border、margin
 1）内容  -  设置标签的width和height，其实就是在设置内容部分的大小; 子标签和标签内容都是显示在内容部分上的；背景也会作用于内容上
 2）padding - 内边距；有4个方向;背景也会作用于内边距上(可见)
 3）border - 边框; 有4个方向；背景不会作用于内边距上， 可见
 4）margin - 外边距;有4个方向; 不可见
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<style type="text/css">
			#div1{
				/* ======1.控制内容====== */
				width: 100px;
				height: 100px;
				/* =====2.内边距=======*/
				/* 一起设置 */
				/* padding: 40px; */
				padding-left: 20px;
				padding-top: 40px;
				
				/* =====3.边框====== */
				/* 一起设置 
				border:类型 宽度 颜色
				类型 - solid(实现)  dotted(点划线)  dashed(虚线) double(双线)
				*/
				/* border:solid 2px red; */
				border-left: solid 5px red;
				border-top: dotted 5px yellow;
				
				/* =====4.外边距====== */
				/* margin: 20px; */
				margin-bottom: 60px;
				margin-right: 20px;
				/* float: left; */
				
			}
		</style>
		<div style="width: 100px;height: 100px;background-color: #FF0000;"></div>
		<div id="div1" style="background-color: yellowgreen;">
			我是div1
		</div>
		<input type="text" name="" style="padding-left: 20px;"/>
		
		<h1>自动布局</h1>
		<hr>
		<style type="text/css">
			.c1{
				width: 120px;
				height: 120px;
				background-color: seagreen;
				float: left;
				margin-left: 20px;
				margin-top: 20px;
			}
		</style>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c1"></div>
	</body>
</html>

8.居中布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.水平方向居中 
		1)设置需要居中的标签的margin-left和margin-right为auto(一个标签居中有效)。或者标签不设置
		宽度，左右外边距为一个固定值，
		2)设置父标签或者自己的标签的text-algin属性为center(针对文字和文字标签有效)
		-->
		
		<h1>示例1</h1>
		<style type="text/css">
			#div2{
				margin-left: auto;
				margin-right: auto;
			}
			#div4{
				margin-left: 140px;
				margin-right: 140px;
			}
		</style>
		<div id="div1" style="background-color: yellow; width: 100%; height: 200px;">
			<div id="div2" style="background-color: red; width: 100px; height: 100px;"></div>
			<div id="div4" style="background-color: aqua; height: 60px;"></div>
		</div>
		
		
		
		<h1>示例2</h1>
		<style type="text/css">
			#p1{
				text-align: center;
			}
			
			#div3{
				text-align: center;
			}
		</style>
		<p id="p1" style="background-color: sandybrown;">我是段落1</p>
		<div id="div3" style="background-color: skyblue;">
			<a href="">超链接1</a>
			<a href="">超链接2</a>
			<a href="">超链接3</a>
			<a href="">超链接4</a>
			<a href="">超链接5</a>
		</div>
		
		<!-- 2.垂直方向居中 
			1)
		-->
		<style type="text/css">
			#div5{
				width: 80px;
				height: 80px;
				background-color: red;
				
				/* 垂直居中 设置top为50%，margin-top为本标签高度的一半*/
				position: absolute;
				top: 50%;
				margin-top: -40px;
			}
		</style>
		<div style="background-color: steelblue;height: 200px; position: relative;">
			<div id="div5"></div>
		</div>
		
		
	</body>
</html>
qq_48486897
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值