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

小咪咪 2022-05-21 06:15 256阅读 0赞

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>中国某某国际公司 © 2018-01-01</p></div>
    		</div>
    	</body>
    </html>

效果图：

![70][]

简单的表格布局：

<!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>我的世界 © 2018-1-1</p></td>
    			</tr>
    		</table>
    	</body>
    </html>

效果图：

![70 1][]

[70]: /images/20220521/337b568323bb440cb817fd5057e62395.png
[70 1]: /images/20220521/42f2436c99314daba250e9dbb7371b26.png