1涩拙、浮動的元素有什么特征?對父容器及其子元素耸采、普通元素兴泥、文字有什么影響?
浮動的元素在不清除浮動的情況下會脫離正常的文檔流虾宇,將不再文檔流中占據(jù)位置搓彻;
如果浮動的元素為子元素的情況下父元素沒有定義固定寬度和高度則父元素降抓取不到浮動的子元素的內容,造成父元素的塌陷;
由于元素浮動后不在占據(jù)文檔流的位置好唯,所以與其相鄰的兄弟元素則會被浮動的元素覆蓋竭沫,如果兄弟元素也進行了浮動那么將會緊跟在上一浮動元素后面;(如果想讓未浮動的兄弟元素覆蓋在以浮動的元素上那么久要用到z-index配合定位來解決這個問題)骑篙;如果浮動后父元素寬度已經(jīng)不能容納浮動后水平的所有子元素的寬度那么其它浮動塊兒向下移動,直到有足夠的空間,如果浮動元素的高度不同,那么向下移動的時候可能被卡淄商帷;如果浮動的元素高度不相同當元素下移時下移的元素會卡在高度最小的不下移元素靶端;
對于文字谎势,如果兩個兄弟元素第一個進行了浮動,第二個有內容且沒有進行浮動那么除了第一個元素將覆蓋第二個元素外杨名,第二個元素的文字將會圍繞第一個以浮動元素的四周進行顯示脏榆;
如果一個內聯(lián)元素浮動后即使清除了浮動,此內聯(lián)元素就可以設置width台谍,height须喂,margin,padding 值趁蕊;
2坞生、清除浮動指的是什么?如何清除以及方法掷伙?
浮動后的元素需要清除浮動是己,讓原本已經(jīng)脫離正常文檔流的元素重新回歸正常文檔流當中,避免塌陷任柜;
對于css有一個特定的清除浮動的屬性此屬性 clear 具有三個常用值分別為:left卒废、right、both宙地;代表清除左邊浮動摔认、清除右邊浮動、浮動全部清除宅粥;一般常用的是clear:both; 此方法可用在最后一個浮動的元素下在增加一行代碼來清除:
<div class="big">
<div style="float: left"></div>
<div style="float: left"></div>
<div style="float: left"></div>
<div style=" clear: both;"></div>
</div>
另外除了上面的方法還有一些清除浮動的方法在BFC模式下利用以下方法均可:
float為 left|right参袱;
overflow為 hidden|auto|scroll;
display為 table-cell|table-caption|inline-block粹胯;
position為 absolute|fixed蓖柔;
3辰企、有幾種定位方式风纠,分別是如何實現(xiàn)定位的,參考點是什么牢贸,使用場景分別是竹观?
常用的positionde的值如下圖:
常用的值有三個分別是:position: relative; position: absolute; position: fixed;
position: relative: 使用場景一般為relative可能就要相對于父結點進行定位了一般都是相對定位坯沪;
position: absolute:需要把一個元素始終固定在頁面的一個位置時使用媒怯;
position: fixed:比如有些div懸浮在上方,可能就需要fixed,也就是滾動條移動時不會改變與瀏覽器的位子念赶;
4、position:relative和負margin都可以使元素位置發(fā)生偏移二者區(qū)別是什么启涯?
position:relative困肩;是根據(jù)元素目前的位置進行定位,利用left,right,top,bottom進行位置的改變是針對元素本身來移動并且原來的位置依然占位拗窃;
負margin會把元素上移瞎领、左移,同時文檔流中的位置也發(fā)生相應變化,但是不在占據(jù)原來的位置随夸;