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

pingink 發布于2019-08-01 18:43 / 746人閱讀

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

文檔流

文檔流就是文檔內元素流動方向

流動方向

內聯元素從左往右流，寬度不夠，之字形，且元素會被截斷

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

注意事項

內聯元素中有英文單詞，流動時寬度不夠，英文單詞會整體遷移，不會被打斷

若想打斷上述聯結，請使用css屬性

/*想打斷的內聯元素*/{
    word-break: break-all;
    display: inline-block;
}

脫離文檔流

類似懸浮在頁面上一樣

position: fixed;

position: absolute;

關于字體

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

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

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

CSS常用命令 字體相關

設定字體樣式

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

字體加粗

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

字體大寫

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

背景相關

背景位置與自適應

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

設定內外邊距padding margin

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

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

margin甚至可以調成負值，往反方向移唄

內聯元素左右 padding有用，上下 padding不影響頁面布局，位置不變。可以設置css：display: line-block;，使上下左右padding都生效。

position定位

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

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

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

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

子元素居中

水平居中

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

垂直居中

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

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

使內聯元素在頁面中居中：用一個塊元素包著它，然后加上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
}

圖標

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

給添加 css屬性改變樣式

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

其它

鼠標懸停

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

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

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

css碎碎念

標簽去掉列表下劃線

a{
    text-decoration: none;
}

內聯元素不能制定高度（height）和寬度（width）
要轉變為塊級元素（display: block;）或內聯塊級元素（display: inline-block;）

自己寫的屬性優先級比瀏覽器和默認的高

行高line-height可決定內聯元素高度

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

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

設置上下 padding 一樣就是居中，僅對塊元素生效，內聯元素無效

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

border 與浮動

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

內聯元素盒模型超過父輩

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

/*內聯元素*/{
    display: block;
}

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

設定元素的寬高

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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52062.html

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

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

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

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

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

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

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

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

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

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

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