昨日内容回顾
高级选择器: 后代选择器: 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 加速服务。
一般网站,比如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>
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>
网页效果:
文字过多时,会自动换行
二、块级元素和行内元素
学习的初期,我们就要知道,标准文档流等级森严。标签分为两种等级:
- 行内元素
- 块级元素
比如h1标签和span,同时设置宽高,来看浏览器效果,那么你会发现: