HTML
html超文本标记语言
- 输入！可以生成html基本骨架
- 新建文件Ctrl+N
- Ctrl+加号可以放大，加减号可以缩小
https://www.w3school.com.cn/html/index.asp 可以查询用法
基本标签
标签关系：包含关系，并列关系 <head> 包含<title> <title/> <head/>
标题标签：<h1> <h1/>
段落标签：<p> <p/>
换行标签：<br/>
水平线标签：<hr>
注释：<!-- -->
文本格式化标签
加粗标签 <strong></strong> 更强烈 推荐
加粗标签<b></b>
倾斜 <em></em> 更强烈 推荐
倾斜<i> </i>
删除线 <del></del> 更强烈 推荐
删除线 <s> </s>
下划线 <ins></ins> 更强烈 推荐
下划线 <u> </u>
<div> 和 <span>标签 盒子没有语义 用来布局
<div> 独占一行 大盒子
<span> 一行可以放几个 小盒子
特殊字符
空格符
大于号 <
小于号 >
& 和号 &
￥ 人民币 ¥
图像标签
<img src="haha.jpg" />
alt 替换文本，图片不可以正常显示的时候用文字替换
title 鼠标放在图片的时候提示的文本
width 图片的宽度
height 图片的高度
border 图片的边框
超链接标签
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
默认的值是_self当前窗口打开
_blank新的窗口打开
1．外部链接:例如< a href="http:// www.baidu.com ">百度</a >。
2．内部链接:网站内部页面之间的相互链接.直接链接内部页面名称即可，例如< a href="index.html">首页</a >。
3．空链接:如果当时没有确定链接目标时，< a href="#">首页</a >。
4.下载链接:如果href里面地址是一个文件或者压缩包，会下载这个文件。
5．网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
6.锚点链接锚点链接：点击链接，可以快速定位到页面的某个位置。
1.在链接文本的href属性中，设置属性值为#名字 的格式，如<a href=“#two”>第二集</a>
2.找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id=“two”>第二集介绍</h3> 作者：新年快乐丶仲夏 https://www.bilibili.com/read/cv13319864 出处：bilibili
表格标签
老师总结：表格不是用来布局页面的，而是用来展示数据的。
表格的基本语法：
<table>
<tr>
<td>单元格内的文字</td>
...
<tr>
...
</table>
1.<table></table> 是用于定义表格的标签。
2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
3.<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4.字母td指表格数据( table data), 即数据单元格的内容。
<th>:标签表示html表格的表头部分（table head的缩写） 一般不用，一般会用css设置
表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。
（这些属性要写到表格标签table 里面去）
表格属性 属性值 描述
align left，center，right 表格对齐方式
border 表格边框
cellpadding 像素值 规定单元格和里面文字的距离，默认1像素。
cellspacing 像素值 规定单元格之间的空白，默认2像素。
width 像素值或百分比 规定表格的宽度
表格结构标签:
1.<thead></thead>:用于定义表格的头部，<thead>内部必须拥有<tr>标签。一般是唯一第一位。
2.<tbody><tbody>:用于定义表格的主体名主要用于放数据本体。
3.以上标签都是放在<table></table>标签中。
合并单元格
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
目标单元格：（写合并代码）
跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最左侧单元格为目标单元格，写合并代码。
合并单元格三部曲：
1,先确定跨行还是跨列
2，找目标单元格
3，删除多余单元格
<table width = "500" height = "266" border="1" cellspacing = "0">
<tr>
<td>1,1</td>
<td colspan="2">1,2</td>
</tr>
<tr>
<td rowspan="2">2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,2</td>
<td>3,3</td>
</tr>
</table>
列表标签
列表就是用来布局的。 列表最大的特点就是整齐，整洁，有序，它作为布局会更加自由和方便。
无序列表
无序列表的基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
1.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2.<li>与</li>之间相当于一个容器，可以容纳所有元素。
3.无序列表会带有自己的样式属性，但在实际使用时，我们会用css来设置。
有序列表
有序列表的基本语法如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2.<li>与</li>之间相当于一个容器，可以容纳所有元素。
3.有序列表会带有自己的样式属性，但在实际使用时，我们会用css来设置。
自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。
其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
1.<dl>标签里面只允许出现<dt>标签和<dd>标签。
2.<dt> 和 <dd>个数没有限制，经常是一个<dt>对应多个<dd>.
- 薯片
- 可乐
- 薯片
- 可乐
零食
零食
表单标签
使用表单的目的，收集用户信息
在HTML中，一个完整的表单通常用由表单域，表单控件（也称为表单元素）和提示信息3个部分组成。
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form> 会把它范围内的表单元素信息提交给服务器。
表单域的语法格式如下：
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件</form>
- input 输入表单元素
- select下拉表单元素
- textarea文本域表单元素
input
<form action = "xxx.html" method = "post" >
用户名：<input type="text" value="请输入用户名"> <br/> //value是默认值
密码：<input type="password">
<!-- radio单元按钮 必须有同一个name值才可以-->
性别：男<input type="radio" name="sex"> 女<input type="radio" name = "sex">
<!-- checkbox多选-->
爱好：唱歌<input type="checkbox" name = "hobby"> 吃饭<input type="checkbox" name = "hobby"> 睡觉<input type="checkbox" name = "hobby">
<input type="submit" value="提交">
<input type="reset"> 重置
</form>
普通按钮：<input type="button"> 一般结合js使用
文件域：<input type="file" > 一般用户上传头像
1.name和value 是每个表单元素都有的属性值，主要给后台人员使用。
2.name 表单元素的名字，要求单选按钮和复选框要有相同的name值。
属性checked 属性值：checked 规定此input元素首次加载时应当被选中
属性maxlength 属性值：正整数 规定输入字段中的字符的最大长度
1.checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素。
2.maxlength 是用户可以在表单元素输入的最大字符数，一般较少使用。
label标签
<label>标签为input元素定义标注（标签）
<label> 标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，来增加用户体验。
select
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。
<select>也属于表单 ，需要包含在表单域<form>里面
textarea文本域标签
使用场景:当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。
在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
<textarea>也属于表单 ，需要包含在表单域<form>里面
CSS
选择器
CSS选择器的作用：选择器就是根据不同需求把不同的标签选出来，这就是选择器的作用。简单来说，就是选择标签用的。
选择器可以分为基础选择器和复和选择器两大类
-
基础选择器
-
标签选择器
<p>haha<p/> <p>haha<p/> <p>haha<p/> <style> p { color: green; } </style> 通过标签名写样式 -
类选择器 class里面的名字
<p class = "red" >haha<p/> <p>haha<p/> <p>haha<p/> <style> .red { color: green; } </style> 多类名使用方式： <div class="red font20">亚瑟</div> 1.在标签class属性中写 多个类名 2.多个类名中间必须用空格分开
-
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。 HTML元素以 id属性 来设置id选择器，CSS中 id 选择器以“ # ”来定义。 <p id = "red" >haha<p/> <p>haha<p/> <p>haha<p/> <style> #red { color: green; } </style>
-
通配符选择器
在CSS中，通配符选择器使用“ * ”定义，它表示选取页面中所有元素（标签）。
-
- 复和选择器
字体属性
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。
属性 表示 注意点
font-size 字号 我们通常用的单位是px像素，一定要跟上单位
font-family 字体 实际工作中按照团队约定来写字体
font-weight 字体粗细 记住加粗是700或者bold 不加粗是normal或者400记住数字不要跟单位
font-style 字体样式 记住倾斜是italic不倾斜是normal工作中我们最常用normal
font 字体连写 1.字体连写是有顺序的不能随意换位置⒉.其中字号和字体必须同时出现
front-family: "字体"；
各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体: body {font-family. 'Microsoft YaHei' ,tahoma,arial,"Hiragino Sans GB';}
CSS使用font-size属性定义字体大小。
p {
font-size: 20px;
}
px(像素)大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给body指定整个页面文字的大小
CSS使用font-weight属性设置文本字体的粗细。
p {
font-weight: bold;
}
属性值 描述
normal 默认值(不加粗的)
bold 定义粗体(加粗的)
100~900 400等同于normal，而700等同于bold注意这个数字后面不跟单位
CSS使用font-style属性设置文本的风格。
p{
font-style: normal;
}
属性值 作用
normal 默认值，浏览器会显示标准的字体样式 font-style: normal;
italic 浏览器会显示斜体的字体样式。
注意:平时我们很少给文字加斜体，反而要给斜体标签( em , i )改为不倾斜字体。
字体属性可以把以上文字样式综合来写,这样可以更节约代码:
body {
font: font-style font-weight font-size/line-height font-family;
}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用
文本属性
Css Text (文本)属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
属性 表示 注意点
color 文本颜色 我们通常用十六进制比如而且是简写形式#fff
text-align 文本对齐 可以设定文字水平的对齐方式
text-indent 文本缩进 通常我们用于段落首行缩进2个字的距离text-indent: 2em;
text-decoration 文本修饰 记住添加下划线underline 取消下划线none
line-height 行高控制 行与行之间的距离
color一般两种表示形式十六进制 rgb(255,255,255)
text-align属性用于设置元素内文本内容的水平对齐方式。
div {
text-align: center;
}
属性值 解释
left 左对齐(默认值)
right 右对齐
center 居中对齐
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
div {
text-decoration: underline;
}
属性值 描述
none 默认。没有装饰线(最常用)
underline 下划线。链接a自带下划线（常用)
overline 上划线。(几乎不用)
line-through 删除线。(不常用)
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
div {
text-indent : 10px;
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
p {
text-indent: 2em;
}
em是一个相对单位，就是当前元素( font-size)1个文字的大小,如果当前元素没有设置大小，则会按照父元素的1个文字大小。
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离.
p {
line-height : 26px;
}
Css引入三种方式
按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：
1.行内样式表（行内式）
行内样式表是在元素标签内部的style属性中设定css样式。适合于修改简单样式
<div style="color: red; font-size: 12px;">你是猪</div>
2.内部样式表（嵌入式）
内部样式表是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。
<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中。
通过此种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，但是并没有实现结构与样式完全分离
3.外部样式表（链接式）
外部样式表的核心是：样式单独写到css文件中，之后把css文件引入到html页面中使用。
新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中
### Emment语法
快速生成HTML结构语法
- 生成标签直接输入标签名按tab键即可比如div 然后tab键，就可以生成
- 如果想要生成多个相同标签加上就可以了比如div3就可以快速生成3个div
- 如果有父子级关系的标签，可以用>比如ul> li就可以了
- 如果有兄弟关系的标签，用＋就可以了比如div+p
- 如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了
- 如果生成的div类名是有顺序的，可以用自增符号$
- 如果想要在生成的b标签内部写内容可以用{}表示
复合选择器
在css中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
- 复合选择器可以更准确、更搞笑的选择目标元素（标签）
- 复合选择器是两个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分割。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法规范： 元素1 元素2 { 样式声明 }
上述语法表示 原则元素1里面的所有元素2（后代元素）。
例： ul li { 样式声明 } （选择 ul 里面所有的 li 标签元素）
· 元素1和元素2中间用空格隔开
· 元素1是父级，元素2是子级，最终选择的是元素2
· 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
· 元素1和元素2可以是任意基础选择器
子元素选择器（重要）
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
语法如下：
元素1 > 元素2 { 样式声明 }
上述语法表示 选择元素1 里面的所有直接后代（子元素）元素2.
例如：
div > p { 样式声明} （选择 div 里面所有最近一级 p标签元素）
元素1和元素2 中间用 大于号 > 隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子之类都不归他管，也可以叫做亲儿子选择器。
并集选择器（重要）
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法如下：
元素1，元素2 { 样式声明 }
上述语法表示选择 元素1 和 元素2
例如： ul, div { 样式声明 } （选择 ul 和 div标签元素）
元素1 和元素2 中间用 逗号隔开
逗号可以理解为 和 的意思
并集选择器通常用于集体声明
伪类选择器
伪类选择器用于像某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
连接伪类选择器
伪类选择器书写最大的特点用冒号（：）表示
- a : link 选择所有未被访问的链接
- a : visited选择所有已被访问的链接
- a : hover 选择鼠标指针位于其上的链接
- a : active 选择活动链接（鼠标按下未弹起的链接)
链接伪类选择器注意事项：
- 为了确保生效，请按照 LVHA 的循顺序声明 ：link， :visited, :hover, :active。
- 记忆法 love hete
- 因为a链接 在浏览器中具有默认样式，所以我们实际工作中都需要给链接单位单独指定样式
focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input> 类 表单元素才能获取，因此这个选择器也主要针对表单元素来说。
语法如下：
input：focus {
background-color:yellow;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n1lB6FYj-1653619274512)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20220421160047423.png)]
元素显示模式
元素显示模式就是元素（标签）以什么方式进行显示，比如
HTML元素一般分成 块元素 和行内元素 两种类型
块元素
常见的块元素有
-
- ，其中
标签是最典型的块元素。
- ，其中
块元素特点：
-
自己独占一行
-
高度，宽度、外边距以及内边距都可以控制。
-
宽度默认是容器（父级宽度)的100%。
-
是一个容器及盒子，里面可以放行内或者块级元素。
-
文字类的元素内不能使用块级元素
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div> 同理，<h1> - <h6>等都是文字类块级标签，里面也不能放其他块级元素
行内元素
常见的行内元素有<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>等， 其中<span>标签是最典型的行内元素。有的地方也将行内元素成为内联元素。
行内元素的特点：
1，相邻行内元素在一行上，可以显示多个。
2，高、宽直接设置是无效的。
3，默认高度近视它本身内容的宽度。
4，行内元素只能容纳文本或 其他 行内元素
注意：
链接里面不能再放链接
特殊情况链接<a >里面可以放块级元素，但是给<a>转换一下块级模式最安全
行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<td>,他们同时具有块元素和行内元素的特点。 有些资料称他们为行内块元素。
行内块元素的特点：
和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
默认宽度就是它本身内容的宽度（行内元素特点）。
高度，行高，外边距以及内边距都可以控制（块级元素特点）
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只可以放一个 | 可以设置宽度和高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行只可以放多个 | 不可以设置宽度和高度 | 本身内容的宽度 | 容纳文本或者其他行内元素 |
| 行内块元素 | 一行只可以放多个 | 可以设置宽度和高度 | 本身内容的宽度 |
显示模式的转换（重要）
行内元素 转换成 块元素： display：block；
块元素 转换成 行内元素： display：inline；
其他元素 转换成 行内块： display：inline-block；
文字垂直居中
让文字的行高等于盒子的高度就可以了
背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
背景颜色
背景颜色：background-color
默认颜色默认值是**transparent(透明)**我们也可以手动指定背景色为透明色
背景图片
background-image 属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置 （精灵图也是一种场景应用）
语法如下：
background-image ： none | url (url)
需要在html页面上 对着背景图像进行平铺，可以使用 background-repeat 属性
背景平铺
参数值 作用
repeat 背景图像在纵向和横向上平铺(默认的)
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺
背景位置-方位名词
利用 background-position 属性可以改变图片在背景中的位置。
语法如下：
background-position：x y;
参数代表的意思是 x坐标和y坐标。可以使用 方位名词 或者 精确单位
1.参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left效果一致。
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
2，参数时精确单位
参数时精确定位的时候，第一个是x坐标，第二个是y坐标
background-position：50px 20px;
3.参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
背景图片固定
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment 后期可以制作视差滚动的效果。
语法如下：
background-attachment ：scroll | fixed
参数： scroll：背景图像是随对象内容滚动 fixed：背景图像固定
背景色半透明
background：rgba(0,0,0,0.3); //0.3代表透明度 IE9以上的浏览器可以
CSS3为我们提供了背景颜色半透明的效果。
background:rgba(0,0,0,0.3);
最后一个参数 是alpha 透明度的缩写，取值范围在0-1 之间
我们习惯把0.3的 0 省略掉，写作background:rgba(0,0,0,.3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3 新增属性，是IE9+ 版本浏览器才支持的
但是在实际开发中，我们不太注意兼容性写法了，可以放心使用
CSS的三大特性
-
层叠性
-
继承性
-
优先级
层叠性原则： （覆盖效果）
样式冲突，遵循的是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠CSS中的继承：字标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
注意：子元素可以继承父元素的样式（text- font- line- 这些元素开头的可以继承，以及color属性）如果同一个元素指定多个选择器，就会有优先级的产生。
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
权重有四位组成不会进位，从左到右比较
继承的权重是0
权重叠加问题：
ul li { 0,0,0,1 + 0,0,0,1 = 0,0,0,2 会是红色
color: red;
}
li{
color: green;
}
CSS盒子模型
盒子模型组成：**border 边框 content内容 padding内边距 margin外边距 **
盒子边框
border可以设置元素的边框，边框有三部分组成：边框粗细、边框样式、边框颜色。
border：
border-width
border-style 实线边框 solid 虚线边框 dashed 点线边框 dotted
border-color
border:1px solid red; //没有顺序要求
border-top 上
border-bottom 下
border-left左
border-right右 四个边不一样可以单独写
border-cpllapse: callapse; 合并相邻的边框
padding：内边距
margin：外边距
margin：0 auto 就是左右居中
导航栏中字数不一样的时候可以选择不给盒子设置宽度，给一个padding，撑开盒子
外边距可以实现盒子水平居中，水平居中盒子必须指定了宽度才可以，块级元素才可以，行内块元素和行内元素使用text-align：center的方式
外边距合并：
对于两个嵌套关系(父子关系的快元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值)
解决方案
- 可以为父元素定义上边框
- 可以为父元素定义内边距
- 可以为父元素添加overflow:hidden
清除内外边距
我们在布局之前可以先清除内外边距
*{
padding: 0;
margin: 0;
}
行内元素尽量只设置左右边距，不要设置上下边距，但是行内转块级和行内块元素就可以
圆角边框
border-radius: 5px;
盒子阴影
可以用 box-shadow属性给盒子添加阴影
box-shadow:h-shadow v-shadow blur spread color inset; //外阴影outset不写，写的话就没有用了
水平方向 垂直方向 虚实 颜色
阴影不占用空间
原来没有影子，鼠标经过才有
div：hover{
}
文字阴影
text-shadow : 10px 10px 10px rgba(0,0,0,0.3)
CSS浮动
页面布局的本质——用css来摆放盒子。把盒子摆放到相应的位置
Css提供了三种传统的方式
- 普通流（标准流） 标签按照规定好的默认方式排序
- 浮动 可以改变标签的默认排列方式
- 定位
浮动特性
- 浮动元素会脱离标准流 不再保留原来的位置
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
浮动的元素都是贴在一起的（不会有空隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。 如果行内元素有了浮动以后，就有了行内块元素的特点
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法如下：
选择器 { float:属性值；}
属性值： none ：元素不浮动（默认）
left ： 元素向左浮动
right：元素向右浮动
先用标准流的父元素上下排列，之后内部子元素采取浮动来排列左右位置，符合网页布局第一准则
浮动布局的注意点：
- 浮动和标准流父盒子搭配使用
- 一个元素浮动了，理论上其余的兄弟元素也要浮动
清除浮动
由于父盒子很多情况下，不方便给高度，但是子盒子浮动有不占有位置，最后父级盒子高度为0时，就会影响下面的标准盒子
清除浮动的本质是，清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级会根据浮动的盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
清除浮动的策略：闭合策略
清除浮动的方法：
- 额外标签法也称为隔墙法
- 父级元素添加overflow属性
- 父级元素添加after伪元素
- 父级元素添加双伪元素
1，额外标签法
- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构性比较差
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yX9sONJm-1653619274516)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\image-20220422155700175.png)]
2，父级元素添加overflow属性
.fu{
overflow:hidden;
}
3,父级元素添加after伪元素
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;
}
然后再父div的class中加入clearfix
4，父级元素添加双伪元素
.clearfix:before，
.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
css定位
position
定位的组成
定位=定位模式+边偏移
定位模式
-
static 静态定位
-
relative 相对定位
以自己原来的位置移动
虽然这个盒子走了，但是原来的位置还会保留
-
absolute 绝对定位
绝对定位是相对于父元素，如果父元素没有定位，以浏览器为主，绝对定位不占用原来的位置
-
flxed 固定定位 position：flxed
- 滚动页面也不动，以浏览器的可视化窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 可以看做是一个特殊的绝对定位
-
粘性定位：sticky position：sticky; top:10px 距离顶部10px的时候固定不动
- 滑动一定的距离后再固定不动
- 占有原来的位置
边偏移
- top
- bottom
- left
- right
定位的叠放次序
可以使用z-index来控制盒子的前后次序
- 数值可以是正数，负数，0.默认是auto，数值越大，盒子越靠上
- 如果值相同，按书写顺序，后来者居上
- z-index后面数字没有单位
- 只要定位的盒子才有z-index属性
行内元素加了绝对定位或者固定定位，就可以直接设置高度和宽度
块级元素加了绝对定位或者固定定位，如果不给默认高度或宽度，默认是内容大小
浮动不会压住文字内容，绝对定位会
元素的显示与隐藏
- display 显示隐藏 位置也不保留
- display：none ；隐藏对象
- diaplay：block；除块级元素之外，同时还有显示元素的意思
- visibility显示隐藏 可见性 继续占有原来的位置
- visibility：visible 可见
- visibility：hidden 不可见
- overflow溢出显示隐藏
- 盒子装不下时，溢出的元素进行隐藏
- overflow：visible 可见
- overflow：hidden 不可见
- overflow: scroll 溢出的部分显示滚动条 ，不溢出也显示滚动条
- overflow: auto 溢出的时候显示滚动条
css高级
精灵图（sprites）
为了有效的减少服务器接收和发送请求的次数，提高页面的效率，出现了css精灵图
把多张图放在一个图片上，用的时候就不需要再去访问服务器了
使用精灵图的核心：
- 吧多个小图片整合到一个大图中
- 大图片被称为精灵图（sprites）或者雪碧图
- 移动背景图片的位置，此时可以使用background-position
- 移动的距离就是这个目标图片的x和y轴
文字图标
文字图标可以为前段工程师提供一种高效的图标使用方式，展示的是图标，本质输入文字
- 轻量级∶一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
- 灵活性:本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性:几乎支持所有的浏览器，请放心使用
注意:字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结:
1．如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2、如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
字体图标的推荐网站 - icomoon字库 国外，慢
- iconfont字库 阿里妈妈，免费
使用
- 下载文字图标
- 放在根目录下
- 字体声明
Css三角
四个边框改为四个颜色，就是四个三角形
选择三个该为透明色，就是一个三角形
.box{
width: 0;
height: 0;
line-height: 0;//考虑兼容性写的
font-size: 0;//考虑兼容性写的
border: 50px solid transparent;
border-left-color: pink;
margin: 100px auto;
}
<div class="box"></div>
鼠标样式（cursor）
| 属性值 | 描述 |
|---|---|
| default | 小白箭头 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
轮廓线
标单点击输入的时候的轮廓线
input{
outline：none；
}
文本域
textarea{
resize：none；
}
vertical-align属性应用
css的vertical-align属性的使用场景：经常用于设置图片或者表单（行内块元素和文字的垂直对齐）
它只针对行内元素或者行内块元素有效
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nLjtpKlp-1653619274516)(file:///C:\Users\mi\Documents\Tencent Files\3359514063\Image\C2C\C2423818487A78BA52E878A2DBB8AF66.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bmwl8XOX-1653619274517)(file:///C:\Users\mi\Documents\Tencent Files\3359514063\Image\C2C\6F0ED99ED4BC2456A248E76D3A51902C.jpg)]
解决图片底部的空白缝隙
- vertical-align不可以是基线对齐就可以解决（提倡使用）
- 图片转化为块级元素也可以
文字溢出省略号显示
-
单行文本
write-space：normal 显示不完换行 write-space：nowrap 显示不完不换行 text-overflow：ellipsis 一行显示不完后面出现省略号 -
多行文本
overflow: hidden; text-overflow: ellipsis; 弹性伸缩盒子模型显示 display: -webkit-box; 限制在一个块元素显示的文本的行数 -webkit-line-clamp: 2; 设置或检索伸缩盒子对象的子元素的排列方式 -webkit-box-orient: vertical;布局技巧
maigin负值
根据给盒子加maigin-left:-1px;
可以防止边框叠加变粗
css初始化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CxztuevC-1653619274517)(file:///C:\Users\mi\Documents\Tencent Files\3359514063\Image\C2C\AE228F71A97B487D0C91143D8484A472.jpg)]
Html5和Css3提高
html5的新特性主要是针对于以前的不足，增加了一些新特性、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是IE9+以上的版本的浏览器支持，如果不考虑兼容性问题，可以大量使用这些新特性。
html新特性
html新增的语义化标签
<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 底部标签
注意：
- 这些语义化标准主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中，需要把这些元素转化为块级元素
- 移动端不存在兼容性，更喜欢使用这些标签
- HTML5新增了很多标签，需要慢慢学习
1.2 多媒体标签
新增的多媒体标签主要包含两个：
-
音频：
-
视频：
使用他们可以很方便的在页面中嵌入音频和视频，而不再去使用flash或其他浏览器插件
1.2.1 视频
HTML5在不使用插件的情况下，也可以原生地支持视频格式播放，但是支持的格式有限
| 浏览器 | MP4 | WebM | ogg |
|---|---|---|---|
| Internet Explorer | 支持 | 不支持 | 不支持 |
| Chorme | 支持 | 支持 | 支持 |
| Firefox | 支持（从Firefox21 版本开始、 Linux系统从Firefox30 开始） | 支持 | 支持 |
| Safari | 支持 | 不支持 | 不支持 |
| Opera | 支持 | 支持 | 支持 |
<video src="url" controls="controls"></video>
兼容性写法
<video width="300">
<source src="media.mp4" type="video/mp4">
<source src="media.ogg" type="video/ogg">
您的浏览器暂不支持video标签播放视频
</video>
常见的属性：
| 属性 | 值 | 说明 |
|---|---|---|
| autoplay | autoplay | 视频自动播放（chorme需要添加muted属性才可以自动播放） |
| controls | controls | 向用户展示视频控件 |
| width | 像素 | 设置播放器宽度 |
| height | 像素 | 设置播放器高度 |
| loop | loop | 是否循环播放视频 |
| preload | auto(预先加载视频)；none(不预加载视频) | 规定是否预加载视频（若设置了autoplay属性则会忽略） |
| muted | muted | 静音播放 |
| poster | 图片路径 | 加载等待时显示的图片 |
| src | 视频路径 | 视频url |
1.2.2 音频
<audio src="url" controls="controls"></audio>
<audio controls="controls">
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的浏览器暂不支持audio标签。
</audio>
常见属性：
| 属性 | 值 | 说明 |
|---|---|---|
| autoplay | autoplay | 音频就绪后自动播放 |
| controls | controls | 向用户展示音频控件 |
| loop | loop | 音频循环播放 |
| src | url | 要播放音频的url |
- chorme禁止了音频的自动播放
1.2.3 多媒体标签总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- chorme禁止了音频和视频的自动播放属性
- 视频标签是重点，我们经常设置自动播放，取消控件，循环和设置大小属性
1.3 新增input表单
type=“email” 限制用户输入的必须为邮箱
type=“url” 限制用户输入的必须为URL
type=“date” 限制用户输入的必须为日期
type=“time” 限制用户输入的必须为时间
type=“month” 限制用户输入的必须为月份
type=“week” 限制用户输入的必须为周
type=“number” 限制用户输入的必须为数字
type=“tel” 限制用户输入的必须为手机号码
type=“search” 搜索框
type=“color” 生成一个颜色选择表单
-
重点记住 number、tel、search
属性 值 说明
required required 表示内容不能为空，必填项
placeholder 提示文本 提示信息
autofocus autofocus 自动聚焦，页面加载完成自动聚焦光标
autocomplete off/on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填 写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete =”"off"需要放在表单内，同时加上name属性，同时成功提交
multiple multiple 可以多选文件提交
CSS3新特性
CSS3新增选择器
属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
选择符 简介
E[att] 选择具有att属性的E元素
input[value]{
color: pink;
}
E[att=“val”] 选择具有att属性且属性值等于val的E元素
包含value的input
input[value=haha]{//haha可以加引号可以不加
color: pink;
}
E[att^=“val”] 匹配具有att属性且值以val开头的E元紊
div[class^=icon]{
color: red;
}
<div class="icon1">ha</div>
<div class="icon2">ha</div>
<div class="icon3">ha</div>
<div class="icon4">ha</div>
E[att$=val] 匹配具有att属性且值以val结尾的E元素
同上
E[att*=“val”] 匹配具有att属性且值中含有val的E元素
同上
- 类选择器、属性选择器、伪类选择器权重都是10
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
选择符 说明
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E n如果是even就是所有的偶数，奇数odd
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个
n可以是公式：
如nth-child(n) n从0开始，每次加1，选择所有的孩子。0是不存在的，超出的部分也不存在就忽略了。此处只能写n不能写别的字母；
再如nth-child(2n) 即2n:0，2，4…相当于even；
再如nth-child(2n+1) 即2n+1:1，3，5…相当于odd
再如nth-child(n+3) 即n+3:3，4，5…相当于从第3个开始选
再如nth-child(-n+3) 即n+3:3，2，1…相当于选前三个
nth-child和nth-of-type的区别是：
前者先把所有孩子排序，如section div:nth-child(1) 先看第一个孩子，再看是不是div，是的话则满足，不是的话就不执行；后者如section div:nth-of-type(1)是看指定的元素div，再看是nth-of-type的第几个孩子。其他的都一样。
伪元素选择器（重点）
before after是在父元素里面创建的，他们都是盒子，且不能直接设置大小（行内元素要转换）且再body里是找不到滴。权重为1。必须有content属性，内容写到’ '内。
选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
<style>
div::defore{
content:"haha";
}
div::after{
content:"开心果"；
}
</style>
<div>
是
</div>
注意：
- before和after 创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法: element:before {
- before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
css新特性盒子模型
CSS3可以用box-sizing来指定盒模型。分为content-box和border-box，前者给盒子加border和padding时会撑开盒子，后者最终盒子的大小就是我们设置的盒子宽度高度。
以后可以这样写，就再也不用担心盒子被撑开的问题啦~
CSS3其他特性
css滤镜filter
图像模糊处理：
filter:blur(npx) n越大越模糊，blur是一个模糊的函数
css3 calc函数：
这个函数可以在属性中执行一些计算，如下：下面这个例子就有利于子盒子大小随着父盒子变化一起变~
符号俩边加空格可以用±*/
CSS3过渡（重点）
transition:要过渡的属性 花费时间运 动曲线 何时开始; 谁做过渡给谁加
可以从一个样式慢慢的过渡过去，经常与hover一起使用
- 1.属性︰想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
- 2.花费时间:单位是秒(必须写单位）比如0.5s
- 3.运动曲线:默认是ease (可以省略)
- 4.何时开始︰单位是秒(必须写单位)可以设置延迟触发时间默认是0s（可以省略)
css3转换
2D转换
2D转换之移动 translate
2D移动类似2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
transform:translate(x,y);
transform:translateX(x);
transform:translateY(y);
<!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>
<style>
div{
width: 50px;
height: 50px;
background-color: rgb(58, 173, 125);
/* //在x,y移动 */
transform: translate(100px,100px);
</style>
<body>
<div>
haha
</div>
</body>
</html>
重点
-
定义2D转换中的移动，沿着X,Y轴移动元素
-
translate最大的优点：不会影响到其他元素的位置
-
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
-
对行内标签没有效果
让盒子居中
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
2D转换之rotate
transform: rotate(45deg)//顺时针旋转45度 负值是逆时针
过渡
transition: all 0.3s;
设置元素转换的中心点
/*可以跟方位名词，可以是px*/
transform-origin: x,y; 默认值50%,50%
2D转换之缩放scale
缩放就是缩小放大，只要给元素添加上这个属性就能控制他缩小还是放大
不会影响其他盒子，可以设置缩放的中心点
<!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>
<style>
div{
width: 100px;
height: 100px;
background-color: yellow;
margin: 100px auto;
transform-origin: 20%,30%; 缩放的中心点
}
div:hover{
transform: scale(2,2);
}
</style>
<body>
<div>
</div>
</body>
</html>
/*可以跟方位名词，可以是px*/
transform-origin: x,y; 默认值50%,50% 设置旋转，缩放的中心点
综合写法
注意
- 同时使用多个转换，其格式为：transform：translate() rotate() scale()……等
- 其顺序会影响转换的效果
- 应当把位移放在前面
transform: translate(50px,50px) rotate(180deg);
css3动画
动画是CSS3中最具有颠覆性的特征之一，可以通过设置多个节点来精准控制一个或自主动画，常用来实现复杂的动画效果。
相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
动画的使用
- 先定义动画
- 再使用（调用）动画
动画序列
- 0% 是动画的开始, 100%是动画的完成。这样的规则就是动画序列。
- 在 @keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另-种样式的效果。您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间,或用关键词"from"和"to" ,等同于0%和100%。
1.使用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}
/*等价于上面*/
@keyframes move{
/* 开始状态 */
from{
transform: translateX(0px);
}
/* 结束状态 */
to{
transform: translateY(100px);
}
}
<!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: translateY(100px);
}
}
/* 使用动画 */
div{
width: 100px;
height: 100px;
background-color: aqua;
/* 动画名字 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></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>
/* 定义动画 keyframes关键帧，，，百分比尽量写整数，白扥比是时间的划分*/
@keyframes move{
/* 开始状态 */
0%{
transform: translateX(0px);
}
/* 结束状态 */
25%{
transform: translateX(500px);
}
50%{
transform: translate(500px,500px);
}
75%{
transform: translateY(500px);
}
100%{
transform: translateX(0px);
}
}
/* 使用动画 */
div{
width: 100px;
height: 100px;
background-color: aqua;
/* 动画名字 */
animation-name: move;
/* 持续时间 */
animation-duration: 8s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画常见的属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation play-state属性。 |
| animation-name | 规定@keyframes动画的名称。( 必须的) |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0。( 必须的) |
| animation-timing-function | 规定动画的速度曲线，默认是"ease". |
| animation-delay | 规定动画何时开始，默认是0。 |
| animation-iteration-count | 规定动画被播放的次数.默认是1，还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是"normal ",alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是“running",还有"pause". |
| animation-fill-mode | 规定动画结束后状态,保持forwards回到起始backwards |
/* 动画名字 */
animation-name: move;
/* 持续时间 */
animation-duration: 8s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 1s;
/* 重复播放多少次，默认一次 */
animation-iteration-count: infinite;/*infinite无数次*/
/* 是否逆向播放 normal默认*/
animation-duration: alternate;/*alternate逆向播放*/
/* 结束状态 默认是backwards，回到起始状态*/
animation-fill-mode: forwards;/*forwards结束在，结束状态*/
/* 设置动画状态 paused停止*/
animation-play-state: paused;
animation : 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
/*持续时间在何时开始前面
动画名字和持续时间一定要写
*/
速度曲线
animation-timing-function 默认ease
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。匀速 |
| ease | 默认，动画开始是低速，然后加快，结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始结束 |
| steps（） | 指定时间函数中的间隔数量（步长） |
3D转换
3D有什么特点
- 近大远小，物体后面遮挡不可见
3D移动
在2D的基础上多加了一个可以移动的方向就是z轴
transform:translate3d(x,y,z);
transform:translateX(x);
transform:translateY(y);
transform:translateZ(z); //单位一般都是用z
3D透视
perspective
在2D平面产生近大远小视觉立体,但是只是效果二维的
- 如果想要在网页产生 3D效果需要透视(理解成3D物体投影在2D平面内) .
- 模拟人类的视觉位置 ,可认为安排-只眼睛去看
- 透视我们也称为视距 :视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大 ,越远成像越小
- 透视的单位是像素
透视写在被观察元素的父盒子上面
perspective:500px 值越大，物体越大 //指的是眼镜观察的距离， 写在父盒子身上
transform:translateZ(z); //是物体离你的距离 写在自己身上
3D旋转
rotate3d 3D旋转可以让元素在三维平面内沿着x,y,z,轴或者自定义轴来旋转
transform:rotateX(45deg);
transform:rotateX(45deg);
transform:rotateZ(45deg);
transform:rotate3d(x,y,z,45deg);
3D呈现
transform-style
- 控制子元素是否开启三维立体环境。.
- transform-style: flat子元素不开启3d立体空间默认的
- transform- -style: preserve 3d;子元素开启立体空间
- 代码写给父级,但是影响的是子盒子
- 这个属性很重要,后面必用
transform-style
浏览为的私有前缀
私有前缀
- -moz- :代表firefox浏览器私有属性
- -ms-：代表ie浏览器私有属性
- -webkit-：代表Safari、chrome私有属性
- -o-：代表Opera私有属性
移动端开发
流式布局
移动端基础
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0u84zSm0-1653619274518)(file:///C:\Users\mi\Documents\Tencent Files\3359514063\Image\C2C\D0098C5E0511AFB721AECD246B3B4FBA.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I3N4L6MO-1653619274518)(file:///C:\Users\mi\Documents\Tencent Files\3359514063\Image\C2C\10483849A80A7B8101C466F4A8CADF45.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n6IKF5CX-1653619274519)(file:///C:\Users\mi\Documents\Tencent Files\3359514063\Image\C2C\9FCDBECBF8A7C331A92630394ED93291.jpg)]
1.4移动端调试方法
- Chrome DevTools (谷歌浏览器)的模拟手机调试
- 搭建本地web服务器,手机和服务器个局域网内,通过手机访问服务器
- 使用外网服务器 ,直接IP或域名访问
视口
视口就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
布局视口
layout viewport
- 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
- iOS, Android基本都将这个视口分辨率设置为980px 所以PC上的网页大多都能在手机上呈现，只不
过元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口
visual viewport
- 字面意识，他是用户正在看的网站的区域。注意是网站的区域
- 我们可以通过缩放去操作视觉视口，但不会布局视口布局视口扔保持原来的宽度
理想视口
deal viewport
- 为了使网站在移动端有最理想的浏览和阅读宽度而设定
- 理想视口,对设备来讲,是最理想的视口尺寸
- 需要手动添写meta视口标签通知浏览器操作
- meta视口标签的主要目的:布局视C的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我
们布局的视口就多宽
布局视口（layout viewport）：解决早期PC端在手机显示的问题，分辨率980px，需要手动缩放页面
视觉视口 （visual viewport）：用户正在看到的网站的区域
理想视口（ideal viewport）：自适应，网站在移动端最理想的浏览和阅读宽度设定，即布局视口的宽度与理想视口的宽度一致，需要手动添加meta视口标签通知浏览器操作
meta视口标签
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scal=1.0">
属性 解释说明
width 设置viewport宽度，特设定device-width特殊属性值（自适应理想视口）
initial-scale 初始缩放比大于0的数字
maximum-scale 最大缩放比大于0的数字
minimum-scale 最小缩放比大于0的数字
user-scalable 用户是否可以缩放，yes/1或no/0 no(0)
标准的viewport设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
二倍图
物理像素/分辨率（pixel）：物理真实存在的屏幕显示的最小颗粒，出厂商设定好，比如苹果6/7/8是750*1334。
物理像素比（设备像素比dpr）：1px能显示的物理像素点个数；同一方向上的物理像素/CSS像素（缩放比为1.0时）
PC端页面1px=1物理像素，但移动端不同：width=375px的盒子在ipone8占满750px宽度，其开发尺寸1px=物理像素点2个
视网膜屏幕（Retina）：一种显示技术，将更多的物理像素点压缩到一块屏幕里，从而达到更高的分辨率，增强细腻程度和显示效果
因为视网膜屏幕将原来的1个像素点增大x倍，原图在手机放大会导致模糊，则需要原图像素增加x倍，但大小不变，则在手机上显示时，就可以正常显示。
x倍图（先放大x倍，再缩放到原来的一半，即开发尺寸不变，分辨率增加）就相当于视网膜屏幕（手机尺寸不变，分辨率增加），显示效果不变。
多倍图：在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。（切图cutterman）
问题：一张开发像素50px*50px图片在手机Retina屏打开，会按照设备像素比放大倍数，会造成图片模糊。
解决方案：通常使用二倍图，看实际开发公司需求，即虽然开发像素为50px* 50px，但是原图物理像素为100px*100px
背景缩放（background-size：图片宽度 图片高度；）：规定背景图像的尺寸（background-size: 50%；）
单位：px（常规）、%（百分比）、特殊cover（100%覆盖）、contain（100%高度或宽度），即将图片放在盒子左上角对齐，沿右下角等比例拉伸
多倍精灵图：不能改变原精灵图大小；以二倍精灵图为例，放到ps中测量背景坐标x,y，假设背景等比例size为原来的r，则将x/r,y/r为代码设定新坐标
背景缩放
background-size:w h;//背景图片的缩放，只写一个是宽度，高度等比缩放
单位||百分比||cover||contain;
特殊cover（100%覆盖,有些图片会显示不全）、contain（100%高度或宽度，可能会显示不全）
移动端开发选择
1，单独制作移动端页面（推荐）
通常情况网址域名前+m(mobile)可以打开移动端，判断为移动设备跳到移动端页面
技术选型：
- 流式布局（百分比布局、非固定像素布局）:将盒子宽度设置为%，使其根据屏幕宽度伸缩，不受固定像素限制，内容向两侧填充
div{width:100%; max-width:980px; min-width:320px;} - flex弹性布局（强烈推荐）
- less+rem+媒体查询布局
- 混合布局
2，响应式网页兼容移动端（其次）
通过判断屏幕宽度来改变样式，以适应不同终端。缺点：制作麻烦，需要很大精力解决兼容性问题
技术选型：
- 媒体查询
- bootstrap
移动端技术解决方案
移动端浏览器
基本以webkit内核为主，只需考虑webkit兼容性问题，浏览器私有前缀只需要考虑添加webkit
放心使用H5标签和CSS3样式
CSS初始化（normalize.css）：保护有价值的默认值、修复浏览器bug、模块化、有详细文档可查阅，官网地址
特殊样式
推荐使用：normalize.css/
CSS3盒子模型（box-sizing）：-webkit-box-sizing：border-box;
content-box：传统盒子宽度（默认）=CSS设置width+padding+margin；
border-box： CSS3盒子模型宽度=width（包含padding+margin）
去除移动端链接点击背景高亮：-webkit-tap-highlight-color:transparent;
去除浏览器默认外观样式（才能后续给button和input自定义样式）：-webkit-appearance:none；
禁用长按页面时的弹出菜单：img，a { -webkit-touch-callout：none；}
流式布局（百分比布局）
-
流式布局，就是百分比布局，也称非固定像素布局
-
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
-
流式布局方式是移动web开发使用的比较常见的布局方式
-
max-width:最大宽度
-
min-width：最小宽度
body {
margin: 0 auto;
min-width: 320px;
max-width: 640px;
background: #fff;
font-size: 14px;
font- family: -apple-system, Helvetica, sans-serif; //字体
line-height: 1.5;
color: #666;
}
flax布局
传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能再移动端很好的布局
flax弹性布局
- 操作方便，布局极其简单，移动端应用广泛
- PC端浏览器支持情况差
- IE11或更低的版本，不支持或仅部分支持
建议：
- 如果是PC端页面布局，我们还是采用传统的布局
- 如果是移动端或者不考虑兼容性问题的pc端布局，我们还是使用flex弹性布局
flex布局原理
flex是flexible Box的缩写，意为"弹性布局"，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
- 当我们的父元素设为flex布局以后，子元素的flot，clear，vertical-align属性将失效//flex可以
- 伸缩布局=弹性布局=伸缩盒子布局=弹性盒布局=flex布局垂直居中
采用Flex布局的元素,称为Flex容器( flex container) , 简称"容器"。它的所有子元素自动成为容
器成员，称为Flex项目( flex item) ,简称"项目"。
- 体验中 div就是flex父容器。
- 体验中span就是子容器flex项目
- 子容器可以横向排列也可以纵向排列
总结flex布局原理:
- 就是通过给父盒子添加flex属性,来控制子盒
子的位置和排列方式
常见的父项属性
以下由6个属性是对父元素设置的
- flex-direction :设置主轴的方向
- justify-content: 设置主轴上的子元索排列方式
- flex-wrap :设置子元素是否换行
- align-content :设置侧轴上的子元素的排列方式(多行)
- align-items :设置侧轴上的子元素排列方式(单行)
- flex-flow :复合属性,相当于同时设置了flex- direction和flex-wrap
flex-direction设置主轴方向
在flex布局中，是分为主轴和侧轴两个方向的，同样的叫法有：行和列，x轴和y轴
- 默认主轴是x轴，水平向右
- 默认侧轴是y轴，水平向下
| 属性值 | 说明 |
|---|---|
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
justify-content：设置主轴的排列方式
要先确定好主轴是哪一个
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值从头部开始如果主轴是x轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐(如果主轴是x轴则水平居中) |
| space-around | 平分剩余空间 |
| space- between | 先两边贴边再平分剩余空间(重要) |
flex-wrap：设置子元素是否换行
默认不换行，都排在一行，装不开会缩写子元素的宽度
| 属性值 | 说明 |
|---|---|
| nowrap | 默认不换行 |
| wrap | 换行 |
align-items设置侧周的居中（单行）
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex- end | 从下到上 |
| center | 挤在一起居中(垂直居中) |
| stretch | 拉伸(默认值) |
align-content :设置侧轴上的子元素的排列方式(多行)
适用于子项出现换行的情况，在单行的情况下没有效果
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值在侧轴的头部开始排列 |
| flex- end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space- around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
常见子项属性
- flex子项目占的份数 也可以写百分比，相对于父亲说
- align- self控制子项自己在侧轴的排列方式
- order属性定义子项的排列顺序(前后顺序)
flex属性定义子项分配剩余空间，用flex表示占多少份
align-self属性允许单个项目有与其他项目不-样的对齐方式,可覆盖align-items属性。
默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch.
span:nth-child(2) {
/*设置自己在侧轴上的排列方式*/
align-self: flex-end;
}
数值越小,排列越靠前,默认为0。
注意:和z-index不一-样。
背景渐变
background：linear-gradient（起始位置，颜色1，颜色2）；必须添加浏览器前缀
background：-webkit-linear-gradient（起始位置，颜色1，颜色2）
rem适配布局
流式布局和flex布局只要是针对宽度的适应
rem可以让高度和宽度等比缩放
em是父元素的字体大小
rem是基于html元素的字体大小
媒体查询
媒体查询( Media Query )是CSS3新语法。
- 使用 @media查询,可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中 ,页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、 Android手机 ,平板等设备都用得到多媒体查询
@media mediatype and Inot lonly (media feature) {
CSS -Code;
}
- 用@media开头注意@符号
- mediatype媒体类型
- 关键字and not only
- and可以将多个媒体链接到一起，相当于且的意识
- not：排除某个媒体类型，相当于非，可以省略
- only：指定某个特定的媒体类型，可以省略
- media feature媒体特性必须有小括号包含
每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
注意他们要加小括号仅含
值 解释说明
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度
这句话的意识是，在我屏幕上，并且最大的宽度是800px,然后在里面设置我们想要的样式
@media screen and (max-width: 800px){
body{
background-color: pink;
}
}
less基础
css弊端
CSS是一门非程序式语言,没有变量、函数、SCOPE (作用域)等概念。
- CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
- 不方便维护及扩展,不利于复用。
- CSS没有很好的计算能力
- 非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。
Less介绍
Less ( Leaner Style Sheets的缩写)是一门CSS扩展语言,也成为CSS预处理器。
做为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语
言的特性。
它在CSS的语法基础之上,引入了变量, Mixin (混入) , 运算l以及函数等功能,大大简化了CSS的编写
并且降低了CSS的维护成本,就像它的名称所说的那样, Less可以让我们用更少的代码做更多的事情。
Less中文网址: http://lesscss.cn/
常见的CSS预处理器: Sass、Less、 Stylus
- 一句话: Less是一门CSS预处理语言,它扩展了CSS的动态特性。
Less使用
我们首先需要创建一个文件后缀名为less的文件，在这个less文件里面书写less语句
-
Less变量
@变量名：值；
命名规范
- 必须以@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
-
Less编译
本质上, Less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则
最终会通过解析器,编译生成对应的CSS文件。
所以,我们需要把我们的less文件,编译生成为css文件,这样我们的html页面才能使用。 -
Less嵌套
如果遇见(交集|伪类|伪元素选择器)
- 内层选择器的前面没有 &符号,则它被解析为父选择器的后代;
- 如果有& 符号,它就被解析为父元素自身或父元素的伪类。
-
Less运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
- 乘号(*)和除号(/)的写法
- 运算符中间左右有个空格隔开1px+ 5
- 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位,则运算结果就取该单位
@color: pink;
body{
background-color: @color;
}
Less嵌套写法
//子元素的样式可以直接写在父元素里面
伪类用&相当于a：hover
a{
&:hover{
color: pink;
}
}
body{
h1{
color: pink;
}
}
/*符号两边要有空格，两个数参与运算，以有单位的为准，都有单位，以第一个单位为准*/
/*Less里面写*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less甚至还可以这样*/
width: (@whdth + 5)*2;
rem适配方案
- 让一些不能等比自适应的元素,达到当设备尺寸发生改变
的时候,等比例适配当前设备。 - 使用媒体查询根据不同设备按比例设置html的字体划小
然后页面元素使用rem做尺寸单位,当html字体大小变化
元素尺寸也会发生变化,从而达到等比缩放的适配
rem实际开发适配方案
①按照设计稿与设备宽度的比例.动态计算并设置html根标签的font-size大小; (媒体查询)
②CSS 中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值; .
rem适配方案技术使用
- 技术方案一
- less
- 媒体查询
- rem
- 技术方案2（推荐）
- flexible.js
- rem
响应式布局
响应式开发的原理
就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备的目的
| 设备划分 | 尺寸区间 |
|---|---|
| 超小屏幕（手机） | <768px |
| 小屏设备（平板） | >=768px~<992pc |
| 中等屏幕（桌面显示器） | >=992px~<1200px |
| 宽屏设备（大桌面显示器） | >=1200px |
响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
平时我们的响应式尺寸划分
- 超小屏幕(手机, 小于768px) : 设置宽度为100%
- 小屏幕( 平板，大于等于768px) : 设置宽度为750px
- 中等屏幕(桌面显示器,大于等于992px) : 宽度设置为970px
- 大屏幕(大桌面显示器，大于等于1200px) : 宽度设置为1170px
<style>
* {
margin: 0;
padding: 0;
}
.container {
height: 150px;
background-color: pink;
margin: 0 auto;
}
/* 超小屏幕下 小于 768 布局容器的宽度为 100% */
@media screen and (max-width:767px ){
.container {
width: 100%;
}
}
/* 小屏幕下 大于等于768 布局容器改为 750 px */
@media screen and (min-width:768px) {
.container {
width: 750px;
}
}
/* 中等屏幕 大于992px 布局容器设置为 970px */
@media screen and (min-width:992px) {
.container {
width: 970px;
}
}
/* 大屏幕 大于1200px 布局容器宽度设置为1170px */
@media screen and (min-width:1200px) {
.container {
width: 1170px;
}
}
.container ul li {
float: left;
width: 11.11%;
height: 30px;
list-style: none;
text-align: center;
background-color: green;
}
@media screen and (max-width:767px) {
.container ul li {
width: 33.33%;
}
}
</style>
</head>
<body>
<!-- 响应式开发中，首先需要有一个布局容器 -->
<div class="container">
<ul>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
</ul>
</div>
Bootstrap
Bootstrap简介
Bootstrap来自Twitter (推特) , 是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS和JAVASCRIPT
的,它简洁灵活,使得Web开发更加快捷。
- 中文官网: http://www.bootcss.com/
- 官网: http://getbootstrap.com/
- 推荐使用: http://bootstrap.css88.com/
框架:顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组
件和插件。使用者要按照框架所规定的某种规范进行开发。
优点
- 标准化的html+ css编码规范
- 提供了一套简洁、直观、强悍的组件
- 有自己的生态圈,不断的更新迭代
- 让开发更简单,提高了开发的效率
版本
- 2.x.x:停止维护兼容性好,代码不够简洁,功能不够完善。
- 3.x.x:目前使用最多稳定,但是放弃了IE6-IE7。对IE8支持但是界面效果不好,偏向用于开发响应式布局、
移动设备优先的WEB项目。 - 4.x.x :最新版，目前还不是很流行
Bootstrap使用
在现阶段我们还没有接触JS相关课程,所以我们只考虑使用它的样式库。
控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。
Bootstrap使用四步曲:
- 创建文件夹结构
- 创建html骨架结构
- 引入相关样式文件
- 书写内容
布局容器
bootstrap为页面内容和栅格系统包裹一个**.container容器**，bootstrap预先定义好了这个类，并提供2个作用于它的类
container类：响应式布局容器，固定宽度
- 响应式布局的容器，固定宽度
- 大屏（>1200px） 宽度定为1170px
- 中屏（>992px）宽度定为970px
- 小屏（>=768px） 宽度定为750px
- 超小屏（100%）
container-fluid类：流失布局容器 百分百宽度，占据全部视口的容器，适合单独做移动端开发
- 流式布局容器，百分百宽度
- 占据全部视口（viewport）的容器
- 适合于单独做移动端开发
栅格系统（grid systems）
原理：将页面布局划分为等宽的列，然后通过列数的定义来模块化网页布局
bootstrap提供一套响应式、以移动设备优先的流式栅格系统，随着屏幕或视口尺寸增加，系统会自动分为最多12列。
栅格选项参数：栅格系统用于将一系列的行row和列column的组合来创建页面布局，内容可以放进创建好的布局中。
| 超小屏幕(手机)< 768px | 小屏设备(平板) >=768px | 中等屏幕(桌面显示器) >= 992px | 宽屏设备(大桌面显示器)>= 1200px | |
|---|---|---|---|---|
| .container最大宽度 | 自动(100%) | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-Ig- |
| 列( column)数 | 12 | 12 | 12 | 12 |
- 行必须放到container容器中
- 实现列的平均划分需要给列添加类前缀
- xs-extra small :超小; sm-small :小; md-medium :中等; lg-large :大;
- 小于12占不满，列大于12，多余列所在元素将被作为整体另起一行排列
- 每一列默认有15px的padding值
- 可以同时为一列指定多个设备类名，以便划分不同份数，例如 class=“col-lg-2 col-md-3 col-sm-4 col-xs-6”
-
列嵌套
列嵌套最好外套1个row盒子（必须叫这个名字）再嵌套，可以去除父元素默认的15px padding值，并使高度与父级一致 -
列偏移
使用.offset-md-* 类可以将列右偏移，实际上是通过使用*选择器为当前元素增加左侧的margin值
<div class = "col-md-x col-md-offset-x"></div>//偏移x份
col-md-x占几份
- 列排序
通过使用.order-1~12 改变列排序
col-lg-pull-x 往左拉
col-lg-push-x往右推
-
可见性
使用 Bootstrap 内置的可见性工具类可以设置 HTML 元素的 visibility （可见性）。这些工具类并不修改 display 的值，也不会对布局产生影响，设置了 .invisible 的 HTML 元素仍然占据页面空间。页面内容在视觉上以及对使用辅助技术/屏幕阅读器的用户来说都是隐藏的。 -
为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备
展示或隐藏页面内容。
| 类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
|---|---|---|---|---|
| .hidden-xs | 隐藏 | 可观 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
与之相反的,是visible -xs visible -sm visible -md visible-lg是显示某个页面内容
VW和VH
相对单位相对于视口，视口375,1VW就是3.75
- 让开发更简单,提高了开发的效率
版本
- 2.x.x:停止维护兼容性好,代码不够简洁,功能不够完善。
- 3.x.x:目前使用最多稳定,但是放弃了IE6-IE7。对IE8支持但是界面效果不好,偏向用于开发响应式布局、
移动设备优先的WEB项目。 - 4.x.x :最新版，目前还不是很流行
Bootstrap使用
在现阶段我们还没有接触JS相关课程,所以我们只考虑使用它的样式库。
控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。
Bootstrap使用四步曲:
- 创建文件夹结构
- 创建html骨架结构
- 引入相关样式文件
- 书写内容
布局容器
bootstrap为页面内容和栅格系统包裹一个**.container容器**，bootstrap预先定义好了这个类，并提供2个作用于它的类
container类：响应式布局容器，固定宽度
- 响应式布局的容器，固定宽度
- 大屏（>1200px） 宽度定为1170px
- 中屏（>992px）宽度定为970px
- 小屏（>=768px） 宽度定为750px
- 超小屏（100%）
container-fluid类：流失布局容器 百分百宽度，占据全部视口的容器，适合单独做移动端开发
- 流式布局容器，百分百宽度
- 占据全部视口（viewport）的容器
- 适合于单独做移动端开发
栅格系统（grid systems）
原理：将页面布局划分为等宽的列，然后通过列数的定义来模块化网页布局
bootstrap提供一套响应式、以移动设备优先的流式栅格系统，随着屏幕或视口尺寸增加，系统会自动分为最多12列。
栅格选项参数：栅格系统用于将一系列的行row和列column的组合来创建页面布局，内容可以放进创建好的布局中。
| 超小屏幕(手机)< 768px | 小屏设备(平板) >=768px | 中等屏幕(桌面显示器) >= 992px | 宽屏设备(大桌面显示器)>= 1200px | |
|---|---|---|---|---|
| .container最大宽度 | 自动(100%) | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-Ig- |
| 列( column)数 | 12 | 12 | 12 | 12 |
- 行必须放到container容器中
- 实现列的平均划分需要给列添加类前缀
- xs-extra small :超小; sm-small :小; md-medium :中等; lg-large :大;
- 小于12占不满，列大于12，多余列所在元素将被作为整体另起一行排列
- 每一列默认有15px的padding值
- 可以同时为一列指定多个设备类名，以便划分不同份数，例如 class=“col-lg-2 col-md-3 col-sm-4 col-xs-6”
-
列嵌套
列嵌套最好外套1个row盒子（必须叫这个名字）再嵌套，可以去除父元素默认的15px padding值，并使高度与父级一致 -
列偏移
使用.offset-md-* 类可以将列右偏移，实际上是通过使用*选择器为当前元素增加左侧的margin值
<div class = "col-md-x col-md-offset-x"></div>//偏移x份
col-md-x占几份
- 列排序
通过使用.order-1~12 改变列排序
col-lg-pull-x 往左拉
col-lg-push-x往右推
-
可见性
使用 Bootstrap 内置的可见性工具类可以设置 HTML 元素的 visibility （可见性）。这些工具类并不修改 display 的值，也不会对布局产生影响，设置了 .invisible 的 HTML 元素仍然占据页面空间。页面内容在视觉上以及对使用辅助技术/屏幕阅读器的用户来说都是隐藏的。 -
为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备
展示或隐藏页面内容。
| 类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
|---|---|---|---|---|
| .hidden-xs | 隐藏 | 可观 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
与之相反的,是visible -xs visible -sm visible -md visible-lg是显示某个页面内容
VW和VH
相对单位相对于视口，视口375,1VW就是3.75
1047
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
