HTML5知识点总结（五）

网页布局和页面美化

     布局的块级标签分类
     响应式布局和视口
     媒体查询
     多列布局

布局的块级标签分类

    1. 分类导航或菜单等场合

div-ul(ol)-li
1.使用margin：0px auto； 设置div水平居中
2.使用text—aligin：center；设置内容水平居中
3.使用height和line-height设置垂直居中

    2. 图文混编场合

div-dl-dt-dd
1.dt标签是列表标题（图片）
2.dd标签是列表内容（文字）
3.dd标签有默认的左间距，margin可以清除

    3.图文布局或显示数据场合

div-table-tr-td
1.使用border-collapse: collapse;设置细边框的效果

    4.布局表单场合

div-form-table-tr-td
1.使用<fieldset>fieldset>对表单元素进行分组，默认样式有外边框
2.使用<legend>legend>设置每组的内容标题，内容通常显示在左上角				

响应式布局和视口

    一、主要变化

1. 弃用px，改用em或%作为单位
2. 可以使同一网站在不同设备上完美呈现

    二、视口

         1、视口基本语法

在页面加载时，使用标签设置游览器视口的宽度

<meta name="viewport" 
content="width=device-width,
initial-scale=1,
minimum-scale=1,
maximum-scale=1,
user-scalable=no" />

         2、视口常用属性

属性	说明
width	设置layout viewport的宽度为一个正整数或字符串“device-width”
height	设置layout viewport的高度为一个正整数或字符串“height-width”
initial-scale	设置页面的初始缩放值，一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，一个数字，可以带小数
user-scalable	是否允许用户缩放，值为no 或 yes

媒体查询

    一、概念和作用

1. 概念：响应式布局的实现方式之一
2. 作用：在不同条件下使用不同样式，使页面在不同终端下达到不同的效果

    二、媒体查询

         1、媒体查询基本语法

@media 设备名 only （选取条件）not （选取条件） and（选取条件）
{
     
	CSS样式规则
}
only限定某种设备，可省略，and（逻辑与）和not（排除某种设备）为逻辑关键字，多种设备用逗号分隔

         2、媒体查询常用属性

可用设备名参数

属性	说明
all	所有设备
screen	彩色电脑屏幕
tv	电视
projection	项目演示 比如幻灯片
print	文档打印或打印预览

媒体查询属性

项目	Value
width	输出设备页面可见区域的宽度
height	输出设备页面可见区域的高度

下图补充

    三、媒体查询的两种使用方式

         1.在样式表中内嵌@media

@media all and (min-width:1024px ) {
     
	/*适合低分辨率桌面浏览器和横屏iPad*/
}

@media all and (min-width:768px ) {
     
	/*适合很低分辨率桌面浏览器和竖屏iPad*/
}

@media all and (min-width:480px ) {
     
	/*适合横屏iPhone和Andioid*/
}

@media all and (min-width:320px ) {
     
	/*适合竖屏iPhone和Andioid*/
}

@media all and (min-width:240px ) {
     
	/*适合低分辨率移动设备*/
}

         1.在link中使用@media

/*适合低分辨率桌面浏览器和横屏iPad*/
<link rel="stylesheet" type="text/css"
 media="all and (max-width:1024px )"
 href="pc.css">

/*适合很低分辨率桌面浏览器和竖屏iPad*/
<link rel="stylesheet" type="text/css"
 media="all and (max-width:780px )"
 href="pc.css">
 
/*适合横屏iPhone和Andioid*/
<link rel="stylesheet" type="text/css"
 media="all and (max-width:480px )"
 href="pc.css">
 
/*适合竖屏iPhone和Andioid*/
<link rel="stylesheet" type="text/css"
 media="all and (max-width:380px )"
 href="pc.css">

多列布局

    作用：能让网页文本呈多列显示，主要控制大片文章

    常用属性

属性	说明
column-count	指定列数，值是数字
column- gap	指定列之间的距离
column-rule	在一条声明中设置column-rule-*的简写属性
column-rule-color	设置列之间的颜色规则，值为颜色
column-rule-style	设置列之间的样式规则，取值和border-style的值相同
column-rule-width	设置列之间的宽度
columns	设置column-span和column-width的简.写属性
column-span	指定元素横向能跨多少列，取值none和all
column-width	指定列宽
column-fill	指定内容在列与列之间的分布方式，balance：则指浏览器确保不同列之间的长度差异尽可能小。auto：按照顺序填充列