前端開發教程之CSS（四）

過昨天分享的一些簡單的屬性，接下來小編將繼續為大家分享一些相當常用的屬性；

首先是控制字體：

主要有包括指定字體、字體大小、字體加粗、字體樣式、大小寫以及綜合的font屬性；

1、指定字體，語法規范：font-family：value1，value2，實例font-family："微軟雅黑"，"Arial"；這個屬性可以有很多個值并列存在，制定頁面中的文字字體，建議：一般網頁中，中文使用微軟雅黑較多，英文使用 Arial

2、字體大小，語法規范及實例：font-size:12px；建議：在實際開發的網頁中，默認文本一般采用12px

3、字體加粗，相當于 ，語法規范：font-weight:normal / bold / value；其中value取值：400至900 之間，400 相當于 normal、900 相當于 bold

4、字體樣式，相當于，語法規范：font-style：normal / italic；表示字體是否為斜體

5、小型大寫字母，語法規范：font-variant ： normal / small-caps;

6、字體綜合屬性font， font 為簡寫屬性，包含6個值：font : font-style font-variant font-weight font-size/line-height font-family；實例 font：bold 12px "microsoft yahei";

其次是控制文本格式

主要有包括文本顏色、文字水平排列方式、文本線條修飾、行高、首行文本縮進以及文本陰影；

1、文本顏色，語法規范：color:value;實例color:red 表示網頁中的文字顏色為紅色

2、文字水平排列方式，語法規范：text-align : left/right/center 實例text-align:center 表示文字居中顯示

3、文本線條修飾，語法規范：text-decoration:none / underline ；取值： overline(上劃線) , line-through(刪除線)

4、行高即每行文本所占的高度是多少。一旦設定好后，該行文本將在該行內垂直居中顯示。這個屬性有一個非常好用的地方，就是設置這個文字在垂直方面居中，要想文字垂直居中，那么就是設置這個文字的行高等于它所在容器的高度；

提問：如果在一個div中，有一行文本，要讓文本在div容器中垂直居中顯示？

解決：div中文本的行高要設置與 div的高度一致，這個比直接設置padding或者margin來的容易多了，不涉及具體核算padding或者margin值

不過也有一個缺陷，就是這個方法僅僅局限于一行數據，所以常用于一行的標題類

5、首行文本縮進，text-indent ： value ;value 表示的是縮進的距離；實例text-index:24px 即表示首行縮進2個字符

6、文本陰影，text-shadow ：h-shadow v-shadow blur color；

第三、溢出相關處理

主要有包括處理空白、文本溢出；

1、處理空白，文本過長，在容器內顯示不下的時候，是否要換行

屬性：white-space：normal / nowrap ，norma即采用瀏覽器默認設置 nowrap即不換行

2、文本溢出，溢出后的處理方式,若是想隱藏溢出的內容，可以考慮使用該屬性。注意：該屬性必須與 overflow：hidden 聯用，屬性：text-overflow，取值：clip 即裁減，攔腰截斷或者 ellipsis即通過 ... 來表示未顯示的內容

第四、換行（這個方法主要用于英文單詞，對中文沒有效果）

主要有包括長單詞換行、文本換行；

1、長單詞換行，屬性為word-wrap :normal 即采用瀏覽器默認形式不破壞單詞結構（也是默認值），break-word即破壞單詞的結構

2、文本換行，屬性為word-break，取值：normal，break-all即破壞單詞結構進行換行，keep-all在半角狀態下的空格下進行換行

第五、表格

主要分為2大塊表格常用樣式屬性、表格特有樣式屬性；

1、表格常用樣式屬性有：內邊距： padding，尺寸：width 、height，文本、字體格式化屬性，背景屬性：顏色、圖片

邊框:border，文本垂直對齊：vertical-align : top / bottom / middle等一些基本屬性

2、表格特有樣式屬性

2.1邊框合并，屬性:border-collapse，取值可以有：separate即分離邊框(默認)、collapse即合并邊框

2.2邊框邊距，即table中的cellspacing屬性，使用這個屬性的前提是border-collapse 必須為 separate，屬性：border-spacing，它所有的取值：一個值：表示垂直和水平間距相等、兩個值：第一個值表示水平間距，第二個值垂直間距，兩個值分開

2.3表格標題位置，屬性為：caption-side，取值：top , bottom

2.4顯示規則，就是幫助瀏覽器如何顯示或布局一張表，屬性：table-layout，取值有：auto：列寬度由單元格內容決定，默認值，自動表格布局，fixed：列寬度由表格和列的寬度的來決定，固定表格布局

自動表格布局的特點如下：

a).單元格大小會適應內容大小

b).表格復雜是會比較慢

c).不確定列大小時

固定表格布局的特點如下：

a).表格、列的寬度取決于設置好的寬度

b).速度較快

c).浮動定位

第六，定位：即元素在網頁中出現的位置

定位分類：普通流定位、浮動定位、相對定位、絕對定位、固定定位，浮動屬性、清除浮動、以及浮動引發的問題：

1、普通流定位(文檔流)，即網頁中默認的定位方式

1.1塊級元素：從上到下

1.2行內元素：從左到右

2、浮動定位，就是將元素排除在普通流之外,元素在網頁上是不占用空間的。浮動元素會放在包含框的左邊或右邊，但依然在包含框內浮動元素在浮動時，可以向左或向右移動直到碰到包含框或其他浮動元素位置，浮動定位的特點有：

2.1浮動元素外邊緣不會超過父元素的邊框

2.2浮動元素默認不會重疊

2.3浮動只能左右浮動，不能上下浮動

2.4所有元素設置為浮動元素的話，默認將轉換為塊級元素

3、浮動屬性，屬性：float，取值有：none 即無浮動(默認)、left即左浮動、right即右浮動

注意：在一個容器內，如果有浮動元素的話，那么盡可能的讓該容器中所有的元素都浮動起來。如果有想在下一行內顯示的內容（不浮動的）單獨使用容器來承裝。

4、清除浮動，屬性：clear，取值：left/right/both

作用：清除浮動所帶來的影響，定義了元素的哪個邊上不允許出現浮動元素

5、浮動引發的問題

包含框內的元素被應用了float之后，包含框的高度會發生變化（變為0）

解決方案有 overflow：hidden；

！！！最后小編還是建議大家，多多代碼，如果學的還不多的，也可以多多的模仿的代碼

TML

src和href的區別

src和href都是用來加載外部資源，區別如下

src當瀏覽器解析到該元素時，會暫停其他資源的加載和處理，直到該資源加載完成。它會將資源內容嵌入到當前標簽所在的位置，將其指向的資源下載應用到文檔內，如js腳本等。常用在img、script、iframe等標簽。

href指向外部資源所在的位置，和當前元素位置建立鏈接，當瀏覽器解識別到它指向的位置，將其下載的時候不會阻止其他資源的加載解析。常用在a 、 link標簽。

HTML5新增特性

新增語義化標簽，head、footer、nav、main、section等
新增表單類型屬性，email、number、時間控件、color顏色拾取器、placeholder、autofocus自動獲取焦點...
新增音視頻標簽，video、audio
新增canvas畫布、websocket通信、拖拽等
新增本地存儲localStorage、sessionStorage

對HTML語義化理解

根據內容來選擇合適的標簽

方便瀏覽器爬蟲更好的識別內容。
有利于代碼可讀性，開發者能清晰的看出網頁的結構，便于團隊的開發與維護。

DOCTYPE(?檔類型) 的作?

DOCTYPE是HTML5中一種標準通用標記語言的文檔類型聲明，是用來告訴瀏覽器的解析器，該用什么樣的方式去加載識別文檔。

iframe 有那些優點和缺點？

iframe通常用來加載外部鏈接，不會影響網頁內容的加載。

優點

可以將網頁原封不動的加載進來
增加代碼的可用性
用來加載顯示較慢的內容，如廣告、視頻等

缺點

加載的內容無法被瀏覽器引擎識別，對SEO不友好
會阻塞onload事件加載
會產生很多頁面，不利于管理

Canvas和SVG的區別

canvas畫布，是通過javascript來繪制2d圖，是逐像素進行渲染。
SVG矢量圖，是基于XML描述的2D圖形語言，每個元素都是可用的，可以為其添加事件。

script標簽中defer和async的區別

他倆都是表示異步加載外部JS腳本，不會阻礙頁面的加載解析。區別

執行順序：有多個async標簽不能保證先后加載順序，而多個defer標簽可以按先后順序加載。
是否立即執行：async加載完腳本后會立即執行，defer是要等文檔解析完成后才執行。

行內元素、塊級元素、空（void）

行內： a、b、span、input、img、select、 strong
塊：p、div、h1、ul、ol、li、dl、dt、dd
空：<hr>、 、<img>、<input>、<link>、<meta>

怎樣添加、移除、移動、復制、創建和查找節點

添加節點document.appendChild(dom)
移除節點document.removeChild(dom)
移動節點document.appendChild(targetDom)
復制節點dom.cloneNode(true)，參數true表示是否復制子節點
創建節點document.createElement(dom)
查找節點: document.getElementById("elementId") document.getElementsByClassName("className") document.getElementsByTagName("tagName") document.querySelector("selector") document.querySelectorAll("selector")

CSS

CSS3新增特性

新增CSS選擇器、偽類
特效：text-shadow、box-shadow
線性漸變: gradient
旋轉過渡：transform、transtion
動畫: animation
圓角: border-radius

盒模型

盒模型都是由四個部分組成的，分別是margin、border、padding和content。

標準盒模型和IE盒模型的區別在于設置width和height時，對應的范圍不同。

標準盒模型的width、height只包含了content
IE盒模型的的width、height除了content本身，還包含了border、padding

通過修改元素的box-sizing屬性來改變元素的盒模型

box-sizeing: content-box表示標準盒模型（默認值）
box-sizeing: border-box表示IE盒模型（IE盒模型)

CSS選擇器和優先級

選擇器

選擇器	權重
id選擇器 #id	100
類選擇器 .classname	10
屬性選擇器 div[class="foo"]	10
偽類選擇器 div::last-child	10
標簽選擇器 div	1
偽元素選擇器 div:after	1
兄弟選擇器 div+span	0
子選擇器 ui>li	0
后代選擇器 div span	0
通配符選擇器	0

優先級

!important
內聯樣式
ID選擇器
類選擇器/偽類選擇器/屬性選擇器
標簽選擇器/偽元素選擇器
關系選擇器/通配符選擇器

CSS可繼承屬性和不可繼承屬性

可繼承

font-weight
color
font-size
line-height
cursor
...

不可繼承

margin、padding、border
display
background
overflow
width、height
position
...

dislpay的屬性和作用

屬性	作用
block	塊類型。默認寬度為父元素寬度，可設置寬高，換行顯示。
inline	行內元素類型。默認寬度為內容寬度，不可設置寬高，同行顯示。
inline-block	行內塊級元素，默認寬度為內容寬度，可以設置寬高，同行顯示
table	塊級表格
flex	flex容器布局
none	隱藏元素
inherit	從父類繼承display屬性

隱藏元素的方式

display：none：元素在文檔中不存在，不會占據位置。
visibility： hidden：元素在文檔中的位置還保留，仍然占據空間。
opacity：0：將透明度設置為0。
z-index：負值：直接將元素放置在最下層，利用其他元素來遮蓋。
position：absolute：將元素定位到可視區域以外。

單行、多行文本溢出

單行

css

復制代碼

overflow: hidden; // 溢出隱藏 text-overflow: ellipsis; // 溢出用省略號顯示 whtie-space: nowrap; //規定段落中的文本不進行換行

多行

CSS

復制代碼

overflow:hidden text-overflow: ellipsis; // 溢出用省略號顯示 display:-webkit-box; // 作為彈性伸縮盒子模型顯示。 -webkit-box-orient:vertical; // 設置伸縮盒子的子元素排列方式：從上到下垂直排列 -webkit-line-clamp:3; // 顯示的行數

有了使用過Sass、Less 嗎？他們的區別是什么？

他們都是 CSS 預處理器，是 CSS 上的一種抽象層。他們是一種特殊的語法/語言編譯成 CSS。增加了 CSS代碼的復用性，層級，mixin，變量，循環，函數等對編寫以及開發UI組件都極為方便。區別

編譯環境不一樣 Sass是在服務端處理的，以前是Ruby，現在是Dart-Sass或Node-Sass 而Less是需要引入less.js來處理Less代碼輸出CSS到瀏覽器，也可以在開發服務器將Less語法編譯成css文件，輸出CSS文件到生產包目錄
變量符不一樣，Less是@，而Scss是$。
Sass支持條件語句，可以使用if{}else{},for{}循環等等。而Less不支持

link和@import的區別

link是HTML提供的標簽，不僅可以加載CSS文件，還可以定義RSS、rel連接屬性等
@import是CSS提供等語法規則，只有導入樣式表帶作用。
link標簽引入的CSS被同時加載，而@import引入的CSS將在頁面加載完畢后被加載
@import是CSS2.1才有的語法，存在兼容性，而link作為HTML標簽不存在兼容性問題

常見的CSS單位

px像素 CSS像素物理像素
百分比%，作用于父元素，當瀏覽器的寬度或者高度發生變化時，當前元素依據比例發生變化。
em和rem，相對長度單位，它們之間的區別：em相對于父元素，rem相對于根元素。
vw/vh是與視圖窗口有關的單位，代表視圖窗口的寬高。

px、em、rem的區別

px 固定像素單位，不能隨其它元素的變化而變化
em是相對于父元素的單位，會隨著父元素變化而變化
rem是相對于根元素html，它會隨著html元素變化而變化

兩欄布局

利用浮動，將左邊元素寬度設置為200px，并且設置向左浮動。將右邊元素的margin-left設置為200px，寬度設置為auto（默認為auto，撐滿整個父元素）。

CSS

復制代碼

.outer { height: 100px; } .left { float: left; width: 200px; background: tomato; } .right { margin-left: 200px; width: auto; background: gold; }

利用浮動，左側元素設置固定大小，并左浮動，右側元素設置overflow: hidden; 這樣右邊就觸發了BFC，BFC的區域不會與浮動元素發生重疊，所以兩側就不會發生重疊。

CSS

復制代碼

.left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; }

利用flex布局，將左邊元素設置為固定寬度200px，將右邊的元素設置為flex:1。

CSS

復制代碼

.outer { display: flex; height: 100px; } .left { width: 200px; background: tomato; } .right { flex: 1; background: gold; }

利用絕對定位，將父級元素設置為相對定位。左邊元素設置為absolute定位，并且寬度設置為200px。將右邊元素的margin-left的值設置為200px。

CSS

復制代碼

.outer { position: relative; height: 100px; } .left { position: absolute; width: 200px; height: 100px; background: tomato; } .right { margin-left: 200px; background: gold; }

三欄布局

利用絕對定位，左右兩欄設置為絕對定位，中間設置對應方向大小的margin的值。
利用flex布局，左右兩欄設置固定大小，中間一欄設置為flex:1。
利用浮動，左右兩欄設置固定大小，并設置對應方向的浮動。中間一欄設置左右兩個方向的margin值，注意這種方式，中間一欄必須放到最后：
圣杯布局，利用浮動和負邊距來實現。父級元素設置左右的 padding，三列均設置向左浮動，中間一列放在最前面，寬度設置為父級元素的寬度，因此后面兩列都被擠到了下一行，通過設置 margin 負值將其移動到上一行，再利用相對定位，定位到兩邊。
雙飛翼布局，雙飛翼布局相對于圣杯布局來說，左右位置的保留是通過中間列的 margin 值來實現的，而不是通過父元素的 padding 來實現的。本質上來說，也是通過浮動和外邊距負值來實現的。

水平垂直居中

利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過translate來調整元素的中心點到頁面的中心。該方法需要考慮瀏覽器兼容問題。

CSS

復制代碼

.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

利用絕對定位，設置四個方向的值都為0，并將margin設置為auto，由于寬高固定，因此對應方向實現平分，可以實現水平和垂直方向上的居中。該方法適用于盒子有寬高的情況：

CSS

復制代碼

.parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過margin負值來調整元素的中心點到頁面的中心。該方法適用于盒子寬高已知的情況。

CSS

復制代碼

.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 自身 height 的一半 */ margin-left: -50px; /* 自身 width 的一半 */ }

使用flex布局，通過align-items:center和justify-content:center設置容器的垂直和水平方向上為居中對齊，然后它的子元素也可以實現垂直和水平的居中。該方法要考慮兼容的問題，該方法在移動端用的較多：

CSS

復制代碼

.parent { display: flex; justify-content:center; align-items:center; }

flex布局理解

flex布局是CSS3新增的一種布局方式，能夠根據不同屏幕尺寸的變化來自適應大小。

常用的屬性：

flex-direction屬性決定主軸的方向（即項目的排列方向）。
flex-wrap屬性定義，如果一條軸線排不下，如何換行。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
justify-content屬性定義了項目在主軸上的對齊方式。
align-items屬性定義項目在交叉軸上如何對齊。
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

flex: 1表示什么

flex: 1是flex-grow、flex-shrink、flex-basis的縮寫，默認值是0 1 auto。flex：1也表示flex： 1 1 auto。

flex-grow定義項目發大比例，默認為0，即存在剩余空間，也不放大。
flex-shrink定義項目收縮比例，默認為1，即空間不足，也會進行縮小。
flex-basis定義項目給上面兩個屬性分配多余空間之前, 計算項目是否有多余空間, 默認值為 auto, 即項目本身的大小。

對BFC的理解，如何創建BFC

BFC是塊級格式上下文（Block Formatting Context，BFC），是CSS布局的一個概念，在BFC布局里面的元素不受外面元素影響。

創建BFC條件

設置浮動：float有值并不為空
設置絕對定位： position（absolute、fixed）
overfilow值為：hidden、auto、`scroll
display值為：inline-block、table-cell、table-caption、flex等

BFC作用：

解決margin重疊問題：由于BFC是一個獨立的區域，內部元素和外部元素互不影響，將兩個元素變為BFC，就解決了margin重疊問題
創建自適應兩欄布局：可以用來創建自適應兩欄布局，左邊寬高固定，右邊寬度自適應。
解決高度塌陷問題：在子元素設置浮動后，父元素會發生高度的塌陷，也就是父元素的高度為0解決這個問題，只需要將父元素變成一個BFC。

什么是margin重疊，如何解決

兩個塊級元素分別設置上下margin時可能會導致邊距合并為一個邊距，合并到邊距取最大的那個值。需要注意的是，浮動的元素和絕對定位這種脫離文檔流的元素的外邊距不會折疊。重疊只會出現在垂直方向。

計算規則

都是正數，取最大的。20px 40px ---> 40px
一正一負，用正數減去負數后。20px -50px ---> -30px
都是負數，用0減去兩個中絕對值大的那個。-30px -10px ---> -20px

解決方案 對于重疊的情況，主要有兩種：兄弟之間重疊（margin合并） 和 父子之間重疊（margin塌陷）

兄弟之間重疊底部元素變為行內盒子：display: inline-block 底部元素設置浮動：float 底部元素的position的值為absolute/fixed
父子之間重疊父元素加入：overflow: hidden 父元素添加透明邊框：border:1px solid transparent 子元素變為行內盒子：display: inline-block 子元素加入浮動屬性或定位

position 常用屬性默認值是什么

static 默認值，沒有定位，元素正常在文檔流中顯示
relative 相對定位，相對于原來的位置進行定位
absolute 絕對定位，相對于static定位意外以外的一個父元素進行定位。
fixed 絕對定位，相對于瀏覽器窗口
sticky 粘性定位，基于用戶滾動位置

實現一個三角形

通過設置不同方向邊框來實現

CSS

復制代碼

div { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; }

畫一條0.5px的線

使用transform: scale()的方式，該方法用來定義元素的2D 縮放轉換：

CSS

復制代碼

transform: scale(0.5,0.5);

采用meta viewport的方式，這樣就能縮放到原來的0.5倍，如果是1px那么就會變成0.5px。viewport只針對于移動端，只在移動端上才能看到效果。

如何解決1px

1px 問題指的是：在一些 Retina屏幕的機型上，移動端頁面的 1px 會變得很粗，呈現出不止 1px 的效果。原因很簡單——CSS 中的 1px 并不能和移動設備上的 1px 劃等號。

直接寫0.5px
利用偽元素，先放大再縮小
使用viewport縮放來解決

原文章鏈接：https://juejin.cn/post/7269794410573512758

整理表格的時候，相信許多朋友都會涉及到表格斜線的制作。比如單斜線和雙斜線來區分不同維度項目。下面我們就來學習一下，如何通過Excel快速來添加我們的表格斜線。

案例一：兩步快速制作單表格單斜線

第一步：首先在單元格中依次輸入文字：月份和姓名，然后用Alt+Enter快捷鍵將兩個詞進行強制換行。然后文本在單元格中進行左對齊，將月份內容通過空格推動到靠右對齊。如下圖所示：

第二步：點擊單元格，右鍵選擇單元格格式設置—邊框，然后點擊邊框線里面的單元格對角線，這樣我們就自動添加號了單斜線。如下圖所示：

案例二：兩步快速制作Excel單元格中的表格雙斜線

第一步：我們依次在單元格中輸入文字：星期、課程和姓名。然后通過Alt+Enter強制換行的操作，利用空格鍵調整詞在單元格中的位置。如下圖所示：

第二步：我們點擊菜單欄：插入—形狀，通過畫圖的方式依次添加多條斜線。這樣我們就做好了表格中的雙斜線。如下圖所示：

單斜線、雙斜線的制作，目前使用最多方法就是，通過邊框斜線設置和畫圖的方式來進行添加。現在你學會如何在單元格中快速添加表格斜線了嗎？

在線咨詢

上一篇：幾個有意思的小眾網站，喜歡就收藏吧
下一篇：HTML+CSS：常用表單控件之單選框、多選框、下拉框的介紹

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端開發教程之CSS（四）

首先是控制字體：

其次是控制文本格式

第三、溢出相關處理

第四、換行（這個方法主要用于英文單詞，對中文沒有效果）

第五、表格

第六，定位：即元素在網頁中出現的位置

TML

src和href的區別

HTML5新增特性

對HTML語義化理解

DOCTYPE(?檔類型) 的作?

iframe 有那些優點和缺點？

Canvas和SVG的區別

script標簽中defer和async的區別

行內元素、塊級元素、空（void）

怎樣添加、移除、移動、復制、創建和查找節點

CSS

CSS3新增特性

盒模型

CSS選擇器和優先級

CSS可繼承屬性和不可繼承屬性

dislpay的屬性和作用

隱藏元素的方式

單行、多行文本溢出

有了使用過Sass、Less 嗎？他們的區別是什么？

link和@import的區別

常見的CSS單位

px、em、rem的區別

兩欄布局

三欄布局

水平垂直居中

flex布局理解

flex: 1表示什么

對BFC的理解，如何創建BFC

什么是margin重疊，如何解決

position 常用屬性 默認值是什么

實現一個三角形

畫一條0.5px的線

如何解決1px

案例一：兩步快速制作單表格單斜線

您的項目需求

position 常用屬性默認值是什么