Web---margin-padding-fixed测试

最新推荐文章于 2021-07-09 17:13:08 发布

「已注销」

最新推荐文章于 2021-07-09 17:13:08 发布

阅读量718

点赞数

分类专栏： ======= Web ======= Java EE

本文链接：https://blog.csdn.net/Songjs19931206/article/details/42391521

版权

======= Web ======= 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

Java EE

14 篇文章 0 订阅

订阅专栏

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>我是body我是body我是body
<div class="div1">我是div1
    <div class="div2">
        我是div2
    </div>
    <div class="div3">
        我是div3
    </div>
</div>测试2
</body>
</html>

css：

body
{
    border: 10px solid red;
    width: 650px;
    height: 900px;}
.div1
{
    width: 550px;
    height: 350px;
    border: 10px solid blue;
    position: fixed;}
.div2
{
    /* 问题1：固定width与height，对div2设置不同的padding、border，看不同浏览器支持情况*/
    /* 问题2：设置div2的margin-bottom与div3的margin-top，分别定义10px与30px，看浏览器支持情况*/
    /* 问题3：设置div1的padding-left与div2的margin-left，分别定义10px与20px，看浏览器支持情况*/
    /* 问题4：设置fixed属性，这里将body的height属性设置900px，之后设置div1属性为fixed，看浏览器是否支持。*/
    /* 补充问题5 设置div1的4个padding值，当过大时，看div2盒子是否会变形*/
    width: 200px;
    height: 50px;
    border: 10px green solid;
    }
.div3
{
    width: 200px;
    height:50px;
    border: 10px yellow solid;
    }

效果图：

初始：

问题1： 不同浏览器对于width与height的规定。
Ie7:    border不算，padding不算
Ie8:    border不算，padding不算
Ie9:    border不算，padding不算
Ie10:   border不算，padding不算
Firfox：border不算，padding不算
Chrome：border不算，padding不算
Opera： border不算，padding不算
Safari：border不算，padding不算

问题2： 不同浏览器对于相邻元素左右margin的规定。 
---分别定义： marging-right: 30px;   margin-left:10px  间隔30px
Ie7：   按照大的margin处理！
Ie8:    按照大的margin处理！
Ie9:    按照大的margin处理！
Ie10:    按照大的margin处理！
Firfox：按照大的margin处理！
Chrome：按照大的margin处理！
Opera：    按照大的margin处理！
Safari：按照大的margin处理！

问题3： 不同浏览器对于嵌套元素，外padding内margin的规定。 
    定义： padding-left: 20px;   margin-left: 10px;   间隔30px
Ie7：    间隔相加
Ie8:    间隔相加
Ie9:    间隔相加
Ie10:    间隔相加
Firfox：间隔相加
Chrome：间隔相加
Opera：    间隔相加
Safari：间隔相加

问题4： 不同浏览器对于fixed属性的规定。
Ie7：    支持
Ie8:    支持
Ie9:    支持
Ie10:    支持
Firfox：支持
Chrome：支持
Opera：    支持
Safari：支持

拖拽竖滚动条后：

问题5： 不同浏览器对于嵌套元素padding的规定(当padding过大，内元素会怎样)。

---因为元素的的padding不计算在其width与height中，当padding增大时，外边框会同步增大。不会

挤压内部元素。

遗留问题：在IE7中存在一个很奇怪的现象，当为div1设置属性：position： fixed后，出现下图示例，不知道如何解释。（与IE8-10和其它浏览器均不同。）

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web---margin-padding-fixed测试

html："-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/1999/xhtml"> "style.css" rel="stylesheet" type="text/css
复制链接

扫一扫