浮动
- 高度塌陷
- 定义:在浮动布局中,父元素的高度默认被子元素撑开,当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑开父元素的高度,导致父元素的高度丢失。
- BFC(Block Formatting Context) 块级格式化环境
- BFC是css中的一个隐含的属性,可以为一个元素开启BFC,开启BFC后该元素会变成一个独立的布局区域
- 开启BFC后的特点
- 开启后的元素不会被浮动元素所覆盖
- 开启后的元素子元素和父元素外边距不会重叠
- 开启后的元素可以包含浮动的子元素
- 通过一些特殊的方式来开启元素的BFC:
- 设置元素的浮动(不推荐)
- 将元素设置为行内块元素(不推荐)
- 将元素的overflow设置为一个非visible的值(overflow: hidden)(解决高度塌陷问题一种方法)
- clear清除浮动元素对当前元素带来的影响(实质是给该元素增加外边距)
- clear:both;清除影响大的一个(增加最大的外边距)
- 伪元素解决高度塌陷和外边距重叠问题
// 解决高度问题 在父元素后加伪元素 .box1::after{ content: ''; display: block; //伪元素是行内元素 clear: both; } // 同时解决高度塌陷和外边距重叠(前两个) // 加上类名clearfix .clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; }
定位
- 相对定位:“相对于”元素的在文档中的初始位置进行移动
- 设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。不脱离文档流。
- 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
- 绝对定位:绝对定位的元素的位置相对于最近开启定位的祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块
- 绝对定位使元素的位置与文档流无关,因此不占据空间。脱离了文档流。
- 因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。
字体
- 文本的水平居中对齐
- 设置line-height与高度height相同
- 设置text-align,可选值:left、right、center居中对齐、justify两端对齐
- 设置元素垂直对齐的方式:vertical-align
- 可选值:baseline 默认值 基线对齐、top顶部对齐、bottom底部对齐、middle居中对齐(相对于X)
- 设置文本修饰:text-decoration
- 可选值:none 什么都没有、underline下划线、line-through删除线、overline上划线;还可设置颜色等
- 设置网页如何处理空白:white-space
- 可选值:normal正常、nowrap不换行、pre保留空白
width: 200px; white-space: nowrap; overflow: hidden; // 隐藏 text-overflow: ellipsis; // 省略号
- 设置文本在页面中垂直居中
.center { height: 200px; width: 200px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .center { height: 200px; width: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } .center { height: 200px; width: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <body> <div class="center">我要垂直居中!</div> </body>