css中高度塌陷介紹以及定位介紹

2021-08-01 09:50:10 字數 861 閱讀 6500

bfc的開啟方式?

bfc的問題?

//開啟bfc實驗

lang="en">

charset="utf-8">

titletitle>

.box1

/*六、給塌陷的父級元素的最後新增乙個元素,使該元素清除浮動,呈現塊級樣式。也可解決高度塌陷問題!*/

/*.box1:after */

.box2

.b1.b2

style>

head>

class="box1">

class="b1">

div>

class="b2">

div>

class="clearfix">

div>

div>

class="box2">

div>

body>

html>

概念:css定位——表示的是某個元素在當前頁面中的位置。

定位一定會有座標軸的概念出現:

乙個元素在當前頁面的位置,其實就是乙個座標軸(x,y)

css定位就是將座標值(x,y)轉換成css中某個具體的屬性使用。

定位的值:

absolute——表示絕對定位

fixed——表示固定定位

relative——表示相對定位

偏移量:

偏移量的作用

絕對定位:

定位效果:

固定定位——fixed

固定定位時絕對定位的一種特殊定位;

固定定位值相對於瀏覽器視窗的定位

相對定位——relative

注意:

css高度塌陷問題

首先什麼是高度塌陷?當我們需要給頁面設定自適應寬高的時候,在文件流中,父元素的高度預設的情況下是被子元素的高度撐開的,子元素的高度就是父元素的高度,當我們給子元素設定了浮動厚,子元素就會脫離文件流 當你第一次給父元素設定自適應的時候,又給子元素設定浮動元素的時候,你就會發現,父元素的高度沒有了,這就...

什麼是CSS高度塌陷?

1.普通定位 塊級元素 按照從上到下的方式逐個排列 行內元素 按照從左到右的方式逐個排列 2.浮動定位 float float left right 它會脫離文件流 3.相對定位 relative 元素會相對於它原來的位置偏移某個距離,改變元素位置後,元素原本的空間依然會被保留 position r...

CSS 浮動和高度塌陷

溢位文字為省略號 p 溢位文字兩行之後為省略號 p 文字 數字的字串兩行之後為省略號 p 1 相鄰塊元素垂直外邊距的合併當上下相鄰的兩個塊元素相遇時,如果上面的元素有下外邊距margin bottom,下面的元素有上外邊距margin top,則他們之間的垂直距離不是margin bottom與ma...