Web基础知识

盒子模型

问题：父元素设置宽度为100%，设置padding会出现滚动条。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>父元素width为100%，设置padding，出现滚动条</title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    .box{
        width:100%;
        background: #ccc;
        padding:20px;
    }
    .box1{
        width:100%;
        background: #eee;
        height: 200px;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>
</head>    
</html>

原因子元素盒子渲染时，先确定content的大小，再去计算padding大小，盒子是由内向外计算渲染的。
盒子模型分IE盒子模型和W3C盒子模型
IE：设置box-sizing: border-box; width= content+padding+border
W3C: 去掉父元素的width：100% 就可以了 width=content

block inline inline-block 区别

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（很霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素（行内元素）特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
常见的行内元素（span、image、a、label、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

position

static

relative

absolute

fixed

sticky

static

如果不设置position，默认为static定位，浏览器会根据源码决定元素的位置，此时，top，left，bottom，right 属性无效。

relative, absolute, fixed

这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。
relative
相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。
absolute
相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html
fixed
fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

sticky

sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生”动态固定”的效果。原因是这四个属性用来定义”偏移距离”，浏览器把它当作sticky的生效门槛。

它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。

参考 CSS 定位详解

外边距重叠

在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。
发生外边距重叠的情况：

都属于普通流的块级盒子且参与到相同的块级格式上下文中
没有被padding、border、clear和line box分隔开
都属于垂直毗邻盒子边缘：
盒子的top margin和它第一个普通流子元素的top margin
盒子的bottom margin和它下一个普通流兄弟的top margin
盒子的bottom margin和它父元素的bottom margin
盒子的top margin和bottom margin，且没有创建一个新的块级格式上下文，且有被计算为0的min-height，被计算为0或auto的height，且没有普通流子元素

如何避免：

浮动元素不会与任何元素发生叠加，也包括它的子元素
创建了 BFC 的元素不会和它的子元素发生外边距叠加
绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
inline-block 元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
普通流中的块级元素的 margin-bottom 永远和它相邻的下一个块级元素的 margin-top 叠加，除非相邻的兄弟元素 clear
普通流中的块级元素（没有 border-top、没有 padding-top）的 margin-top 和它的第一个普通流中的子元素（没有clear）发生 margin-top 叠加
普通流中的块级元素（height为 auto、min-height为0、没有 border-bottom、没有 padding-bottom）和它的最后一个普通流中的子元素（没有自身发生margin叠加或clear）发生 margin-bottom叠加
如果一个元素的 min-height 为0、没有 border、没有padding、高度为0或者auto、不包含子元素，那么它自身的外边距会发生叠加