body与html的理解

当<html>标签无背景样式时，<body>的背景色其实不是<body>标签的背景色，而是浏览器的。一旦html标签含有背景色，则<body>的背景色变成了正常的body标签的背景色，而此时的<html>标签最顶级，背景色被浏览器获取，成为浏览器的背景色。

body{background:green; margin:100px; border:30px solid pink;}

html{background:red;margin:100px; border:30px solid yellow;}
    body{background:green; margin:100px; border:30px solid pink;}

默认状态下html有个verflow:scroll

滚动条的出现导致页面宽度减小，布局发生一些偏移，而这种便宜造成的体验不好的

解决方法：

/*去掉页面默认的滚动条*/
    html{
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    /*设置body滚动条*/
    body{
        height:100%;
        margin: 0;
        overflow: auto;
    }

关于height：100%

要想高度百分比起作用，一般来说，要满足两个条件：其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度（body，html另外条论），如果中途有个height为auto或是没有设置height属性，则高度百分比就不起作用；其二，标签本身的属性，如果inine属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比起作用的前提条件之一

关于body和thml

可以看这里：https://www.zhangxinxu.com/wordpress/2009/09/%e5%af%b9html%e4%b8%8ebody%e7%9a%84%e4%b8%80%e4%ba%9b%e7%a0%94%e7%a9%b6%e4%b8%8e%e7%90%86%e8%a7%a3/

posted on 2019-09-02 16:42 嗯嗯呢阅读(218) 评论(0) 收藏举报