CSS_布局

-王二毛-

已于 2022-03-07 09:01:28 修改

阅读量86

点赞数

分类专栏： # css 文章标签： css html

于 2021-05-11 17:32:25 首次发布

本文链接：https://blog.csdn.net/weixin_45084986/article/details/115061162

版权

css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

盒模型

边框的大小(border-width)会影响到整个盒子的大小
例如：此时盒子的大小为200+10+10=220px

.box1 {
		width: 200px;
		height: 200px;
		border-width:10px;
	}

float浮动

position定位

解决高度塌陷

方法一：

 .box1::after {
            /* 默认情况下after是行内元素*/
            /* 使用伪元素解决高度塌陷 */
            content: '';
            display: block;
            /* 将行内元素转换成块元素 */
            clear: both;
        }

方法二

 /* learfix 这个样式可以同时解决高度塌陷外边距重叠的问题，直当你在遇到这些问题时，直接使用clearfix这个类即可*/
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }