css基础&布局样式&问题

css问题

2019-05-27  本文已影响0人  小唱同学

标准盒模型&非标准盒模型(怪异盒模型)

标准盒模型

标准盒模型 ie盒模型(怪异盒模型)

box-sizing (模型样式) 语法:

box-sizing:content-box  (标准盒模型)|| border-box (怪异盒模型) || inherit || inital

行内块元素的盒模型

块元素的margin 上下边距的传递和叠加问题,和行内元素上下边距,border 有显示没有占位的的问题:

如果将元素转换为行内块元素

行内块元素存在的问题

行内块元素换行问题: 如果代码中行内块元素存在换行符(回车)两个元素显示在一行的时候会有一个间隙

行内块之间存在的间隙

解决方法:1,在html代码中将行内块元素显示在一行,不进行缩进和美观处理

                  2,父元素添加font-size:0 (在子元素中需要重新设置size)

                  3,在父元素上设置word-spacing,设置合适的值(或负值)

                  4,浮动

父级元素小于其子级元素的大小,(不影响后面的元素排列) 会覆盖父级元素,可以使用 overflow

overflow  处理内容溢出 :visible 默认可见

                                    hidden  溢出部分隐藏

                                    scroll:强制产生滚动条

                                    auto:自动产生滚动条(如果下部分没有超出,就不会出现对应的滚动条)

body 默认8px外边距


行高的继承:

1,% , px 和当前标签的font-size换算当前父元素的px来继承

2,数字继承的是倍数关系(被继承的大小*倍数) 一般使用 数字(倍数)

垂直对齐方式:

图片的底部默认在其父元素的基线上,下面会有基线到底线之间的一段距离

图片底部默认在其父元素基线上

vertical-align: 针对于行内和行内块元素 (?)

上一篇 下一篇

猜你喜欢

热点阅读