談談flex布局,你知道flex:110嗎
- flex布局:彈性盒布局(形成彈性盒后可以控制子元素在父級元素中排列位置)
- flex:1 1 0 是由 flex-grow:1 flex-shrink:1 flex-basis:0復合而成 也可以簡寫為flex:1
表示占據主軸上剩下的空間 當子級內容超出的時候會將當前區域撐大
- flex-grow默認值為0,當值大于0時,當父元素有剩余空間時當前元素放大,父元素沒有剩余空間時,該元素不放大。
- flex-shrnk默認值為1,父元素有剩余空間時,該元素不縮小,父元素沒有剩余空間時,該元素縮小。
- **flex-basis**相當于width屬性。
談一下怎么實現一個橢圓,使用css
· 使用border-radius屬性 屬性值可以設置一個/兩個/三個/四個/八個 以下是兩種方法實現橢圓
o 第一種: width: 250px; height: 150px;background: #FFD900;border-radius: 50%
o 第二種: width: 250px; height: 150px;background: #FFD900;border-radius: 50% / 100% 100% 0 0;
脫離布局流有幾種方法?
- 常見的有浮動和定位
- 第一種:浮動布局(float)浮動一般用于讓塊級元素排成一行在同一行顯示任何元素都可浮動,如一個元素設置為浮動元素,浮動元素無論最初是什么都會變成一個行塊級元素,擁有disolay:inline-block屬性
- 第二種:定位布局(position) 定位中的absolute絕對定位可以讓元素脫離文檔流的 如果父級有定位屬性就相對于父級定位 如果父級沒有就會一直往上級查找直至瀏覽器
- 脫離文檔流布局的缺點初始位置不存在就會破壞網頁布局
偽類偽元素區別
· 相同點:都是屬于選擇器中的一種,能實現對于頁面元素的修飾
· 不同點:
o 1、概念不同:偽類:用于已有元素處于某種狀態時為其添加對應的樣式,這個狀態是根據用戶行為而動態變化的;例如鼠標的懸停效果;偽元素:用于創建一些不在DOM樹中的元素,并為其添加樣式;例如:先前向后插入元素內容等等
o 2、使用方法不同:css3規范中要求使用雙冒號(::)表示偽元素,以此來區分偽類和偽元素,比如::before和::after等偽元素使用雙冒號(::),:hover和:active偽類使用單冒號(:)目前來看有一部分瀏覽器為了達到一個更好的兼容性的問題,我們的雙冒號也可以寫成單冒號;但是在一些低版本瀏覽器里面有些時候還是需要使用雙冒號的
為什么無法定義1px左右高度的容器
高版本瀏覽器里面是能夠定義1px的高度的容器的 但是由于瀏覽器的版本和瀏覽器的內核不一樣導致低版本瀏覽器中的兼容性不一樣 在低版本 IE6瀏覽器下面,容易出現這個問題,產生問題的原因是因為默認的行高造成的, 解決的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
更多關于html5培訓的問題,歡迎咨詢千鋒教育在線名師,如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問,獲取試聽資格來試聽我們的課程,在線零距離接觸千鋒教育大咖名師,讓你輕松從入門到精通。