文檔流&文字&CSS常用命令

pingink 發(fā)布于2019-08-01 18:43 / 758人閱讀

摘要：文檔流文檔流就是文檔內(nèi)元素流動方向流動方向內(nèi)聯(lián)元素從左往右流，寬度不夠，之字形，且元素會被截斷塊元素從上往下流動，一排一排注意事項內(nèi)聯(lián)元素中有英文單詞，流動時寬度不夠，英文單詞會整體遷移，不會被打斷若想打斷上述聯(lián)結(jié)，請使用屬性想打斷的內(nèi)聯(lián)元

文檔流

文檔流就是文檔內(nèi)元素流動方向

流動方向

內(nèi)聯(lián)元素從左往右流，寬度不夠，之字形，且元素會被截斷

塊元素從上往下流動，一排一排

注意事項

內(nèi)聯(lián)元素中有英文單詞，流動時寬度不夠，英文單詞會整體遷移，不會被打斷

若想打斷上述聯(lián)結(jié)，請使用css屬性

/*想打斷的內(nèi)聯(lián)元素*/{
    word-break: break-all;
    display: inline-block;
}

脫離文檔流

類似懸浮在頁面上一樣

position: fixed;

position: absolute;

關于字體

一般，頁面默認字體大小16px

字體一般都分為上部、中部、下部
文字（漢字、西文）都相對基線（下部）對齊

不同字體有自己規(guī)定的建議行高，可以自行line-height規(guī)定

CSS常用命令 字體相關

設定字體樣式

/*各類選擇器*/{
    font-family: kai;
}

字體加粗

/*各類選擇器*/{
    font-weight: bold;
}

字體大寫

/*各類選擇器*/{
    text-transform: uppercase;
}

背景相關

背景位置與自適應

/*各類選擇器*/{
    background-position: center center;/*水平方向*/ /*垂直方向*/
    background-size: cover;/*背景自適應*/
    background: url(背景圖片地址);
}

設定內(nèi)外邊距padding margin

/*各類選擇器*/{
    padding: 10px 20px 30px 40px;/*上 右 下 左*/
    margin: 10px 20px 30px 40px;/*上 右 下 左*/
}

/*各類選擇器*/{
    padding: 10px 30px;/*上 右 下 左*/
    margin: 10px 30px;/*上下 左右*/
}

margin甚至可以調(diào)成負值，往反方向移唄

內(nèi)聯(lián)元素左右 padding有用，上下 padding不影響頁面布局，位置不變?？梢栽O置css：display: line-block;，使上下左右padding都生效。

position定位

（詳細請閱讀：https://developer.mozilla.org...）(??????)??

/*各類選擇器*/{
    position: relative/absolute/fixed/sticky/static;
}

fixed       元素的寬度會自動縮成最小、最緊湊的寬度
            可以使用 width height 調(diào)整大小
            可以使用 top left right bottom 調(diào)整位置
            可以使用 left: 0; right: 0; 來使元素充滿

absolute    可以設置子元素 position: absolute;
                   父元素position: elative;
            子元素相對父元素絕對定位

子元素居中

水平居中

/*想要子元素居中的元素*/{
    text-align: center;
}

垂直居中

/*使用vertical-align要求父元素必須有行高，如果沒有的話，一定要手動添加：line-height: ;*/

/*想要居中的子元素*/{
    verticle-align: center;
}

使內(nèi)聯(lián)元素在頁面中居中：用一個塊元素包著它，然后加上css：


    

  
div{
    text-align: center;
}

設置子元素高度height: 100%;，在父元素上加上上下等量的 padding


    

  
div{
    padding: 10px;
}

span{
    height: 100%;
}

使用flex布局：左右居中，垂直居中。在父元素上加上如下 css：

/*某父元素*/{
    display:flex;
    align-items:center;
    justify-content:center;
}

邊框

邊框圓角

/*想要圓角邊框的元素*/{
    border: 1px solid red;    //設置元素邊框
    border-radius: 30px;      //設置邊框圓角30px
}

圖標

可以登錄網(wǎng)站：http://www.iconfont.cn/，添加網(wǎng)站生成的到 html 里

給添加 css屬性改變樣式

svg{
    width:
    height:
    fill:    /*顏色*/
    margin:
    padding:
}

其它

鼠標懸停

/*各類選擇器*/:hover{
    color: red;
}

繼承父輩屬性
并不是所有屬性都能繼承的

/*各類選擇器*/{
    color: inherit;
}

css碎碎念

標簽去掉列表下劃線

a{
    text-decoration: none;
}

內(nèi)聯(lián)元素不能制定高度（height）和寬度（width）
要轉(zhuǎn)變?yōu)閴K級元素（display: block;）或內(nèi)聯(lián)塊級元素（display: inline-block;）

自己寫的屬性優(yōu)先級比瀏覽器和默認的高

行高line-height可決定內(nèi)聯(lián)元素高度

html編程中兩行代碼中間的空格和回車都會變成一個空格

同樣顏色不同字體上有不同顏色

設置上下 padding 一樣就是居中，僅對塊元素生效，內(nèi)聯(lián)元素無效

行高line-height和字高font-size的差值會自動的填充在字體的上下

border 與浮動

動畫操作（如 :hover）border后，元素會左右浮動，
這是由于一開始沒有 border，操作后多出來了，
將元素一開始就添加【透明 border】，坑先站好啊，之后動畫 border 顏色的顯現(xiàn)

內(nèi)聯(lián)元素盒模型超過父輩

一些默認 display: inline; 的元素被包起來的時候，它的 padding 和margin 有時會超過父輩
需要設定 display: block; 解決

/*內(nèi)聯(lián)元素*/{
    display: block;
}

div 高度由其內(nèi)部文檔流元素的高度總和決定
內(nèi)聯(lián)的高度任性，強行準確測量意義不大

設定元素的寬高

weight       鎖定寬度，瀏覽器窗口變小，用滾動條的方式
max-weight   設定最大寬度，瀏覽器窗口變小，自適應窗口，推薦
當設定了寬度或是最大寬度，使用 margin-left:auto; margin-right:auto; 使元素居中

內(nèi)聯(lián)元素不接受設定寬高，設定display: inline-block;
不過支持padding、margin，可以用來代替

為防止在不同電腦上效果不一致，可以在css里再表示下元素的大小，用來確認

云服務器 GPU云服務器文字自動&039&039到google linux常用命令文檔 asp &amp&amp邏輯 js 2&amp&amp1

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52062.html

文檔流&amp;文字&amp;CSS常用命令

摘要：文檔流文檔流就是文檔內(nèi)元素流動方向流動方向內(nèi)聯(lián)元素從左往右流，寬度不夠，之字形，且元素會被截斷塊元素從上往下流動，一排一排注意事項內(nèi)聯(lián)元素中有英文單詞，流動時寬度不夠，英文單詞會整體遷移，不會被打斷若想打斷上述聯(lián)結(jié)，請使用屬性想打斷的內(nèi)聯(lián)元文檔流文檔流就是文檔內(nèi)元素流動方向流動方向內(nèi)聯(lián)元素從左往右流，寬度不夠，之字形，且元素會被截斷塊元素從上往下流動，一排一排 sho...

zebrayoung 2019-08-30 14:13 評論0 收藏0
一個后端開發(fā)者的前端語言基礎：HTML5 &amp; CSS

摘要：每個標簽可有一個獨立的號。該標簽是一個內(nèi)聯(lián)元素，與塊級元素相反，內(nèi)聯(lián)元素不會自動在前后自動放置換行符，因此內(nèi)聯(lián)元素會默認在同一行顯示。前端語言基礎：HTML5 & CSS (一) HTML5：超文本標記語言 (1) 基本概念是由一系列成對出現(xiàn)的元素標簽（標記）嵌套組合而成 ( XML也是標簽構成的 ) 這些標簽以的形式出現(xiàn)，用于標記文本內(nèi)容的含義瀏覽器通過元素標簽解析文本內(nèi)容并...

ACb0y 2019-08-19 10:27 評論0 收藏0
一個后端開發(fā)者的前端語言基礎：HTML5 &amp; CSS

摘要：每個標簽可有一個獨立的號。該標簽是一個內(nèi)聯(lián)元素，與塊級元素相反，內(nèi)聯(lián)元素不會自動在前后自動放置換行符，因此內(nèi)聯(lián)元素會默認在同一行顯示。前端語言基礎：HTML5 & CSS (一) HTML5：超文本標記語言 (1) 基本概念是由一系列成對出現(xiàn)的元素標簽（標記）嵌套組合而成 ( XML也是標簽構成的 ) 這些標簽以的形式出現(xiàn)，用于標記文本內(nèi)容的含義瀏覽器通過元素標簽解析文本內(nèi)容并...

DevWiki 2019-08-30 15:44 評論0 收藏0
HTML &amp; CSS 之小白再續(xù)前緣

摘要：標準文檔流的常見現(xiàn)象空白折疊現(xiàn)象。浮動浮動的特點脫離標準文檔流，元素一旦脫離標準文檔流脫標，后面的元素會占據(jù)浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內(nèi)元素的特性。元素浮動會脫離文檔流但是不會脫離文本流，所以會產(chǎn)生字圍效果。 CSS 盒子模型（點擊查看官方解釋）實際上網(wǎng)頁中的每一個標簽都可以看成一個盒子模型，而這個盒子模型從內(nèi)到外有以下這幾個元素組成 conten...

Heier 2019-08-29 12:51 評論0 收藏0
HTML &amp; CSS 之小白再續(xù)前緣

摘要：標準文檔流的常見現(xiàn)象空白折疊現(xiàn)象。浮動浮動的特點脫離標準文檔流，元素一旦脫離標準文檔流脫標，后面的元素會占據(jù)浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內(nèi)元素的特性。元素浮動會脫離文檔流但是不會脫離文本流，所以會產(chǎn)生字圍效果。 CSS 盒子模型（點擊查看官方解釋）實際上網(wǎng)頁中的每一個標簽都可以看成一個盒子模型，而這個盒子模型從內(nèi)到外有以下這幾個元素組成 conten...

taohonghui 2019-08-01 17:04 評論0 收藏0