国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css基本樣式1（7.1）

meteor199 / 2047人閱讀

摘要：顯示為塊狀元素。顯示為行內(nèi)元素顯示為行內(nèi)塊，創(chuàng)建一個(gè)字體大小的最小字體是，文字粗度默認(rèn)粗體字體行高文本屬性用于設(shè)置文字對(duì)齊方式。

塊級(jí)元素(block-level)和行內(nèi)元素(inline-level)

(1)差異：

塊級(jí)元素能包含行內(nèi)元素和塊級(jí)元素，行內(nèi)元素只能包含行內(nèi)元素和文本內(nèi)容

塊級(jí)元素可以占據(jù)一整行，行內(nèi)元素只能占據(jù)內(nèi)容的寬度

塊級(jí)元素可以設(shè)置寬高margin，padding，行內(nèi)元素不能設(shè)置寬高，設(shè)置上下margin和padding不生效，左右的margin和padding生效。(在設(shè)置背景顏色，border顯示的情況下，padding和margin視覺上會(huì)被撐開，但實(shí)際的占用位置是不變的)

(2)常用的塊級(jí)元素

div h1 h2 h3 h4 h5 h6 p form pre 
table tr th td ol li ul dl dd dt

(3)常用的行內(nèi)元素

em strong span img a  button label
select input textarea  code

2.盒模型
盒模型內(nèi)容的width、height、padding內(nèi)邊距、border、margin外邊距。

3.寬高width/height
對(duì)行內(nèi)元素不生效，只對(duì)塊級(jí)元素生效

.box{
background-color:red;
width:100px;
height:20px;
}

4.邊框 border
（1）border主要參數(shù)：
1、width 2、樣式（樣式有直線solid、圓點(diǎn)dotted、短直線dashed） 3、顏色

//例子1
.list {
  border: 1px solid #ffffd;
}
//例子2利用border畫三角形
.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid deepskyblue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom:100px solid transparent;// transparent讓邊框透明
}

demo：鏈接描述
（2）邊框倒圓角border-radius

.control {
width:100px;
height:100px;
  border-radius: 4px 10px 8px 5px;
//分別代表的左上、右上、右下、左下的倒圓角直徑
//可以用百分比做radius的參數(shù)
// border-radius：50%或者倒圓角直徑大于半徑，就可以得到圓
}

5.內(nèi)邊距padding

padding：10px 20px 30px 5px；
//分別代表的左上、右上、右下、左下的內(nèi)邊距寬度
//可以簡寫成上下10px，左右20px；
padding：10px 20px；

6.外邊距margin
（1）基本用法

margin：10px 20px 30px 5px；
//分別代表的左上、右上、右下、左下的外邊距寬度

（2）外邊距合并

（3）塊級(jí)元素的自動(dòng)居中

margin：0 auto；//相當(dāng)于左右外邊距距離相等，就居中了

7.去除瀏覽器默認(rèn)的樣式

*{
margin：0；
padding:0;
}

8.display 指定用于元素的呈現(xiàn)框的類型
塊級(jí)：block list -item table
行內(nèi)：inline inline-block inline-table

none 不顯示元素。

block 顯示為塊狀元素。

inline 顯示為行內(nèi)元素

inline-block 顯示為行內(nèi)塊，創(chuàng)建一個(gè) BFC

9.font
font-size:30px 字體大小
chrome 的最小字體是16px，
font-weight:文字粗度（regular默認(rèn) bold粗體）
font-family:字體
line-height:行高

p {
  font:12px/1.5 "Source Han Sans", Helvetica, Arial, sans-serif;
}

10.文本
（1）text-align
text-align 屬性用于設(shè)置文字對(duì)齊方式。

left 左對(duì)齊

right 右對(duì)齊

center 居中，當(dāng)設(shè)置在圖片的父元素上時(shí)，可以使圖片居中

justify 兩端對(duì)齊

（2）text-indent 首行縮進(jìn)距離

p { 
  text-indent: 2em;  /* 文章的每一段空兩格開頭 */
}

（3）text-docoration 用于設(shè)置文字劃線樣式

text-docoration:none 取消劃線

text-docoration:underline 下劃線

text-docoration:overline 上劃線

text-docoration:line-through 中劃線

(4)text-transform 屬性用于改變字母的大小寫。

text-transform:none 取消轉(zhuǎn)換效果

text-transform:uppercase 轉(zhuǎn)為大寫

text-transform:lowercase 轉(zhuǎn)為小寫

text-transform:capitalize 轉(zhuǎn)為首字母大寫

(5)letter-spacing
letter-spacing 屬性用于設(shè)置文字/字母的間距。

(6)word-spacing
屬性用于設(shè)置單詞/字的間距

11.文本超出省略
demo：鏈接描述

.card >h3{
  white-space:nowrap;//空白字符：文本不折行
  overflow:hidden;  //超出部分隱藏
  text-overflow:ellipsis;//文本超出的地方，添加省略號(hào)
  
}

12.顏色color
單詞：red blue black pink
16進(jìn)制：#fff #000 #0f0 #eee #333 #666 #f034ec
所有顏色都可以由紅綠藍(lán)三種顏色混合而成，就把每個(gè)基色分成255份，按照16進(jìn)制來展示。兩個(gè)相同的字母是可以省略的，故#fffffff可以寫成#fff。
rgb(255,255,255)分別代表是red green blue
rgba(255,255,255,0.5)分別代表是red green blue 透明度（0為透明，1不透明）

#000為黑色
#fff為白色
其他3個(gè)字母相同基本是灰色，不同深淺的灰色

13.單位
px:固定單位，像素點(diǎn)之意
em：相對(duì)單位，相對(duì)于父元素大小
rem：相對(duì)單位，相對(duì)于html根元素大小
vm：相對(duì)單位，1vm相對(duì)屏幕寬度的1%，但兼容性很差

14.a鏈接樣式

（1）設(shè)置顏色

a鏈接的顏色是不能繼承的，不能通過給父元素設(shè)置顏色，繼承給a鏈接。
a鏈接的顏色只能通過選擇a鏈接直接設(shè)置

a{
color:red;}

取消a鏈接下劃線

a{ text-decoration:none;}

15.取消ul中l(wèi)i前面的.

li{ list-style:none;}

16.隱藏元素
opacity:0 整體透明度為0
visibility:hidden; 隱藏，但還占用位置
display:none; 消失，不占用位置
rgba(255,255,255,0) 只是背景色透明

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116392.html

相關(guān)文章

  • 【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門

    摘要：個(gè)人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開始萌生寫文章的想法，到著手...

    madthumb 評(píng)論0 收藏0

  • SVG基礎(chǔ)教程(超級(jí)詳細(xì))

    摘要：光滑三次貝塞爾曲線指令跟在指令或指令后面補(bǔ)刀，它會(huì)自動(dòng)在基礎(chǔ)上生成一個(gè)對(duì)稱點(diǎn)，所以指令只需要兩個(gè)點(diǎn)就可以。二次貝塞爾曲線是控制點(diǎn)，表示的是曲線的終點(diǎn)。 一、內(nèi)置圖形: rect(矩形) circle(圓) ellipse(橢圓) line(直線) polyline(折線) polygon(多邊形) path(路徑) 二、內(nèi)置圖形的html屬性或(css樣...

    張憲坤 評(píng)論0 收藏0

  • 編寫靈活、穩(wěn)定、高質(zhì)量的CSS代碼的規(guī)范

    摘要：過度使用簡寫形式的屬性聲明會(huì)導(dǎo)致代碼混亂，并且會(huì)對(duì)屬性值帶來不必要的覆蓋從而引起意外的副作用。只有在必要的時(shí)候才將限制在最近的父元素內(nèi)也就是后代選擇器例如，不使用帶前綴的時(shí)前綴類似于命名空間。制定一致的注釋規(guī)范。 一、語法 1.1 注意 （1）用兩個(gè)空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。 （2）為選擇器分組時(shí)，將單獨(dú)的選擇器單獨(dú)放在一行。 （3...

    psychola 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記(三) CSS選擇器

    摘要：規(guī)則命名慣例規(guī)則由選擇符和聲明兩部分組成，其中選擇符用于指出規(guī)則所要選擇的元素，聲明則又由兩部分組成屬性和值。用于選擇作為指定祖先元素后代的標(biāo)簽。維基百科在其引證中大量使用了偽類。維基百科的引證鏈接就是正文里那些不起眼的數(shù)字鏈接。 1.為文檔添加樣式的三種方法 行內(nèi)樣式（寫在特定 HTML 標(biāo)簽的 style 屬性里） 嵌入樣式（嵌入的 CSS 樣式是放在 HTML 文檔的 hea...

    charles_paul 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<