前言
1、emmet语法生成html
-
如果想要生成多个相同标签可以用div*3按tab键就可以快速生成3个div
<div></div> <div></div> <div></div> -
h如果有父子级关系的标签,用ul>li按tab键就可以了
<ul> <li></li> </ul> -
如果有兄弟关系的标签，用div+p按tab键
<div></div> <p></p> -
如果生成带有类名或者id名字的，直接写 .demo 或者 #two按tab键就可以了
p#one
<div class="demo"></div>//注：默认生成div标签 <div id="tow"></div> <p id="one"> </p> -
如果生成的div类名是有顺序的，可以用自增符号$
.demo$*5按tab键
<div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div> <div class="demo4"></div> <div class="demo5"></div> -
如果想要在生成的标签内部写内容可以用=={}==表示,
div{我是谁$}*5按tab键
<div>我是谁1</div> <div>我是谁2</div> <div>我是谁3</div> <div>我是谁4</div> <div>我是谁5</div>
2、emmet语法生成CSS
.one {
tac//按下tab键
}
text-align: center;
.one {
lh26px//按下tab键
}
line-height: 26px;
第一章、文本
1、目录
**目录文件夹：**存放文件的文件夹（例如：web前端开发这个文件夹）
**根目录：**打开目录文件夹的第一层就是根目录（例如：打开web前端开发这个文件夹后就是根目录）
2、路径
**相对路径：**以引用文件所在位置为参考基础，而建立出的目录路径（例如：图片相对于html页面的位置。）
同级直接引用
<img scr="">
下一级使用 /
<img scr="/">
上一级使用 …/
<img scr="./../">
**绝对路径：**是指目录下的绝对位置，通常是从盘符开始的
3、注释
按键： ctrl + /4、特殊字符
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| < | 小于 | < |
| > | 大于 | > |
| & | 和 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负 | ± |
| × | 乘 | × |
| ÷ | 除 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
| 空格 | |
5、单位
px：像素
em：是一个相对单位，当前元素font-size：1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小显示。
6、vw和vh
1.vw/vh是什么
●vw/vh是 一个相对单位(类似em和rem相对单位)
➢vw是: viewport width 视口宽度单位
➢vh是: viewport height 视口高度单位
●相对视口的尺寸计算结果.
➢1vw= 1/100视口宽度
➢1vh= 1/1 00视口高度
width:10vw;
height:10vw;
//宽高都是宽度视口是可以等比例缩放
例如:
当前屏幕视口是375像素,则1vw就是3.75 像素，如果当前屏幕视口为414，则1vw为4.14像素。
和百分比有区别的，百分比是相对于父元素来说的，而vw和vh总是针对于当前视口来说的。
第二章、HTML标签
一、简单标签
1.h1-h6
一级标题
二级标题
三级标题
四级标签
五级标签
六级标签
标题标签只有六级且每一个h1~6标签独占一行
2.p
段落标签
`<br/>`是单标签，具有强制换行的作用
3.加粗、倾斜、下划线
加粗
加粗
倾斜
倾斜
删除线
删除线
下划线
下划线
4.div、span
5.img
<img src="./image/0000.jpg" alt="img" title="头像" width= "150px" height="150px" border="">
alt：图像显示不出来时显示替换文本
title：鼠标移动到图像上，提示的文字
border：可以设置边框的大小和圆角颜色
6.a
href：链接url地址
target：窗口打开方式默认为 _self 占用当前窗口 _blank 新建一个窗口
<a href="压缩包.zip"><img src="./image/0000.jpg" alt="img" title="图片链接" width= "150px" height="150px" border=""></a>
7.锚点
href中填写id时点击a标签的内容会跳转到相应的id位置,必须要以#号开头
8.hr
<hr>是单标签。是分割线
二、表格
1.table
1.表格的主要作用
表格用来显示、展示数据、因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据。
2.表格的基本语法
<table align="center" border="1px" cellpadding="20px" cellspacing="0px">
<tr >
<th >
姓名
</th>
<th>
性别
</th>
<th>
年龄
</th>
</tr>
<tr>
<td>
张
</td>
<td>
man
</td>
<td>
18
</td>
</tr>
<tr>
<td>
王
</td>
<td>
man
</td>
<td>
18
</td>
</tr>
</table>
1.<table></table> :是用来定义表格的标签
2.<tr></tr>:用于定义表格中的行，必须嵌套在<table></table>标签中
3.<th></th>:标签一般用于表头即（table head）
4.<td></td>:用于定义表格中的单元格，必须嵌套在<tr></tr>:标签中td即（table date）
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1 或 “” | 规定表格单元是否拥有边框，默认为没有边框 |
| cellpadding | px | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | px | 规定单元格之间的空白，默认2像素 |
| width | px或者百分比 | 规定表格宽度 |
这些标签要写到table里面
3.表格的结构标签
1.<thead></thead>：用于定义表格的头部。<thead> 内部必须拥有<tr>标签。一般是位于第一行。
2.<tbody> </tbody> : 用于定义表格的主体。主要用于放数据本体.
3.以上标签都是放在<table> </table>标签中。
4.合并单元格
1.合并单元格的方式
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
2.目标单元格
跨行:最上侧单元格为目标单元格，写合并代码
跨列:最左侧单元格为目标单元格，写合并代码
| 合并行 | 一 | 二 |
| 三 | 四 | |
| 五 | 合并列 | |
三、列表
1.无序列表ul
- 无序列表1
- 无序列表2
- 无序列表3
.box ul li {
list-style: none;
/* 去无序列表前的原点 */
}
2.有序列表ol
- 有序列表1
- 有序列表2
- 有序列表3
3.自定义列表dl
-
自定义列表1：名词
- 自定义列表2：释义1
- 自定义列表3：释义2
- 自定义列表4：释义3 自定义列表1：关注我们
- 自定义列表2：邮箱
- 自定义列表3：电话
- 自定义列表4：微博
四、表单
1.表单域form
form表单域，可以进行网页提交，网页请求 | 属性 | 属性值 | 作用 | | ------ | -------- | ----------------------------------------------- | | action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 | | method | get/post | 用于设置表单数据的提交方式，get或post | | name | 名称 | 用于指定表单名称，用于区分页面中的多个表单 |2.input 属性值
用户名：密码：
单选框：男 女
多选框： 吃饭 睡觉 打豆豆
文件上传： 3.input属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 自定义 | 定义input元素名称 |
| value | 自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符最长为 |
4.label标签
5.下拉菜单 select
籍贯： 北京 天津 上海 #### 6.文本域textarea<form>
<!-- 文本域：cols一行显示多少给字，rows可以显示多少行，标签之间的空格会显示在文本域-->
<textarea name="" id="" cols="30" rows="10"> 文本域</textarea>
</form>
第三章、CSS层叠样式
CSS：Cascading Style Sheets
CSS也是一种标记语言
一、CSS语法规范
1.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>
选择器写入区域
</style>
</head>
<body>
</body>
</html>
例如：
p {
color: red;
}
选择器的作用：根据不同需求把不同的标签
选择器分类：基础选择器，复合选择器
基础选择器是由单个选择器组成：标签选择器、类选择器、id选择器和通配符选择器
1.CSS属性的书写顺序
建议遵循以下顺序:
1.布局定位属性: display / position/ float/ clear / visibility/ overflow (建议display第一个写,毕竟关系到模式)
2.自身属性: width/ height / margin/ padding / border/ background
3.文本属性: color/ font / text-decoration/ text-align/ vertical-align/ white-space/ break-word
4.其他属性(CSS3) : content/cursor/border-radius/box-shadow/text-shadow/background:linear gradient
二、选择器
1.标签选择器
标签选择器会筛选所有同类标签设置样式
标签名 {
属性1:属性值;
属性2:属性值;
属性3:属性值;
}
2.class选择器
1.单类名
需要用class属性来调用class类
例：<div class="header">选择器</div>
.header {
属性1:属性值;
属性2:属性值;
属性3:属性值;
}
2.多类名
一个标签多个类名，从而达到更多的选择目的，这些类名都可以选择出这个标签。（一个标签多个名字）
<div class="类名1 类名2">多选择器</div>
1.在标签class属性中写多个类名
2.多个类名中间必须使用空格
场景：将相同的样式单独写一个类进行调用
3.id选择器
需要用id属性来调用id名
id选择器具有唯一性，一个页面只能使用一个id名，如果使用多个相同id名就会只有第一个id名会设置相应的样式。
例：<div id="head">选择器</div>
#head {
属性1:属性值;
属性2:属性值;
属性3:属性值;
}
4.id选择器和class选择器的区别
1.类选择器( class )好比人的名字, 一个人可以有多个名字,同时一个名字也可以被多个人使用。
2.id选择器好比人的身份证号码全中国是唯一的 ,不得重复.
3.类选择器在修改样式中用的最多, id选择器一般用于页面唯一性的元素 上,经常和JavaScript搭配使用。
5.通配符选择器*
用 * 号定义通配符选择器，它表示选取页面中的所有元素标签
* {
属性1:属性值;
属性2:属性值;
属性3:属性值;
}
6.复合选择器
1.后代选择器
后代选择器又称为包含选择器。可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面。中问用空格分隔当标签发生嵌有时。内层标签就成为外层标签的后代。
元素1 元素2 {样式声明}
元素2包括了所有相同类名或者标签名的标签
ol li {
}
元素1可以是任意选择器
2.子元素选择器
子元素选择器(子选择器)只能选择作为元素的最近一级子元素。简单理解就是选亲儿子元素
元素1>元素2{样式声明}
.one > a{
}
3.并级选择器
1.并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明
2.并集选择器是各选择器通过英文逗号==,==连接而成,任何形式的选择器都可以作为并集选择器的一部分.
例如：
//1.将熊大熊二改为红色
div,p{
color: red;
}
//2.将熊大，熊二，小猪改为红色
div,
p,
.pig li {
color: red;
}
//
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul>
<li>佩奇</li>
<li>猪爸</li>
<li>猪妈</li>
</ul>
4.伪类选择器
1.链接伪类选择器
1.伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
2.伪类选择器书最大的特点是用冒号==:表示,比如:hover==、:first-child 。
3.伪类选择器很多, 比如有链接伪类、结构伪类等
<a href=""></a>标签样式设置
注意事项：
1.为了确保生效，请按照LVHA的顺序声明：:link :visited :hover :active。
a:link {} //选择所有未被访问的链接
a:visited {} //选择所有已被访问的链接
a:hover {} //选择鼠标指针位于其上的链接
a:active {} //选择活动链接（鼠标按下未弹起的链接）
2.因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
2.focus伪类选择器
1.:focus伪类选择器用于选取获得焦点的表单元素,当表单元素获取到光标后就会显示对应的样式。
焦点就是光标, 一般情况<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
input:focus{
background-color: pink;
}
<input value="">
三、CSS层叠样式
1.字体属性fonts
字体属性用于定义字体系列、大小、粗细和文字样式
1.font-family:字体
font-family:"字体样式1","字体样式2","字体样式3";
-
各种字体之间必须使用英文状态下的逗号隔开
-
一般情况下，如果有空格隔开的多个单词组成的字体加引号.
-
字体的执行规则是先执行样式1，没有再执行样式2，没有再执行样式三
-
多个单词组成的字体用引号，不是则不需要，汉字需要引号.
2.font-size:字号
font-size:20px;
- px（像素）大小是我们网页最常用的单位
- 谷歌浏览器的默认文字大小为16px
- 不同浏览器可能默认的大小不一样，我们尽量给一个明确的值，不用默认值。
- 标题标签比较特殊，需要单独指定文字的大小
3.font-weight:粗细
文字的粗细
font-weight:normal;
font-weight:bold;
font-weight:bolder;
font-weight:lighter;
font-weight:number;
normal:默认
bold:粗体
bolder:特粗体
lighter:细体
number:100~900,400等同于normal，700等同于bold，数字后面不跟单位
4.font-style:字体样式
font-style:normal;//默认值，浏览器显示的标准字体
font-style:italic;//浏览器会显示斜体的字样样式
normal：可以将em，i标签倾斜字体改为正常字体
5.font复合属性写法
1.font复合属性写法顺序，多个属性值用空格隔开，且顺序不颠倒
font:font-style font-weight font-size/line-height font-family;
2.font可以少写一些属性值，但是font-size font-family是必须写,否则font属性将不起作用。
font:font-size font-family;
3.line-height:1.5;后面没有单位表示字体大小的1.5倍
font:14px/1.5 Microsoft YaHei;
即：14px*1.5=21px
2.文本属性text
文本属性可以定义文本的外观。（例如文本的颜色，对齐文本，装饰文本，文本缩进，行间距）
1.字体颜色color
color: red;
color: #ffffff;//十六进制,开发常用
color: rgb(0,255,255);//最低为0，最高为255
color: rgb(100%,0%,0%);
2.文本对齐text-align
text-align:center;还能够是行内元素和行内快元素居中对齐
text-align:center;//文本居中
text-align:right;//文本右对齐
text-align:left;//文本对齐
3.装饰文本text-decoration
text-decortion属性规定添加文本的修饰。可以给文本添加下划线，删除线，上划线
text-decoration:none;//默认，没有装饰线（常用）
text-decoration:underline;//下划线，常用来消除<a>标签自带的下划线
text-decoration:overline;//上划线
text-decoration:line-through;//删除线
4.文本缩进text-indent
text-indent:属性可用于指定文本的第一行的缩进，通常是将段落的首行缩进。相当于使用tab键
text-indent:32px;//可取正负值
text-indent:2em;//缩进相当于两个大小的距离，一个em一个字符
5.行间距text-height
text-height：属性可以用于设置行间的距离（行高）。可以控制文字行与行之间的距离。
text-height:26px;
行高控制间距是用来控制上下间距的距离
6.行高line-height
当行高与盒子高度一样时，文本就会在盒子中间位置显示。
line-height:40px;
注意：行高大于盒子会造成文字偏下，行高小于盒子会造成文字偏上。
3.背景background
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定
1.背景颜色
background-color:颜色值;
一般情况下元素背景颜色默认值是transparent(透明), 我们也可以手动指定背景颜色为透明色。
background-color:red;//红
background-color:transparent;//(透明)默认
2.背景图片
background:;
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)
background-image:none;//无背景图
background-image: url(./../image/0000.jpg);//如果图片小于盒子会进行平铺，大于盒子不会平铺。
3.背景平铺
background-repeat:;
background-repeat: repeat;//背景平铺
background-repeat:no-repeat;//背景不平铺
background-repeat: repeat-x;//延x轴平铺
background-repeat: repeat-x;//延y轴平铺
页面元素即可以添加背景颜色也可以添加背景图片，但是背景图片会压制背景颜色
4.背景图片的位置
1.参数是方位名词
background-position: 方位1 方位2;
一个方位控制水平，一个方位控制垂直；
/* 图片显示的位置 */
background-position: center;
/* 只有一个方位名词时第二个位置默认center */
background-position: top center;
background-position: center top;
/* 位置顺序替换效果一样 */
2.参数是精确单位
background-position: x坐标 y坐标;
background-position: 25px 110px;
/* 第一个位置是x轴，意义为距left距离;第二个为位置是y轴，意义为距top距离 */
background-position: 25px;
/* 如果只有一个值就默认为是x轴，y轴默认为center */
3.参数混合单位
background-position: 25px center;
5.背景图像固定（背景附着）
background-attachment:;
background-attachment: fixed;
/* 背景图片固定 */
background-attachment: scroll;
/* 背景图片随内容滚动而滚动 */
固定就是相当于固定定位在此位置上，当父容器向上或向下滚动离去时会跟着消失，只会在父容器显现时跟随出现在父容器
6.背景复合写法
复合写法没有规定书写的顺序，一般约定顺序为：
background:颜色 地址 平铺 滚动 位置;
background: orange url(./../image/229192.gif) no-repeat fixed 100px 25px;
7.背景颜色透明
background: rgba(0, 0, 0, alpha);
透明效果只会影响背景颜色，不会影响内容
background: rgba(0, 0, 0, 0.1);
alpha介于0~1之间，越接近1越不透明，越接近0越透明
8.背景缩放background-size:;
div {
width: 500px;
height: 500px;
border: 2px solid red;
background: url(images/dog.jpg) no-repeat;
/* background-size: 图片的宽度 图片的高度; */
/* background-size: 500px 200px; */
/* 1.只写一个参数 肯定是宽度 高度省略了 会等比例缩放 */
/* background-size: 500px; */
/* 2. 里面的单位可以跟% 相对于父盒子来说的 */
/* background-size: 50%; */
/* 3. cover 等比例拉伸 要完全覆盖div盒子 可能有部分背景图片显示不全 */
/* background-size: cover; */
/* 4. contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域 */
background-size: contain;
}
9.背景颜色渐变
背景颜色渐变必修添加浏览器私有前缀
background:-webkit-linear-gradient(left,red,blue);
起始方向，可省略，默认是从上往下，
background:-webkit-linear-gradient(top left,red,blue);
左上到右下
4.透明opacity
opacity:0.5;
四、CSS引入方式
1.行内样式表（行内式）
<div style="font-size: 26px;">行内样式，就是将CSS样式写入标签中</div>
修改样式比较简单时可以使用，此时style就是标签的属性。
2.内部样式表（嵌入式）
<style>
.div-font {
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
</style>
理论上可以放在任何位置
但是一般是放在<title>标签下面，这样便于样式的管理
3.链接样式表（链接式）
结构和样式分离，权重高
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<link rel="stylesheet" href="./../CSS/Style.css">
</head>
<body>
<div style="font-size: 26px;">行内样式，就是将CSS样式写入标签中</div>
<div >行内样式</div>
</body>
</html>
使用<link rel="stylesheet" href="./../CSS/Style.css">标签进行外部CSS文件引用
五、CSS的元素显示模式
1.CSS显示模式
作用:网页的标签非常多,在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
HTML元素一般分为块元素和行内元素两种类型。
2.块元素
常见块级元素：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>，其中<div>标签是最常用的块元素
块级元素的特征：
1.比较霸道，自己独占一行。
2.高度，宽度，外边距以及内边距都可以控制。
3.宽度默认是父容器的100%。
4.是容器及盒子，里面可以放行内元素或者块级元素。
注意：
1.文字内的元素内不能使用块级元素
2.<p>标签主要用于存放文字，因此<p>标签里面不能放块级元素，特别是不能放<div>
3.同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
3.行内元素
常见的行内元素有<a>，<strong>，<b>，<em>、<i>、 <del>、 <s>、<ins>. <u>、<span>等 ,其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
①相邻行内元素在一行上，一行可以显示多个。
②高、宽直接设置是无效的。（设置宽高需要进行元素类型转化）
③默认宽度就是它本身内容的宽度。
④行内元素只能容纳文本或其他行内元素.
注意：
●链接里面不能再放链接，即a标签里不能a标签
●特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全
4.行内块级元素
1.在行内元素中有几个特殊的标签一<img/>， <input/>， <td> ,它们同时具有块元素和行内元素的特点。
行内块元素的特点:
①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝院。一 行可以显示多个(行内元素特点)。
②默认宽度就是它本身内容的宽度(行内元素特点)。
③高度,行高、外边距以及内边距都可以控制(块级元素特点) .
5.显示模块的转化
1.其它元素转块元素
display:block;
可以将其它素转换为块级元素后可以设置宽高。
<a href="#" style="border:1px solid red ;">行内元素</a>
<a href="#" style="display:block;width:150px;height:40px;border:1px solid red ;">块级元素</a>
2.其它元素转行内元素
display:inline;
由块级元素转换为行内元素，宽高设置都无法显示样式
<div style="display:inline;border:1px solid red;">此时div已由块级元素转换为行内元素，宽高设置都无法显示样式</div>
3.其它元素转行内块元素
display:inline-block;
将其它类型的元素转化为行内块元素后可设置宽高，又可同行展示。
text-algin:能够使元素水平居中显示。
注意：
但是转换为行内块元素后元素与元素之间有间距，且无法消除。
<span style="display: inline-block;width:200px;height: 80px;border:1px solid red;">转换为行内块元素</span>
第四章、CSS三大特性
1.层叠性
1.相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。 层叠性主要解决样式冲突的的问题。
2.层叠原则：
●样式冲突,遵循的原则是就近原则.哪个样式离结构近.就执行哪个样式
●样式不冲突 ,不会层叠
2.继承性
CSS中的继承：子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。
●恰当地使用继承可以简化代码,降低CSS样式的复杂性
●子元素可以继承父元素的样式(text- , font- , line-这些元素开头的可以继承,以及color属性)
font:14px/1.5 Microsoft YaHei;
14*1.5=21
3.优先级
当同一个元素指定多个选择器,就会有优先级的产生。
●选择器相同 ,则执行层叠性.
●选择器不同，则根据选择器权重执行.
| 选择器 | 选择器权重 |
|---|---|
| 继承 或者* | ０，０，０，０ |
| 元素选择器 | ０，０，０，１ |
| 类选择器 伪类选择器 | ０，０，１，０ |
| ID选择器 | ０，１，０，０ |
| 行内样式 style=“” | １，０，０，０ |
| !important 重要的 | ∞ 无穷大 |
div {
color: pink!important;
}
/*在样式后面写!important优先级最大*/
●继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0；
<style>
#div {
color:red;
}
p{
color:pink;
}
</style>
<div id="div">
<p>
我的权重
</p>
</div>
/*会发现p标签的颜色为pink，因为p标签从div中继承的权重为0*/
第五章、CSS盒子模型
页面布局要学习三大核心,盒子模型，浮动和定位.学习好盒子模型能非常好的帮助我们布局页面.
1.盒子模型
1、盒子模型的组成
1.border边框
2.content内容
3.padding内边距
4.margin外边距
2、盒子模型的实际大小
div {
width:200px;
height:200px;
background-color:pink;
border:10px solid red;
padding:10px;
margin:10px;
}
注意：
此时我们设置的盒子div的宽高都是200px，但是设置的边框，内外边距的宽度会撑开在盒子，所以盒子的实际大小是260px。
200+（10+10+10）*2
解决方案：
1.测量盒子大小的时候不量边框。
2.如果测量的时候包含了边框，则需要width/height减去边框宽度
2.边框border
| 属性 | 作用 |
|---|---|
| border-width: | 定义边框粗细，单位是px |
| border-style: | 边框的样式:solid实线 dashed虚线 dotted点线 |
| border-color: | 边框颜色 |
| border-collapse: | collapse合并相邻单元格边框，常用于表格 |
1.单边框写法:
border-top:border-width border-style border-color;
2.复合写法:
border:border-width border-style border-color;
3.内边距padding
padding:属性用于设置内边距.即边框与内容之间的距离;
注意：
1.padding会撑开设置有宽高的盒子大小，而内容区域的大小是不会变的；不管宽度是否固定
2.未设定宽度设置了高度的盒子padding不会撑开盒子宽度，但会撑开盒子高度
| 属性 | 作用 |
|---|---|
| padding-left：； | 左内边距 |
| padding-right：； | 右内边距 |
| padding-top：； | 上内边距 |
| padding-bottom：； | 下内边距 |
复合写法：
padding:上 右 下 左;
padding:2px 4px 6px 8px;
padding:上 左右 下;
padding:5px 10px 15px;
padding:上下 左右;
padding:5px 10px;
padding:上下左右;
padding:5px;
4.外边距margin
1.margin属性
margin:;属性用于设置外边距,即控制盒子和盒子之间的距离。
margin:;不会撑开元素的大小，当盒子未设置宽度时margin不会撑开盒子
| 属性 | 作用 |
|---|---|
| margin-left：； | 左外边距 |
| margin-right：； | 右外边距 |
| margin-top：； | 上外边距 |
| margin-bottom：； | 下外边距 |
margin和padding写法是一样的。
2.margin的典型应用
外边距可以让块级盒子水平居中,但是必须满足两个条件:
①盒子必须指定了宽度( width) .
②盒子左右的外边距都设置为auto。
div {
width: 100px;
height: 100px;
border: 1px solid red;
/* 盒子居中写法 */
/* 1. */
margin: auto;
/* 2. */
margin-left: auto;
margin-right: auto;
/* 3. */
margin: 0 auto;
}
==注意:==以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text -align:center即可。
3.外边距塌陷（合并）问题
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
嵌套块元素垂直外边距的塌陷:
对于两个嵌套关系(父好关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
<div class="father">
<div class="son"></div>
</div>
/*1.使用上述代码会发现子元素无法实现与父元素的外边距，只会成为父元素的外边距。*/
/*2.当父元素的外边距大于子元素时，显示的是父元素的外边距*/
/*3.当子元素的外边距大于父元素时，显示的是子元素的外边距*/
解决办法：
1.可以为父元素定义一个透明边框
border:1px solid transparent;
2.可以为父元素定义内边距
3.可以为父元素添加overflow:hidden;
4.还有其他方法.比如浮动、固定，绝对定位的盒子不会有塌陷问题。
5.清除元素的内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
* {
padding:0;
margin:0;
}
==注意:==行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了.
行内元素设置上下外边距也无法显示。
6.圆角边框(CSS3)
border-radius: length;
div {
width:200px;
height:200px;
border:1px solid red;
border-radius: 100px;
/*length为正方形的一半时，此时是一个圆*/
/*也可以写为百分比*/
/*border-radius: 50%;*/
}
border-radius:20px 30px 40px 50px;
border-radius:左上 右上 右下 左下;
border-radius:20px 30px;
border-radius:左上右下 右上左下;
7.盒子阴影(CSS3)
box-shadow: h-shadow v-shadow blur spread color inset(默认);
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊程度。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅CSS颜色值。 |
| inset | 可选。将外部阴影(outset默认，不用写)改为内部阴影。 |
box-shadow: 10px 10px 10px 10px rgb(0, 0, 0,0.3);
注意：
1.默认的是外阴影(outset).但是不可以写这个单词,否则导致阴影无效。内阴影(inset)必须要写
2.盒子阴影不占用空间，不会影响其他盒子排列。
8.文字阴影(CSS3)
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊程度。 |
| color | 可选。阴影的颜色。请参阅CSS颜色值。 |
text-shadow: 10px 10px 10px rgb(0, 0, 0,0.3);
第六章、浮动
传统网页布局的三种方式：
1.普通流（标准流）：所谓的标准流就是标签按照规定好默认方式排列
2.浮动
3.定位
1.浮动float
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
选择器 {
float:位置;
}
| 值 | 描述 |
|---|---|
| none | 默认不浮动 |
| left | 左浮动 |
| right | 右浮动 |
注意：
一.浮动元素会脱离标准流(脱标)
1.脱离标准普通流的控制(浮)移动到指定位置(动), (俗称脱标)
2.浮动的盒子不再保留原先的位置
二.浮动的元素会一行内显示并且元素顶部对齐
1.如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列。
三.浮动的元素会具有行内块元素的特性.
1.任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性。（行内元素浮动后会具有宽高等）
●如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
●浮动的盒子中间是没有缝隙的,是紧挨着一起的
●浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流
2.清除浮动
为什么需要清除浮动？
当父元素是一个标准流且未设置高度时，子元素设置浮动后父元素的高度就会变成零
●由于浮动元素不再占用原文档流的位置 ,所以它会对后面的元素排版产生影响
清除浮动的本质：
●清除浮动的本质是清除浮动元素造成的影响
●如果父盒子本身有高度 ,则不需要清除浮动
●清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
选择器 {
clear:属性值;
}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
| right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
| both | 同时清除左右两侧浮动的影响 |
实际开发常用：clear:both;
1.额外标签法
额外标签法是在浮动元素的最后面添加一个标签用于清除浮动
.box {
width: 100%;
border: 1px solid red;
}
.damao {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.ermao {
width: 200px;
height: 200px;
background-color: gray;
float:left;
}
.sanmao {
width: 200px;
height: 200px;
background-color: rgb(148, 66, 66);
float: left;
}
<!-- clear 类 清除浮动 -->
.clear {
clear: both;
}
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div class="sanmao">三毛</div>
<!-- 额外标签清除浮动,盒子就会有高度，但是额外的标签只能是块元素 -->
<div class="clear"></div>
</div>
注意：
额外标签清除浮动,父元素就会自动检测高度，但是额外的标签只能是块元素。（不常用。结构化差）
2.overflow
给父元素添加overflow来清除浮动
三个中的任何一个都可以
.box {
overflow:hidden;
overflow:auto;
overflow:scroll;//溢出出现滚动条
}
优点:代码简洁;
缺点：无法显示溢出的部分；
3.:after伪元素
给父元素添加.clearfix:after类,:after方法是额外标签的升级版，也是类似给父元素添加标签。
将下列代码写入样式
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
/*兼容IE6 7专有*/
*zoom:1;
}
<div class="box clearfix">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div class="sanmao">三毛</div>
</div>
优点：没有新增加标签，结构简单
缺点：照顾低版本的浏览器
4.双伪元素
与:after用法一样，给父元素添加clearfix:before，clearfix:after类
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
<div class="box clearfix ">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div class="sanmao">三毛</div>
</div>
第七章、定位
很多效果用标准流和浮动是无法实现的
1、定位的组成
定位:将盒子定在某一个位置， 所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移.
1.定位模式
定位模式决定元素的定位方式,它通过CSS的position:属性来设置,其值可以分为四个:
| 值 | 语义 | 是否脱里标准流 |
|---|---|---|
| static | 静态定位 | 否 |
| relative | 相对定位 | 否（占有位置） |
| absolute | 绝对定位 | 是（不占有位置） |
| fixed | 固定定位 | 是（不占有位置） |
| sticky | 粘性定位 | 否（占有位置） |
2.边偏移
边偏移就是定位的盒子移动到最终位置。有top. bottom. left 和right 4个属性。
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |
| bottom | top: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |
| left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |
| right | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
2、静态定位static
静态定位是元素的默认定位方式,无定位的意思。
语法:
选择器
{
position: static;
}
●静态定位按照标准流特性摆放位置 ,它没有边偏移
●静态定位在布局时很少用到
==注意：==静态定位没有脱离标准流
3、相对定位relative
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)
语法:
选择器
{
position: relative;
}
相对定位的特点:
1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置).
2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。( 不脱标,继续保留原来位置)
4、绝对定位absolute
绝对定位是元素在移动位置的时候,是相对于它父元素来说的。
注意：
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位( Document文档)。
2.如果父元素有定位(相对，绝对、固定定位，不能是静态定位) , 则以最近一级的有定元素为参考点移动位置。(子绝父相)
3.绝对定位不会占有标准流的位置，脱离文档流
5、子绝父相
①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时，需要占有位置,因此父亲只能是相对定位。
6、固定定位fixed
固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。
语法:
选择器
{
position: fixed;
}
注意：
1.以浏览器的可视窗口为参照点移动元素。
●跟父元素没有任何关系
●不随滚动条滚动。
2.固定定位不在占有原先的位置。
固定定位也是脱标的。其实固定定位也可以看做是一种特殊的绝对定位。
技巧：
固定定位小技巧:固定在版心右侧位置。
小算法:
1.让固定定位的盒子left: 50%.走到浏览器可视区(也可以看做版心)的一半位置。
2.让固定定位的盒子margin- left:版心宽度的一半距离。多走 版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。
7、粘性定位sticky
粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的
语法:
选择器
{
position: sticky;
top: 10px;
}
粘性定位的特点:
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原先的位置(相对定位特点)
3.必须添加top. left. right. bottom其中一个才有效
body {
height: 3000px;
}
.nav {
position: sticky;
top: 50px;
/* 当距离顶部50px时，就不会再进行滚动了 */
width: 800px;
height: 50px;
background-color: pink;
margin:100px auto;
}
<div class="nav">我是导航栏</div>
8、定位的叠放次序z-index
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴)
语法:
选择器
{
z-index: 1;
}
●数值可以是正整数、负整数或0,默认是auto ,数值越大,盒子越靠上
●如果属性值相同 ,则按照书写顺序,后来居上
●数字后面不能加单位
●只有定位的盒子才有z-index属性（标准流和浮动不可用）
9、定位的拓展
1.定位的特殊性
绝对定位和固定定位也和浮动类似。
注意:
1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
2.绝对定位(固定定位)会完全压住盒子
1.浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)
2.但是绝对定位(固定定位)会压住下面标准流所有的内容。
3.使用定位的元素会继承父元素的行高
4.浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
3.脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。
第八章、元素的隐藏与显示
1、display
display属性用于设置一个元素 应如何显示。
●display:none ;隐藏对象
●display:block;除了转换为块级元素之外,同时还有显示元素的意思
display隐藏元素后,不再占有原来的位置。
2、visibility
visibility属性用于指定一个元素应可见还是隐藏。
visibility:visible;元素可视
visibility:hidden;元素隐藏
visibility隐藏元素后。继续占有原来的位置。
注意：
如果隐藏元素想要原来位置。就用vibility : hidden
如果隐藏元素不想要原来位置，就用display : none (用处更多重点)
3、overflow
overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时.会发生什么。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条（默认） |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐微掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
一般情况下.我们都不想让溢出的内容显示出来。因为溢出的部分会影响布局。
但是如果有定位的盒子。请慎用overflow:hidden; 因为它会险藏多余的部分。
第九章、精灵图与字体图标
1、精灵图
1.前言
技术目的：
为了有效地减少服务器接收和发送请求的次数.提高页面的加载速度.
核心原理:
将网页中的一些小背景图像整合到一张大图中.这样服务器只需要一次请求就可以了.
2.使用精灵图核心:
1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到-张大图片中。
2.这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position:
4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同,一般情况下精灵图都是负值。( 千万注意网页中的坐标: x轴右边走是正值,左边走是负值，y轴同理。)因为一般情况下都是往上往左移动,所以数值负值。
2、字体图标
1.字体图标的产生
字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的,但是缺点很明显。
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
此时,有一种技术的出现很好的解决了以上问题,就是字体图标iconfont.
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体.
2.字体图标的优点
●轻量级:一个图标字体要比一列的图像要小，一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
●灵活性:本质其实是文字。可以很随意的改变颜色、产生阴影、透明效果、旋转等
●兼容性:几乎支持所有的浏览器,请放心使用
注意:
字体图标不能替代精灵技术.只是对工作中图标部分技术的提升和优化。
3.网址
http://icomoon.io
http://www.icofont.cn/
第十章、用户界面样式设置
1、更改用户鼠标样式cursor
li {
cursor:pointer;
}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
|---|---|
| default | 小白默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
<ul>
<li style="cursor: default;">我是默认鼠标样式</li>
<li style="cursor: pointer;">我是小手鼠标样式</li>
<li style="cursor: text;">我是文本鼠标样式</li>
<li style="cursor: not-allowed;">我是禁止鼠标样式</li>
</ul>
2、表单轮廓线outline
outline: 0;
outline: none;
两种方式都可以取消轮廓
3、防止表单域拖拽resize
resize: none;
textarea
{
resize: none;
}
第十一章、特殊属性的使用
1、vertical-align
CSS的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐。块级元素不行
用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
注意:
行内块元素默认与文本的基线对齐，所以图片底部与边框会留白，也可以用vertical-align解决或者转换为块级元素。
语法:
在图片样式中设置
<img src="./../image/ldh.jpg" alt=""> pink老师是刘德华
<style>
img {
vertical-align: middle;
}
</style>
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| top | 把此元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把此元素的顶端与行中最低的元素的顶端对齐。 |
2、文本溢出省略号显示
1.单行文本溢出省略号显示
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* 默认使用 white-space: normal; 表示文字显示不开默认换行 */
/* white-space: normal; */
/* 三步 */
/*1. white-space: nowrap; 表示文字显示不开也不会换行，强制在一行显示*/
white-space: nowrap;
/*2. overflow: hidden; 文字溢出隐藏 */
overflow: hidden;
/*3. text-overflow: ellipsis;省略号显示 */
text-overflow: ellipsis;
}
<div>
啥也不说，此处省略一万字,想看后续不可能
</div>
2.多行文本溢出省略号显示
div
{
width: 150px;
height: 65px;
background-color: pink;
margin: 100px auto;
/* 多行文字溢出处理 */
/* white-space: nowrap; */
/*1. overflow: hidden; 文字溢出隐藏 */
overflow: hidden;
/*2. text-overflow: ellipsis;省略号显示 */
text-overflow: ellipsis;
/*3.弹性伸缩盒模型显示*/
display: -webkit-box;
/*4. 限制一个块元素显示文本的行数*/
-webkit-line-clamp: 3;
/*5.设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;
}
<div>
啥也不说，此处省略一万字,啥也不说，此处省略一万字,啥也不说，此处省略一万字,啥也不说，此处省略一万字,啥也不说，此处省略一万字,啥也不说，此处省略一万字。
</div>
第十三章、布局技巧
1、margin负值技巧
<!DOCTYPE html>
<html lang="zh-CN">
<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>
ul li {
position:relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
/* 使用负值可以使左边框重叠，像素只有1px */
margin-left: -1px;
/* 浏览器渲染机制是先渲染第一个li，执行一次CSS，再渲染第二个li,执行一次CSS，但是后一个li的右边框会压住前一个盒子的左边框，造成前一个盒子的左边框无法显示出来，此时可以使用定位来压住标准流*/
}
/* ul li:hover {
1.如果li里面的内容使用了绝对对定位定位，则鼠标悬停就无法使用相对定位
position:relative;
border:1px solid blue;
} */
ul li:hover {
/* 2.此时可以使用层叠来解决 */
z-index:1;
position:relative;
border:1px solid blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
浏览器渲染机制是先渲染第一个li，执行一次CSS，再渲染第二个li,执行一次CSS，但是后一个li的右边框会压住前一个盒子的左边框，造成前一个盒子的左边框无法显示出来，此时可以使用定位来压住标准流或则使用层叠
2、文字围绕浮动元素的巧妙运用
<!DOCTYPE html>
<html lang="zh-CN">
<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;
}
.box {
width: 300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
}
.pic img {
width: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="./../image/img.png" alt="">
</div>
<p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
</div>
</body>
</html>
3、CSS的初始化
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异.照顾刘览器的兼容，我们需要对CSS初始化.简单理解: CSS初始化是指重设浏览器的样式。(也称为CSS reset )
每个网页都必须首先进行CSS初始化。
这里我们以京东css初始化代码为例。
Unicode编码字体:
把中文字体的名称用相应的Unicode编码来代营,这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。.
比如:
黑体\9ED1\4F53
宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
第十四章、H5与CSS3新增
HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、 新的表单和新的表单属性等。
这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持。如果不考虑兼容性问题,可以大量使用这些新特性。
1、H5新增
1.H5新增语义化标签
●<header> :头部标签
●<nav> :导航标签
●<aside1> :侧边栏标签
●<article> :内容标签
●<section> :定义文档某个区城
●<footer> :尾部标签
在IE9中需要将他们转换为块级元素
2.新增视频标签video
选用视频时注意浏览器的兼容性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题) |
| controls | controls | 向用户显示播放控件 |
| width | pixels(像素) | 设置播放器宽度 |
| height | pixels(像素) | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto (预先加载视频)；none (不应加载视频) | 规定是否预加载视频(如果有了autoplay就忽略该属性) |
| src | url | 视频ur|地址 |
| poster | lmgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
3.新增音频标签audio
选用音频时注意浏览器的兼容性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如摇放按钮。 |
| loop | loop | 如果出现该属性，则每当曹频结束时重新开始播放。 |
| src | url | 要播放的音频的URL。 |
4.新增表单类型
| 类型 | 说明 |
|---|---|
| type=“emal” | 限制用户输入必须为Emall类型 |
| type=“url” | 限制用户输入必须为日期类型 |
| type=“date” | 限制用户输入必须为日期类型 |
| type=“time” | 限制用户输入必须为时间类型 |
| type=“month” | 限制用户输入必须为月类型 |
| type=“week” | 限制用户输入必须为周类型 |
| type=“number” | 限制用户输入必须为数字类型 |
| type=“tel” | 手机号码 |
| type=“search” | 搜索框 |
| type=color" | 生成一个颜色选择表单 |
<!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>
</head>
<body>
<form action="">
<ul>
<!-- 以上表单在移动端展示效果更好 -->
<li>邮箱：<input type="email"></li>
<li>网址：<input type="url"></li>
<li>日期：<input type="date"></li>
<li>时间：<input type="time"></li>
<li>数字：<input type="number"></li>
<li>手机号：<input type="tel"></li>
<li>搜索：<input type="search"></li>
<li>颜色：<input type="color"></li>
<li>周选：<input type="week"></li>
<li><input type="submit" name="" id=""></li>
</ul>
</form>
</body>
</html>
5.新增表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/ on | 当用户在字段开始键入时，浏览髒基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”；关闭autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交 |
| multiple | multiple | 可以多选文件提交，适用于file |
2、CSS3新增
1.属性选择器
| 选择符 | 简介 |
|---|---|
| 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元素 |
==注意：==类选择器，属性选择器，伪类选择器，权重为10
2.结构选择器
注意
E:nth-child(n)执行过程：先执行 :nth-child(n) 找到第n个孩子在看元素与E是否匹配。
E:nth-of-type(n)执行过程：先找到所有的E元素，然后排序，再使用:nth-of-type(n)找到第n个孩子。
| 选择符 | 选择符 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中最后一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n个子元素E(==注意：==E:nth-child(n)中写入n表示选中全部，且只能写入n) |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
nth-child(n)选择某个父元素的一个或多个特定的子元素
●n 可以是数字,关键字和公式
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15 … |
| n+5 | 从第5个开始(包含第五个)到最后 |
| -n+5 | 前5个(包含第5个) … |
●n如果是数字,就是选择第n个子元素，里面数字从1开始
●n可以是关键字: even偶数, odd奇数
ul li:nth-child(n)：选择全部
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
3.伪元素选择器
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意:
●before和after创建一个元素,但是属于行内元素
●新创建的这个元素在 文档树中是找不到的,所以我们称为伪元素
●语法: element::before{},element是父元素
●before 和after必须有content属性
●before在父元素内容的前面创建元素, after在父元素内容的后面插入元素
●伪元素选择器和标签选择器一 样,权重为1
4.CSS3盒子模型
CSS3中可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box. border-box ,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
-
box-sizing: content-box;盒子大小为width + padding + border ( 以前默认的) -
box-sizing: border-box;盒子大小为width,此时盒子的宽度固定，固定宽高=border宽度+内边距+内容。即边框和内边距只会内缩，
如果盒子模型我们改为了box-sizing: border-box;那padding和border就不会撑大盒子了(前提pading和border不会超过width宽度)
5.CSS3滤镜filter
filter:函数();
filter:blur(5px);数值越大越模糊 单位为px;不可为负数。
filter的模糊包含了文字，图片，和背景
<!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>
img {
width: 200px;
height: 200px;
margin: 0 auto;
/* 数值越大越模糊 单位为px */
filter: blur(4px);
}
img:hover {
filter: blur(0px);
}
div {
/* filter的模糊包含了文字，图片，和背景 */
width: 200px;
height: 200px;
filter: blur(5px);
background: url(./../image/0000.jpg) no-repeat center;
}
div:hover {
filter: blur(0px);
}
</style>
</head>
<body>
<img src="./../image/0000.jpg" alt="">
<div>
我是谁？
</div>
</body>
</html>
6.calc函数计算盒子宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3属性calc函数</title>
<style>
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
/* width: 150px; */
/* width: calc(150px + 30px); */
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 需求我们的子盒子宽度永远比父盒子小30像素 -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
7.CSS3过渡transition
/*单个样式写法*/
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
/*多个样式写法1*/
transition: 要过渡的属性 花费时间 运动曲线 何时开始, 要过渡的属性 花费时间 运动曲线 何时开始;
/*多个样式写法2*/
transition: all 花费时间 运动曲线 何时开始;
1.属性:想要变化的css厲性，宽度高度背景颜色内外边距都可以。如果想要所的属性都变化过渡，写一个all就可以。（必写）
2.花费时间:单位是秒(必须写单位)比如0.5s。（必写）
3.运动曲线:默认是ease ( 可以省略)
4.何时开始: 单位是秒(必须写单位)可以设置延迟触发时间默认是0s ( 可以省略)
第十五章、2D
1、转换transform:;
转换( transform )是CSS3中具有颠覆性的特征之一， 可以实现元素的位移、旋转、缩放等效果
●移动: translate
●旋转: rotate
●缩放: scale
1.移动transform:translate(x,y);
x,y为坐标距离，x右为正，y下为正，xy用逗号分开
语法：
transform:translate(x, y);
/* x轴正方向移动 */
transform: translateX(500px);
/* 等价 transform: translate(500px,0);*/
/* y轴正方向移动 */
transform: translateY(500px);
/* 等价 transform: translate(0,500px);*/
注意：
●定义2D转换中的移动，沿着X和Y轴移动元素
●translate最大的优点:不会影响到其他元素的位置
●translate中的百分比单位是相对于自身元素的translate:(50%,50%);
●对行内标签没有效果
<!DOCTYPE html>
<html lang="zh-CN">
<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>transform:translate(x,y);</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
/* 过渡效果 */
transition: all 1s;
}
div:hover {
/* transform不会影响页面的排版 */
/* 1. */
/* x轴正方向移动 */
/* transform: translateX(500px); */
/* 等价 transform: translate(500px,0);*/
/* y轴正方向移动 */
/* transform: translateY(500px); */
/* 等价 transform: translate(0,500px);*/
/* 如果单独写的话后一个CSS会覆盖前一个CSS */
/* 就如上面的代码执行之后只会实现 transform: translateY(500px); 的效果*/
/* 2. */
/*transform: translate(500px, 500px);*/
/* 此时就会即向x轴移动，又像y轴移动 */
/* 3. */
transform: translate(50%,50%);
/* 相对于自己的宽度和高度移动了50%的距离 */
}
</style>
</head>
<body>
<div>
</div>
123
</body>
</html>
2.旋转transform:rotate(ndeg);
语法：
transform:rotate(45deg);
注意：
●rotate里面跟度数，单位是deg比如rotate(45deg)；
●角度为正时,顺时针,负时,为逆时针
●默认旋转的中心点是元素的中心点
3.缩放transform:scale(x,y);
==注意
●注意其中的x和y用逗号分隔，不带单位
●transform:scale(1,1); : 宽和高都放大一倍倍,相对于没有放大
●transform:scale(2,2); : 宽和高都放大了2倍
●transform:scale(2); : 只写一个参数,第二个参数则和第一个参数一样,相当于scale(2,2)
●transform:scale(0.5,0.5); :x，y小于1就是缩小
●sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
可以使用是使用transform-orgin:;设置控制变化的中心点
4.综合写法transform:;
注意:
1.同时使用多个转换,其格式为: transform: translate() rotate() scale(); ，中间用空格隔开。
2.其顺序会影转换的效果。( 先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候,记得要将位移放到最前
/* 书写尽量将移动写到前面，旋转会影响盒子的移动 */
transform: translate(200px,50px) rotate(270deg) scale(0.5);
/*与上面的代码效果不一样 transform:rotate(90deg) translate(200px,50px) ;
} */
5.总结
●转换transform我们简单理解就是变形有2D和3D之分
●我们暂且学了三个分别是位移旋转和缩放
●2D移动translate(x, y)最大的优势是不影响其他盒子 ,里面参数用% ,是相对于自身宽度和高度来计算的
●可以分开写比如translateX(x)``和translateY(y)
●2D旋转rotate(度数)可以实现旋转元素 度数的单位是deg
●2D缩放sacle(x,y)里面参数是数字不跟单位可以是小数，最大的优势不影响其他盒子
●设置转换中心点transform-origin:xy;参数可以百分比、 像素或者是方位名词
●当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前
2、旋转.缩放中心点transform-origin: x y;
注意：
●注意后面的参数x和y用空格隔开
●x y默认转换的中心点是元素的中心点(50% 50%)
●还可以给xy设置像素或者方位名词(top bottom left right center)
transform-origin: 5px 5px;
/*以像素点5px 5px为中心*/
transform-origin: left bottom;
/*以左下角为中心*/
第十六章、动画
1、动画的作用
动画(animation)是css3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。相较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
制作动画的步骤：
1.先定义动画
2.在调用动画
用keyframes定义动画(类似定义类选择器)
<!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>
/* 动画不需要鼠标样式来控制，只要页面刷新就会自动执行 */
@keyframes move {
/* 开始 */
0% {
transform:translateX(0px);
}
/* 结束 */
100% {
transform: translateX(1000px);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 调用动画 必写*/
animation-name: move;
/* 持续时间 必写*/
animation-duration: 5s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
0%-100%称为动画序列
●0% 是动画的开始, 100%是动画的完成。这样的规则就是动画序列。
●在 @keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
●动画是使元素从一种样式逐渐变化为另-种样式的效果。可以改变任意多的样式任意多的次数。
●可用百分比来规定变化发生的时间 ,或用关键词"from"和"to" ,等同于0%和100%。
| 属性 | 描述 |
|---|---|
| @keyframes | 关键帧 |
| animation:; | 所有动画属性的简写属性，除了animation-play-state属性。 |
| animation-name:; | 规定@keyframes动画的名称。( 必须的) |
| animation-duration:; | 规定动画完成一个周期所花费的秒或毫秒，默认是0。( 必须的) |
| animation-timing-function:; | 规定动画的速度曲线，默认是"ease"."steps(5)"就是分几步完成动画 |
| animation-delay:; | 规定动画延迟开始，默认是0s。 |
| animation-iteration-count:; | 规定动画被播放的次数，默认是1，还有infinite(重复) |
| animation-direction:; | 规定动画是否在下一周期逆向播放，默认是"normal "，"alternate"逆播放 |
| animation-play-state:; | 规定动画是否正在运行或暂停。默认是"running" ,还有"paused". |
| animation-fll-mode:; | 规定动画结束后状态，保持结束状态"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>
/* 动画不需要鼠标样式来控制，只要页面刷新就会自动执行 */
/* 百分比必须是整数 */
/* 百分比是时间的划分比例 */
@keyframes move {
/* 开始 */
0% {
transform:translateX(0px);
}
/* 0% 动画可不写 */
25% {
transform: translate(1000px,0);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0,500px);
}
/* 结束 */
100% {
transform: translateX(0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 调用动画 必写*/
animation-name: move;
/* 持续时间 必写*/
animation-duration: 5s;
/* 运动曲线 */
animation-timing-function: ease;
/* 延迟时间 */
animation-delay: 2s;
/* 播放次数 infinite 无限循环播放 */
/* animation-iteration-count: infinite; */
/* 是否逆向播放 默认不normal alternate逆向播放*/
/* animation-direction: alternate; */
/* 结束状态 回到起始状态:backwards; 保持结束状态:forward;*/
animation-fill-mode: forwards;
}
div:hover {
/* 动画运动状态，默认运动:running; 悬停停止:paused;*/
animation-play-state: running;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、复合写法
animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
中间用空格隔开
例如：
animation: move 2s linear 0s 1 alternate forwards;
animation: move 2s alternate forwards;
/*默认样式可以不写，这四个必须写*/
animation: move1 2s linear 0s 1 alternate forwards,move2 2s linear 0s 1 alternate forwards;
/*多个动画中间用逗号隔开*/
动画运动状态，默认运动:running; 悬停停止:paused;
简写中没有这个属性，是应为这个属性要配合鼠标使用
/* 动画运动状态，默认运动:running; 悬停停止:paused;简写中没有这个属性，是应为这个属性要配合鼠标使用*/
animation-play-state: running;
第十七章、3D
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
●x轴:水平向右 注意: x右边是正值,左边是负值
●y轴:垂直向下 注意: y下面是正值,上面是负值
●Z轴:垂直屏幕 注意: 往外面是正值,往里面是负值
1.3D位移translate3d(x,y,z)
●transform:translateX(100px);仅仅是在x轴上移动
●transform:translateY(100px);仅仅是在Y轴上移动
●transform:translateZ(100px);仅仅是在Z轴.上移动(注意: translatez一般用px单位 百分比几乎不用) z轴上移动一般是看不见的，需要借助透视
●transform:translate3d(x,y,z);其中x、y. z分别指要移动的轴的方向的距离，不能省略，没有就写为0；
transform:translateX(100px) translateY(100px) translateZ(100px);
/*等价*/
transform:translate3d(100px,100px,100px);
/*需要借助透视才能看见z轴的效果*/
2.3D旋转rotate(x,y,z)
3D旋转指可以让元素在三维平面内沿着x轴, y轴, z轴或者自定义轴进行旋转。
语法：
●transform:rotateX(45deg) :沿着x轴正方向旋转45deg
左手准则
●左手的手拇指指向 x轴的正方向
●其余手指的弯曲方向就是该元素沿着x轴旋转的方向
●transform:rotateY(45deg) :沿着y轴正方向旋转45deg
左手准则
●左手的手拇指指向 y轴的正方向
●其余手指的弯曲方向就是该元素沿着y轴旋转的方向 (正值)
●transform:rotateZ(45deg) : 沿着Z轴正方向旋转45deg
左手准则
●左手的手拇指指向z轴的正方向
●其余手指的弯曲方向就是该元素沿着z轴旋转的方向 (正值)
●transform:rotate3d(x,y,z,deg) :沿着自定义轴旋转deg为角度(了解即可)
/* 矢量合成 */
/* 此时xyz如同向量，xyz代表了方向，且可以进行矢量合成 */
/* transform: rotate3d(x,y,z,deg); */
/*1. 沿x轴旋转 */
transform: rotate3d(1,0,0,90deg);
/*2. 沿y轴旋转 */
transform: rotate3d(0,1,0,90deg);
/*3. 沿z轴旋转 */
transform: rotate3d(0,0,1,90deg);
/*4. 沿矢量合成轴旋转 */
transform: rotate3d(1,1,0,90deg);
/* 5.矢量合成轴旋转 */
transform: rotate3d(1,1,1,90deg);
3.透视perspective
在2D平面产生近大远小视觉立体,但是只是效果二维的
●如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
●模拟人类的视觉位置 ,可认为安排-只眼睛去看
●透视我们也称为视距 ;视距就是人的眼睛到屏幕的距离
●距离视觉点越近的在电脑平面成像越大 ,越远成像越小
●透视的单位是像素
透视是给使用transform：translate3d(0,0,z);元素的父元素使用
透视写在被观察元素的父盒子上面的
d:就是视距,视距就是一一个距离人的眼睛到屏幕的距离。
z:就是z轴,物体距离屏幕的距离, z轴越大(正值)我们看到的物体就越大。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
/* 透视写到被观察元素的父盒子上面 */
/* 近大远小 */
/* 值代表到眼睛的距离 */
perspective: 500px;
/* perspective: 200px; */
}
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate3d(200px, 50px, 50px)
/* border: 1px solid red; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.3D呈现transform-style
3D效果存在严重的兼容性
建议同一个效果多浏览器测试
●控制子元索是否开启3维立体环境
●transform-style:flat;子元素不开启3d立体空间默认的
●transform-style:preserve-3d;子元素开启立体空间
●代码写给父级,但是影响的是子盒子
●这个属性很重要
<!DOCTYPE html>
<html lang="zh-CN">
<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>3D呈现</title>
<style>
body {
/* 透视给父级元素加 */
perspective: 500px;
}
.box {
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
transition: all 2s;
/*给父元素设置，让其子元素保持3d效果*/
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
第十八章、浏览器兼容问题
1.私有前缀
●-moz- :代表firefox浏览器私有属性
●-ms- :代表ie浏览器私有属性
●-webkit- :代表safari、chrome 私有属性
●-o- :代表Opera私有属性
2.写法
解决兼容性写法例如边框圆角问题
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
-ms-border-radius:10px;
border-radius:10px;
第十九章、移动端布局
1.浏览器内核问题
国内的UC和QQ .百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核.
总结:兼容移动端主流浏览器处理Webkit内核浏览器即可。
<!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">
<!-- user-scalable=no 是否进行缩放-->
<!-- initial-scale=1.0 初始缩放倍数 -->
<!-- maximum-scale=1.0 最大缩放倍数 -->
<!-- minimum-scale=1.0 最小缩放倍数 -->
<title>Document</title>
</head>
<body>
</body>
</html>
2.像素比问题
物理像素&物理像素比
●物理像素点指的是屏幕 显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7入8是750* 1334
●我们开发时候的1px不是一定等于1个物理像素的
●PC端页面, 1个px等于1个物理像素的,但是移动端就不尽相同
●一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比
3.移动端布局方式
1.单独制作移动端页面（主流）
●流式布局 (百分比布局)
●流式布局，就是百分比布局,也称非固定像素布局。
●通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧镇充。
●流式布局方式是移动web开发使用的比较常见的布局方式。
●flex 弹性布局(强烈推荐)
flex布局原理
flex是flexible Box的缩写,意为"弹性布局" ,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
●当我们为父盒子设为flex布局以后,子元素的float. clear 和vertical-align属性将失效。
●伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
总结flex布局原理:
就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
父元素属性
●flex-direction:; :设置主轴的方向
| 属性值 | 描述 |
|---|---|
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
●justify-content:; 设置主轴上的子元素排列方式
| 属性值 | 描述 |
|---|---|
| flex-start | 默认值从头部开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 从主轴居中对齐（如果主轴是x轴则水平居中） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间 |
●flex-wrap:; 设置子元素是否换行
flex布局中，默认子元素是不换行的，如果装不下就缩小子元素的宽度，放到父元素里面
| 属性值 | 描述 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
●align-content:; 设置侧轴上的子元素的排列方式(多行)
单行情况下无效
| 属性值 | 描述 |
|---|---|
| flex-start | 默认值在侧轴头部开始排列 |
| flex-end | 从侧轴尾部开始排列 |
| center | 从侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
●align-items:; 设置侧轴上的子元素排列方式(单行)
| 属性值 | 描述 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中（垂直居中） |
| stretch | 拉伸（默认值），子元素不要给高度 |
●flex-flow:; 复合属性。相当于同时设置了flex-direction和flex-wrap
flex-flow:row wrap;
子元素属性
●flex子项目占的份数，
●align-self控制某一子项自己在侧轴的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch,
●order属性定义子项的排列顺序(前后顺序)
默认是0，越小越靠前。
order:-1;
●less+rem+媒体查询布局
rem单位
rem (root em)是一个相对单位 ,类似于em , em是元素字体大小。
不同的是rem的基准是相对于htm元素的学体大小。
比如,根元素( html )设置font-size= 12px;非根元素设置width=2rem;则换成px表示就是24px.
rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
媒体查询
@media mediatype and|not|only (media feature){
css-code;
}
-
用@media 开头注意@符号
-
mediatype 媒体查询
-
关键字 and not only
-
media feature 媒体特征必须有小括号包含
/* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
/* max-width 小于等于800 */
/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
@media screen and (max-width: 500px) {
body {
background-color: purple;
}
}
less基础
Less是CSS的预处理语言，它扩展了CSS的动态特征
我们首先新建一个后缀名为less的文件 .在这个less文件里面书写less语句.
-
●Less变量
@变量名:值; @color:red;
变量命名规范
-
必须有@为前缀
-
不能包含特殊字符
-
不能以数字开头
-
大小写敏感
-
●Less 编译
-
●Less 嵌套
.header { width: 200px; height: 200px; background-color: pink; // 1.子元素可以直接写到父元素里面 a { color: red; //伪类,伪元素，交集选择器前要使用&符号 &:hover{ color: blue; } } } .nav { .log { color: green; } &::before { content: "123"; } } -
●Less 运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*).除(/)算术运算。
@border:5px + 5; @baseFont:50px; html { font-size: @baseFont; } div { width: 200px - 50; height: 200px * 2; border: @border solid red; background-color:#666-#222;//#444444 } // img { // width: (82 / 50rem);//1.64rem // height: (82 / 50rem);//1.64rem // } img{ width: (82rem / @baseFont); height: (82rem / @baseFont); } //运算符两侧必须要加空格隔开 //两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准 //两个数参与运算 如果两个数都有单位，而且单位不一样 最后的结果以第一个单位为准@import "common"; // @import 导入的意思 可以把一个less样式文件导入到另外一个less样式文件里面 // link 是把一个 样式文件引入到 html页面里面
●混合布局
2.响应式页面兼容移动端页面（其次）
●媒体查询
响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现
不同屏幕下,看到不同的页面布局和样式变化。
●bootstarp
●超小屏幕 (手机,小于768px) : 设置宽度为100%
●小屏幕(平板， 大于等于768px) : 设置宽度为750px
●中等屏幕 (桌而显示器，大于等于992px) : 宽度设置为970px
●大屏幕 (大桌面显示器,大于等于1200px) :宽度设置为1170px
==框架:==顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
优点：
●标准化的html+css编码规范
●提供了一套简洁、直观。强悍的组件
●有自己的生态圈,不断的更新迭代日
●让开发更简单,提高了开发的效率
Bootstrap外部引用：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.cn/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
container类是bootstrap预先定义好的类
bootstrap栅格系统
栅格原理:通过一系列的行( row )与列( column )的组合来创建页面布局,将盒子里面的内容划分为若干的等宽的列，而bootstrap是.container盒子划分为等宽的12列。
| 超小屏幕(手机)< 768px | 小屏设备(平板)> =768px | 中等屏幕(桌面显示器)> =992px | 宽屏设备(大桌面显示器)>=1200px | |
|---|---|---|---|---|
| .container最大宽度 | 自动(100%) | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列( column)数 |
●行 ( row )必须放到container布局容器里面
●我们实现列的平均划分需要给列添加类前缀
●xs-extra small :超小; sm-small :小; md-medium:中等 ; lg-large :大;
●列( column )大于12 ,多余的“列( column)”所在的元素将被作为一个整体另起一行排列
●每一列默认有左右15像素的padding
●可以同时为-列指定多个设备的类名,以便划分不同份数例如class=“col-md-4 col-sm-6”
列嵌套
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<link rel="stylesheet" href="./../bootstrap/css/bootstrap.min.css">
<style>
.row>div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<!-- 当我们进行列嵌套时使用 .row 可以消除父元素的内边距-->
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</body>
</html>
列偏移
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<link rel="stylesheet" href="./../bootstrap/css/bootstrap.min.css">
<style>
.row div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 ">左盒子</div>
<div class="col-md-4 col-md-offset-4">右盒子</div>
<!-- 如果第一个设置偏移，第二个未设置偏移，盒子整体都会向左偏移四格 -->
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">左盒子</div>
<div class="col-md-4 ">右盒子</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">左盒子</div>
</div>
</div>
</body>
</html>
列排序
| 类名 | 描述 |
|---|---|
| .col-md-push-8 | 大屏下向右偏移8列 |
| .col-md-pull-4 | 大屏下向左偏移4列 |
<!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>
<link rel="stylesheet" href="./../bootstrap/css/bootstrap.min.css">
<style>
.row div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左边盒子</div>
<div class="col-md-8 col-md-pull-4">右边盒子</div>
</div>
<div class="row">
<div class="col-md-4">左边盒子</div>
<div class="col-md-8">右边盒子</div>
</div>
</div>
</body>
</html>
响应式工具
| 类名 | 描述 |
|---|---|
| .hidden-xs | 超小屏隐藏 |
| .hidden-sm | 小屏隐藏 |
| .hidden-md | 大屏隐藏 |
| .hidden-lg | 超大屏隐藏 |
| 类名 | 描述 |
|---|---|
| .visible-lg | 在特定屏幕下显示，其他屏幕下隐藏 |
| .visible-md | |
| .visible-sm | |
| .visible-xs |
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<link rel="stylesheet" href="./../bootstrap/css/bootstrap.min.css">
<style>
.row>div:nth-child(3) {
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3">
<span class="visible-lg">在特定屏幕下显示</span>
</div>
<div class="col-md-3 col-sm-3">2</div>
<div class="col-md-3 hidden-sm">消失</div>
<div class="col-md-3 col-sm-3">4</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3">1</div>
<div class="col-md-3 col-sm-3">2</div>
<div class="col-md-3 hidden-sm">消失</div>
<div class="col-md-3 col-sm-3">4</div>
</div>
</div>
</body>
</html>
重点
==注意:==在进行媒体查询时可能会遇到同权重问题，查看使用的顺序。
d-6">a
##### 列偏移
````html
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<link rel="stylesheet" href="./../bootstrap/css/bootstrap.min.css">
<style>
.row div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 ">左盒子</div>
<div class="col-md-4 col-md-offset-4">右盒子</div>
<!-- 如果第一个设置偏移，第二个未设置偏移，盒子整体都会向左偏移四格 -->
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">左盒子</div>
<div class="col-md-4 ">右盒子</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">左盒子</div>
</div>
</div>
</body>
</html>
列排序
| 类名 | 描述 |
|---|---|
| .col-md-push-8 | 大屏下向右偏移8列 |
| .col-md-pull-4 | 大屏下向左偏移4列 |
<!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>
<link rel="stylesheet" href="./../bootstrap/css/bootstrap.min.css">
<style>
.row div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左边盒子</div>
<div class="col-md-8 col-md-pull-4">右边盒子</div>
</div>
<div class="row">
<div class="col-md-4">左边盒子</div>
<div class="col-md-8">右边盒子</div>
</div>
</div>
</body>
</html>
响应式工具
| 类名 | 描述 |
|---|---|
| .hidden-xs | 超小屏隐藏 |
| .hidden-sm | 小屏隐藏 |
| .hidden-md | 大屏隐藏 |
| .hidden-lg | 超大屏隐藏 |
| 类名 | 描述 |
|---|---|
| .visible-lg | 在特定屏幕下显示，其他屏幕下隐藏 |
| .visible-md | |
| .visible-sm | |
| .visible-xs |
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<link rel="stylesheet" href="./../bootstrap/css/bootstrap.min.css">
<style>
.row>div:nth-child(3) {
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3">
<span class="visible-lg">在特定屏幕下显示</span>
</div>
<div class="col-md-3 col-sm-3">2</div>
<div class="col-md-3 hidden-sm">消失</div>
<div class="col-md-3 col-sm-3">4</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3">1</div>
<div class="col-md-3 col-sm-3">2</div>
<div class="col-md-3 hidden-sm">消失</div>
<div class="col-md-3 col-sm-3">4</div>
</div>
</div>
</body>
</html>
重点
==注意:==在进行媒体查询时可能会遇到同权重问题，查看使用的顺序。
1276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
