【CSS基础】记录一些个人遇到的关于排布的问题
作者：互联网
文章目录
- 前言
- 横向排布会有空白文本节点占位5px的问题
- 纵向排布margin塌陷
- 子级margin-top溢出父级外
- 会影响排布的继承属性
- 三个隐藏的布局区别
- 不同大小的子元素在父元素内统一布局
- 浮动带来的特性
- 设置position：absolute带来的特性
- 盒子在不同分辨率的屏幕中居中
- 元素左右布局
- 如果图片大小固定了，和其他盒子有孔隙
- 标准盒模型排布问题
前言
本人css小菜鸟一枚~，对于css学习的个人理解分为四个阶段：
- 学会使用并实现设计要求的布局；
- 将代码规范化，简洁化，条理化；
- 实现更高级别，追求美感的效果；
- 高级动画库，UI库的制作；
目前小菜鸟属于第一阶段中哈哈。
不说了，开始记录个人遇到的一些排布问题。
横向排布会有空白文本节点占位5px的问题
- 使用浮动；
- 父级设置font-size: 0;
- 使用position定位；
- 相关子级margin为-5px；
- 父级设置letter-spacing: -5px；
- 标签不要换行；
纵向上没有这个问题。
纵向排布margin塌陷
上下盒子外边距以最大值排布，值一样的话，只也只取一边值；
- 只设置一个margin，推荐使用；
- 给父级启用BFC；
注意了：加边框是解决不了这个问题的。
子级margin-top溢出父级外
- 需要父级有顶边框才能生效，可以来个透明的边框
border：1px solid transparent;推荐使用； - 可以用绝对定位解决；
- 父级启用BFC；
- 父级用padding；
会影响排布的继承属性
我懒就不记录了，直接看其他博主的文章
三个隐藏的布局区别
- opacity=0：不会改变页面布局，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的；
- visibility=hidden；不会改变页面布局，但是不会触发该元素已经绑定的事件；
- display=none；会改变页面布局，可以理解成在页面中把该元素删除掉一样(实质没删)，脱离普通流；
不同大小的子元素在父元素内统一布局
不同大小的行内化子元素排布默认以底排布，解决办法有：
- 使用浮动；
- position定位；
- 使用vertical-align；
浮动带来的特性
- 给一个元素浮动，如果后面是行内化元素，则浮动仍会占据空间，后面的元素还是乖乖的跟在后面。如果后面是块级元素，则浮动元素直接脱离普通流；
- 会使行内元素的宽高可设置；
- 会使块级元素的宽不是默认100%，由内容撑大；
设置position：absolute带来的特性
- 会使行内元素的宽高可设置；
- 会使块级元素的宽不是默认100%，由内容撑大；
- 宽高变化不会影响周围的布局，比如需要一些遮盖别的元素的动画，就需要用这个来定位；
盒子在不同分辨率的屏幕中居中
水平竖直居中：
- 用绝对定位左上各50%，margin左上各负自身宽高的一半；
- 用绝对定位左上各50%，transform: translate(-50%,-50%)；
- 绝对定位上下左右为0，margin: auto;
- 用flex布局，把主轴和侧轴的值都为center;
水平居中：
5. 转成块级，左右margin分别设置为auto；
6. margin-left:auto; margin-right: auto;
竖直居中：
7. 把父级内的子元素都转成行内元素，给每个子元素加vertical-align：middle，不同大小的都会居中；
8. 把父级内的子元素的line-height设置的和最大的子元素的高一样的；
元素左右布局
- 左右浮动
- 第一个左浮动，另一个文字右对齐
- flex布局
如果图片大小固定了，和其他盒子有孔隙
给自己加一个父级盒子，把自己的class类名也加到父级盒子上;
标准盒模型排布问题
尽量上下用margin，左右用padding，设置宽高的时候注意设置的是content部分；
未来不定期补充~
标签：浮动,布局,父级,记录,元素,排布,margin,CSS 来源： https://blog.csdn.net/pagnzong/article/details/114435971