日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

面试题准备--CSS

發布時間：2025/6/15 47 豆豆
生活随笔 收集整理的這篇文章主要介紹了 面试题准备--CSS 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、css盒模型

基本概念：

  • 標準模型：box-sizing：content-box；
  • IE模型：box-sizing：boder-box；

    • 區別：盒子的寬是否包含padding和border，IE包含，標準不包含

    2、BFC見博客http://www.cnblogs.com/Mrcatyang/p/8321977.html

    3、浮動的方法：

  • 為父元素添加overflow：hidden；

  • 定義公共類，添加偽元素，浮動元素加上clearfloat就可以了，.clearfloat:after{
    ? ? content:".";
    ? ? display:block;
    ? ? height:0;
    ? ? visibility:hidden;
    ? ? clear:both;
    }

    • 4、垂直居中的方法

  • parentElement{ position:relative; } ；childElement{ position: absolute; top: 50%; transform: translateY(-50%); }
  • flex? parentElement{display:flex;/*Flex布局*/display: -webkit-flex; /* Safari */align-items:center;/*指定垂直居中*/ }
  • 父元素高度確定的單行文本
    設置 height = line-height
    父元素高度確定的多行文本
    a:插入 table （插入方法和水平居中一樣），然后設置 vertical-align:middle
    b:先設置 display:table-cell 再設置 vertical-align:middle

    • 5、CSS3新特性

  • 選擇器? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? E:last-child 匹配父元素的最后一個子元素E。? ? ? ? ? ? ? ? ? ? ? ? ? ? ??　　? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2）E:nth-child(n)匹配父元素的第n個子元素E。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3）E:nth-last-child(n) CSS3 匹配父元素的倒數第n個子元素E。

  • Font-face 可以用來加載字體樣式，而且它還能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。

    • ? ? ? ? ?

    ? ? ? ? 3.圓角border-radius:?15px;陰影效果（shadow）漸變效果

    ? ? ? ? 4.網格布局，兼容性不好，還不夠成熟。還不能用在實際項目中。

    ? ? ? ? 5.彈性布局flex

    ? ? ? ? 6.CSS3制作特效translate（水平移動）、rotate（旋轉）、scale（伸縮）、skew（傾斜）、動畫

    6、常見布局方法

  • float
  • position
  • flex
  • table
  • 網格
  • 雙飛燕
  • 圣杯

    • 轉載于:https://www.cnblogs.com/Mrcatyang/p/8395462.html

    總結

    以上是生活随笔為你收集整理的面试题准备--CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。