浮动
- 要善于利用浮动,浮动使得元素形成新的一致的流动方向,方便布局
- 设置元素浮动的常见套路:给子元素设置浮动,给父元素加清浮动的相关样式(防止一些浮动带来的特殊效果)
元素的宽高
- 尽量不要给元素的样式加height 和width, 这会造成很多麻烦,尽量用内部元素和padding填充
- 一个元素的高度由内容决定,块级元素的高度由其内部文档流元素的高度总和决定
- 文档流:文档内元素的流动方向,内联元素从左往右流,块级元素:每一个块都占一行,从上往下流动
- 给内联元素设置宽高不起作用,margin-top和margin-bottom不起作用,有时会根据需要选择display:inline-block,但要尽量避免这么做
字体设置常识
- 文字的居中不是让两个字的中线居中,而是基线对齐
- 不同字体的建议行高不一样
- 设置line-height 与宽度相当可以满足大部分文字居中的要求
- 根据中英文习惯,设置单词或文字换行可以采用如下规则:
中文 word-break:break-all
英文 word-break:word-break - 文字的居中不是让两个字的中线居中,而是基线对齐,
不同字体的建议行高不一样
padding
父元素 加padding 并不影响子元素的宽度,给父元素加padding 可能会使父元素变胖,所以一般会在父元素内再写一个div来加padding ,这样就避免了父元素的变形