昨日内容回顾

高级选择器：
后代选择器：    div p
子代选择器：    div>p
并集选择器：    div，p
交集选择器：    div.active

属性选择器：
[属性~=‘属性值’]
伪类选择器
a Love HAte    必须要遵循这个准则“爱恨准则”
nth-child(3n+1)
first-child
last-child

继承性和层叠性

继承性：
文本的属性：    color text-*，line-*，font-*
盒子属性  定位布局的元素

层叠性：
1.先看标签元素有没有被选中，如果选中了，就数数（id，class，标签的数量），谁的权重大  就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素（继承来的），权重为0.
如果属性都是被继承下来的，权重都是0.权重都是0：“就近原则”：谁描述的近，就显示谁的属性
3.继承来的，描述的一样近，数权重
4.继承来的，描述的一样近，权重一样，后来者居上

盒模型：
width： 内容宽度
height： 内容的高度
padding： 盒子的内边距，内边距能填充盒子，+padding-left，如果要保持盒子不变，减width
border： 盒子的边框

三要素：  粗细  线性样式  颜色
border： 1px  solid  red;
margin： 外边距。

介绍2个网站

1.BootCDN 稳定、快速、免费的前端开源项目 CDN 加速服务。

http://www.bootcdn.cn/

一般网站，比如js，bootstrap，vue这种公共资源，会优先链接它，当它无法访问时，链接到自己的服务器。

2.Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。

很多网站都在使用它的图标库，即使放大，也不会导致模糊。

一、标准文档流

什么是标准文档流

宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画

标准文档流下有哪些微观现象？

1.空白折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <img src="images/lzl.jpg" width="250" height="444">
    <img src="images/lzl.jpg" width="250" height="444">
</body>
<html>

View Code

2.高矮不齐，底边对齐

文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <span>林志玲林志玲林志玲林志玲林志玲</span>
    <img src="images/lzl.jpg" width="250" height="444">
</body>
<html>

文字加图片

从效果中可以看出，文字加图片，会底边对齐

3.自动换行，一行写不满，换行写

如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .t{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <span><span class='t'>iconfont不是什么新技术了。我们知道web网页能使用的字体一直很少，很多时候设计师用ps做出来的效果图，里面的字体我们都没办法在网页上实现。其实网页里面可以使用自定义字体的。而且还是所有浏览器都支持，包括烦人的ie。</span></span>
</body>
<html>

View Code

网页效果：

文字过多时，会自动换行

二、块级元素和行内元素

学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：

行内元素
块级元素

比如h1标签和span，同时设置宽高，来看浏览器效果，那么你会发现：

python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)