Css居中内外边距及继承性总结
Css居中方法总结
一、水平居中
1、行内元素居中
可通过给父元素设置 text-align:center 来实现。如果有float影响，这个失效。
2、块状元素居中
方法1：
块状元素水平居中可以用 margin： 0 auto；实现。
方法2：
改变块级元素的 display 为 inline 或inline-block类型，然后使用 text-align:center 来实现居中效果。
方法3：
通过给父元素设置 position:relative 和，子元素设置 position:absulute; 和 left: -50% margin-left: -子元素自己宽度的一半 来实现水平居中。
二、垂直居中
行内行内块元素居中
可以给父级盒子添加line-height：父级盒子高度+子级高度的一半；
行内元素及文字垂直居中
直接给父级盒子添加line-height：父级盒子高度 即可；
利用绝对定位
通过给父元素设置 position:relative 和，子元素设置 position:absulute; 和 topt: -50% margin-top: -子元素自己高度的一半 来实现垂直居中。
行内元素行内块元素可以用vertical-align：middle使其基于中线对齐
继承性
可以被继承的文字属性：font-size、font-family、font-weight、font-style、text-align、text-indent、另外还有color颜色可以被继承，但是超链接a是不能够继承父级的颜色color，我们需要给a单独设置颜色；
内外边距margin和padding的问题
给行内元素设置margin-top、margin-bottom、padding-top、padding-bottom是不会显示效果的；如果想要让他们生效怎么处理？
解决方案：01、不要添加；
02、将行内元素的显示模式用display: block;转换给块元素或者用display: inline-block;转换行内块元素；
03、行内块元素内外边距是叠加的，外边距不会合并；
嵌套垂直外边距合并
问题：如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；
解决方案：
1、为父级设置上边框（不用，因为添加了border父级的高度会增大）
2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；
3、直接给父级添加overflow:hidden;（常用方法）
|
|
收藏
淘帖
踩
