整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
過昨天分享的一些簡(jiǎn)單的屬性，接下來小編將繼續(xù)為大家分享一些相當(dāng)常用的屬性；
主要有包括指定字體、字體大小、字體加粗、字體樣式、大小寫以及綜合的font屬性；
1、指定字體，語(yǔ)法規(guī)范：font-family：value1，value2， 實(shí)例font-family："微軟雅黑"，"Arial"；這個(gè)屬性可以有很多個(gè)值并列存在，制定頁(yè)面中的文字字體，建議：一般網(wǎng)頁(yè)中，中文使用 微軟雅黑較多，英文使用 Arial
2、字體大小，語(yǔ)法規(guī)范及實(shí)例：font-size:12px； 建議：在實(shí)際開發(fā)的網(wǎng)頁(yè)中，默認(rèn)文本一般采用12px
3、字體加粗，相當(dāng)于 <b></b>，語(yǔ)法規(guī)范：font-weight:normal / bold / value；其中value取值：400至900 之間，400 相當(dāng)于 normal、900 相當(dāng)于 bold
4、字體樣式，相當(dāng)于<i></i>，語(yǔ)法規(guī)范：font-style：normal / italic；表示字體是否為斜體
5、小型大寫字母，語(yǔ)法規(guī)范：font-variant ： normal / small-caps;
6、字體綜合屬性font， font 為簡(jiǎn)寫屬性 ， 包含6個(gè)值：font : font-style font-variant font-weight font-size/line-height font-family；實(shí)例 font：bold 12px "microsoft yahei";
主要有包括文本顏色、文字水平排列方式、文本線條修飾、行高、首行文本縮進(jìn)以及文本陰影；
1、文本顏色，語(yǔ)法規(guī)范：color:value;實(shí)例color:red 表示網(wǎng)頁(yè)中的文字顏色為紅色
2、文字水平排列方式，語(yǔ)法規(guī)范：text-align : left/right/center 實(shí)例text-align:center 表示文字居中顯示
3、文本線條修飾，語(yǔ)法規(guī)范：text-decoration:none / underline ；取值 ： overline(上劃線) , line-through(刪除線)
4、行高即每行文本所占的高度是多少。一旦設(shè)定好后，該行文本將在該行內(nèi)垂直居中顯示。這個(gè)屬性有一個(gè)非常好用的地方，就是設(shè)置這個(gè)文字在垂直方面居中，要想文字垂直居中，那么就是設(shè)置這個(gè)文字的行高等于它所在容器的高度；
提問：如果在一個(gè)div中，有一行文本，要讓文本在div容器中垂直居中顯示 ？
解決：div中文本的 行高 要設(shè)置與 div的高度一致，這個(gè)比直接設(shè)置padding或者margin來的容易多了，不涉及具體核算padding或者margin值
不過也有一個(gè)缺陷，就是這個(gè)方法僅僅局限于一行數(shù)據(jù)，所以常用于一行的標(biāo)題類
5、首行文本縮進(jìn)，text-indent ： value ;value 表示的是縮進(jìn)的距離；實(shí)例text-index:24px 即表示首行縮進(jìn)2個(gè)字符
6、文本陰影，text-shadow ：h-shadow v-shadow blur color；
主要有包括處理空白、文本溢出；
1、處理空白，文本過長(zhǎng)，在容器內(nèi)顯示不下的時(shí)候，是否要換行
屬性 ：white-space：normal / nowrap ，norma即采用瀏覽器默認(rèn)設(shè)置 nowrap即不換行
2、文本溢出，溢出后的處理方式,若是想隱藏溢出的內(nèi)容，可以考慮使用該屬性。注意：該屬性必須與 overflow：hidden 聯(lián)用，屬性：text-overflow，取值：clip 即裁減，攔腰截?cái)?或者 ellipsis即通過 ... 來表示未顯示的內(nèi)容
主要有包括長(zhǎng)單詞換行、文本換行；
1、長(zhǎng)單詞換行，屬性為word-wrap :normal 即采用瀏覽器默認(rèn)形式不破壞單詞結(jié)構(gòu)（也是默認(rèn)值），break-word即破壞單詞的結(jié)構(gòu)
2、文本換行，屬性為word-break，取值：normal，break-all即破壞單詞結(jié)構(gòu)進(jìn)行換行，keep-all在半角狀態(tài)下的空格下進(jìn)行換行
主要分為2大塊表格常用樣式屬性、表格特有樣式屬性；
1、表格常用樣式屬性有：內(nèi)邊距 ： padding，尺寸：width 、height，文本、字體格式化屬性，背景屬性：顏色、圖片
邊框:border，文本垂直對(duì)齊：vertical-align : top / bottom / middle等一些基本屬性
2、表格特有樣式屬性
2.1邊框合并，屬性:border-collapse，取值可以有：separate即分離邊框(默認(rèn))、collapse即合并邊框
2.2邊框邊距，即table中的cellspacing屬性，使用這個(gè)屬性的前提是border-collapse 必須為 separate，屬性：border-spacing，它所有的取值：一個(gè)值：表示垂直和水平間距相等、兩個(gè)值：第一個(gè)值表示 水平間距，第二個(gè)值 垂直間距，兩個(gè)值 分開
2.3表格標(biāo)題位置，屬性為：caption-side，取值：top , bottom
2.4顯示規(guī)則，就是幫助瀏覽器如何顯示或布局一張表，屬性：table-layout，取值有：auto：列寬度由單元格內(nèi)容決定，默認(rèn)值，自動(dòng)表格布局，fixed：列寬度由表格和列的寬度的來決定，固定表格布局
自動(dòng)表格布局的特點(diǎn)如下：
a).單元格大小會(huì)適應(yīng)內(nèi)容大小
b).表格復(fù)雜是會(huì)比較慢
c).不確定列大小時(shí)
固定表格布局的特點(diǎn)如下：
a).表格、列的寬度取決于設(shè)置好的寬度
b).速度較快
c).浮動(dòng)定位
定位分類：普通流定位、浮動(dòng)定位、相對(duì)定位、絕對(duì)定位、固定定位，浮動(dòng)屬性、清除浮動(dòng)、以及浮動(dòng)引發(fā)的問題：
1、普通流定位(文檔流)，即網(wǎng)頁(yè)中默認(rèn)的定位方式
1.1塊級(jí)元素 ：從上到下
1.2行內(nèi)元素 ：從左到右
2、浮動(dòng)定位，就是將元素排除在普通流之外,元素在網(wǎng)頁(yè)上是不占用空間的。浮動(dòng)元素會(huì)放在包含框的左邊或右邊，但依然在包含框內(nèi)浮動(dòng)元素在浮動(dòng)時(shí)，可以向左或向右移動(dòng)直到碰到包含框或其他浮動(dòng)元素位置，浮動(dòng)定位的特點(diǎn)有：
2.1浮動(dòng)元素外邊緣不會(huì)超過父元素的邊框
2.2浮動(dòng)元素默認(rèn)不會(huì)重疊
2.3浮動(dòng)只能左右浮動(dòng)，不能上下浮動(dòng)
2.4所有元素設(shè)置為浮動(dòng)元素的話，默認(rèn)將轉(zhuǎn)換為塊級(jí)元素
3、浮動(dòng)屬性，屬性：float，取值有：none 即無(wú)浮動(dòng)(默認(rèn))、left即左浮動(dòng)、right即右浮動(dòng)
注意：在一個(gè)容器內(nèi)，如果有浮動(dòng)元素的話，那么盡可能的讓該容器中所有的元素都浮動(dòng)起來。如果有想在下一行內(nèi)顯示的內(nèi)容（不浮動(dòng)的）單獨(dú)使用容器來承裝。
4、清除浮動(dòng)，屬性：clear，取值：left/right/both
作用：清除浮動(dòng)所帶來的影響，定義了元素的哪個(gè)邊上不允許出現(xiàn)浮動(dòng)元素
5、浮動(dòng)引發(fā)的問題
包含框內(nèi)的元素被應(yīng)用了float之后，包含框的高度會(huì)發(fā)生變化（變?yōu)?）
解決方案有 overflow：hidden；
！！！最后小編還是建議大家，多多代碼，如果學(xué)的還不多的，也可以多多的模仿的代碼
src和href都是用來加載外部資源，區(qū)別如下
src當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的加載和處理，直到該資源加載完成。 它會(huì)將資源內(nèi)容嵌入到當(dāng)前標(biāo)簽所在的位置，將其指向的資源下載應(yīng)用到文檔內(nèi)，如js腳本等。常用在img、script、iframe等標(biāo)簽。
href指向外部資源所在的位置，和當(dāng)前元素位置建立鏈接，當(dāng)瀏覽器解識(shí)別到它指向的位置，將其下載的時(shí)候不會(huì)阻止其他資源的加載解析。常用在a 、 link標(biāo)簽。
根據(jù)內(nèi)容來選擇合適的標(biāo)簽
DOCTYPE是HTML5中一種標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的文檔類型聲明，是用來告訴瀏覽器的解析器，該用什么樣的方式去加載識(shí)別文檔。
iframe通常用來加載外部鏈接，不會(huì)影響網(wǎng)頁(yè)內(nèi)容的加載。
優(yōu)點(diǎn)
缺點(diǎn)
他倆都是表示異步加載外部JS腳本，不會(huì)阻礙頁(yè)面的加載解析。 區(qū)別
盒模型都是由四個(gè)部分組成的，分別是margin、border、padding和content。
標(biāo)準(zhǔn)盒模型和IE盒模型的區(qū)別在于設(shè)置width和height時(shí)，對(duì)應(yīng)的范圍不同。
通過修改元素的box-sizing屬性來改變?cè)氐暮心Ｐ?/p>
選擇器
選擇器 | 權(quán)重 |
id選擇器 #id | 100 |
類選擇器 .classname | 10 |
屬性選擇器 div[class="foo"] | 10 |
偽類選擇器 div::last-child | 10 |
標(biāo)簽選擇器 div | 1 |
偽元素選擇器 div:after | 1 |
兄弟選擇器 div+span | 0 |
子選擇器 ui>li | 0 |
后代選擇器 div span | 0 |
通配符選擇器 | 0 |
優(yōu)先級(jí)
可繼承
不可繼承
屬性 | 作用 |
block | 塊類型。默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示。 |
inline | 行內(nèi)元素類型。默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示。 |
inline-block | 行內(nèi)塊級(jí)元素，默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示 |
table | 塊級(jí)表格 |
flex | flex容器布局 |
none | 隱藏元素 |
inherit | 從父類繼承display屬性 |
單行
css復(fù)制代碼
overflow: hidden; // 溢出隱藏 text-overflow: ellipsis; // 溢出用省略號(hào)顯示 whtie-space: nowrap; //規(guī)定段落中的文本不進(jìn)行換行
多行
CSS復(fù)制代碼
overflow:hidden text-overflow: ellipsis; // 溢出用省略號(hào)顯示 display:-webkit-box; // 作為彈性伸縮盒子模型顯示。 -webkit-box-orient:vertical; // 設(shè)置伸縮盒子的子元素排列方式：從上到下垂直排列 -webkit-line-clamp:3; // 顯示的行數(shù)
他們都是 CSS 預(yù)處理器，是 CSS 上的一種抽象層。他們是一種特殊的語(yǔ)法/語(yǔ)言編譯成 CSS。 增加了 CSS代碼的復(fù)用性，層級(jí)，mixin， 變量，循環(huán)， 函數(shù)等對(duì)編寫以及開發(fā)UI組件都極為方便。 區(qū)別
CSS復(fù)制代碼
.outer { height: 100px; } .left { float: left; width: 200px; background: tomato; } .right { margin-left: 200px; width: auto; background: gold; }
CSS復(fù)制代碼
.left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; }
CSS復(fù)制代碼
.outer { display: flex; height: 100px; } .left { width: 200px; background: tomato; } .right { flex: 1; background: gold; }
CSS復(fù)制代碼
.outer { position: relative; height: 100px; } .left { position: absolute; width: 200px; height: 100px; background: tomato; } .right { margin-left: 200px; background: gold; }
CSS復(fù)制代碼
.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
CSS復(fù)制代碼
.parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
CSS復(fù)制代碼
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 自身 height 的一半 */ margin-left: -50px; /* 自身 width 的一半 */ }
CSS復(fù)制代碼
.parent { display: flex; justify-content:center; align-items:center; }
flex布局是CSS3新增的一種布局方式，能夠根據(jù)不同屏幕尺寸的變化來自適應(yīng)大小。
常用的屬性：
flex: 1是flex-grow、flex-shrink、flex-basis的縮寫，默認(rèn)值是0 1 auto。flex：1也表示flex： 1 1 auto。
BFC是塊級(jí)格式上下文（Block Formatting Context，BFC），是CSS布局的一個(gè)概念，在BFC布局里面的元素不受外面元素影響。
創(chuàng)建BFC條件
BFC作用：
兩個(gè)塊級(jí)元素分別設(shè)置上下margin時(shí)可能會(huì)導(dǎo)致邊距合并為一個(gè)邊距，合并到邊距取最大的那個(gè)值。需要注意的是，浮動(dòng)的元素和絕對(duì)定位這種脫離文檔流的元素的外邊距不會(huì)折疊。重疊只會(huì)出現(xiàn)在垂直方向。
計(jì)算規(guī)則
解決方案 對(duì)于重疊的情況，主要有兩種：兄弟之間重疊（margin合并） 和 父子之間重疊（margin塌陷）
通過設(shè)置不同方向邊框來實(shí)現(xiàn)
CSS復(fù)制代碼
div { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; }
CSS復(fù)制代碼
transform: scale(0.5,0.5);
1px 問題指的是：在一些 Retina屏幕 的機(jī)型上，移動(dòng)端頁(yè)面的 1px 會(huì)變得很粗，呈現(xiàn)出不止 1px 的效果。原因很簡(jiǎn)單——CSS 中的 1px 并不能和移動(dòng)設(shè)備上的 1px 劃等號(hào)。
原文章鏈接：https://juejin.cn/post/7269794410573512758
整理表格的時(shí)候，相信許多朋友都會(huì)涉及到表格斜線的制作。比如單斜線和雙斜線來區(qū)分不同維度項(xiàng)目。下面我們就來學(xué)習(xí)一下，如何通過Excel快速來添加我們的表格斜線。
第一步：首先在單元格中依次輸入文字：月份和姓名，然后用Alt+Enter快捷鍵將兩個(gè)詞進(jìn)行強(qiáng)制換行。然后文本在單元格中進(jìn)行左對(duì)齊，將月份內(nèi)容通過空格推動(dòng)到靠右對(duì)齊。如下圖所示：
第二步：點(diǎn)擊單元格，右鍵選擇單元格格式設(shè)置—邊框，然后點(diǎn)擊邊框線里面的單元格對(duì)角線，這樣我們就自動(dòng)添加號(hào)了單斜線。如下圖所示：
案例二：兩步快速制作Excel單元格中的表格雙斜線
第一步：我們依次在單元格中輸入文字：星期、課程和姓名。然后通過Alt+Enter強(qiáng)制換行的操作，利用空格鍵調(diào)整詞在單元格中的位置。如下圖所示：
第二步：我們點(diǎn)擊菜單欄：插入—形狀，通過畫圖的方式依次添加多條斜線。這樣我們就做好了表格中的雙斜線。如下圖所示：
單斜線、雙斜線的制作，目前使用最多方法就是，通過邊框斜線設(shè)置和畫圖的方式來進(jìn)行添加。現(xiàn)在你學(xué)會(huì)如何在單元格中快速添加表格斜線了嗎？
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
