首页 > 其他 > 详细

盒子模型

时间:2019-01-12 17:43:32      阅读:36      评论:0      收藏:0      [点我收藏+]

标签:一个   塌陷   展示   稳定   set   优先   red   img   稳定性   

盒子边框

    border:border-width || border-style ||border-color

                 div{border:1px  solide  red};

    border-style常用属性:

    none  无

        solid  实线

        dashed 虚线

        dotted 点线

        double 双实线

表格的细线边框   border-collapse:collapse

圆角边框

border-radius:左上角  右上角  右下角  左下角;

div{border-radius:50%}取宽高的一半,会变成一个圆

div{border-radius:10px} 上下左右都是10px

div{border-radius:10px 20px} 左上角 右下角是10px  右上角  左下角是20px

内边距 padding 内容到边框的距离

div{padding:10px}上下左右都是10px

div{padding:2px 3px}上下2px 左右3px

div{padding:2px 3px 4px}上2px左右3px 下4px

div{padding:3px 4px 5px 6px}上3px 右4px 下5px 左6px 顺时针方向

外边距margin 取值顺序与内边距相同

外边距可以让盒子实现水平居中,需要满足以下两个条件:

 a  必须是块级元素

 b  盒子必须指定宽度width

 .header{width:10px;

        margin:0 auto;}

  section img{width:200px;   插入图片的大小可以用width height改变

           margin-top:30px ;插入图片更改位置,用padding margin

          background-size:200px 120px;背景图片更改只能用background-size,背景图片适                                                                      合做一些小图片,使用产品展示之类的用插入图片

         }

清除元素默认内外边距

*{padding :0;

  margin:0;}

注意:行内元素没有上下内外边距,只有左右内外边距,尽量不要给行内元素指定上下内外边距

外边距合并

使用margin定义块元素的垂直边距时,可能会出现外边距合并问题

a.相邻块元素垂直外边距合并

如果上边元素有margin-button下边元素有margin-top,他们之间的垂直距离不是margin-button与martin-top的和,而是两者较大值,这种现象称为相邻块元素垂直外边距的合并(也称为外边距塌陷)

解决方式:避免就好了,只给一个盒子外边距

b.嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距与子元素的上外边距发生合并,合并后的边距为两者中较大值,即使父元素的上外边距为0,也会发生合并。

解决方式:1.为父元素定义1px的上边框或上内边距

                         2.为父元素添加overflow:hidden

 

Content宽度和高度

外盒尺寸计算(元素空间尺寸)

Element空间高度=content  height +padding+border+margin

Element空间宽度=content width+padding+border+margin

内盒尺寸计算(元素大小)

Element height=content height+padding+border

Element width=content width+padding+border

注意:

a  计算宽高属性,只适用于块级元素,对行内元素无效,但是img input除外

b  计算盒子模型的总高度,还应该考虑上下两个盒子垂直外边距合并的情况

c  如果一个盒子没有给定高度和宽度或者没继承父亲的宽高,则padding不会影响本盒子的大小

盒子模型布局稳定性

优先使用width  >padding > margin

原因:

a  margin会有外边距合并,还有IE6下面margin加倍的BUG,所以最后使用

b  padding会影响盒子大小需要进行加减计算,比较麻烦,其次使用

c  width没有问题,经常使用宽度剩余法  高度剩余法来做

box-sizing:bording-box   padding border 不撑开盒子

盒子阴影

语法格式:

Box-shadow:水平阴影  垂直阴影|模糊距离  阴影尺寸  阴影颜色  内/外阴影

           h-shadow  v-shadow|blur       spread     color      inset/outset

水平阴影和垂直阴影必填,其他的可以省略

Outset可以不写,系统默认,想要内阴影使用inset

 

盒子模型

标签:一个   塌陷   展示   稳定   set   优先   red   img   稳定性   

原文:https://www.cnblogs.com/wxwxwx/p/10260091.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号