CSS复习
CSS 语法结构
-
基本语法：
选择器{ 属性:属性值; 属性:属性值; … } -
代码示例：
h1{ color:red; }代码解释如下：
1）h1：选择器，表示要选择所有的 h1 标签。
2）color：属性名，表示要对字体颜色属性进行设置。
3）red：属性值，表示要设置字体颜色为红色。
4）属性与属性值组成了一个声明，属性与属性值之间用冒号分隔。
使用 CSS 时，注意事项如下：
1）CSS 是大小写不敏感的，但规范的写法是全部小写。
2）规范性要求，每一行只写一个声明。
3）规范性要求，每个声明后边需要添加分号作为结束符。
4）所有符号均为英文，切勿使用中文符号。
5）注意代码的缩进，用 HBuider 编写代码会有提示，避免拼写错误。
CSS 注释
- 为样式表添加注释有助于标记样式的作用范围以及复杂样式的作用等，便于进行后期的维护。
/*设置 h1 标签的样式*/ h1{ /*设置字体颜色为红色*/ color:red; }
HTML与CSS关联方式
行内样式表
- 将 CSS 代码放置在 HTML 代码内部，作为 HTML 标签的属性存在。
<a href="#" style="color:red;font-size:10px;">日用百货</a> <!--产生一个红色的，字号是 10px 的超链接-->
行内样式表的特点如下：
1）将 CSS 代码与 HTML 代码糅合在一起，不符合 W3C 关于“内容与表现分离”的基
本规范，不利于后期维护。
2）可以单独定义某个元素的样式，灵活方便。
3）优先级最高，但是不推荐使用，仅在测试时可以采用。
内部样式表
- CSS 代码内嵌到 HTML 代码中，二者处于同一个文件中。
<head> <!--charset="UTF-8"表示当前文档采用字符集中 utf-8,支持中文--> <meta charset="UTF-8"> <title>内部样式表</title> <!--内部样式表 代码要放置在 style 标签内--> <style type="text/css"> div{ color:red; } </style> </head>
内部样式表的特点如下：
1）写在标签中，一定程度地将 CSS 代码与 HTML 代码进行了分离，但是分离不
够彻底，无法应用于其他 HTML 文件，实现样式复用。
2）优先级低于行内样式表。
外部样式表
- CSS 代码单独放置在扩展名为.css 的文件中，在 HTML文件中，将 CSS 文件引入进来，形成关联。
<head> <meta charset="UTF-8"> <title>外部样式表</title> <link rel="stylesheet" type="text/css" href="css/ch05.css" /> </head>
外部样式表的特点如下：
1）与内部样式表一样，写在标签中，实现了 CSS 代码与 HTML 代码的彻底分
离，方便样式复用与后期维护，符合 W3C 规范。
2）优先级要低于内部样式表。
3）后续开发中推荐使用此种方式。
CSS 选择器
CSS 选择器是指 CSS 选择要修饰的元素，对指定元素进行修饰美化。
-
通用选择器
写法：*{}。
作用：选中页面中的所有标签，一般用于定义最通用的属性，设置默认值。
优先级：最低，低于所有选择器。*{ padding: 0px; margin: 0px; font-family: "微软雅黑",sans-serif; font-size: 12px; } -
标签选择器
写法： HTML 标签名{样式属性:样式属性值;……}。
作用：选中页面中所有的对应标签，当需要对某类标签进行统一设置样式时采用。
优先级：高于通用选择器。div{ width: 100%; height: 90px; background-color: red; }<!-- HTML body 部分代码 --> <div>这是一个 div</div> -
类选择器
写法：.类名称{}。
调用：在需要改变样式的标签上，使用 class=“选择器名称” 调用对应选择器。
作用：修改所有调用选择器的标签。
优先级：高于标签选择器。.first{ width: 200px; color: #F00; }<!-- HTML body 部分代码 --> <div> <ul> <li class="first">家用电器</li> <li>洗衣机</li> <!-- …… --> </ul> </div>注意事项如下：
1）类名称是可以随意取名的，但通用做法是只能包含字母、数字、下画线，并且不以
数字开头，否则可能会产生样式不能应用的问题。
2）类名称应该能表示一定意义，不能起毫无意义的名字，如 a。
3）当页面需要对多个元素应用相同样式，则采用类选择器。
4）类选择器可以应用不同标签。 -
id 选择器
写法：#id 名称{}。
作用：在需要改变样式的标签上，使用 id=“选择器名称” 调用对应选择器。
优先级：大于类选择器。#list{ width: 200px; height: 200px; background-color: #CCC; }<!-- HTML body 部分代码 --> <div id="list"> <ul> <li>家用电器</li> <li>洗衣机</li> <!-- …… --> </ul> </div>注意事项如下：
1）id 是唯一的，同一页面不能出现多个相同的 id 定义。
2）id 名称要求与类选择器相同。(可以不一样)
3）通常当页面中有唯一样式时，采用 id 选择器。 -
后代选择器与子代选择器
-
后代选择器
写法：选择器 1 选择器 2 选择器 3……{} ，每个选择器之间用空格分隔。div .li{ color: yellow; }div.li{}表示选中的元素包括 div 里面的 class="li"的元素，其中 class="li"的元素可以是
div 的子代，也可以是 div 的后代，也就是孙代及往后。 -
子代选择器
写法：选择器 1>选择器 2>选择器 3……{} ，每个选择器之间用大于号分隔。div>ul{ color: blue; }div>ul{}表示 ul 必须是 div 的直接子代，孙代以后不选中。
-
-
交集选择器与并集选择器
-
交集选择器
写法：选择器 1 选择器 2……{} ，选择器之间没有分隔符。.list#li{ color: red; }.list#li{} 元素必须**同时具备 **class="list"并且 id="li"样式才能生效。
-
并集选择器
写法：选择器 1,选择器 2,……{} ，选择器之间用逗号分隔。
.li,#li{ color: red; }.li,#li{} 元素只要具备 class="li"或者 id=“li”，样式即可生效。
-
-
伪类选择器
写法：选择器名称:伪类状态{}。a:hover{ color: red; }常见的伪类状态如下：
link：未访问状态。
visited：已访问状态。
hover：鼠标指向时，即悬停在元素上方时。
active：激活选定状态（鼠标点下去没松开）。
focus：获得焦点时（input 常用）。
超链接多种伪类共存时的顺序如下：link→visited→hover→active。 -
选择器的命名规则及优先级
- 选择器的命名规则
- 只能由字母、数字、下画线组成，不能有其他任何特殊字符。
- 开头不能是数字，即只能以字母、下画线开头。
- 选择器的优先级
-
第一原则“近者优先”，最内层选择器永远比外层优先。例如：div ul li > div #ul，li在 ul 内层，所以 li 标签选择器能覆盖外层 id 选择器。
-
标签选择器优先级为 1，class 选择器优先级为 10，id 选择器优先级为 100。例如：div #li > div ul .li > div ul li，优先级权重依次为：1+100 > 1+1+10 > 1+1+1。
-
当优先级权重完全相同时，写在后面的选择器会覆盖前面的选择器。
div li{ color:red; } div li{ color:blue; } /* 完全相同的选择器，写在后面的生效 */ -
!important 的作用是将当前 CSS 语句提升到最高权重，即可以覆盖任何选择器的 CSS 语句。但是并不推荐使用!important，因为它会使你的页面难以修改调试。
div li{ color:red !important ; /* 使用!important 会将此行语句提升到最高权限 */ }
-
- 选择器的命名规则
- CSS 选择器练习
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 500px; height: auto; background-color: antiquewhite; } #title{ font-weight: 700; color: indianred; } #title>span{ font-size: 45px; } ul{ font-family: '微软雅黑'; font-size: 30px; } .always{ color: darksalmon; } </style> </head> <body> <div> <ul> <li id="title"><span >常用插件</span></li> <li>Auto Rename Tag</li> <li>Bracket Pair Colorizer</li> <li class="always">Chinese</li> <li>Code Runner</li> <li>HTML CSS Support</li> </ul> <ul> <li>JavaScript(ES6) code snippets</li> <li class="always">Live Server</li> <li class="always">open in browser</li> <li>Path Intellisense</li> <li>px-to-vw</li> </ul> </div> </body> </html> -
成图
-
CSS 常用属性
CSS 常用文本属性
使用 CSS 属性不仅可以控制文字的大小、颜色和字体等，还可以设置整个段落的行高、对齐方式等属性，大大提高网页的可读性。
字体、字号与颜色属性
-
字体
-
font-family：字体族，设置字体
可以同时设置多个字体，多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次查找。选择可用字体，当浏览器找不到可用字体时，将使用系统默认字体。名称 说 明 Serif 字体在末端拥有额外的装饰 体 Sans-serif（常用） 字体在末端没有额外的装饰 Monospace 所有字符具有相同的宽度，等宽字体仅针对西文字 
font-family:Arial, 'Microsoft Yahei', sans-serif; -
font-style：设置字体样式
通常使用其中的两个属性值：正常(normal) 和斜体(italic)。font-style: italic; -
font：缩写形式（了解）
font 的缩写形式依次为 font-style、font-weight、font-size/line-height、font-family，分别是字体样式、字体粗细、字号/行高、字体族。font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;在使用 font 属性时须注意以下问题：
1）使用时必须严格按照上述顺序。
2）多个样式之间用空格分隔，且 font-size/line-height 必须作为一对用/分隔。
3）font-size 和 font-family 必须指定，其他样式不指定将采用默认样式显示。
-
-
字号
- font-weight：设置字体粗细
可选属性值：bold 加粗、lighter 细体或者填写 100～900 的数字（其中 400 为正常，700 为加粗）。 - font-size：设置字体大小
属性值通常为px 或%（其中百分比代表浏览器默认字体大小的百分比，绝大部分浏 览器默认为16px）。
- font-weight：设置字体粗细
-
字体颜色
- color：设置字体颜色
- 直接写颜色的英文名字：red、green、blue 等。
- 十六进制写法：#FFFFFF，#后每位可选值为数字 0～9 以及英文的 a～f，每两位表示一种颜色，分别对应红绿蓝的比例（最常用，推荐）。
- rgb 写法：
rgb(0～255,0～255,0～255)
rgba(0～255,0～255,0～255,0～1) 第 4 位数表示透明度，0 表示全透明，1 表示不透明。
- opacity：设置透明度
属性值为 0～1 的数字。注意：使用 opacity 时当前元素以及子元素均会透明；而使用 rgba 调整时，只会使当前元素透明，不会改变子元素透明度。
#div1{ /*使用 rgba 设置 div1 背景透明，则 div1 的子元素不会受影响*/ /*background-color: rgba(255,0,0,0.5);*/ /*使用 opacity 设置 div1 透明，则 div1 中的所有背景、文字、子元素均会透明*/ background-color: red; opacity: 0.5; } - color：设置字体颜色
文本属性
-
line-height
- 像素单位，如 48px。
- 纯数值，表示正常行高的倍数。
- 百分数，表示正常行高的百分数。
height:100px; line-height:100px; /* 设置行高等于高度，则当前元素中文字垂直居中 */ -
text-align
设置块级元素中文字的水平对齐方式，属性值有 left、center、right。/* 左对齐 */ text-align: left; /* 居中 */ text-align: center; /* 右对齐 */ text-align: right; -
letter-spacing
设置字符间距，即字与字之间的间距，属性值通常为**px。 -
text-decoration
常用属性值有四个,下画线 underline、删除线 line-through、上画线 overline、不做修饰 none。/* 上画线 */ text-decoration: overline; /* 删除线 */ text-decoration: line-through; /* 下画线 */ text-decoration: underline; -
overflow（overflow-x 和 overflow-y）
控制超出范围文本的显示方式- auto：根据文字多少自动显示滚动条。
- scroll：始终显示滚动条。
- hidden：超出范围文本隐藏，可以通过 overflow-x 和 overflow-y 分别设置水平垂直方向的隐藏。
-
text-overflow
设置多余文字的显示方式,常用属性值:- clip：裁剪文本；(多余的不显示，删去)
- ellipsis：使用省略号代替多余文字。
-
white-space
设置元素内的空白符怎样处理。常见属性值如下- normal：默认，空白会被浏览器忽略。
- nowrap：设置中文行末不断行显示。（一段话不会分成两段话）
- pre：空白会被浏览器保留。作用类似 HTML 中的标签。
- 如何让每行多余文字显示省略号
white-space：nowrap; /* 如果是中文，需设置行末不断行。 */ overflow：hidden; /* 设置控件超出范围隐藏。 */ text-overflow：ellipsis; /* 设置多余文本省略号显示。 */
-
text-shadow
- 水平阴影距离：必写，数值越大，阴影右移。
- 垂直阴影距离：必写，数值越大，阴影下移。
- 阴影模糊距离：可写，数值越大，阴影越模糊。默认为 0，不模糊。
- 阴影颜色：可写，默认为黑色。
text-shadow: 5px 5px 2px red;文本阴影可以同时设置多个阴影，每个阴影效果之间以逗号分隔即可。
text-shadow: 5px 3px 3px blue,-5px -3px 3px red; -
text-indent
首行缩进，可以使用像素值调整段落文字的首行缩进大小。text-indent:32px; // 首行缩进 32px，默认字体大小 16px 的情况下，将首行缩进两个字 -
text-stroke
text-stroke 只能在 webkit 内核浏览器中使用，所以必须使用“-webkit-”前缀，共接收两个属性值分别为描边的粗细，描边的颜色。-webkit-text-stroke: 3px rgb(69, 131, 245); font-size: 140px; color: rgb(255, 100, 100);
CSS 常用背景属性
背景颜色属性
设置网页背景颜色的是 background-color，其属性值为颜色值，表达方式与字体颜色的三种设置方法相同。
背景图像属性
-
background-image
设置背景图像，背景图和背景色同时存在时，背景图会覆盖背景色。background-image: url(图片地址的相对路径); -
background-repeat
当背景图大小小于元素实际区域大小时，会默认将背景图进行平铺展示。- no-repeat：不平铺。
- repeat：平铺（默认）
- repeat-x：水平方向平铺。
- repeat-y：垂直方向平铺。
-
background-size
- 指定宽度和高度
第一种是直接写带像素单位的数值；第二种是写百分比（即宽高为父容器宽高的百分比）。- 当只有一个属性值时，默认为宽度与高度等比缩放。
- 当有两个属性值时，会按照指定的高度与宽度进行压缩或拉伸显示。
- 等比缩放
- contain：图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放（可能导致部分区域无法覆盖）。
- cover：图片等比缩放，使背景图像完全覆盖背景区域（可能导致背景图部分区域无
法显示）。
- 指定宽度和高度
-
background-position
设置背景图像的起始位置。- 指定位置关键字：属性值有 left、right、top、bottom 和 center。当只写一个属性值时，另一个默认为 center。
- 使用数值：两个值，分别表示水平位置和垂直位置，可以采用像素值或百分比形式。
1.当只写一个属性值时，默认为水平方向，垂直设为居中。
2.当使用像素时，数值表示图片的左上角往各个方向移动的实际距离。
3.当使用百分数时，一般只能是正数。百分数表示去掉图片的大小后，元素中剩余空白距离的分布比例。/* 图片相对于左上角，水平方向右移 50px，垂直方向上移 50px */ background-position: 50px -50px; -
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。- scroll：默认值，背景图像会随着页面其余部分的滚动而移动。
- fixed：当页面的其余部分滚动时，背景图像不会随之移动。
-
background
属性值的顺序:- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background: red url(“img/img.jpg”) no-repeat scroll 20px -20px;
CSS 其他常用属性
CSS 其他常用属性
-
list-style 规定列表的样式，即每个列表项前的标志。
属性值 方 式 示 例 none 无样式 刷牙 disc 实心圆（ul默认类型） ● 刷牙 circle 空心圆 ○ 刷牙 square 实心正方形 ■ 刷牙 decimal 数字（ol默认类型） 1.刷牙 还可以直接使用图像作为列表的标志
ul li {list-style-image : url(xxx.png);}
超链接样式属性
-
超链接与其他标签相比有些特殊，可以有多种状态，如“未访问状态”“已访问状态”等，而用于表示超链接不同状态样式的选择器就称为“伪类选择器”。
a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被单击的链接 */当为链接的不同状态设置不同样式时，请按照如下次序（规则）使用：
1）a:hover 必须位于 a:link 和 a:visited 之后。
2）a:active必须位于 a:hover之后。
实现素材图片效果
-
素材
-
成图
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ background-color: black; } div{ color: rgb(160, 160, 160); margin-left: 30px; } h1{ color: rgb(189, 189, 189); } th{ width: 30px; height: 40px; } #tu1{ background-image: url(img/tubiao.png); background-size: 10vw; background-position: -18px 10px; } #tu2{ background-image: url(img/tubiao.png); background-size: 10vw; background-position: -50px 10px; } #tu3{ background-image: url(img/tubiao.png); background-size: 10vw; background-position: -82px 10px; } #tu4{ background-image: url(img/tubiao.png); background-size: 10vw; background-position: -114px 10px; } #tu5{ background-image: url(img/tubiao.png); background-size: 10vw; background-position: -146px 10px; } </style> </head> <body> <div> <h1>联系我们</h1> <table> <tr> <th id="tu1"></th> <td>总机：202203192051</td> </tr> <tr> <th id="tu2"></th> <td>传真：1593706154</td> </tr> <tr> <th id="tu3"></th> <td>报名：13797946815</td> </tr> <tr> <th id="tu4"></th> <td>邮箱：email@qq.com</td> </tr> <tr> <th id="tu5"></th> <td>官网：www.guanwang.com</td> </tr> </table> </div> </body> </html>
CSS3 新增属性与选择器
CSS3 的过渡与变换
-
transition：过渡属性
CSS 的transition允许 CSS 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被单击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。属性名 介 绍 属 性 值 transition-delay 过渡开始前的延迟时间 默认值是 0，以秒或毫秒为单位，可以省略 transition-duration 过渡开始到过渡完成的时间 默认值是 0，意味着不会有效果，以秒或毫秒为单位 transition-property 参与过渡的属性 可以单独指定某个 CSS 属性，也可以写 all/none transition-timing-function 过渡的样式函数 linear（匀速）、ease（逐渐变慢）默认值、ease-in（加速）、ease-out（减速）、ease-in-out（加速然后减速），默认值是ease -
简写属性 transition
transition: all .3s ease 2s;-
实例
#Transition{ width: 100px; height: 20px; background-color: blue; /* 宽度属性过渡效果，过渡时长 2s，延时 0.2s 开始执行 */ transition:width 2s .2s; -moz-transition:width 2s .2s; /*兼容 Firefox 浏览器，详见注解说明 */ -webkit-transition:width 2s .2s; /*兼容 Safari 浏览器 */ } #Transition:hover{ width: 200px; }<div id="Transition"> </div>
-
-
-
transform：变换属性
通过使用变换属性可以对元素进行旋转、拉伸、翻转、缩放等操作。- transform：定义元素向 2D 或 3D 变换。
| 属性值 | 作 用 |
|---|---|
| none | 元素不进行变换 |
| translate(x,y) | 定义 2D 平移变换 |
| translate3d(x,y) | 定义 3D 变换 |
| translateX(x) | 定义沿 X 轴平移变换，Y 轴与 Z 轴同理 |
| scale(x,y) | 定义 2D 缩放变换 |
| scale3d(x,y,z) | 定义 3D 缩放变换 |
| scaleX(x) | 通过设置 X 轴的值来进行缩放，Y 轴与 Z 轴同理 |
| rotate(angle) | 通过设置 X 轴的值来进行缩放，Y 轴与 Z 轴同理 |
| skew(x-angle,y-angle) | 定义沿着 X 轴和 Y 轴的 2D 倾斜转换 |
-
实例
- 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #exm{ margin-left: 120px; } .div1{ width: 200px; height: 80px; background-color: red; transform: translate(50px,80px); } .div2{ width: 200px; height: 80px; background-color: rgb(57, 138, 97); margin-top: 150px; transform: rotate(45deg); } .div3{ width: 200px; height: 80px; margin-top: 120px; background-color: rgb(255, 157, 0); transform: scale(2); } </style> </head> <body> <div id="exm"> <div class="div1">图形变换</div> <div class="div2">图形旋转</div> <div class="div3">图形缩放</div> </div> </body> </html>-
效果图
-
transform-origin：改变转换元素的位置。
transform-origin 设置旋转元素的基点位置，2D 转换元素可以改变元素的 X 轴和 Y 轴；对于 3D 转换元素还可以更改元素的 Z 轴。- transform-origin 的属性值
- x-axis，可以使用的值有：left、right、center、**px、百分比。
- y-axis，可以使用的值有：left、right、center、**px、百分比。
- z-axis，可以使用的值有：**px。
- 实例
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #exm{ margin: 100px ; } #testTransform1{ position: absolute; width: 200px; height: 100px; background-color: red; transform: rotate(30deg); } #testTransform2{ width: 200px; height: 100px; background-color: red; transform: rotate(30deg); transform-origin: 0 0; /*变换基点到左上角位置,不加此行代码效果如图 7-5 所 示，加此行代码效果如图 7-6 所示，读者可自行尝试注释此行代码，来确认效果*/ } .textback{ margin:100px ; width: 200px; height: 100px; border: 3px solid black; } </style> </head> <body > <div id="exm"> <div class="textback"><div id="testTransform1"></div></div> <div class="textback"><div id="testTransform2"></div></div> </div> </body> </html> -
效果图
-
- transform-origin 的属性值
CSS3 动画
CSS3 动画是指使用 CSS 代码让网页中的元素运动起来形成的动画。
CSS3 动画的@keyframes 和 animation
-
使用@keyframes 创建关键帧动画
@keyframes 用于创建动画。@keyframes 动画名称{ 阶段 1{CSS 样式} 阶段 2{CSS 样式} 阶段 3{CSS 样式} }- 动画中阶段的写法有两种方式：
- 每个阶段用百分比表示，从 0%到 100%（起止必须设置，即 0%和 100%）。
- 使用 from 和 to 表示从某阶段到某阶段。
<style type="text/css"> /* 使用 0%到 100%表示（起止必须设置，即 0%和 100%）*/ @keyframes myFrame1{ 0%{ top: 0px; } 30%{ top: 50px; } 100%{ top: 100px; } } /* 使用 from-to 直接表示开始结尾，样式会匀速变化*/ @keyframes myFrame2{ from{ top:0px; } to{ top: 100px; } } </style>
- 动画中阶段的写法有两种方式：
-
使用 animation 调用关键帧动画
动画属性中必须有动画名称和时长，否则动画不生效。div{ /* 让 div 调用 myFrame1 这个关键帧动画，5s 完成所有动画效果*/ animation: myFrame1 5s; } -
CSS3 animation 动画属性
-
animation
除 animation-play-state 之外的所有动画属性的简写属性，可以设置多个动画，每个动画之间用空格分隔。 -
animation-name.
规定 @keyframes 动画的名称。 -
animation-duration
规定完成一个动画所需的秒或毫秒，默认是 0。 -
animation-timing-function
- linear：动画从头到尾的速度是相同的。
- ease：默认值，动画以低速开始，然后加快，在结束前开始变慢。
- ease-in：动画以低速开始，然后逐渐加快至匀速直到结束。
- ease-out：动画以匀速开始到低速结束。
- ease-in-out：动画以低速开始和结束。
-
animation-delay
规定动画何时开始，默认是 0。 -
animation-iteration-count
规定动画被播放的次数，默认是 1。 使用 infinite 表示无限次播放。 -
animation-direction
- normal：默认值，动画正常播放。
- alternate：动画轮流反向播放。
-
animation-play-state
- paused：设置动画暂停。
- running：设置动画正在播放。
-
animation-fill-mode
- none：不改变默认行为。
- forwards：停留在动画结束状态。
- backwards：停留在动画开始状态。
-
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> div{ width:100px; height: 100px; background-color: red; margin: 10px; } /* 通过设置单个属性的属性值进行修改*/ #div1{ animation-name: frame1;/*调用关键帧名称*/ animation-duration:3s;/*关键帧执行时间*/ animation-timing-function:ease;/*使用 ease 效果渐变*/ animation-iteration-count:infinite;/*动画播放无限次*/ } /* 使用 animation 的缩写形式进行设置*/ #div2{ animation: frame1 3s ease infinite;/*动画与 div1 所述完全相同*/ } @keyframes frame1{ from{ width: 100px; } to{ width: 200px; } } </style> </head> <body> <div id="div1"> 这是一个 div1 </div> <div id="div2"> 这是一个 div2 </div> </body> </html>
-
CSS3 其他常用属性
CSS3 多列属性
-
columns
列的宽度与列数的简写属性。 -
column-count
规定元素被分隔的列数。属性值可以设为 auto，由其他属性决定列数，如 columnwidth，或自定义列数。 -
column-width
规定每个列的宽度。属性值可以为带像素单位的数值或 auto。 -
column-rule
设置每个列之间边框的宽度、样式和颜色，为简写属性。 -
column-rule-width
规定两列间边框的宽度。可选属性值有四个，分别为 thin（细边框）、medium（中等边框）、thick（粗边框），还有自定义边框宽度**px。 -
column-rule-style
规定两列间边框的样式。常见属性值有六个，分别为 none（无样式）、hidden（隐藏样式）、dotted（点状线）、dashed（虚线）、solid（实线）、double（双线）。 -
column-rule-color
规定两列间边框的颜色。 -
column-gap
设置每个列之间的距离。属性值可设为 normal（W3C 建议的值是 1em）或带像素单位的数值。 -
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .columns{ border: ridge 5px #ffd3c7; width: 400px; margin: 20px; column-count: 2; column-rule: ridge 5px #ffd3c7; } </style> </head> <body> <div class="columns"> CSS 的渐变效果可以在两个及以上指定的颜色之间显示平稳地过渡。过去可能使用图像 才能实现这些效果，但现在通过使用 CSS3 的渐变就可以轻松完成。此外，拥有渐变效果的 元素在放大时看起来效果更好，这是由浏览器生成的。 渐变包括线性渐变和径向渐变，有四个属性可以设置： 1）linear-gradient：用线性渐变创建图像。 2）radial-gradient：用径向渐变创建图像。 3）repeating-linear-gradient：用重复的线性渐变创建图像。 4）repeating-radial-gradient：用重复的径向渐变创建图像。 1．线性渐变的属性值 1）point：设置渐变的起始位置，可以使用的值有 left、right、top、bottom 以及角度 值，在不同浏览器内核中属性值的写法有所不同，具体写法参考下面的基本语法。 2）color-stop：设置渐变的起始颜色，可以写多个。 3）color-stop：设置渐变的终点颜色。 </div> </body> </html>
CSS3 新增选择器
这些选择器可能不是必须使用的，但是熟练地使用这些选择器，可以少写很多的 class 名称以及 id 名称，极大地提高了代码整洁度。
属性选择器
| 选 择 器 | 说 明 |
|---|---|
| E[att] | 选择具有 att 属性的 E 元素 |
| E[att=“val”] | 选择具有 att 属性且属性值等于 val 的 E 元素 |
| E[att^=“val”] | 选择具有 att 属性且属性值为以 val 开头的字符串的 E 元素 |
| E[att$=“val”] | 选择具有 att 属性且属性值为以 val 结尾的字符串的 E 元素 |
| E[att*=“val”] | 选择具有 att 属性且属性值为包含 val 的字符串的 E 元素 |
结构伪类选择器
| 选 择 器 | 说 明 |
|---|---|
| E:nth-child(n) | 匹配父元素的第 n 个子元素 E |
| E:first-of-type | 匹配同类型中的第一个同级兄弟元素 E |
| E:only-child | 匹配父元素仅有的一个子元素 E |
| E:empty | 匹配没有任何子元素（包括 text 节点）的元素 E |
状态伪类选择器
| 选 择 器 | 说 明 |
|---|---|
| E:enabled | 匹配用户界面上处于可用状态的元素 E |
| E:disabled | 匹配用户界面上处于禁用状态的元素 E |
| E:checked | 匹配用户界面上处于选中状态的元素 E |
其他选择器
| 选 择 器 | 说 明 |
|---|---|
| E～F | 兄弟选择器，选择 E 元素所有兄弟元素 F |
| E:not(s) | 否定伪类选择器，匹配不含有 s 选择符的元素 E |
| E:after/E::after | 设置在对象后发生的内容。用来和 content 属性一起使用，并且必须定义 content 属性 |
实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div p[title] {
/*选择具有 title 属性的 p 元素。*/
color: blue;
}
#div option[selected="selected"] {
/*选择具有 selected 属性且属性值等于 selected 的 option 元素。*/
color: white;
}
#div option[selected^="sel"] {
/*选择具有 selected 属性且属性值为以 sel 开头的字符串的 option 元素。*/
background-color: pink;
}
#div option[disabled$="led"] {
/*选择具有 disabled 属性且属性值为以 led 结尾的字符串的 option 元素。*/
background-color: greenyellow;
}
#div option[disabled*="ed"] {
/*选择具有 disabled 属性且属性值包含 ed 结尾的字符串的 option 元素。*/
font-weight: bold;
}
/* ---------------------------------------------------------------------- */
#div1 p:nth-child(2) {
/*选中父元素中的第二个子元素 p*/
font-weight: bold;
/*加粗*/
}
#div1 p:first-of-type {
/*选中父元素中第一个同类型子元素*/
font-style: italic;
/*倾斜*/
}
a:only-child {
/*选中父元素仅有的子元素 a*/
text-decoration: underline;
/*下画线*/
}
#div1 p:empty {
/*选中没有任何子元素的 p 标签*/
height: 20px;
width: 200px;
background-color: yellow;
}
/* --------------------------------------------------------------------------- */
input:enabled {
/*选中可以操作的 input*/
font-weight: bold;
height: 30px;
}
input:disabled {
/*选中被禁用的 input*/
width: 30px;
background-color: red;
}
input:checked {
width: 30px;
}
/* --------------------------------------------------------------------------- */
#div2 p～span {
/* 兄弟选择器 */
font-weight: bold;
}
#div2 p:not(span) {
/* 否定伪类选择器 */
text-decoration: line-through;
}
#span::after {
/* 伪对象选择器 */
background: #fff;
color: #000;
content: " 这是写在 p 标签后的内容";
font-size: 14px;
}
</style>
</head>
<body>
<div id="div">
<p title="study">前端学习</p>
<select name="kuangjia">
<option>框架</option>
<option selected="selected">Bootstrap</option>
<option disabled="disabled">JQuery</option>
<option>AngularJS</option>
</select>
</div>
<!-- ----------------------------------------------------------------------- -->
<div id="div1">
<p>第一个 p 标签</p>
<p>第二个 p 标签</p>
<p></p>
<!--没有子元素的 p 标签-->
</div>
<div>
<a>父元素中仅有子元素的 a</a>
</div>
<!-- ----------------------------------------------------------------------- -->
第一个输入框：<input type="text" /> <br /><br />
第二个输入框：<input type="button" disabled="disabled" /> <br /><br />
第三个选择框：
<input type="checkbox" checked="checked" style="vertical-align: middle;" /> 选中项
<input type="checkbox" style="vertical-align: middle;" /> 未选中项
<!-- ----------------------------------------------------------------------- -->
<div id="div2">
<p>第三个 p 标签</p>
<p>第四个 p 标签</p>
<span id="span">第一个 span</span>
</div>
</body>
</html>
动画实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#dance{
width: 700px;
height: 700px;
animation: dance 1.5s ease-in-out alternate infinite ;
background-repeat: no-repeat;
}
@keyframes dance {
0%{
background-image: url(img/嗨起来1.png);
}
16%{
background-image: url(img/嗨起来1.png);
}
17%{
background-image: url(img/嗨起来2.png);
}
33%{
background-image: url(img/嗨起来2.png);
}
34%{
background-image: url(img/嗨起来3.png);
}
50%{
background-image: url(img/嗨起来3.png);
}
51%{
background-image: url(img/嗨起来4.png);
}
67%{
background-image: url(img/嗨起来4.png);
}
68%{
background-image: url(img/嗨起来5.png);
}
84%{
background-image: url(img/嗨起来5.png);
}
85%{
background-image: url(img/嗨起来6.png);
}
100%{
background-image: url(img/嗨起来6.png);
}
}
</style>
</head>
<body>
<div id="dance">
</div>
</body>
</html>
CSS 盒模型与浮动定位
盒模型
任何一个元素都可以理解成为一个盒子，CSS 盒模型主要用来设计和布局。
打开开发者模式（F12），选择元素，选择样式，该图为盒子模型
margin：外边距
-
外边距的属性
围绕在元素周围的空白区域就是外边距，外边距是透明的，因此不会遮挡其后面的元素。
外边距有四个属性可以设置，对应上、下、左、右四个方向，可以使用 margin-top、margin-bottom、margin-left、margin-right 来分别设置，也可以使用简写形式 margin 来设置。属性值可以是带单位的数值（如像素、厘米等），也可以是百分比，还可以设为 auto。简写形式的 margin 可以有 1～4 个值。
写一个数值：上、下、左、右四个方向数值相等。
写两个数值：第一个数等于上下外边距，第二个数等于左右外边距。
写三个数值：上、右、下边距，左边默认等于右边。
写四个数值：上、右、下、左 4 个方向的边距。
当设置 margin: 0 auto; 时，代表块级盒子在父容器中水平居中。 -
多个盒子之间的外边距影响
-
行内盒子水平排放的外边距
结论：水平排放的盒子，水平间距是 margin 的累加。
-
块级盒子垂直排放的外边距
结论：垂直排放的盒子，垂直间距是合并的（取最大值）。
-
父、子盒子的垂直外边距合并
未设置子盒子的上外边距和为子盒子添加 30px 的上外边距后的效果
在给子盒子添加上外边距后，父、子盒子同时下移，这说明父、子盒子的外边距合并了。为子盒子添加的上外边距也就是为父盒子添加了上外边距，这对网页排版造成了一定影响。
- 三种解决方式
- 父盒子添加 overflow：hidden。
- 父盒子添加 padding。
- 父盒子添加 border。
- 三种解决方式
-
border：边框
-
border-style
当使用 border-style 设置边框样式时，可以写 1～4 个值。（与margin相同）border-style:dotted solid dashed double; /*分别设置四个边框的样式*/border-style 的常用属性值有以下几个。
none：无边框。
hidden：与 none 相同。
dotted：设置为点状边框。
dashed：设置为虚线边框。
solid：设置为实线边框。
double：设置为双线边框。双线的宽度等于 border-width 的值。 -
border-width
border-width 用于为元素的边框设置宽度，可以单独设置一个边框，也可以设置所有边框。border-width:thin medium thick 10px; /*分别设置 4 个边框的宽度*/border-width 的属性值通常有以下四种。
thin：设置为细边框。
medium：默认，设置为中等边框。
thick：设置为粗边框。
length：使用带单位的数值自定义边框宽度，不可设置为负值。 -
border-color
border-color 属性设置四条边框的颜色，可以单独设置一个边框，也可以设置所有边框。border-color:red green blue yellow; /*分别设置四个边框的颜色*/
padding：内边距
padding 属性是一个简写属性，用于设置内容与边框之间的填充区域，可以写 1～4 个值，同 margin。
盒模型相关属性
-
overflow：内容溢出控制
- overflow 属性规定了内容溢出盒子时如何处理。
- Visible（默认值）：内容不会被修剪，会呈现在元素框之外。
- auto：根据内容多少选择显示滚动条，文字多的时候显示滚动条。
- scroll：无论文字多少，都会显示垂直和水平两个滚动条。
- hidden：超出区域的文字直接隐藏，无法看到。
- overflow 属性规定了内容溢出盒子时如何处理。
-
outline：外围线
outline 是显示在边框边缘外围的一条线，起到突出元素的作用。外围线的属性写法与边框相同，外围线不会占用空间。 -
box-shadow：盒子阴影
- box-shadow 是给元素周围添加阴影效果，该属性有六个属性值。
- X 轴阴影距离：必写，可正可负，正值右移，负值左移。
- Y 轴阴影距离：必写，可正可负，正值下移，负值上移。
- 阴影模糊半径：可写，只能为正，默认值为 0。数值越大，阴影越模糊。
- 阴影扩展半径：可写，可正可负，默认值为 0。数值增大，阴影扩大；数值减小，阴影缩小。
- 阴影颜色：可写，默认为黑色。
- 内外阴影：可写，可选值：inset（内阴影），不选默认为外阴影。
- box-shadow 是给元素周围添加阴影效果，该属性有六个属性值。
-
border-radius：边框圆角
- border-radius 属性是一个简写属性，可以设置一个元素四个边框的圆角。
-
基本用法
border-radius 的属性值有两种写法，一种是使用带单位的数值；另一种是使用百分比设置。border-radius 可设置的值有八个，基本语法如下：border-radius: 40px 30px 20px 10px/40px 30px 20px 10px;代码含义：“/”前后各有四个值，依次对应的是左上角、右上角、右下角、左下角。而
“/”前表示四顶点沿 X 轴移动的距离，“/”后表示四顶点沿 Y 轴移动的距离。移动完成后，用弧线连接，即为圆角， -
简写形式
-
只写 X 轴，Y 轴将默认等于 X 轴。基本语法如下：
border-radius:50px 20px 50px 20px; //只写 X 轴。 Y 轴=X 轴 -
4 个角写不全，默认对角相等。基本语法如下：
border-radius:50px 20px; // 只写左上角，右上角。 右下角=左上角；左下角=右上角 -
只写一个值，默认 8 个数均等。基本语法如下：
border-radius:50p; //只写一个值，默认 8 个数均等
-
-
- border-radius 属性是一个简写属性，可以设置一个元素四个边框的圆角。
-
border-image：图片边框
- border-image 表示为当前盒子设置一个图片边框，也就是使用图片进行裁切作为边框显示
-
图片路径（border-image-source）
用于当作边框的图片地址，使用 url()引入图片路径。border-image-source: url(img/border.png); -
图片切片宽度（border-image-slice）
有 4 个值，代表上、右、下、左 4 条切线，通过 4 条切线切割，可以将图片分为 9 宫格。
border-image-slice:27 27 27 27; border-image-slice:27; // 表示 4 条切线都是 27px -
边框宽度（border-image-width）
边框宽度表示图片边框的宽度大小，使用规则与 border 类似。border-image-width: 10 10 10 10; border-image-width: 10; // 表示 4 条边框的宽度都是 10px -
图片重复方式（border-image-repeat）
设置边框区域图片的重复方式。border-image-repeat:stretch; // 拉伸 border-image-repeat:round; // 铺满 border-image-repeat:repeat; // 重复 -
简写方式（border-image）
border-image: url(img/border.png) 27/10px stretch;缩写时的顺序必须按照图片路径、切片宽度、边框宽度、重复方式。其中，切片宽度和边框宽度之间用“/”分隔，且只能在边框宽度后带有一个 px 单位。
-
- border-image 表示为当前盒子设置一个图片边框，也就是使用图片进行裁切作为边框显示
心型实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#center{
width: 1040px;
height: 90vh;
margin: 0 auto;
}
#heart{
float: left;
width: 520px;
height: 1050px;
}
#left-up{
width: 100%;
height: 30%;
background-color: crimson;
border-radius: 70% 30% 0 0/90% 70% 0 0;
}
#right-up{
width: 100%;
height: 30%;
background-color: crimson;
border-radius: 30% 70% 0 0/ 70% 90% 0 0;
}
#left-down{
width: 100%;
height: 70%;
background-color:crimson ;
border-radius: 0 0 0 100%;
}
#right-down{
width: 100%;
height: 70%;
background-color:crimson ;
border-radius: 0 0 100% 0;
}
</style>
</head>
<body>
<div id="center">
<div id="heart">
<div id="left-up"></div>
<div id="left-down"></div>
</div>
<div id="heart">
<div id="right-up"></div>
<div id="right-down"></div>
</div>
</div>
</body>
</html>
浮动与清除浮动
float：浮动
float 属性使元素脱离了常规文档流而表现为向右或向左浮动，由于浮动的元素不在文档流中，所以在文档流中浮动的元素就像不存在一样，其周围的元素也会重新排列。
- left 元素向左浮动。
- right 元素向右浮动。
- none 默认值，元素不浮动。
clear：清除浮动
浮动只能打破文档流，不能打破文字流
当给 div1 添加浮动以后，div2 受到 div1 的影响，给第二个 div 添加“clear:both”后如图一
子盒子浮动造成父盒子高度塌陷
子元素全部浮动后，父元素的高度将会塌陷为 0
-
在父元素中添加一个新的元素，为新元素设置 clear:both
.clear{ clear:both; height: 0; }<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="clear"></div> </div> -
为父元素添加 overflow: hidden 属性
.outer{ overflow:hidden; }<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div> -
为父元素添加伪类：after，对伪类设置 clear:both（推荐）
.outer :after { clear:both; content:''; display:block; width: 0; height: 0; }<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
定位
定位与浮动一样，都是改变元素在正常文档流中的位置，对网页内容进行重新排版。
relative：相对定位
- 相对于自己原来在文档流中的位置定位，当不指定 top、left 等定位值时，不会改变元素位置。
- 相对定位元素仍会占据原有文档流中的位置，而不会释放。
元素重新定位后，之前元素所在的空间并没有再被其他元素占据，即元素原来的空间没有被释放。
absolute：绝对定位
- 相对于第一个非 static 的祖先元素（即使用了 relative、absolute、fixed 定位的祖先元素）进行定位。
- 如果所有祖先元素均未定位，则相对于浏览器左上角定位。
- 使用 absolute 的元素会从文档流中完全删除，原有空间释放不再占据。
fixed：固定定位
固定定位是一种特殊的绝对定位，它与普通绝对定位的区别是无论父元素是否定位，子元素如果采用固定定位，都将相对于浏览器左上角定位，且固定在指定位置，不随浏览器滚动条的滚动而滚动。
以上三种定位方式均使用 top、left、bottom、right 调整位置。当 left 和 right 同时存在，left 生效；当 top 和 bottom 同时存在，top 生效。
static：没有定位，默认值。
没有定位
使用定位实现元素的绝对居中
- 设置父子元素均为定位元素。
- 对子元素设置。
left:50%; margin-left: - width/2; top:50%; margin-top: - height/2;
z-index
- z-index 的作用
设置定位元素的层叠顺序。 - 使用要求
- 必须是定位（relative、absolute、fixed）元素才能使用 z-index。
- 使用 z-index 需要考虑父容器的约束。
- 如果父容器没有设置 z-index，或父容器设置为 z-index:auto，则子容器的 z-index 可以不受父容器的约束。
- 如果父容器对 z-index 进行了设置，则子容器的层叠顺序将以父容器的 z-index 为准（此时子元素的 z-index 只能调整自身与父容器中不同子元素之间的层叠顺序）
- z-index:auto 与 z-index:0 的异同
- z-index:auto 为默认值，与 z-index:0 处于同一平面。
- z-index:auto 不会约束子元素的 z-index 层次，而 z-index:0 会约束子元素必须与父元素处于同一平面。
- z-index 相同（处于同一平面的定位元素）的层叠关系
后来者居上，即写在后面的元素在上一层。
布局实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
font-size: 2.667vw;
}
#center{
width: 93.333vw;
height: 100vh;
margin: 0 auto;
background-color: antiquewhite;
}
#head{
position: relative;
width: 100%;
height: 20vh;
background-color: aqua;
}
#head div:first-child{
float: left;
width: 20%;
height: 100%;
margin-right: 1%;
background-color: blueviolet;
}
#head div:nth-child(2){
float: left;
width: 58%;
height: 100%;
background-color: aquamarine;
}
#head div:last-child{
float: right;
width: 20%;
height: 100%;
background-color:chartreuse;
}
#nav{
width: 100%;
height: 5vh;
background-color: cornflowerblue;
margin: 0.5% 0;
}
#body{
width: 100%;
height: 70%;
background-color:thistle;
}
#left{
float: left;
width: 80%;
height: 100%;
background-color: silver;
}
#right{
float: right;
width: 19%;
height: 100%;
background-color: violet;
}
.hang1{
width: 100%;
height: 49%;
margin-bottom: 0.9%;
background-color:darkgoldenrod;
}
.hang2{
width: 100%;
height: 49%;
background-color: darkgoldenrod;
}
.xiao{
float: left;
width: 30%;
height: 100%;
background-color: coral;
}
.da{
float: right;
width: 69%;
height: 100%;
background-color: tomato;
}
</style>
</head>
<body>
<div id="center">
<div id="head">
<div></div>
<div></div>
<div></div>
</div>
<div id="nav"></div>
<div id="body">
<div id="left">
<div class="hang1">
<div class="xiao"></div>
<div class="da"></div>
</div>
<div class="hang2">
<div class="xiao"></div>
<div class="da"></div>
</div>
</div>
<div id="right"></div>
</div>
</div>
</body>
</html>
移动开发与响应式
媒体设备常用属性
媒体设备，即各种不同的展示设备，每个设备的大小、尺寸、分辨率都将影响网页展示的实际效果。
- 屏幕宽高（device-width/device-height）
设备宽度（device-width）指当前设备的屏幕宽度。通常，每个设备的屏幕宽度是固定不变的，而不同设备的屏幕宽度又是各不相同的。设备高度（device-height）同理。 - 渲染窗口的宽高
宽度（width）指浏览器窗口的宽度。对于桌面操作系统来说，就是当前浏览器的宽度（并且是包括滚动条的）。最小宽度（min-width）表示当前元素允许的最小宽度，最大宽度（max-width）表示当前元素允许的最大宽度。高度（height）、最小高度（min-height）、最大高度（max-height）同理。 - 设备方向（orientation）
设备方向表示当前设备所处的方向是水平方向还是垂直方向。但是，取值并不是用水平或垂直表示，只有两个可选值：portrait 和 landscape。- portrait：表示当前页面区域的高度大于或等于宽度（也就是通常人们理解的设备垂直）
- landscape：除 portrait 值情况外，都是 landscape。
- 设备分辨率（resolution）
设备分辨率表示当前设备的分辨率大小，可以使用整数表示分辨率的取值，单位为dpi。该特性接受 min 和 max 前缀，因此可以派生出 min-resolution 和 max-resolution 两个媒体特性。resolution:960dpi; /* 屏幕分辨率为 960dpi */ min-resolution:300dpi; /* 屏幕最小分辨率为 300dpi */ max-resolution:1080dpi; /* 屏幕最大分辨率为 1080dpi */
网页的布局方式
-
固定布局
固定布局是指网页中每块内容的宽高都是由固定的像素宽度值确定，同时这些内容区块的位置也是固定的，所以不管屏幕大小如何变化，用户看到的都是固定宽度的内容。960px 已经成为现代 Web 设计的标准，因为大多数用户被假定为使用1024px*768px 分辨率。
-
流体布局
流体布局也称为流动布局，是自适应布局的一种。其实现方法就是将大多数元素区块都设成百分比宽度，而不是用具体的像素单位，这样可以让页面根据用户的屏幕和浏览器窗口大小自适应调整。 -
响应式布局介绍
响应式布局就是一个网站能够兼容多种终端，而不是为每种终端做一个对应的网站。这种布局主要是为改善移动互联网的浏览体验而诞生的。- 响应式布局优点
- 面对不同分辨率设备，展示不同效果的网站，灵活性强。
- 能够快捷解决多设备显示适应问题，而不需要做计算机站与手机站。
- 响应式布局缺点
- 兼容各种设备工作量大，效率低下（但相比于制作计算机站+手机站，还是快速很多）
- 代码累赘，会出现隐藏无用的元素，使页面加载时间变长。
- 响应式的实现方式
响应式布局没有固定的要求，只要能实现计算机站与手机站的不同效果显示，都可以称为响应式网站。- 媒体查询。
- 流体布局。
- 弹性布局。
- 通过 JavaScript、JQuery 进行判断来显示不同的布局页面。
- Bootstrap 等第三方框架。
- 响应式布局优点
-
媒体查询的基本语法
媒体查询主要是使用@media 关键字来实现，通过检测媒体类型是否符合要求，而确定是否执行这段 CSS 代码。@media[not|only] type [and][expr]{ rules }- and、not、only：逻辑关键字
逻辑关键字配合紧跟的媒体类型发挥作用，如 not screen 表示不检测屏幕宽度；onlyscreen 表示只检测屏幕宽度而不关心其他媒体设备的属性。 - type：媒体类型
媒体设备的类型有很多，大家可以参考帮助文档自行了解。网页开发中最常用的有 all和 screen，all 表示检测所有媒体设备；screen 表示只检测媒体设备的屏幕宽度而不关心是哪种设备。 - expr：媒体表达式
媒体表达式中用的属性就是 9.1.1 节讲解的各种媒体设备常用属性，比如最常用的就是检测屏幕的宽度处于某个范围之间：(min-width:640px) and (max-width: 980px)。 - rules：CSS 代码
当上述设置的媒体设备查询语句生效以后，需要执行的 CSS 代码。与普通的 CSS 选择器、语句写法完全相同，只是如果媒体设备查询不符合要求将不执行。@media only screen (min-width:640px) and (max-width: 980px) { body{ background-color: red; } }
- and、not、only：逻辑关键字
-
使用媒体查询的三种方式
-
直接在 CSS 文件中使用
<style type="text/css"> // 没有经过媒体查询限制的 CSS @media 类型 and (条件 1) and (条件 2){ // 媒体查询生效才会执行的 CSS } </style> -
使用 import 导入
@import url("css/media.css") all and (max-width:980px); // 当所有设备的宽度小于 980px 时，才会使用 import 导入 CSS 文件 -
使用 link 链接，media 作为属性用于设置查询方式
<link rel="stylesheet" href="css/media.css" media="all and (max-width:980px)" /> // 当所有设备的宽度小于 980px 时，才会使用 link 链接 CSS 文件
-
多媒体查询语法
@media not|only mediatype and (expressions) {
CSS 代码...;
}
- not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
- only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
- all: 所有设备，这个应该经常看到。
CSS3 多媒体类型
| 值 | 描述 |
|---|---|
| all | 用于所有多媒体类型设备 |
| 用于打印机 | |
| screen | 用于电脑屏幕，平板，智能手机等。 |
| speech | 用于屏幕阅读器 |
多媒体查询简单实例
在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色:
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}
媒体查询实例练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#med{
width: 100vw;
height: 100vh;
text-align: center;
font-size: 3vw;
}
#header{
width: 100%;
height: 15%;
background-color: thistle;
line-height: 15vh;
}
#header ul{
list-style-type: none;
}
#header li{
float: left;
width: 15%;
height: 100%;
color: azure;
}
#header div{
display: none;
}
#body{
width: 100vw;
height: 69vh;
margin: 0.5vh 0;
line-height: 69vh;
}
#body div{
float: left;
}
#left{
width: 17%;
height: 100%;
background-color: bisque;
}
#center{
width: 65%;
height: 100%;
background-color: bisque;
margin: 0 0.5%;
}
#right{
width: 17%;
height: 100%;
background-color: bisque;
}
#footer{
width: 100%;
height: 15vh;
background-color: thistle;
color: azure;
line-height: 15vh;
}
@media screen and (max-width:560px) {
#header ul{
display: none;
}
#header div{
display: block;
float: right;
width: 20%;
height: 100%;
}
#body div{
width: 100%;
}
#left,#right{
height: 17%;
line-height: 11.73vh;
}
#center{
height: 65%;
margin: 0.5% 0;
line-height: 44.85vh;
}
}
</style>
</head>
<body>
<div id="med">
<div id="header">
<ul>
<li>Head1</li>
<li>Head2</li>
<li>Head3</li>
<li>Head4</li>
<li>Head5</li>
</ul>
<div>icon</div>
</div>
<div id="body">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
CSS3 弹性布局
弹性布局的基本概念
- 容器与项目
容器（box）：需要添加弹性布局的父元素。
项目（item）：弹性布局容器中的每一个子元素，称为项目。 - 主轴与交叉轴
主轴（principal axis）：在弹性布局中，通过属性规定水平或垂直方向为主轴。
交叉轴（intersecting axle）：与主轴垂直的另一方向，称为交叉轴。
使用弹性布局需要注意的问题
- 给父容器添加 display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式。
- 容器添加弹性布局后，仅仅是容器中的项目采用弹性布局，而容器本身在文档流中的定位方式依然遵循常规文档流。
- display:flex; 容器添加弹性布局后，显示为块级元素。
- display:inline-flex; 容器添加弹性布局后，显示为行级元素。
- 将父容器设为弹性布局后，子项目的 float、clear 和 vertical-align 属性将失效，但position 属性依然生效。
作用于容器的属性
-
flex-direction：主轴方向
- row（默认值）：主轴为水平，方向从左到右。
- row-reverse：主轴为水平，方向从右到左。
- column：主轴为垂直，方向从上到下。
- column-reverse：主轴为垂直，方向从下到上。
-
flex-wrap：控制换行
- nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度。
- wrap：换行显示，并且第一行在容器最上方。
- wrap-reverse：换行显示，并且第一行在容器最下方。
-
flex-flow：缩写形式
该属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。 -
justify-content：主轴对齐
- flex-start（默认值）：项目位于主轴起点。
- flex-end：项目位于主轴终点。
- center：居中。
- space-between：两端对齐，项目之间的间隔都相等（开头和最后的项目，与父容器边缘没有间隔）。
- space-around：每个项目两侧的间隔相等。同时项目之间的间隔比项目与边框的间隔大一倍（开头和最后的项目，与父容器边缘有一定的间隔）。
-
align-items：交叉轴单行对齐
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- baseline：根据项目的第一行文字的基线对齐（文字的行高、字体大小会影响每行的基线）。
- stretch（默认值）：如果项目未设置高度或设为 auto，则将占满整个容器的高度。
-
align-content：交叉轴多行对齐
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：如果项目未设置高度或设为 auto，则将占满整个容器的高度（占满整个交叉轴）。
作用于项目的属性
-
order：项目排序
该属性规定项目的排列顺序，使用整数设置，数值越小越靠前，可以为负值。
前，可以为负值。
-
flex-grow：项目放大比
该属性规定项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
-
flex-shrink：项目缩小比
该属性规定项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
-
flex-basis：伸缩基准值
该属性规定项目的伸缩基准值。浏览器根据这个属性，计算主轴是否有多余空间来分配空间。
-
flex：缩写形式
该属性是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 flex:0 1 auto。后两个属性可选，除默认值外，还有 none（0 0 auto）和 auto（1 1 auto）两个快捷设置值。 -
align-self：自身对齐
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- baseline：与项目的第一行文字的基线对齐（文字的行高、字体大小会影响每行的基线）。
- stretch：如果项目未设置高度或设为 auto，则将占满整个容器的高度。
- auto（默认值）：表示继承父元素的 align-items 属性。如果没有父元素，则等于stretch。
本文为作者学习web前端学习笔记后所作笔记
扫一扫
1117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
