img { width:auto; height:auto; max-width:100%; max-height:100% }
近來，在寫input表單時候，忽然發現一個問題，那就是：雖然input可以設置寬高，在設置width和height相同時，當type類型不同，其對應的寬高效果也完全不一致，先上代碼： <!DOCTYPE html>
浮動float: 浮動的框可以向左向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止.由於浮動框不在文檔的普通流中(所以這時會出現重疊的現象),所以文檔的普通流中的塊框表現得就像浮動框不存在一樣. 值 描述
animation: 配合@keyframe 兩者的name 要對應 .box{ height:100px;width:100px; border:15px solid black; animation: changebox 10
flex 父元素設置 display: flex flex-direction: row | column | row-reverse | column-reverse flex-wrap: wrap | no-wrap | wr
前言： 之前在項目中，經常會遇到左側的側邊欄能自由伸縮，右邊的內容區域能伴隨着左邊側邊欄的伸縮自由填滿寬度，假設右邊的內容區域有一個寬度填滿右邊區域，並且需要固定懸浮在右邊區域的底部，如下圖 一般情況下，要想保證右下角的懸
在我們設置CSS的時候，對標籤元素不設置邊框屬性或者取消邊框屬性一般設置爲：border:none;或border:0;兩種方法均可。 border:none;與border:0;的區別體現有兩點：一是理論上的性能差異；二是瀏覽器兼容
1) 簡單點的使用padding使其“看上去”對齊 適合寬度固定的場合，只要padding合適，效果還是不錯的 select { padding: 0 0 0 20px; } 2） 居右對齊： 可以使用rtl屬性來來控制， <se
span{word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;}
可以詳見：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/outerHTML 裏面講的比上面清楚
前言：關於text-align:center和文字通過height與line-height實現的方式就不再贅述 1.未知元素寬高 方法一： 代碼實例： html==> <div class="table"> <div class
1.首先，什麼是預處理器呢？ A:CSS（Cascading Style Sheet-級聯樣式表） 預處理器是一種用來爲 CSS 增加一些編程特性的語言，無需考慮瀏覽器的兼容性問題，例如你可以在 CSS 中使用變量、函數、簡單的程序邏輯等
寫這篇文章的緣由是因爲做dashboard的項目，圖形是svg的項目,參考的項目使用div寫的，然後爲了改樣式一直在套樣式，結果套不出來，也是醉了，整理了一下svg的基本格式，從w3c上整理的，詳細的列子參考https://www.w3s
官方中的解釋是：外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。 外邊距合併的條件 當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二
本文主要講解以下內容，供參考 什麼是BFC 形成BFC的條件 BFC的佈局規則 BFC的應用 什麼是BFC 使用BFC的原因：使用一定的CSS聲明可以生成BFC，瀏覽器對生成的BFC有一系列的渲染規則，利用這些渲染規則我們
transition和transform都是一種動畫，translate是transform裏的一個屬性 （純屬個人理解，如有錯誤請大佬指出） transition（動畫效果） transition(要過渡的屬性 花費的時間 運動曲線 何
