css深入浅出总结

一些新属性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
  
  
  第一段是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; 出现网址加端口；可以在本地查看页面；

感悟

惊讶于方方老师的知识储备量，很好的前端习惯，比如用命令行操作，英语阅读能力，这些都是很值得学习的方向，任重道远啊。