关于浮动
如何清除浮动
已知的浮动元素都是脱离普通文档流的；如果当前空间允许，则其后的元素会向上提升至与其平起平坐；所以浮动之后就会出现一个问题：包围浮动的父元素会引起塌陷
解决方案：
- 为父类元素设置overflow: hiden 或 auto ( 除了visible 以外）
原理：强制父元素包裹成浮动元素，让父容器形成BFC（块级格式化上下文） 关于BFC
<section class="wrap">
<img src="cat.png">
<p>这是一只猫</p>
</section>
<style>
.wrap{
overflow: hidden;
/* overflow: auto; */
}
section{
border: 1px solid blue;
margin: 0 0 10px 0;
}
img{
float: left;
}
p{
margin:0;
font-size:1em;
}
</style>
- 浮动父元素
原理和1一样
.wrap{
float: left;
}
- 在父元素末尾添加非浮动块级元素 或者 在伪类上进行添加
<section class="wrap">
<img src="cat.png">
<p>这是一只猫</p>
<div class = "clear_left"></div>
</section>
<style>
.clear_left{
clear: left;
}
或者可以这样
.wrap:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
section{
border: 1px solid blue;
margin: 0 0 10px 0;
}
img{
float: left;
}
p{
margin:0;
font-size:1em;
}
</style>
- 没有父元素如何清除
给一个浮动元素应用clear:both, 强迫定位在前一个浮动元素下方
<img src="1.jpg"/>
<img class="clear" src="2.jpg"/>
<style>
img{
float: left;
}
.clear{
clear:both
}
</style>
- 可以用flex布局来解决浮动
任何一个容器都可以指定为Flex布局：.div{dispaly:flex}.采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员。
css 引入link和@import的区别
- link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式；而@import不支持。
导入式：
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
链接式：
<link rel="stylesheet" href="css的路径" type="text/css" >
flex布局中，flex-grow和flex-shrink属性又什么用？
flex-grow: 项目的放大比例，默认是0，即如果存在剩余空间，也不放大
flex-shrink: 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
网友评论