国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

面試--css面試

sPeng / 1988人閱讀

摘要：怪異的盒模型和標準瀏覽器的盒模型，可以通過屬性控制兩種盒模型的變化屬性值這個屬性值和是的盒模型是有關系的。簡便完整響應式地實現各種頁面布局提出了布局。交叉軸的起點對齊。

1、css盒模型

css的盒模型包括：content+padding+border+margin
同時值得注意的是：css 的外邊距會在垂直方向合并。 兩個上下方向相鄰的塊元素框垂直相遇時，外邊距會合并，合并后的外邊距的高度等于兩個發(fā)生合并的外邊距中較高的那個邊距值

只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。

IE怪異的盒模型和標準瀏覽器的盒模型，可以通過box-sizing屬性控制兩種盒模型的變化

2、box-sizing屬性值

這個屬性值和是css的盒模型是有關系的。
box-sizing屬性是用戶界面屬性里的一種，之所以介紹它，是因為這個屬性跟盒子模型有關，而且在css reset中有可能會用到它。在寫css 代碼的時候 最好先css reset以下。
這個屬性有以下3個值：
1、content-box ：可以使設置的寬度和高度值應用到元素的內容框，，盒子的width只包含內容。
即總寬度=margin+border+padding+width
2、border-box:設置的width值其實是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內容
即總寬度=margin+width
3、inherit , 規(guī)定應從父元素繼承 box-sizing 屬性的值
畫一個三角形出來
3、box-sizing屬性的應用場景

IE8及以上版本支持該屬性
（1）在css reset的過程中使用 box-sizing:border-box 讓代碼更符合ui設計者和前端設計者的邏輯
使用方法如下：

*, *:before, *:after {
　　-moz-box-sizing: border-box;
　　-webkit-box-sizing: border-box;
　　box-sizing: border-box;
　　}

（2）使用box-sizing：border-box實現布局三欄目案例

如果要是沒有在div上使用 box-sizing:border-box;這個值的時候 最后一個div會被擠下來。。

4、flex布局 彈性布局

布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display 屬性 + position屬性 + float屬性。
簡便、完整、響應式地實現各種頁面布局提出了flex布局 。IE10以上支持這個屬性。
flex容器的屬性
flex容器中有：水平軸 垂直軸
使用方法，為父元素設置display屬性值

.box{
  display: flex;  或者是  inline-flex
}

Webkit 內核的瀏覽器，必須加上-webkit前綴。
設為 Flex 布局以后，flex容器中子元素的float、clear和vertical-align屬性將失效。
flex-direction 規(guī)定子項目在主軸方向上的排列方式 row row-reverse column column-reverse
flex-wrap 如果項目在一條軸線上排不下如何換行 no-wrap wrap wrap-reverse換行第一行在下方
flex-flow 是以上兩個屬性的簡寫
justify-content 屬性定義了項目在主軸上的對齊方式。
flex-start | flex-end | center | space-between | space-around;

flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中  實現了水平居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍

align-items 屬性定義了項目在垂直軸上的對齊方式。
flex-start | flex-end | center | baseline | stretch;

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。   實現了垂直居中
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

flex項目的屬性
order
屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。
flex-grow 定義為1 的時候 如果有剩余空間就會放大這個div
屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
flex-shrink
屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
flex 以上兩個屬性的簡寫
align-self
align-self屬性允許單個項目有與其他項目不一樣的對齊方式

5、Gird布局

flex布局是較好的一維布局方式 gird是二維布局方式
ie10+以上支持 手機都不支持
容器需要設置：
display:grid，
grid-template-columns：第1列的大小 第2列的大小 第3列的大小 第4列的大小..
grid-template-rows：第1行的大小 第2行的大小 第3行的大小 第4行的大小
gird-column-gap:定義列之間的距離
gird-row-gap:定義行之間的距離
justify-items: start | end | center | stretch（默認） 定義項目在水平方向的排列位置
align-items: start | end | center | stretch ; 定義項目在垂直方向的排列位置
項目需要設置：
grid-column：子元素的位置
grid-row：子元素的位置
要實現gird布局 里邊的子項的數目必須是足夠的
使用gird布局

 .container{
        display:grid;height: 400px;
        grid-template-columns: 40px  50px  auto 50px 40px ;
        grid-template-rows: 1fr 1fr 1fr;   //將continer縱向分成3等分
          grid-column-gap: 10px;   //定義每一列之間的空隙的寬度
        grid-row-gap: 10px;     //定義每一行之間的空隙的寬度

    }
    .item{
        border: 1px solid red;
    }

html


    

    

    
里邊有9個

未完 見http://www.jianshu.com/p/d183...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116628.html

相關文章

  • 7 個開放式的 CSS 面試題及回答策略

    摘要：通過面試者的答案可以得知他都知道哪些開發(fā)語言。這個問題的答案能夠知道求職者有沒有可靠的資源，這些資源在未來開展項目時可能會派上用場。對這個問題的誠實回答可以幫助面試官為求職者提供合適的團隊。 翻譯：瘋狂的技術宅原文：https://www.indeed.com/hire/i... 不管你是面試官還是求職者，里面的思路都能讓你獲益匪淺。 你用 CSS 多久了？ 解析： 這個問題可以讓面...

    AJie 評論0 收藏0

  • 前端 CSS 面試大綱

    摘要：比如說預處理器，組件化，工程化，兼容性處理等方面，這些主要是基于自己的開發(fā)經驗業(yè)界流行技術方案進行準備。但是在開始談面試前我想先提出一個概念學霸面試模型學校的學習和公司的工作有很多相似的地方。所以對于面試，請參考上學那會兒你們班學霸的姿勢。 背景 參加完 廈門第四屆CSS Conf 后，讓我對 CSS 產生了新的思考。CSS 是前端必須熟練掌握并保持持續(xù)關注的技術，但是我又不想在 CS...

    mating 評論0 收藏0

  • 前端最強面經匯總

    摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環(huán)境結果可能有差異而就是。 花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續(xù)更新中……，可以關注下github 項目地址 https:...

    wangjuntytl 評論0 收藏0

  • 轉眼人到中年：前端老程序員無法忘懷的一次百度電話面試（二）

    摘要：節(jié)后，收到了來自百度的電話，簡單明了，商定了電話面試的時間。轉眼間，約定之日到來。后記當天就收到了上海百度的郵件，確認了三面的的時間，還有差旅報銷注意事項。想到要只身一人去到人生地不熟的上海面試，內心有些期待，又有些忐忑。 一切都不那么真實 當一面結束時，一切都顯得不那么真實。幾分鐘前還在著急忙慌地接招，隨著電話的掛斷，周遭又安靜了下來，安靜到感覺連腦袋都變得有些遲鈍。 這種感覺很熟悉...

    LiuRhoRamen 評論0 收藏0

  • 掌握面試——彈出框的實現（一道題中包含布局/js設計模式）

    摘要：面試會進入下一個環(huán)節(jié)。如果在頁面中有多個按鈕，那么這個彈出窗要如何實現同上，根據之前的建議在回答問題之前要問清楚問題中模棱兩可的地方。是否觸發(fā)不同按鈕彈出的窗口現實的內容不同。 這道面試題，當初我面試的時候被問過兩次，因此比較深，此外，我記得還有設計模式的考察，所以，有深刻的體會。 面試題主要考察什么 面試不是個輕松的活，不管是對面試官還是面試者都一樣。對于面試官來說，別的先不管，首先...

    defcon 評論0 收藏0

  • 2018.11.19秋招末第二波前端實習/校招小結

    摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業(yè)，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯(lián)網公司事件背景第一個入職的是好未來的前端實習崗，待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業(yè)，現大四，北京實習 前端方向，自學，vue技術棧 時間背景 大概是在11月9日準備...

    suxier 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<