css基础一-CSDN博客

本文链接：https://blog.csdn.net/weixin_47976412/article/details/129571717

文章介绍了CSS布局中浮动元素导致的高度塌陷问题，以及如何通过BFC（块级格式化上下文）来解决这一问题，包括开启BFC的几种方式。此外，还讨论了相对定位和绝对定位的概念，以及字体对齐和文本修饰的相关属性。

摘要由CSDN通过智能技术生成

                    
                        
                    
                    浮动 
高度塌陷 
  定义：在浮动布局中，父元素的高度默认被子元素撑开，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑开父元素的高度，导致父元素的高度丢失。
 
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>
 

                