浮动: 是 CSS 中布局最多的一个属性
有浮动, 一定要清除浮动
浮动不是一个元素单独浮动, 要浮动一起浮动
清除浮动四种方式:
1. 给父盒子添加高度, 一般导航栏
2. 给浮动元素后面加一个空的块标签,
并且设置 clear:both
3. 伪元素清除法
给父元素设置
- .clearfix:after{
- content:'.',
- display:block;
- clear:both;
- height:0;
- visibiable:hidden;
- }
4. 给父元素 overflow:hidden
块元素与行内元素的转换
块 ===行内 display:inline
行内 ==块 display:block
行内 ==行内块 display: inline-block; input
标准流下的盒子居中:
1. 一定要有明确的 width
2.margin: 0 auto;
3. 文本居中 text-align:center;
如果盒子浮动了, margin: 0 auto; 就失效了
标准下的盒子, 不浮动的盒子, 一定要善于使用父 padding, 而不是 margin
margin 塌陷问题:
标准流的盒, 垂直方向会出现塌陷问题, 这个问题没法解决, 这种叫'奇技淫巧'
盒子浮动了, 垂直方向上不出现任何问题
水平方向, 不管是标准流下的盒子还是浮动的盒子, 都不会出现任何问题
文本属性:
text-align: 设置文本的对齐方式
text-decoration: 设置文本的装饰
text-indent: 设置首字母缩进 em
line-height: 一行的高度
font-size 字体大小一定不要大于行高
- font-size:16px;
- line-height:60px;
如果让单行文本垂直水平居中:
line-height = 盒子的 height,
来源: http://www.bubuko.com/infodetail-2622797.html