【104天】前端碎片知识收集00002

Inline-Block（内联块）

inline-block值混合块和内联特性。
盒子的外部被视为内联元素。因此，不会为元素创建新行。
框的内部被视为块元素，并应用诸如宽度，高度和边距的属性。

block

li、

inline

a、

background

仅针对width和padding，不针对border、margin

浮动

1、浮动后，子元素父元素若不设置宽度，将默认设置为width：100%，即子元素的宽度等于父元素。
2、浮动后，若子元素设置宽度，父元素不设置宽度，子元素将撑开父元素。float后width示意demo

z-index

z-index需要与postion：absolute/relative/fixed/inherit配合使用。

margin

两个magin相遇时，他们会重合，取较大者形成间距。margin重叠示意DEMO

注意：若子元素超出父元素，父元素会与父元素进行排布，不会理会其父元素的子元素。
父元素与父元素进行比较

transition

用于渐变的一个属性
W3C文档

height：0与overflow配合的效果 VS 清除浮动时的height：0与overflow配合

overflow:hidden在清除浮动时给父元素设置可以让父
元素从height：0变为有高度（子元素高度），但是
若父元素内部不是浮动的子元素，你这样设置height：
0，将使子元素隐藏。

tab标签纯CSS实现

参考文章：用纯css实现下拉菜单的几种方式

法1：hover+display：none大法

思路：用ul、li做导航条，然后加上伪类hover，控制display在none与block之间切换。
局限性：鼠标移开导航条就没了

法2：radio+label+display：none大法

思路：用input的radio类型，关联label，然后设置input为display：none；通过点击label来控制display与block之前切换。
局限性：？

法3：overflow大法

思路：将下拉菜单的内容部分与导航栏放在一个盒子里面，然后将导航栏与盒子height设置为一样，同时设置overflow：hidden；将下拉菜单的内容部分隐藏起来。
此法需要注意Z-index。

法4：ul高度设为0+opacity大法

思路：同法3 只是把overflow替换成opacity。

上面的几种方法都是不能添加过渡效果的，鼠标滑过时下拉菜单就马上弹出来了，用户体验不是很>好，下面这种方法可以添加过渡的效果来实现一定时间内来弹出

法5：absolute大法

思路：将下拉菜单用absolute放到浏览器外面看不到的地方【left：-999px；】，显示时再拿回来【left：0；】

法6：将下拉菜单字体、背景颜色改为透明