HTML+CSS 页面布局

最近复习了下CSS 样式和HTML，简单来说就是把静态图片转换为HTML, 做UI，不管是WPF，Xamarin, Winform 都是万变不离其宗的盒子模型，外margin 内padding. 用 * 米网站练手，做完感觉还可以，相似度98%

涉及到的知识点

1. 怎么把元素一行显示？

   因为没有表格了，这么把这些元素多列显示呢。行内元素本身就是在一行显示，如果遇到块状元素，那么就要用到浮动，浮动元素本身是撑不开父元素的高度和宽度的，所以父元素会塌陷，那么解决办法有几种：给父设置高宽; clear:both, BFC 常用overflow:hidden(有些效果有副作用)

   浮动元素是脱离了文档流，但是如果发现布局乱了，记得看下面浮动的元素往哪里靠，被靠的地方是个关键点。另外个是浮动元素本身内部高宽比较大引起的换行。F12用鼠标选中浮动元素，看显示的位置在哪里根据情况修改。浮动元素的高宽是靠本身的内容支撑的。

2. 压盖现象

  通过定位（子绝父相）可以实现压盖现象，一般的布局推荐用浮动，特殊效果比如滑动门，鼠标hover时候显示这些特效用定位

3. 水平居中

   行内元素本身居中，受父元素的text-algin:center控制

   水平元素本身居中，margin:0 auto;

   元素内部元素居中：text-algin:center.

4. 垂直居中

    内容垂直居中， line-height = height.

    块状元素垂直居中，用padding 把自己挤到合适的位置也行。

5. 怎么精确调整位置 Margin Padding

   Margin 是挤大父元素的高或者宽，Padding 是扩大自己本身的高宽，常用来给内容上下留等距离的空间，让子元素看起来居中布局了。

6.微调位置

 设置自己为position:relertive. 根据自己的top,left,right,bottom 微调，是相对于自己目前的位置微调

7.伪元素

  伪元素不占位置空间，但是能附加到其对应的元素上，特别适合那些边框啊，小三角之类的。

8.打补丁

 如果写了一个类，但是想对其中某一个精确控制，可以再写一个类, 给class 同时添加几个类。

9.其它零碎

  行内块会用空白折叠，代码在VSCode里面换行和不换行视觉显示上是有区别的

  行内元素设置margin-top margin-bottom 不生效，需要转换为块状元素，同样高宽也需要转换为块状元素生效

10. 疑难问题，比如鼠标移动到超链接上没小手，或者事件没触发，看是不是写的有DIV或者别的盒子压盖住了，导致事件传递不下去，另外个打开F12查看继承链上的属性，可能从继承链上继承了意外的属性，或者写的CSS的权重不高，越具体越高。找“差异”来确定问题出在哪里