CSS 面試知識點合集

時間  2021-08-15
標籤 javascript css html 前端 java web 面試 瀏覽器 bash 服務器 欄目 CSS 简体版
原文   原文鏈接

前端三大件裏面, CSS是博主最喜歡的話題了，在此分享一下那些常考的CSS面試知識點，正文以下：javascript

What's CSS?

  • CSS---Cascading Style Sheets
  • Css is a language for specifying how HTML is presented to users.
  • CSS is used to style and out web pages.

How does CSS actually work?

When a browser displays a document, it must combine the document's content with its style information. It processes the document in two stages:
css

  1. The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
  2. The browser displays the contents of the DOM.


How do you include CSS to your HTML file?

There are 4 ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSShtml

  • Embedded CSS - The <style> element
  • Inline CSS - The style attribute
  • External CSS - The <link> elements
  • Import CSS - @import Rule 

What does "rel" means in <link href=" " rel="stylesheet" />?

The "rel" in <link> is standing for the relationship between the HTML document and the externally linked file.   "rel" has values like stylesheet, index, section, help, bookmark, next, prev, copyright, etc..前端

External CSS by using <link> VS  @import 

  • link功能較多，能夠定義 RSS，定義 Rel 等做用，而@import只能用於加載 CSS
  • 當解析到link時，頁面會同步加載所引的 css，而@import所引用的 css 會等到頁面加載完才被加載
  • @import須要 IE5 以上才能使用
  • link可使用 js 動態引入，@import不行

CSS3有哪些新特性？

  • CSS3實現圓角（border-radius:8px）
  • 陰影（box-shadow:10px）
  • 對文字加特效（text-shadow）
  • 線性漸變（gradient）
  • 旋轉（transform):rotate(9deg) 
  • 縮放 （transform):scale(0.85,0.90)
  • 傾斜 （transform): skew(-9deg,0deg)
  • 增長了更多的CSS選擇器 

爲何要初始化CSS樣式？

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。java

normalize CSS VS reset CSS

Resetting removing all the native provided by browsers. (Reset重置瀏覽器的css默認屬性 瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一)web

Normalizing is just a correction of some common bugs.面試

Name all the CSS selector that you know

Selectors can be defined in various ways as following:瀏覽器

  • Tag Selectors
  • Universal Selectors
  • Descendant（後代） Selectors
  • Class Selectors
  • ID Selectors
  • Child Selectors
  • Attribute Selectors
  • Grouping Selectors
  • Pseudo-classes selectors: :hover, :activated, :focus
  • Pseudo-elements selectors： ::before, ::after

what's CSS Specificity?

  • specificity is a process of determining which CSS rule will be applied to an element. it actually determines which rules will take precedence.
  • precedence(優先級爲): !important >inline style> #id > .class > tag > * >繼承 > 默認 
  • when the weight of selector are same , it will apply the closet css rule.(就近原則)
  • universal selector (*) has no specificity.


Pseudo-class VS Pseudo-element

  •  pseudo class describe a special state. it allows to style element dynamically. The most popular one is :hover.

  • pseudo-element match virtual elements. it used to style specified parts of an element. we often use like " ::after ::before ::first-line".

全部Pseudo-class&Pseudo-element以下：bash


僞類（Psesudo-class）中的:before,:after的使用場景是什麼？

Pseudo-element不佔用dom元素節點，:before和:after經常使用於清除浮動, 具體作法就是給浮動元素的父元素定義僞類：
服務器

<div class="father">
    <div class="f"> 我是浮動的 <div>
<div>
<style>
    .father:after{
        clear:both;
        content:'';
        height:0;
        visibility:hidden;
        display:block; 
    }
</style>複製代碼

:active VS : visited ?

:active

the moment it is clicked

: visited

the user has already visited

What are the differences between inline, block and inline-block?

inline elements do not break the flow. margin/ padding will push other elements horizontally not vertically. Moreover, inline elements ignore the height and width.

block elements break the flow and don't sit inline. they are usually container like div, section and also text p, h1. its height and width can be adjusted.

inline-block will be similar to inline and will go with the flow of the page. Only differences are this will take height and width.

CSS哪些屬性能夠繼承？

可繼承的樣式： font-size font-family, color, visibility.

不可繼承的樣式：border padding margin width height display

 介紹一下CSS的盒子模型？

有兩種BOX model:

  • W3c standard box model
  • IE box model

標準模型和IE模型區別：

W3c Box model: ele'width = content width;

IE box model: ele'width=content width +padding width+ border width;


CSS如何設置這兩種模型？

box-sizing: content-box; //默認

box-sizing: border-box;  

Js如何設置獲取盒模型對應的寬和高？

dom節點.style.width/height           (only get the "embedd style" width/height)

dom節點.currentStyle.width/height

dom節點.getComputedStyle(dom).width/height

dom節點.getBoundingClientRect().width/height

區別以下：


什麼是BFC ( Block Formatting Context)？

 Block Formatting Context: 是一個獨立的渲染區域，讓處於 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

BFC的原理是什麼 （BFC的渲染規則）？ 

  1. 在 BFC 的垂直方向上，邊距會發生重疊
  2. BFC 區域不會與 浮動區域重疊（用來清除浮動）
  3. BFC 在頁面上是一個獨立的容器，與其餘元素互不影響
  4. 計算 BFC 高度時，浮動元素也會參與計算

如何建立BFC？

  1. float 值不爲 none ，只要設置了浮動，當前元素就建立了一個 BFC
  2. position 值不爲 static ，只要設置了定位，當前元素就建立了一個 BFC
  3. overflow 值不爲 visible ，只要設置了overflow，當前元素就建立了一個 BFC
  4. display 值不爲默認，只要設置了display，當前元素就建立了一個 BFC

BFC的使用場景是什麼？

1. 解決邊距重疊問題

當元素都設置了margin邊距時，margin將取最大值。 爲了避免讓邊距重疊，能夠給子元素加一個父元素，並設置該元素爲BFC：

<div>
    <p> xxxxxxxxx </p>
    <div style="overflow:hidden;">
        <p> yyyyyyyyy </p>
    </div>
</div>複製代碼

2. 解決面積重合問題 （利用BFC不會和float重疊的特性）

<section id="layout">
    <div class='left'> </div>
    <div class='right'> <div>
</section>
<style>
    #layout{background-color:steelblue;}
    #layout .left{float:left;width:100px; height:100px; background-color:tomato;}
    #layout .right{height:120px; background-color:yellow;overflow:hidden}
</style>複製代碼


3. 解決清除浮動（清除浮動的原理）

<section id='float-test'>
    <div class='float'> I am a float </div>
</section>
<style>
    #float-test{background-color:steelblue;overflow:blue}
    .float{float:left,font-size:30px}
</style>複製代碼

What's the margin collapse?

its behavior like the margin of blocks is combined into a single margin whose size is the largest of the individual margins. And floating and absolutely positioned elements never collapse.

Types of margin collapse (margin collapse in 3 cases)? 

下面綠色部分表明margin

  • Adjacent siblings: the margins of adjacent siblings are collapsed.

       

  • Parent and first/last child: if there is no border,padding,inline part, bfc

       

  • Empty blocks:

       if there is no border, padding, inline content, height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

Margin collapse calculate rule (計算規則是什麼？)

兩個豎直方向上相鄰的外邊距都是正數，摺疊結果是他們二者之間較大的值

兩個豎直方向上相鄰的外邊距都是負數，摺疊結果是他們二者之間絕對值較大的值

兩個豎直方向上相鄰的外邊距一正一負，摺疊結果是他們二者相加的和

How to avoid margin collapse?

  • using "floating element or absolutely positioned element". ( because floating and absolutely positioned elements never collapse)

  • make parent as "BFC element" 

what does float do?

  • float is a CSS positioning property. float value has: none, left, right, initial.
  • float pushes an element to the sides of a page with text wrapped around it.
  • we can create an entire page or a smaller area by using float. if the size of a floated element changes, text around it will re-flow to accommodate the changes.
  • if we set, 'float: left;' for an image, it will move to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side.

清除浮動的方法總結(Clearing floats)

1. Add new Div below the "float element". And the div with class with "clear: both" ( 給已經浮動的元素的後面添加一個帶class="clear"且空的div, classe類是這樣寫的：.class{clear:both; height:0; line-height:0; font-size:0;} )

<div class="outer">
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
    <div class='clear'></div>
<div>
<style>
    .outer{border:1px solid #ccc; background-color:#fc9; color:#fff;}
    .div1{width:80px;height:80px;background-color:red;float:left;}
    .div2{width:80px;height:80px;background-color:blue;float:left;}
    .div3{width:80px;height:80px;background-color:sienna;float:left;}
    .clear{clear:both;height:0;line-height:0;font-size:0;}
</style>複製代碼

效果圖以下：


2. Define a class with the "overflow : auto", then add this class to the "floated" element's parent element. （建立父級BFC: 給已浮動的元素的父級添加over-flow類, 其中over-flow是這樣寫的 .over-flow{overflow:auto; zoom:1}）

<div class="outer over-flow">
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
<div>
<style>
    .outer{border:1px solid #ccc; background-color:#fc9; color:#fff;}
    .div1{width:80px;height:80px;background-color:red;float:left;}
    .div2{width:80px;height:80px;background-color:blue;float:left;}
    .div3{width:80px;height:80px;background-color:sienna;float:left;}
    .over-flow{overflow:auto; zoom:1}
</style>複製代碼

使用overflow屬性來清除浮動有一點須要注意，overflow屬性共有三個屬性值：hidden, auto, visible. 咱們可使用hidden和auto來清除浮動，但最好不要用visible值。

3. Add the pseudo element to the "floated" element's parent element;

<div class="outer clearFix">
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
<div>
<style>
    .outer{border:1px solid #ccc; background-color:#fc9; color:#fff;}
    .div1{width:80px;height:80px;background-color:red;float:left;}
    .div2{width:80px;height:80px;background-color:blue;float:left;}
    .div3{width:80px;height:80px;background-color:sienna;float:left;}
    .clearFix:after{
        content:'',
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .clearFix{zoom:1}
</style>複製代碼

How to use flexbox?

  1. First, I often define flex container and flex items.
  2. then use "display: flex" on that flex container.
  3. use "justify-content" to define the horizontal alignment of items. "justify-content" have values: flex-start, flex-end, start, center,end, space-between, space-around, space-evenly;
  4. use"align-items" to define the vertical alignment of items.
  5. If my main-axis is vertical, I can set "flex-direction: column".
  6. use "flex" property to set the flexible length on flexible items.

CSS animation

What do you know about the transition?

  •  transition allows to add an effect while changing from one style to another.
  • we can set the which property you want to transition, duration, how you want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when the transition will start.

what is "CSS hack"？

A CSS hack applies CSS in one or more specific browser versions while that same CSS will be ignored by other browsers.

* html .sidebar{ margin-left: 5px;}複製代碼

this is "star html hack" for "only-IE6 hack". ie6能識別*html .class{}

CSS hack分類？

CSS hack有三種表現形式，css屬性前綴法、選擇器前綴法以及ie條件註釋法（即頭部引用if ie）。實際項目中css hack大部分是針對ie瀏覽器不一樣版本之間的表現差別而引入的。

1.屬性前綴法：
例：ie6能識別下劃線「_」和星號「*」，ie7能識別星號「*」（以上版本並不支持），但不能識別下劃線「_」，ie6~ie10都認識「\9」，可是其餘瀏覽器不能支持

2.選擇器前綴法（選擇器hack）
例：ie6能識別*html .class{},ie7能識別*+html .class{} 或者*:first-child+html .class{};

3.ie條件註釋法：
針對全部ie（ie10+已經再也不支持條件註釋）：<!--[if IE]>ie瀏覽器顯示的內容<![endif]-->，

針對ie6及如下版本：<!--[if lte IE 6]>只在ie6及如下顯示的內容<![endif]-->.

這類hack不只針對css生效，對寫在判斷語句裏面的全部代碼都會生效。

css hack書寫順序：
通常將適用範圍廣，能識別能力強的css定義在前面。由於寫在後面代碼若是被識別會覆蓋前面識別的。

rgba VS opacity?

  • rgba set the opacity value only for a single declaration.(rgba()只做用於元素的顏色或其背景色)
  • opacity sets the opacity value for an element and all of its children; (opacity做用於元素，以及元素內的全部內容的透明度)

visibility :hidden VS display:none

1. display isn't an inherited attribute. visibility is an inherited attribute.

(後代元素的visibility屬性若存在則不會繼承，若不存在則繼承父元素visibility的值，意味着：父元素的visibility爲hidden可是子元素的visibility爲visible則子元素依舊可見，子元素visibility不存在則子元素不可見。而元素的display屬性設爲none其後整棵子樹都不可見)

2. display: none removes the element from the normal layout flow and allow other elements to fill in. visibility: hidden tag is rendered, it takes space in the normal flow but doesn't show it.

3. display: none causes DOM reflow, but visibility: hidden doesn't. 

nth-child(n) VS nth-of-type(n)

ele: nth-child(n) 選擇器有兩個必要條件： 1. 必須是ele元素。 2. 必須是處於第n個子元素的位置；不然，選不到元素的

ele: nth-of-type(n)選擇器只有一個條件： 第n個ele元素

em VS rem

em:

is relative to the font size of its direct or nearest parent

rem:

is only relative to the HTML (root) font-size

CSS positioning (CSS 定位)/How absolute, relative, fixed and static position differ?

Static position:

  • Html elements are positioned static by default.
  • Top,bottom,left,right properties invalid
  • 沒脫離標準文檔流

Relative Position:

  • Html elements are positioned relative to its normal position, and the normal position means a position in the document flow.
  • It can use "z-index" to defined CSS layer
  • 沒脫離標準文檔流

Absolute position:

  • An element with an absolute position is relative to the nearest positioned ancestor. If the elements don't have positioned ancestors, it relative to the document body.
  • 脫離標準文檔流

Fixed position:

  • An element with a fixed position is relative to the viewport. which means it always stays in the same place even if the page is scrolled.
  • The top, right, bottom, and left properties are used to position the element.
  • 脫離標準文檔流

what 's Open Graph and how to use it?

"Open Graph" is a technology invented by Facebook that allows the developer to control what content shows up when a page is shared on Facebook. 

we can use Open Graph via Meta Tags.

The types of tags used should represent the content of the page. like:

<meta property='og:title' content='about our ompany' />
<meta property='og:image' content='http://.....'/>複製代碼

Responsive design

  • Responsive web design (RWD) makes web pages render well on all kinds of devices or screen sizes.
  • common used responsive design:
    • media query
    • flexbox
    • grid layout

how would you use media queries?

1. use media queries inside <style> tag

@media screen and (max-width:600px){
    .class{background:#ccc}
}複製代碼

2. use media queries inside <link> tag to include different css file:

<link rel='stylesheet' type='text/css' href='style.css' media='screen and (min-width:400px)'>複製代碼

CSS preprocessor/What are the reasons to use preprocessor?

  • CSS preprocessor allow us to write CSS in a high level with some special syntax (declaring variable, nested syntax, mathematical operations, etc.) and that is compiled to CSS.

  • Preprocessor helps you to speed up develop, maintain, ensure best practices and also confirms concatenation, compression, etc.

Which one would you prefer among px, em % or pt and why?

it depends on what you are trying to do.

px is the absolute length unit. px is not related to the size of the screen or its resolution.

em maintains relative size. we can have responsive fonts. 1em is equal to the current font-size of the element or the browser default. if u sent font-size to 16px then 1em = 16px. em is cascade

% sets font-size relative to the font size of the body. Hence, we have to set font-size of the body to a reasonable size. this is easy to use and does cascade. for example, if parent font-size is 20px and child font-size is 50%. child would be 10px.

pt(points) are traditionally used in print. 1pt = 1/72 inch and it is fixed-size unit.

What are sprites? Why use sprites?/how should I use CSS sprites?

CSS sprites are merging multiple images into a single image.（Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量）

  • Sprites can reduce the frequency of HTTP request.
  • sprites increase page speed.

we can use "background-position" property to locate any parts in a sprites image. 

write block of HTML and CSS for Modal, with overlay background gray, opacity 0.7

<div>
    <div class='overlay'> </div>
    <div class='modal'> This is a modal.. </div>
</div>
<style>
    .overlay{
        background:#ccc;
        position:fixed;
        top:0;
        left:0;
        opacity:0.7;
        height:100%;
        width:100%;
        z-index:9;
    }
    .modal{
        background-color:bisque;
        position:fixed;
        top:50%;
        left:50%;
        hieght:35%;
        width:60%;
        transform:translate(-50%,-50%);
        z-index:10;
    }
</style>複製代碼

how to name CSS classes?

  • put the class name at the lowest possible level.
  • make classes name more semantic means it’s easy to read.
  • Don't use camelCase
  • use less id, because it's id always involve javascript.

what's Sass? what are some core features of Sass?

What's Sass?

    • Sass is short for "Syntactically Awesome Style Sheets".
    • Sass is an extension of CSS that allow you to use things like variables, nested rules, inline imports and more. it also helps to keep things organized and allows you to create style sheets faster.

cores feature of Saas?

    • Variables
    • Nesting
    • Import
    • Partials
    • Mixins
    • Operators
    • Extend/Inheritance
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程