码迷,mamicode.com
首页 > 其他好文 > 详细

前端笔记-20171228

时间:2017-12-29 23:36:11      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:居中   调整   参数   技术   inf   元素   gpo   body   常用   

1.

margin参数:

margin: top right bottom left

技术分享图片

常用的居中方法:margin { 0 ,auto ;},即上下0,左右自动调整。

 

2.html的background继承自body

为什么单设置body{ background:red } 可以覆盖整个页面,设置了margin:50px也没有透明效果。因为html的background-color继承自body。

如图:

技术分享图片

技术分享图片

 

3.width和height的默认值为auto,不是直接继承。

 

4.width和height的计算方式

body{width:100%;height:100%}

width=100%起作用,但height无反应,是因为html的width是由浏览器打开宽度决定的。所以body的width可以直接算出值。

而height的计算方式:浏览器根本不计算html的高度,当body的中堆砌的东西高度超过浏览器高度,才用滚动条出来。

如果想让效果出现,只需设置html{ height=100%;}

 

5.继承关系:body<html<浏览器窗口大小

 

为什么只有body{ height:100%}的时候,body全高效果出不来?因为html的高度一开始根本不计算,有元素的时候才一直堆砌

当设置html{height:100%}的时候,才会达到效果。

技术分享图片技术分享图片

 

6. body{width:100%}有滚动条出现?

技术分享图片

 

 7.为什么会出现滚动条?-1body默认margin不为0,-2外边距合并。

 技术分享图片

8.为什么设置了div的margin=0。依然有边?

 技术分享图片

与上同一个原因。

 

总结:

html默认宽:浏览器窗口宽。

高:无。

body默认宽:如上上图,注意有margin,看具体浏览器。

高:无。

div默认宽:body宽。

高:无。

其次,注意外边距合并问题。

 

前端笔记-20171228

标签:居中   调整   参数   技术   inf   元素   gpo   body   常用   

原文地址:https://www.cnblogs.com/John-/p/8146472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!