css重點知識和bug解決方法

1.圖片向下撐大3像素問題

在一個盒子裏面放一張圖片，默認狀況下，圖片會向下撐大3像素，有如下幾種解決方法：

1.1 給圖片添加display:block；

1.2 給圖片添加 float:left；

1.3 給圖片添加 vertical-align:middle;

1.4 給他的父元素加font-size：0；

2.如何實現一張未知寬高的圖片在一個盒子裏面作水平垂直居中？

給父元素添加寬高，添加行高 添加 text-align：center
                    給圖片添加 ：vertical-align：center

3.元素的類型分類哪幾種？各自都有什麼特色？

 塊元素            獨佔一行，豎着排，能設置寬高
 行內元素            默認狀況下文本一行顯示，不能設置寬高
 行內塊狀元素        inline-block,既有行內元素的特色又有塊狀元素的特色
 可變元素            添加float：left 至關於display：block

4.如何實現一個元素消失和出現？

display：none  display：block
                    opcity:0; opcity:1; 

 5.單行文本溢出顯示省略號怎麼實現？
                        添加width；
                        white-space：nowrap；
                        overflow：hidden；
                        text-overflow：ellipsis；

6.定位的屬性值有哪幾個？分別有什麼特色？
                position:absolute          絕對定位，  脫離文檔流    
                在有父元素或者父元素沒有設置定位的狀況下,它的參照物是整個瀏覽器
                若是父元素設置了相對定位,那麼它的參照物就是它的父元素        
                position:relative         相對定位，  不脫離文檔流
                它的參照物是它原來的位置
                position:fixed          固定定位，   脫離文檔流
                position:sticky          粘性定位        脫離文檔流
                它的參照物是整個瀏覽器

 7.樣式引入的方式有哪幾種
                    外部引入            <link rel="stylesheet" type="text/css" href=""/>        
                    <style>
                         @import url("global.css")
                        </style>
                    內部引入            <style></style>
                    行內樣式引入        <div style="">

8.transition過渡動畫使用的過程當中要注意一些什麼？
                1.必須跟hover一塊兒使用
                2.在hover的時候添加過渡，鼠標滑上去有過渡效果，移開就沒有
                    給他自己加的時候，鼠標滑上去有過渡效果，移開也有

9.用邊框寫出一個箭頭超右的三角形
            div{
                border-top：10px solid transparent
                border-right:10px solid transparent
                border-bottom:10px solid transparent
                border-left:10px solid red
                width:0;
                height:0;
            }

 10.能夠取負值的css屬性有哪些？
            text-indent
            z-index
            margin-top
            margin-left
            background-position
            left right bottom top
            text-shadow
            box-shadow等等

11.一個未知寬高的盒子在另外一個盒子裏面 水平垂直居中 的3種方法：(不用作計算)

（1）.box{
                width:500px;
                height:500px;
                position:relative;
            }
            .box1{
                width:200px;
                height:200px;
                position:absolute;
                left:0;
                right:0;
                bottom:0;
                left:0;
                margin:auto;
            }

（2).box{
                width:500px;
                height:500px;
                display:flex;                 //彈性盒
                justify-content:center;  //水平居中
                align-items:center;       //垂直居中
            }
            .box1{
                width:200px;
                height:200px;
            }

（3）box{
                width: 500px;
                height: 500px;
                background: red;
                position: relative;
            }
            .box1{
                width: 200px;
                height: 200px;
                background: green;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }

12.當子元素使用margin-top，致使父元素整個下移的解決方案：
                    overflow:hidden
                    把margin改爲padding
                    border-top:1px solid rgba(0,0,0,0)
                    給父元素或者子元素浮動

13.子元素都設置float，父元素沒有設置高度，出現高度塌陷的問題，解決方案：
                    1.給父元素設置height 遇到自適應用不了，
                    2.添加overflow：hidden/auto
                    3.給浮動的元素下面添加一個空盒子，給空盒子添加 clear：both；
                    4.萬能清除法
                        .clear:after{
                            content:""；
                            clear：both；
                            display：block；
                            height：0；
                            overflow:hidden;
                            visibility:hidden;
                        }
                        .clear{
                            zoom:1;
                        }
                    5. 給父元素也添加float
                    6.  給父元素添加display：table

 14.透明度的屬性是什麼？請也寫上它的兼容寫法？
                    opcity:0.3;
                    filter:alpha(opcity=30)

15.什麼是BFC？BFC的觸發條件有哪些？
                bfc直譯爲塊級格式化上下文，是一個獨立的渲染區域。具備BFC特性的元素能夠看做是一個隔離了的獨立容器，容器裏面的內容不會影響到外面的元素
                使用了float:left/right position爲absolute/fixed  display爲inline-block,table-cell,table-caption,flex,inline-flex,overflow爲hidden,auto等等 都是BFC

16.如何解決margin上下值發生重疊的問題？
                給任何一個子元素添加一個父元素，並讓這個父元素成爲bfc區域裏面的元素，因此就須要給父元素添加overflow:hidden/auto/scroll;display:inline-block/flex;等。

17.怪異盒是怎麼產生的？它有什麼特色？如何由W3C標準盒模型變成怪異盒模型？
                產生緣由：DOCTYPE的缺失在IE8如下會觸發怪異盒模式
                特色：padding值不會計算在元素原有的寬高之上
                border值不會計算在元素原有寬高之上
                
                變成怪異盒模型：添加屬性box-sizing:border-box;
                box-sizing:content-box;默認值

18.哪些屬性能夠被繼承？
                一、字體系列屬性

                    font-family：字體樣式
                    
                    font-weight：字體的粗細
                    
                    font-size：字體的大小
                    
                    font-style：字體的類型
                    
                    二、文本系列屬性
                    
                    text-indent：文本縮進
                    
                    text-align：文本水平對齊
                    
                    line-height：行高
                    
                    letter-spacing：單詞之間的間距
                
                    text-transform：控制文本小：uppercase、lowercase、capitalize
                    
                    color：文本顏色
                    
                列表
                    list-style

 19.圖片整合是用什麼技術實現的？圖片整合技術有哪些優點？
                css Sprites
                用background-position 來進行背景圖片定位技術

 20.移動端佈局的方式有哪些？
                流式佈局 等比縮放佈局或混合佈局    等比縮放佈局能夠用rem vw來實現

 21.transition和animation之間有什麼共同點和不一樣點？
                    相同點：都是隨着時間改變元素的屬性值
                    不一樣點：1.transition須要跟hover一塊兒使用
                        2.animation不須要觸發任何事件

22.em和rem是什麼？移動端爲何要用rem這個單位？
                    em是相對於最近的父元素的字號大小，1em=16px
                    rem 是 root em是相對於根元素字號的大小， 1rem=16px

23.響應式網頁設計有哪些特色？                 一、網站必須創建靈活的網格基礎；                  二、引用到網站的圖片必須是可伸縮的                三、不一樣的顯示風格，須要在Media Query上設置不一樣的樣式                 四、meta標籤