關(guān)于浮動(dòng)
如何清除浮動(dòng)
已知的浮動(dòng)元素都是脫離普通文檔流的；如果當(dāng)前空間允許，則其后的元素會(huì)向上提升至與其平起平坐；所以浮動(dòng)之后就會(huì)出現(xiàn)一個(gè)問(wèn)題：包圍浮動(dòng)的父元素會(huì)引起塌陷
解決方案：
- 為父類元素設(shè)置overflow: hiden 或 auto ( 除了visible 以外）
原理：強(qiáng)制父元素包裹成浮動(dòng)元素，讓父容器形成BFC（塊級(jí)格式化上下文） 關(guān)于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>
- 浮動(dòng)父元素
原理和1一樣
.wrap{
float: left;
}
- 在父元素末尾添加非浮動(dòng)塊級(jí)元素 或者 在偽類上進(jìn)行添加
<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>
- 沒(méi)有父元素如何清除
給一個(gè)浮動(dòng)元素應(yīng)用clear:both, 強(qiáng)迫定位在前一個(gè)浮動(dòng)元素下方
<img src="1.jpg"/>
<img class="clear" src="2.jpg"/>
<style>
img{
float: left;
}
.clear{
clear:both
}
</style>
- 可以用flex布局來(lái)解決浮動(dòng)
任何一個(gè)容器都可以指定為Flex布局：.div{dispaly:flex}.采用Flex布局的元素，稱為Flex容器（flex container），簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員。
css 引入link和@import的區(qū)別
- link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
- link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。
- link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
- link支持使用Javascript控制DOM去改變樣式；而@import不支持。
導(dǎo)入式：
<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: 項(xiàng)目的放大比例，默認(rèn)是0，即如果存在剩余空間，也不放大
flex-shrink: 項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小
