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: 针对于行内和行内块元素 (?)