本文介绍了doctype声明、二进制基础、视口单位(VW)、完美视口设置、雪碧图的CSS优化、伪类选择器的应用、绝对定位与BFC的概念、解决高度塌陷的方法、flexbox布局、内联框架、clear属性以及字体样式的设置，为前端开发者提供了移动端开发和CSS布局的深入理解。
文档声明是一条语句告诉浏览器这是一个网页文件也可以写为<!DOCTYPE HTML>
二进制是计算机底层的进制
视口
VW表示的是视口的宽度，100vw=1个视口的宽度
但是vw的兼容性不是很好，新浏览器可以用，但是旧的浏览器不能用
不同的设备完美视口的大小是不一样的
iphone6 -- 375
iphone6plus -- 414
由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样比如在iphone6中 375就是全屏，而到了plus中375就会缺一块
所以在移动端开发时，就不能再使用px来进行布局了
表示的是视口的宽度 (viewport width)Vw
100vw = 一个视口的宽度
1vw = 1%视口宽度
vw这个单位永远相当于视口宽度进行计算
<!--让一个视口是一个完美视口-->
<meta name="viewport" content="width=300px,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
雪碧图
雪碧图
</title>
<style>
/*解决图片闪烁的问题:
可以将多个小图片统一保存到一个大图片里面，然后通过调整background-position来显示相应的图片
这样图片会同时加载到网页中，就可以避免出现闪烁的问题
这个技术在网页中应用十分广泛，被称为CSS-Sprite,这种图片被我们称为雪碧图。
雪碧图的使用步骤:
1.先确定要使用的图标
2.测量图标的大小
3.根据测量结果确定一个元素
4.将雪碧图设置为元素的背景图片
5.设置一个偏移量来显示正确的图片
在网页搜索一下雪碧图的介绍就明白了为什么要设置大小和偏移量*/
/*雪碧图的特点：
一次性将多个图片加载进页面，降低请求的次数，加快访问的速度，提升用户的体验。
负责图片是网页的外部元素，加载的时候需要缓存，所以可能会存在闪烁的问题*/
伪元素选择器
/* 选中的是div中的第一行文字 */div::first-line {
/* 选中的是div中被鼠标选择的文字 */div::selection (
/* 选中的是input元素中的提示文字 */input::placeholder/*
选中的是p元素最开始的位置，随后创建一个子元素 */p::before (content:"￥";
/* 选中的是p元素最后的位置，随后创建一个子元素 */p::after (
content:"￥"
伪类很像类，但不是类，是元素特殊状态的一种描述
a:link{ }选中的是没有访问过的<a>
a:visited{}选中的是访问过的类
a:hover{}选中的是鼠标悬浮状态的a元素
a:active{}选中的是鼠标激活状态的a元素
动态伪类：（就是根据动作和状态有变化的）
link->visited->hover->active（lvha)(lvhao)是一个正确的不会出问题的CSS顺序，否则有的效果不会出来，因为在CSS中写在下面的会覆盖掉写在上面的。
link和visited是<a>独占的
hover和active是别的元素也可以用的。
:focus可以获取焦点
input:focus{ }只有表单类元素和输入东西的元素的才能使用，input select.
:first-child{}是按照对于父元素而言的所有的子元素，无所谓子元素的类型是否一致。，进行排序的。
:last-chile{}
:nth-child(n)
1. :first-child 所有兄弟元素中的第一个
2. :last-child 所有兄弟元素中的最后一个
:nth-child(n) 所有兄弟元素中的第 n 个
:first-of-type 所有同类型兄弟元素中的第一个.
:last-of-type 所有同类型兄弟元素中的最后一个
:nth-of-type(n) 所有同类型兄弟元素中的 第n个
关子什的值:
1. 0或不写:什么都选不中 -- 几乎不用。
2. n:选中所有子元素 -- 几乎不用。
3. 1~正无穷的整数 : 选中对应序号的子元素
4.2n 或 even :选中序号为偶数的子元素
5.2n+1 或 odd : 选中序号为奇数的子元素
-n+3 : 选中的是前 3 个
:nth-last-child(n) 所有兄弟元素中的倒数第 n 个(n)
:nth-last-of-type(n)所有同类型弟元素中的倒数第n个
选择没有兄弟的元素(独生子女)only-child
:only-of-type选择没有同类型兄弟的元素
:root 根元素,就是html。
:empty 内容为空元素 (空格也算内容)
:not() 否定伪类
四、UI伪类:
1. :checked 被选中的复选框或单选按钮
:enable 可用的表单元素(没有 disabled 属性)。
:disabled 不可用的表单元素 (有 disabled 属性)
像素
像素是由一个一个发光的小点构成的
CSS像素就是我们写的width：100px 这些
视口（viewpoint)就是屏幕中用来显示网页的区域
当放大或缩小网页的时候，物理像素不会改变
CSS像素会改变，CSS像素和物理像素的比例会改变
完美视口
（在编写移动端页面的时候，通过改变视口的大小改变CSS像素和物理像素的比值，通过meta标签来设置视口的大小
<meta name=”viewpoint” content=”width=100px”>
可以在DEVICE METRICS 里面查看
不同设备的完美视口是不一样的
确保完美视口的代码
<meta name="viewport"content="width=device-width”,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
用width:100%;是不能解决页面适配的问题的，因为参照物会发生变换
1rem=1 html的字体大小
F12可以查看源码
styles里面可以查看到的是设置好的样式（它不一定会生效）
computed里面可以查看到的是生效的样式
BFC（解决高度塌陷的问题）
元素开启BFC元素之后的特点：
1.开启BFC的元素不会被浮动的元素所覆盖。
2.开启BFC的父元素和子元素的外边距不会重叠
3.开启BFC的元素可以包含浮动的元素。
可以通过一些特殊的方式开启元素的BFC：
所有开启BFC的方式都不是直接开启都是间接开启的，所以都存在一些副作用。而我们要选的就是副作用比较小的。
1.设置元素的浮动。
将浮动的子元素的父元素也设置浮动，这样存在的问题就是：高度没有消失，但是宽度消失了，因为父元素和子元素都脱离文档流了。
2.将元素设置为行内块元素
display;inline-block;行内块元素不适合作为外部的布局使用。设置为行内块元素之后，宽度又没了。
3.将元素的overflow设置为一个非visible的值。常用方式为设置overflow:hidden,开启BFC（方便快捷，副作用小），auto也可以。
overflow:hidden/auto;
- 使用after伪类来解决高度塌陷的问题
box3清除了box2的影响，把box1撑起来了。完美地解决了高度塌陷的问题，不会产生副作用
高度塌陷问题是表现上的问题,box3的存在没有实际意义，是为了解决高度塌陷的问题。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
高度塌陷相关学习
</title>
<style>
.box1{
border:10px solid red;
/*可以使用overflow:hidden开启BFC解决高度塌陷问题*/
}
.box2{
width:100px;
height:100px;
background-color: greenyellow;
float:left;
}
.box3{
clear:both;
}
</style>
</head>
<body>
<!--输入.box1+.box2+.box3然后按回车就可以出现下面的效果-->
<div class="box1"><div class="box2"></div>
<div class="box3"></div>
<!--box3撑开了box1的高度-->
</div>
</body>
</html>
图标字体 (iconfont)
- 在网页中经常需要使用一些图标，可以通过图片来引但是图片大小本身比较大，并且非常的不灵活所以在使用图标时，我们还可以将图标直接设置为字然后通过font-face的形式来对字体进行引入这样我们就可以通过使用字体的形式来使用图标
fontawesome 使用步骤
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体
- 直接通过类名来使用图标字体
class="fas fa-bel]"
class="fab fa-accessible-icon”
<li>和<span>标签都可以，注意css和webfonts的目录位置是在项目里面，它两个是平级的，直接复制粘贴过去就可以了。
<i class=”fas fa-bell" style="font-size:80px; color:
<i class="fas fa-bel1-slash"></i>
<i class="fab fa-accessible-icon"></i>
<!--<i>标签表示无意义的实体-->
<!--只有fas和fab是免费的-->
<i class="fas fa-bell" style="font-size:80px; color:skyblue;"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
<i class="fab fa-otter" style="font-size:160px;color:yellow"></i>
<i class="fas fa-otter" style="font-size:160px;color:yellow"></i>
绝对定位
当元素的position属性值设置为absolute时，则开启了元素的绝对定位绝对定位的特点:
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于其包合块进行定位的
包含块( containing block )
正常情况下:
包含块就是离当前元素最近的祖先块元素
<div> <div></div> </div>
<div><span><em>hello</em></span></div>
绝对定位的包含块:包含块就是离它最近的开启了定位的祖先元素如果所有的祖先元素都没有开启定位则根元素就是它的包含块
html(根元素、初始包含块)
图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的，用则加载，不用则不加载像我们上边的练习link会首先加载，而hover和active会在指定状态触发时才会加载
定位(position)
定位是一种更加高级的布局手段
通过定位可以将元素摆放到页面的任意位置
使用position属性来设置定位
可选值:
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
相对定位:
当元素的position属性值设置为relative时则开启了元素的相对定位
相对定位的特点，
1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
偏移量 (offset)
- 当元素开启了定位以后，可以通过偏移量来设置元素的位置
top
定位元素和定位位置上边的距高
bottom
定位元素和定位位置下边的距高
定位元素垂直方向的位置由top和bottom两个属性来控制通常情况下我们只会使用其中一top值越大，定位元素越向下移动bottom值越大，定位元素越向上移动
left
定位元素和定位位置的左侧距高
right
定位元素和定位位置的右侧距高
定位元素水平方向的位置由left和right两个属性控制通常情况下只会使用一个
rem
1 rem = 1 html的字体大小
1 rem = 40 px(设计图)
使用媒体查询
语法: @media 查询规则{}
媒体类型:
al1 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
-可以使用，连接多个媒体类型，这样它们之间就是一个或的关系
可以在媒体类型前添加一个only，表示只有。only的使用主要是为了兼容一些老版本浏览器
<style>
@media all{
body{
background-color:#bfa;
}
}
</style>
<style>
@media only screen{
body{
background-color:#bfa;
}
}
</style>
<style>
@media print,screen{
body{
background-color:#bfa;
}
}
</style>
表格的样式：
默认情况下，<td>里面的内容垂直居中 vertical-align
table{
/*指定边框之间的距离*/
border-spacing:0px;
/*设置边框的合并*/
border-collapse:collapse;
/*使用彪额中没有用tbody而是直接使用<tr>
那么浏览器就会自动创建一个tbody，并且将<tr>全部都放到tbody里面
tr不是table的子元素*/
}
.box1{
width:300px;
height:300px;
background-color:orange;
/*将元素设置为单元格*/
display:table-cell;
/*设置为table-cell才可以使用middle*/
vertical-align:middle;
}
将一个容器设置为弹性容器
<style>
.nav{
width: 1210px;
height: 48px;
line-height: 48px;
margin:50px auto;
background-color: #E8E7E3;
/*设置为弹性容器，这样可以解决高度塌陷的问题*/
display:flex;
}
.nav li{
/*设置增长系数*/
/*完全可以根据元素的多少进行分布*/
flex-grow:1;
}
/*a本身是行内元素*/
.nav a{
display:block;/*把a设置为块级元素*/
color:#808080;
text-decoration: none;
font-size:16px;
text-align: center;
}
.nav a:hover{
background-color: #636363;;
}
</style>
超链接<a>不会发生跳转的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title></title>
<style>
</style>
</head>
<body>
<a href="javascript:;">超链接不发生跳转1</a>
<!--将href="#"是指链接到当前页面，其实是无意义的，页面也不会刷新，-->
<a href="#">超链接不发生跳转2</a>
<a href="">超链接不发生跳转3</a>
</body>
</html>
<!--内联框架用于向当前页面中引入一个其他页面
src指定要引入的页面路径-->
<!--frameborder的值只有0和1,0表示没有边框，1表示有边框-->
<iframe src="https:www.baidu.com" width="800" height="800" frameborder="0"></iframe>
clear可以解决高度塌陷的问题，产生的副作用要小
/*如果我们不希望某个元素因为其他元素浮动的影响而改变位置
可以通过clear属性来清除浮动元素对当前元素产生的影响
clear:
作用:清除浮动元素对当前元素所产生的影响
可选值:
-left:清除左侧浮动元素对当前元素的影响
-right：清除右侧浮动元素对当前元素的影响
原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边框，以使其位置不受其他元素位置的影响
both清除最大的影响，以px最大的为依据
*/
clear:left;/*清除左侧元素的影响，清除了box1的影响，如果没有写这一行，box3会跑到box1下面
还可以选择：clear:both;
*/
clear:right;
字体的样式；
font可以设置字体相关的所有属性
语法： font:字体大小/行高 字体族
行高可以省略不写，如果font不写行高的话，会使用默认值，如果不写的话在后面的会把在前面的覆盖掉。
font-size:20px; /*设置字体的大小*/
font-family:’Times New Roman’,Times,serif; /*字体族*/
serif 衬线字体，在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。相反的，sans serif 就没有这些额外的装饰，而且笔画的粗细差不多。
font-weight:blod; /*字重 字体的加粗*/
可选值：
normal 默认值 不加粗
bold 加粗
100-900 九个级别，没什么用
2150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
