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

時間 2019-12-06

標籤文檔文字 css 經常使用命令欄目 CSS 简体版

原文原文鏈接

文檔流

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

流動方向

內聯元素從左往右流，寬度不夠，之字形，且元素會被截斷
塊元素從上往下流動，一排一排

注意事項

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

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

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

脫離文檔流

相似懸浮在頁面上同樣
position: fixed;
position: absolute;

關於字體

通常，頁面默認字體大小16px
字體通常都分爲上部、中部、下部
文字（漢字、西文）都相對基線（下部）對齊
不一樣字體有本身規定的建議行高，能夠自行line-height規定

CSS經常使用命令

字體相關

設定字體樣式html

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

字體加粗編程

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

字體大寫瀏覽器

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

背景相關

背景位置與自適應svg

/*各種選擇器*/{
    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; 來使元素充滿<body>

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

子元素居中

水平居中字體

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

垂直居中flex

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

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

使內聯元素在頁面中居中：用一個塊元素包着它，而後加上css：動畫
```
<div>
    <span></span>
</div>
  
div{
    text-align: center;
}
```
設置子元素高度height: 100%;，在父元素上加上上下等量的 padding網站
```
<div>
    <span></span>
</div>
  
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/，添加網站生成的<svg>到 html 裏

給<svg>添加 css屬性改變樣式

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

其它

鼠標懸停

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

繼承父輩屬性
並非全部屬性都能繼承的
```
/*各種選擇器*/{
    color: inherit;
}
```

css碎碎念

<a>標籤去掉列表下劃線
```
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裏再表示下元素的大小，用來確認

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。