CSS盒子模型(border画三角形)及常见兼容问题解决方案

1026 字

5 分钟

CSS盒子模型(border画三角形)及常见兼容问题解决方案

2017-08-21

每一个元素在html中都是一个盒子,用来装其他盒子或者是内容
可以将html页面看做是一个仓库,仓库中从上到下摆了很多箱子,易碎品(盒子和盒子之间要有间距内容和盒子之间要有填充盒子本身要有厚度)

宽高属性#

1.height: 100%;
- 指的是继承父级元素内容的高度
2.width: 100%;
- 指的是继承父级元素内容的宽度

特性#

1.父子关系的时候,在设置margin值的时候,一般只设置上和左,不会设置下和右
2.盒子自身的宽度是由左侧边框的宽度+左侧内边距+内容的宽度+右侧内边距+右侧边框的宽度:

1
ALLwidth=(border-left-width)+(padding-left)+width+(padding-right)+(border-right-width)

padding和margin#

1
padding:1px 2px 3px 4px;//上 右 下 左
2
    //top right bottom left
3
padding:1px 2px 3px;//上 左右 下
4
    //top left/right bottom
5
padding:1px 2px;//上下 左右
6
    //top/bottom left/right

border#

1
border-top-width: 1px; //上边框的宽度
2
border-top-style: solid; //上边框的样式
3
border-top-color: red; //上边框的颜色
4
border-color:red green yellow pink;//上 右 下 左
5
//上边框红色 右边框绿色 下边框黄色 左边框粉色
6
border-color:red green yellow;//上 左右 下
7
//上边框红色 左右边框绿色 下边框黄色
8
border-color:red green;//上下 左右
9
//上下边框红色 左右边框绿色
10

11
//合并缩写设置:
12
border-top:1px solid pink;//上边框1px 实线 粉色
13
border-bottom:1px solid pink;
14
border-right:1px solid pink;
15
border-left:1px solid pink;
16
border:1px solid pink;

利用border画三角形#

1
<style>
2
    div{
3
        border:100px solid/* red*/;
4
        /*border-color: yellow red blue pink;*/
5
        border-color: black transparent transparent;
6
        /*transparent透明的*/
7
        width: 0;
8
        }
9
</style>

“利用border画三角形”

常见问题解决方案#

1.margin支持负值#

margin-left和margin-top为负值的时候跑出浏览器的部分会被吃掉,不会撑开整个页面.

2.margin-top的传递问题#

如果父级没有padding-top或border-top值得时候,子元素设置margin-top值,会将这个值传递给父元素

1
<style>
2
    html,body,div{
3
        padding: 0;
4
        margin: 0;
5
        background: blue;
6
    }
7
    .box3{
8
        width: 300px;
9
        height: 300px;
10
        background-color: green;
11
    }
12
    .parent{
13
        width: 200px;
14
        height: 200px;
15
        background-color: red;
16
    }
17
    .son{
18
        width: 100px;
19
        height: 100px;
20
        background-color: yellow;
21
        /*margin-top: 20px;*/
22
    }
23
</style>
24
<div class="box3">
25
    <div class="parent">
26
        <div class="son"></div>
27
    </div>
28
</div>

此时<在ie5>~11,以及谷歌浏览器中的显示都是一致的,如下图(图片以IE浏览器截图为主)
Alt margin-top传递问题

当给子元素.son设置margin-top<20px>;值后
- IE5~7中并没有出现margin值的传递问题(IE7同IE5,这里就没有截图了)
  Alt margin-top传递问题
- IE8~11以及谷歌中均出现margin-top值传递问题
  Alt margin-top传递问题

解决方法#

方法一) 给父级元素一个属性,`overflow:hidden;`#

1
- 弊端:
2
- `overflow:hidden;`有溢出隐藏的含义,若给父级元素添加这个属性,子级元素超出父级盒子部分将不能显示,例如子级元素的阴影

方法二) 将子级元素的`margin-top`值去掉,改成父级元素的`padding-top`值(建议使用这个方法)#

但是此方法也有弊端:
- IE5中父级盒子的高度并没有改变
  Alt margin-top传递问题
- IE7~11及谷歌浏览器中,父级盒子的高度都增加了20px;
  Alt margin-top传递问题

方法三) 给父级元素上添加一个透明的`border`处理#

弊端:
- 在IE5~7中确实解决了问题
  Alt margin-top传递问题
- 但是在IE8~11及谷歌浏览器中仍然存在margin-top的传递问题
  Alt margin-top传递问题

3.`margin-left`/`margin-right` 在ie6中会双倍#

当元素浮动的时候,有左右的外边距,有时候ie6会出现双倍边距的问题

解决方案<解决双边距这个方法叫css> hack#

方案一). 给这个元素添加`overflow:hidden;`#

方案二). 写ie6的兼容方式,例如:#

1
div{
2
float:left;
3
margin-left:10px !important;
4
_margin-left:5px;
5
<!-- 当浏览器是ie6的时候 读取_margin-left:5px;这句话 -->
6
}

注意:!important出现在css里面的时候,这个属性会覆盖掉所有之前设置的样式权重最大,比id选择器还大

overflow盒子内容多余部分的处理方式#

overflow:hidden; 直接将多余隐藏
overflow:auto; 如果有多余部分出现滚动条,如果没有就不出现
overflow:scroll; 不论是否有多余部分,都会出现滚动条

支持与分享

如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！

打赏

CSS盒子模型(border画三角形)及常见兼容问题解决方案

https://gaodaxiu-blog.netlify.app/posts/CSS盒子模型(border画三角形)及常见兼容问题解决方案/

作者

GaoDaXiu

发布于

2017-08-21

许可协议

CC BY-NC-SA 4.0

vertical-align

为HEXO博客中每篇文章的浏览量统计

音乐

音乐

宽高属性#

特性#

padding和margin#

border#

利用border画三角形#

常见问题解决方案#

1.margin支持负值#

2.margin-top的传递问题#

解决方法#

方法一) 给父级元素一个属性,`overflow:hidden;`#

方法二) 将子级元素的`margin-top`值去掉,改成父级元素的`padding-top`值(建议使用这个方法)#

方法三) 给父级元素上添加一个透明的`border`处理#

3.`margin-left`/`margin-right` 在ie6中会双倍#

解决方案<解决双边距这个方法叫css> hack#

方案一). 给这个元素添加`overflow:hidden;`#

方案二). 写ie6的兼容方式,例如:#

overflow盒子内容多余部分的处理方式#

支持与分享

音乐

CSS盒子模型(border画三角形)及常见兼容问题解决方案

宽高属性#

特性#

padding和margin#

border#

利用border画三角形#

常见问题解决方案#

1.margin支持负值#

2.margin-top的传递问题#

解决方法#

方法一) 给父级元素一个属性,overflow:hidden;#

方法二) 将子级元素的margin-top值去掉,改成父级元素的padding-top值(建议使用这个方法)#

方法三) 给父级元素上添加一个透明的border处理#

3.margin-left/margin-right 在ie6中会双倍#

解决方案<解决双边距这个方法叫css> hack#

方案一). 给这个元素添加overflow:hidden;#

方案二). 写ie6的兼容方式,例如:#

overflow盒子内容多余部分的处理方式#

支持与分享

方法一) 给父级元素一个属性,`overflow:hidden;`#

方法二) 将子级元素的`margin-top`值去掉,改成父级元素的`padding-top`值(建议使用这个方法)#

方法三) 给父级元素上添加一个透明的`border`处理#

3.`margin-left`/`margin-right` 在ie6中会双倍#

方案一). 给这个元素添加`overflow:hidden;`#