这是我参与[第五届青训营]伴学笔记创作活动的第6天 今天是学习css的最后一天 盒子模型已经学习的差不多了，是时候学一些更改元素位置的属性了 div { width: 300px; height: 300px; background-color:pink; margin: 0 auto; /* 这样就实现了版心居中，0表示上下外边距，auto表示左右外边距 浏览器因为auto，会自动分配左右距离相同，所以就居中了 */ }
/* 浮动是为了把各个块放在一行，达到网页布局的效果*/
div {
width: 100px;
height: 100px;
}
.one {
background-color: pink;
/* 添加浮动，让这个块在左边 */
float: left;
}
.two {
background-color: skyblue;
/* 添加浮动，让这个块贴着上一个块 */
float: left;
}
浮动会导致元素脱离标准流
.one {
width: 100px;
height: 100px;
background-color: pink;
/*
浮动可以使元素脱离标准流(脱标)，且可以设置宽高
在标准流中不占位置，直接"浮"起来了
浮动比标准流高半个级别，
所以 也只是元素脱标，元素里的字体无法被脱标
*/
float: left;
margin-top: 30px;
/* 注意，浮动后的元素不可以再居中！*/
margin: 0px auto;
}
.two {
width: 200px;
height: 200px;
background-color: skyblue;
}
.three {
width: 300px;
height: 300px;
background-color: orange;
}
/* 清除浮动的方法 */
/* 额外标签法：在父级元素的最后添加一个块级元素，
然后给添加的块级元素设置clear:both
缺点：添加了额外的标签，让html结构变得复杂*/
/* 单伪元素清除浮动法(工作中常用) */
/* 这段代码不需要你去背，工作中会提前写好 */
/* 双伪元素清除浮动法(工作中常用) */
/* 这段代码不需要你去背，工作中会提前写好 */
div {
width: 300px;
height: 300px;
background-color: pink;
}
/* 语法格式：
::before 在父内容的前面加上内容
::after 在父内容的末尾加上内容
然后content+内容，没有content不生效！ */
.father::before {
/* 我们给父内容的最前面添加个内容 */
content: '按钮';
color: yellow;
}
</style>
<!-- 首先要找到父级，在父级里创建子标签 -->
<!-- 创建父级标签div -->
