1、响应式Web简介
响应式Web设计是和HTML5+CSS3互相配合与支持的，技术点包括：
（1）HTML5+CSS3：HTML5+CSS3为基本网页设计增添了新的标签与属性内容。
（2）HTML5的视口（viewport）：提供了用于配置视口的属性。在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。
（3）CSS3的媒体查询：识别媒体类型、特征（屏幕宽度，像素比等）。
（4）流式布局：可以根据浏览器的宽度和屏幕的大小自动调整效果。
（5）响应式栅格系统：依赖于媒体查询，根据不同的屏幕大小调整布局。
（6）流式图片：随流式布局进行相应缩放。
2、HTML5语义化标签
相比于传统的网页设计，HTML5的一大特点就是给标签赋予了更明确的语义，更加便于人和机器的理解。HTML5中常用的语义化标签，如下表所示。
|
标签名 |
描述 |
|
<header> |
定义 section 或 page 的页眉。 |
|
<section> |
定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 |
|
<article> |
规定独立的自包含内容，比如一篇文章。 |
|
<aside> |
定义页面内容之外的内容。是内容的相关辅助信息。可用作文章的侧栏。 |
|
<figure> |
规定独立的流内容（图像、图表、照片、代码等等）。 |
|
<figcaption> |
定义 <figure> 标签的标题。 |
|
<nav> |
定义页面中导航链接的部分。 |
|
<footer> |
定义 section 或 page 的页脚。 |
HTML5有了语义化结构标签，就对应有语义化标签布局，它与传统方式布局对比如下：
传统方式布局 语义化标签布局
3、CSS3新特性
CSS3是CSS的最新版本，该版本提供了更加丰富且实用的规范，如：列表模块、超链接、语言模块、背景和边框、颜色、文字特效、多栏布局、动画等等，这些规范的使用会在后面的单元中将依次讲解。另外，响应式设计就是通过CSS3的媒体查询来实现的。
（1）与CSS引入HTML文件完全一样，CSS3引入HTML文档也有行内式（在标签的style属性中引入）、内嵌式（使用style标签在文档头部引入）和外链式（在头部通过link标签引入.css文件）3种形式。
（2）浏览器私有前缀
为了更好的兼容不同内核的浏览器，CSS3中部分属性需要添加浏览器的私有前缀，将某个样式以-xx-开头，具体如下：
-webkit- ：只有以Webkit为内核的浏览器可以解析，如Chrome、Safari。
-moz- ：只有以Gecko为内核的浏览器可以解析，如Firefox。
-ms- ：只有以Trident为内核的浏览器可以解析，如IE。
-o- ：只有以Presto为内核的浏览器可以解析，如Opera。
（3）常用CSS选择器
CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。
|
选择器 |
代码 |
示例代码 |
说明 |
|
通用选择器 |
* |
*{} |
选择所有元素。 |
|
标签选择器 |
元素名称 |
a{}、body{}、p{} |
根据标签选择元素。 |
|
类选择器 |
.<类名> |
. beam {} |
根据class的值选择元素。 |
|
id选择器 |
#<id值> |
#logo{} |
根据id的值选择元素。 |
|
属性选择器 |
[<条件>] |
[href]{}、[attr=”val”]{} |
根据属性选择元素。 |
|
并集选择器 |
<选择器>,<选择器> |
em,strong{} |
同时匹配多个选择器，取多个选择器的并集。 |
|
后代选择器 |
<选择器> <选择器> |
.asideNav li {} |
先匹配第二个选择器的元素，并且属于第一个选择器内。 |
|
子代选择器 |
<选择器> > <选择器> |
ul>li{} |
匹配匹配第二个选择器，且为第一个选择器的元素的后代。 |
|
兄弟选择器 |
<选择器>+<选择器> |
p+a{} |
匹配紧跟第一个选择器并匹配第二个选择器的元素，如紧跟p元素后的a元素。 |
|
伪选择器 |
: :<伪元素>或: <伪类> |
p::first-line{}、a:hover{} |
伪选择器不是直接对应HTML中定义的元素，而是向选择器增加特殊的效果。 |
伪选择器比较特殊，分为伪元素和伪类两种。
|
元素名 |
描述 |
|
:root |
选择文档中的根元素，通常返回html。 |
|
:first-child |
父元素的第一个子元素。 |
|
:last-child |
父元素的最后一个子无素。 |
|
:only-child |
父元素有且只有一个子元素。 |
|
:only-of-type |
父元素有且只有一个指定类型的元素。 |
|
:nth-child(n) |
匹配父元素的第n个子元素。 |
|
:nth-last-child(n) |
匹配父元素的倒数第n个子元素。 |
|
:nth-of-type(n) |
匹配父元素定义类型的第n个子元素。 |
|
:nth-last-of-type(n) |
匹配父元素定义类型的倒数n个子元素。 |
|
:link |
匹配链接元素。 |
|
:visited |
匹配用户已访问的链接元素。 |
|
:hover |
匹配处于鼠标悬停状态下的元素。 |
|
:active |
匹配处于被激活状态下的元素，包括即将点击（按压）。 |
|
:focus |
匹配处于获得焦点状态下的元素。 |
|
:enabled (:disabled) |
匹配启用（禁用）状态的元素。 |
|
:checked |
匹配被选中的单选按钮和复选框的input元素。 |
|
:default |
匹配默认元素。 |
|
:valid (:invalid) |
根据输入数据验证，匹配有效（无效）的input元素。 |
|
:in-range (out-of-range) |
匹配在指定范围之内（之外）受限的input元素。 |
（4）浮动与定位
在一个网页中，默认情况下块级元素独占一行，是自上而下排列，行内元素自左向右排列，但是在实际的网页布局中往往需要改变这种单调的排列方式，使网页内容变得丰富多彩，CSS的浮动和定位完美的解决了这个问题。
1）浮动
CSS的浮动可以通过float属性进行设置，默认值为none（不浮动）。
框1{float:none} 框1{float:right}
框1{float:left} 框1、2、3{float:left}
2）定位
在网页开发中，如果需要网页中的某个元素在网页的特定位置出现，例如弹出菜单，这时可以通过CSS的position属性进行设置，示例如下：
position:relative; /*相对定位方式*/
left:30px; /*距左边线30px*/
top:10px; /*距顶部边线10px*/
用于设置菜单定位方式的常用属性值如下表所示。
|
值 |
描述 |
|
static |
静态定位（默认定位方式）。 |
|
relative |
相对定位，相对于其原文档流的位置进行定位。 |
|
absolute |
绝对定位，相对于 static 定位以外的第一个上级元素进行定位。 |
|
fixed |
固定定位，相对于浏览器窗口进行定位。 |
用于设置元素具体位置的常用属性值如下表所示。
|
边偏移属性 |
描述 |
|
top |
顶端偏移量，定义元素相对于其参照元素上边线的距离。 |
|
bottom |
底部偏移量，定义元素相对于其参照元素下边线的距离。 |
|
left |
左侧偏移量，定义元素相对于其参照元素左边线的距离。 |
|
right |
右侧偏移量，定义元素相对于其参照元素右边线的距离 |
3）浮动与定位的使用实例
其实浮动的本意是用来解决图片和文字排版问题的，但是由于它十分好用，被大部分开发者应用到了网页布局，并成为了公认布局的一种方式。
该图中4个粉色部分使用浮动的知识对页面进行布局，然后使用绝对定位知识创建了一个浮动的div元素。需要注意的是，position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现。float也会导致元素脱离文档流，漂浮在文档流的上层，能遮挡下层元素的空间，但不会遮挡下层元素的内容。
标签：Web,匹配,定位,标签,元素,响应,设计,浏览器,选择器 From： https://www.cnblogs.com/Oricuerno/p/16997017.html