09.CSS布局小技巧

CSS小技巧

1.重置默认样式

介绍

在早期，元素默认样式，能够让我们快速的绘制网页，但如今网页的设计越来越复杂，内容越来越
多，而且很精细，这些默认样式会给我们绘制页面带来麻烦；而且这些默认样式，在不同的浏览器
上呈现出来的效果也不一样，所以我们需要重置这些默认样式

使用全局选择器

介绍

此种方法，在简单案例中可以用一下，但实际开发中不会使用，因为 * 选择的是所有元素，而并
不是所有的元素都有默认样式；而且我们重置时，有时候是需要做特定处理的，比如：想让 a 元
素的文字是灰色，其他元素文字是蓝色

代码

* {
    margin: 0;
    padding: 0;
}

reset.css

介绍

选择到具有默认样式的元素，清空其默认的样式

经过 reset 后的网页，好似“一张白纸”，开发人员可根据设计稿，精细的去添加具体的样式

Normalize.css

介绍

Normalize.css 是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式

相对于reset.css的优点

• 保护了有价值的默认样式，而不是完全去掉它们
• 为大部分HTML元素提供一般化的样式
• 新增对 HTML5 元素的设置
• 对并集选择器的使用比较谨慎，有效避免调试工具杂乱

备注

Normalize.css 的重置，和 reset.css 相比，更加的温和，开发时可根据实际情况进行选择

2.居中

文本水平居中

介绍

让文本在当前盒子中水平居中可以使用文本样式 text-align 属性即可

代码

p {
    text-align: center;
}

块元素水平居中

介绍

针对类似 div 样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto

代码

div {
    margin: 0 auto;
}

行内元素水平居中

介绍

若子元素为行内元素、行内块元素，给父元素加上： text-align:center 即可完成子元素在父亲中水平居中

代码

a {
    text-align:center
}

单行文本垂直居中

介绍

让文字行高 line-height 等于盒子高度 height

代码

p {
    line-height: 盒子高度;
}

多行文本垂直居中

介绍

让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同

代码

p {
    padding: 20px 0;
}

块元素垂直居中

若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content - 子元素盒子
总高) / 2

行内元素垂直居中

让父元素的 height = line-height ，每个子元素都加上： vertical-align:middle

补充：若想绝对垂直居中，父元素 font-size 设置为 0

3.元素之间的空白问题

介绍

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符

解决方案

• 去掉换行和空格（不推荐）
• 给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）

4.行内块的幽灵空白问题

产生原因

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的

解决方案

• 给行行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、top 均可
• 若父元素中只有一张图片，设置图片为 display:block
• 给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置 font-size