1.說一下css盒子模型
Css盒子本質上是一個盒子，封裝周圍的HTML元素，它包括：外邊距，邊框，內邊距和內容，Css盒子模型包括IE盒子模型標準的W3C盒子模型，這兩種盒子模型都包含margin，border，padding，和content，不同的是，標準W3C盒子模型中content不包含任何內容，而IE盒子模型中content包含border和padding，在標準盒子模型中width指content部分的寬度，而IE盒子模型中width=content+padding+border這三個部分的寬度，故使得計算整個何止的寬度時存在差異：
標準的盒子模型的盒子寬度是：左右border+左右padding+width
IE盒子模型中盒子寬度：width
在CSS3中引入的border-sizing屬性，border-sizing：center-box表示標準盒子模型，border-box表示IE盒子模型，padding-box表示這個屬性值的寬度包含了左右的padding+width
2.畫一條0.5px的線
（1）采用mwta viewport的方式
<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">
Initial-scale設定頁面初始縮放值為0.5，這樣正常1px的線就縮放成0.5px
（2）采用transform：scale（）的方式
transform:scaleY(0.5);
（3）采用border-image的方式，先自己制作一個0.5px的線條作為背景圖片
p{ border-width: 0 0 1px 0; border-image: imageUrl 2 0 round; }
3.link標簽和import標簽的區別
Link屬于HTML標簽，而@import時css提供的，link標簽在頁面加載時就會加載，而@import的css會在頁面加載結束之后再加載，link是HTML標簽沒有兼容性，而@import只有IE5以上才支持，link引入的樣式權重高于@import引入的，
4. transiotion和animation的區別
Transition和animation大部分屬性是相同的都是隨時間改變元素的屬性值，主要區別是transition需要觸發一個事件才能改變屬性，而animation不需要觸發任何事件隨時間改變屬性值，并且transition為兩幀從from…to，而animation可以一幀一幀的，
5.Flex布局
Flex彈性布局簡單的分為容器屬性和元素屬性
容器屬性：
flex-direction:決定主軸的方向row|row-reverse|column|column-reverse;
flex-wrap:決定換行規則wrap|nowrap|wrap-reverse
flex-flow:<flex-direction>||<flex-wrap>以上兩個的簡寫
justify-cntent:定義了專案在水平上的對齊方式
align-items：對齊方式，豎直軸線方向
align-content：多跟軸線的對齊方式，如果只有一根軸線，該屬性不起作用
專案的屬性（元素的屬性）：
order:定義專案的排列順序，順序越小，排列越靠前，默認為0
flex-grow:定義專案的放大比例，即使存在空間，也不會放大
flex-shrink：定義專案的縮小比例，當空間不足的情況下會等比例的縮小
flex-basis：定義了在分配多余的空間，專案占據的空間
flex：flex-grow，flex-shrink，flex-basis的簡寫，默認值是0 1 auto，
align-self：允許單個專案于其他專案不同的對齊方式，可以覆寫algn-items，默認值是auto繼承父元素align-items，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/2134.html
標籤：其他
上一篇：鏈表----洗掉鏈表中重復的節點
下一篇：CSS(二)