一些新属性get
- word-break:break-all;换行；
- white-space:nowrap;不换行；
- text-overflow:ellipsis 显示省略符号来代表被修剪的文本。
- text-align:justify;文本两端对齐；
- pointer-events{none;}阻止所有响应事件；
关于flex布局
flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。课程中通过2个游戏对于flex的属性理解很有帮助；flex布局很方便灵活；css中可能要写一大堆的东西，flex只要写几句就行了；
image.png
div中的子元素就能上下左右居中，从而绝对居中；对于高度不确定，宽度也不确定的父子div也是如此。
其他布局
- calc();
calc(25% -8px) 用来指定元素的宽度；
知识点
-
清除浮动
image.png
用来清除图层浮动；.clearfix{zoom:1}可以用来兼容ie8;
通常用于float布局中，父元素清除浮动，子元素浮动；float + clearfix;解决大部分布局问题；
-- font-size
font-size是指em-square；理解为设计师喜欢的初始大小；
-line-height 实际占地高度 - vertical top middle bottom text-top text-bottom
可以去除图片下方的空白，空白部分是与文字基线对齐造成； - inline-block 元素对不齐 ——无解 —— 用 flex 或 float
- inline-block 有空隙 ——用 flex 或 float
BFC Block Formatting Context 一个块格式化上下文
-
功能1：爸爸管儿子用 BFC 包住浮动元素。
image.png
-
功能2：兄弟之间划清界限 用 float + div 做左右自适应布局
image.png
响应式网页
-
响应式网页就是媒体查询；根据不同的媒体应准备相应的图片，图片对布局相当重要；
比如：pc版 和手机版；pc版分为 float/flex/定宽1000px；
一些大型网站通常准备了pc版和手机版； -
动态rem
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>
第一段是m:vp；手机端页面标签；让页面以手机端的比例展示，不能缩放，不能双击；
第二段动态rem,用Js控制rem与视口宽度联系；这样也就可以适应不同手机端的页面； -
.rem &&em
root em 根元素的font-size;根元素即是指html;
em是自己定义的font-size的值 -
vh && vw
viewport 视口 100vh == 视口高度； viewport 100vw == 视口宽度；
一些小技巧
- ps中alt点击一个图层，再ctrl点击另外一个图层，可以测量其中间距；
- 图标可以去iconfont.cn中查找使用；
1.npm i -g http-server; 安装http-server工具；
2.http-server -c-1; 出现网址加端口；可以在本地查看页面；
感悟
惊讶于方方老师的知识储备量，很好的前端习惯，比如用命令行操作，英语阅读能力，这些都是很值得学习的方向，任重道远啊。
网友评论