HTMl基础篇之区块和布局（四）

最新推荐文章于 2024-07-23 20:15:47 发布

醋黄瓜

最新推荐文章于 2024-07-23 20:15:47 发布

阅读量8.9k

点赞数 6

分类专栏： html

本文链接：https://blog.csdn.net/qq_37130983/article/details/80877660

版权

html 专栏收录该内容

7 篇文章

订阅专栏

html区块元素: 大多数html元素为块级元素或内联元素

块级元素：通常在浏览器显示时会以新行开始（和结束）；例： <ul> <p> <h1> <table>等

内联元素：在显示时不会以新的一行开始；例：<strong> <a> <img> <span>等 <span>文本的容器

html的几种布局方式：
通常网页都是用<div>、<table>来进行布局，CSS渲染整个布局的样式使页面边的好看

一、流动布局
块级元素都会自上而下按顺序垂直延伸分布，默认状态下块级元素的宽默认为100%

内联元素都会从左到友水平延伸分布

二、浮动布局
在默认布局下，如果我们想让两个块级元素并排显示，通过float浮动实现，使用后记得清除浮动

三、层模型
通过设置定位position实现 absolute 绝对定位； relative 相对定位； fixed 固定定位等

目前前端的几种布局方式：

一、静态布局

特点：不管浏览器的尺寸多大，网页布局始终按写代码式的固定宽高显示，常规的pc网站都是静态布局，
移动端的话另外建设网站单独设布局

   移动端开发中采用静态布局的两种方式：
   （1）、在viewport meta标签上设置宽的大小width=320，也页面的各个元素也以像素px为单位
    通过js动态修改标签initial-scale使得页面等比缩放，从而刚好占满整个屏幕

（2）、在viewport meta标签上设置content"width=640,user-scalabel=no",页面的各个元素以
像素px为单位。由于640px超出手机宽度，浏览器会自动的缩小页面至全屏

优点：这种布局方式简单，亦没有什么兼容问题

缺点：不能根据用户的屏幕大小做出相应变化

二、流式布局
特点：页面元素的宽度是按照屏幕的分辨率进行适配调整，简单说使用百分比%设置，再设置max-width，min-width；
等属性控制尺寸流动范围；使整体布局不变，代表作网格系统

缺点：如果屏幕过大，相对原始设计过小或过大的屏幕不能正常显示，因为设置的是百分比；但是文字等元素的
大小是以像素px为单位的，在大屏下显示的效果会是宽被拉宽，使整个页面看起来不协调

三、自适应布局
特点：分别为不同的屏幕分辨定义布局，即创建多个静态布局，每个静态局部对应一个屏幕的分辨率范围。改变
屏幕分辨率可以切换不同的静态布局，但每个静态布局中页面元素大小不随窗口的大小而改变。位置发生改变

四、响应式布局
概述：随着CSS3的媒体查询，出现了响应式布局，目标：确保每一个页面在所有的终端都能显示满意的效果
通常糅合了流式布局与自适应布局再搭配媒体查询技术，
根据不同的屏幕分辨率做不同的布局，且宽根据屏幕的分辨率做出适配的调整

特点：每个屏幕分辨率下面都会有一个布局样式，即元素位置大小都会变

优点：适应移动和PC端

缺点：媒体查询技术有限只能适应主流的宽高；要匹配足够多的屏幕大小，工作量大，设计版本多

响应式布局步骤
在head定义:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user- scalable=no">

   name="viewport" :名称=视图；
   width="device-width":页面宽度=设备宽度
   initial-scale：初始缩放比例
   maximum-scale：允许用户的最大缩放比例
   minimum-scale：允许用户的最小缩放比例
   user-scale：是否允许用户可以手动缩放

  media query是响应式设计的核心，它能够跟浏览器进行沟通
        结构：@media screen and(max-width:980px){
#head{...}
   #content{...}
   #footer{....}
   }

例：iphone: @media only screen and (width:320px) and (width:768px){}
ipa : @media only screen and (min-width:768px) and (max-width:1024px){}

字体设置： html{font-size：100%;}

完成后可以定义响应式字体
@meta (min-width:640px){body{font-size:1rem}}
@meta (min-width:960px){body{font-size:1.2rem}}
@meta (min-width:1200px){body{font-size:1.5rem}}

宽不固定，可以使用百分比： #head{width:100%} #content{width:50%}等

详情可借鉴http://www.mahaixiang.cn/wzsj/278.html

五、弹性布局（rem/em布局）
rem、em的区别：都是顺应不同网页字体大小展现而产生的，em相对是父元素，rem始终相对html大小即页面根元素
使用em相对布局相对与使用百分比%布局更灵活

特点：包裹文字的各元素的尺寸采用em/rem为单位，而页面的主要划分区域仍然使用百分比或像素为单位

  rem、em与px区别：
   px：像素，比较精确，不方便左响应式布局
   em：以父节点font-size大小为参考点，标准不统一，IE6-8不支持

简单的div布局：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
		<title>html之div层布局</title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			.top{
				width: 100%;
				height: 80px;
				background-color: cadetblue;
			}
			.content{
				width: 100%;
				height: 520px;
				background-color: white;
			}
			.footer{
				width: 100%;
				height: 40px;
				background-color: darkgray;
				text-align: center;
				clear: none;
			}
			p{
				padding-top: 10px;
			}
			span{
				font-family: "微软雅黑";
				font-size: 20px;
				margin-left: 10px;
				color: white;
			}
			img{
				text-align: right; 
				vertical-align: middle;
				margin-left: 5%;
			}
			.left{
				width: 15%;
				height: 100%;
				background-color: lightblue;
				float: left;
			}
			.right{
				height: 100%;
				width: *;
				float: right;
			}
			
		</style>
	</head>
	<body>
		<div>
			<div class="top"><img src="../images/smartphone2.png"/><span>中国某某国际公司</span></div>
			<div class="content">
				<div class="left"><p>中国某某国际公司</p></div>
				<div class="right"></div>
			</div>
			<div class="footer"><p>中国某某国际公司 &copy; 2018-01-01</p></div>
		</div>
	</body>
</html>

效果图：

简单的表格布局：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>table表格布局</title>
	</head>
	<body>
		<table border="0" cellspacing="0">
			<tr style="width: 600px;height: 80px;">
				<td colspan="2" style="background-color: coral;"><img src="../images/smartphone.png" style="text-align: right; vertical-align: middle;margin-left: 5%;"/><span style="font-size: 20px; margin-left: 10px; color: white;">我的世界</span></td>
			</tr>
			<tr style="height: 400px;">
				<td width="80" style="background-color: cornsilk; vertical-align: top;">
					<p>我的世界</p>
				</td>
				<td width="520"></td>
			</tr>
			<tr style="background-color: aliceblue;">
				<td colspan="2" style="text-align: center;"><p>我的世界 &copy; 2018-1-1</p></td>
			</tr>
		</table>
	</body>
</html>

效果图：