日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當(dāng)前位置: 首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

html标签和css参数

發(fā)布時(shí)間:2023/12/18 编程问答 24 豆豆
生活随笔 收集整理的這篇文章主要介紹了 html标签和css参数 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、HTML標(biāo)簽

1、實(shí)體標(biāo)簽:

  空格、

> 大于號(hào)

< 小于號(hào)

© 版本號(hào)

2、Meta標(biāo)簽:

charset 指定網(wǎng)頁(yè)的字符集

name 指定的數(shù)據(jù)的名稱

content 指定的數(shù)據(jù)的內(nèi)容

description 用于指定網(wǎng)站的描述

title標(biāo)簽的內(nèi)容會(huì)作為搜索結(jié)果的超鏈接上的文字顯示?

keywords 表示網(wǎng)站的關(guān)鍵字,可以同時(shí)指定多個(gè)關(guān)鍵字,關(guān)鍵字間使用,隔開。

3、語(yǔ)義標(biāo)簽:

1、標(biāo)題標(biāo)簽

h1 ~ h6 一共有六級(jí)標(biāo)題

從h1~h6重要性遞減,h1最重要,h6最不重要

標(biāo)題標(biāo)簽都是塊元素

在頁(yè)面中獨(dú)占一行的元素稱為塊元素(block element)

hgroup標(biāo)簽用來為標(biāo)題分組,可以將一組相關(guān)的標(biāo)題同時(shí)放入到hgroup。

em標(biāo)簽用于表示語(yǔ)音語(yǔ)調(diào)的一個(gè)加重。

strong表示強(qiáng)調(diào),重要內(nèi)容!

blockquote 表示一個(gè)長(zhǎng)引用,? q表示一個(gè)短引用。 ?

2、布局標(biāo)簽:

(1)header 表示網(wǎng)頁(yè)的頭部。

(2)main 表示網(wǎng)頁(yè)的主體部分(一個(gè)頁(yè)面中只會(huì)有一個(gè)main)。

(3)footer 表示網(wǎng)頁(yè)的底部。

(4)nav 表示網(wǎng)頁(yè)中的導(dǎo)航。

(5)aside 和主體相關(guān)的其他內(nèi)容(側(cè)邊欄)。

(6)article 表示一個(gè)獨(dú)立的文章。

(7) section 表示一個(gè)獨(dú)立的區(qū)塊,上邊的標(biāo)簽都不能表示時(shí)使用section。

(8)div 沒有語(yǔ)義,就用來表示一個(gè)區(qū)塊,目前來講div還是我們主要的布局元素 。

(9)span 行內(nèi)元素,沒有任何的語(yǔ)義,一般用于在網(wǎng)頁(yè)中選中文字。

4、塊元素和行內(nèi)元素的區(qū)別:

(1)塊元素(block element)

??????????? - 在網(wǎng)頁(yè)中一般通過塊元素來對(duì)頁(yè)面進(jìn)行布局

???????? 行內(nèi)元素(inline element)

??????????? - 行內(nèi)元素主要用來包裹文字

??????????? (2)- 一般情況下會(huì)在塊元素中放行內(nèi)元素,而不會(huì)在行內(nèi)元素中放塊元素

??????????? - 塊元素中基本上什么都能放

??????????? - p元素中不能放任何的塊元素

5、列表標(biāo)簽(html列表的三種創(chuàng)建方式):

??????? ??? 1、有序列表

?????? 2、無序列表

??????? ??? 3、定義列表

(1)有序列表,使用ol標(biāo)簽來創(chuàng)建無序列表

?????? ??????使用li表示列表項(xiàng)?

??????? (2)無序列表,使用ul標(biāo)簽來創(chuàng)建無序列表

??????? ?????使用li表示列表項(xiàng)

(3)定義列表,使用dl標(biāo)簽來創(chuàng)建一個(gè)定義列表

?????? ??????使用dt來表示定義的內(nèi)容

??????? ??????? ?使用dd來對(duì)內(nèi)容進(jìn)行解釋說明

?? 使用:列表之間可以互相嵌套。

6、超鏈接標(biāo)簽

?? 使用 a 標(biāo)簽來定義超鏈接

????? 屬性:

1、 href 指定跳轉(zhuǎn)的目標(biāo)路徑

???????????? - 值可以是一個(gè)外部網(wǎng)站的地址。

???????????? - 也可以寫一個(gè)內(nèi)部頁(yè)面的地址。

??????????? 2、target屬性,用來指定超鏈接打開的位置

?????????????? 可選值:

???????????????? _self 默認(rèn)值 在當(dāng)前頁(yè)面中打開超鏈接。

??????????????? ?_blank 在一個(gè)新的要么中打開超鏈接。

??????????? 3、可以使用 javascript:; 來作為href的屬性,此時(shí)點(diǎn)擊這個(gè)超鏈接什么也不會(huì)發(fā)生

??????????? 4、可以直接將超鏈接的href屬性設(shè)置為#,這樣點(diǎn)擊超鏈接以后,頁(yè)面不會(huì)發(fā)生跳轉(zhuǎn)。

可以跳轉(zhuǎn)到頁(yè)面的指定位置,只需將href屬性設(shè)置 #目標(biāo)元素的id屬性值。id屬性(唯一不重復(fù)的):

?????? - 每一個(gè)標(biāo)簽都可以添加一個(gè)id屬性

??????? - id屬性就是元素的唯一標(biāo)識(shí),同一個(gè)頁(yè)面中不能出現(xiàn)重復(fù)的id屬性 。

7、圖片標(biāo)簽:

使用img標(biāo)簽來引入外部圖片,img標(biāo)簽是一個(gè)自結(jié)束標(biāo)簽

屬性:

(1)src 屬性指定的是外部圖片的路徑(路徑規(guī)則和超鏈接是一樣的)

(2)alt 圖片的描述,這個(gè)描述默認(rèn)情況下不會(huì)顯示,有些瀏覽器會(huì)圖片無法加載時(shí)顯示搜索引擎會(huì)根據(jù)alt中的內(nèi)容來識(shí)別圖片,如果不寫alt屬性則圖片不會(huì)被搜索引擎所收錄

(3)width 圖片的寬度 (單位是像素)

(4)height 圖片的高度???

? - 寬度和高度中如果只修改了一個(gè),則另一個(gè)會(huì)等比例縮放

注意:

(1)一般情況在pc端,不建議修改圖片的大小,需要多大的圖片就裁多大.

(2)但是在移動(dòng)端,經(jīng)常需要對(duì)圖片進(jìn)行縮放(大圖縮小)。

(3)效果一樣,用小的,效果不一樣,用效果好的。

8、內(nèi)聯(lián)框架

內(nèi)聯(lián)框架,用于向當(dāng)前頁(yè)面中引入一個(gè)其他頁(yè)面。

屬性:

???? src 指定要引入的網(wǎng)頁(yè)的路徑

???? rameborder 指定內(nèi)聯(lián)框架的邊框

9、音視頻標(biāo)簽

(1)音頻標(biāo)簽

audio 標(biāo)簽用來向頁(yè)面中引入一個(gè)外部的音頻文件的。音視頻文件引入時(shí),默認(rèn)情況下不允許用戶自己控制播放停止。

屬性: controls 是否允許用戶控制播放

???? ??autoplay 音頻文件是否自動(dòng)播放, 如果設(shè)置了autoplay 則音樂在打開頁(yè)面時(shí)會(huì)自動(dòng)播放,但是目前來講大部分瀏覽器都不會(huì)自動(dòng)對(duì)音樂進(jìn)行播放 , loop 音樂是否循環(huán)播放

(2)視頻標(biāo)簽:

使用video標(biāo)簽來向網(wǎng)頁(yè)中引入一個(gè)視頻, 使用方式和audio基本上是一樣的。

二、CSS屬性

1、常用選擇器

(1)元素選擇器

????????? ?作用:根據(jù)標(biāo)簽名來選中指定的元素

????????? ?語(yǔ)法:標(biāo)簽名{}

?????????? 例子:p{}? h1{}? div{}

(2)id選擇器

????????? ?作用:根據(jù)元素的id屬性值選中一個(gè)元素

???????? ??語(yǔ)法:#id屬性值{}

?????????? 例子:#box{} #red{}?

(3)類選擇器

???????? ?作用:根據(jù)元素的class屬性值選中一組元素

??????? ??語(yǔ)法:.class屬性值

(4)通配選擇器

????????? 作用:選中頁(yè)面中的所有元素

???????? ?語(yǔ)法: *

(5)class標(biāo)簽和id標(biāo)簽的區(qū)別:

class 是一個(gè)標(biāo)簽的屬性,它和id類似,不同的是class可以重復(fù)使用,可以通過class屬性來為元素分組,可以同時(shí)為一個(gè)元素指定多個(gè)class屬性。

2、復(fù)合選擇器

(1)交集選擇器

????????? 作用:選中同時(shí)復(fù)合多個(gè)條件的元素

????????? 語(yǔ)法:選擇器1選擇器2選擇器3選擇器n{}

????????? 注意點(diǎn):

???????????? 交集選擇器中如果有元素選擇器,必須使用元素選擇器開頭。

(2)選擇器分組(并集選擇器)

??????????????? 作用:同時(shí)選擇多個(gè)選擇器對(duì)應(yīng)的元素

??????????????? 語(yǔ)法:選擇器1,選擇器2,選擇器3,選擇器n{}

3、關(guān)系選擇器

(1)子元素選擇器

??????? 作用:選中指定父元素的指定子元素

??????? 語(yǔ)法:父元素 > 子元素

(2)后代元素選擇器:

??????? 作用:選中指定元素內(nèi)的指定后代元素

??????? 語(yǔ)法:祖先 后代

(3)兄弟選擇器

下一個(gè)兄弟:

???????????? 語(yǔ)法:前一個(gè) + 下一個(gè)

??????? 選擇下邊所有的兄弟

???????????? 語(yǔ)法:兄 ~ 弟

(4)關(guān)系:

父元素:直接包含子元素的元素叫做父元素。

子元素:直接被父元素包含的元素是子元素。

祖先元素:直接或間接包含后代元素的元素叫做祖先元素,一個(gè)元素的父元素也是它的祖先元素。

后代元素:直接或間接被祖先元素包含的元素叫做后代元素,子元素也是后代元素。

兄弟元素:擁有相同父元素的元素是兄弟元素。

4、屬性選擇器

[屬性名] 選擇含有指定屬性的元素。

[屬性名=屬性值] 選擇含有指定屬性和屬性值的元素。

[屬性名^=屬性值] 選擇屬性值以指定值開頭的元素。

[屬性名$=屬性值] 選擇屬性值以指定值結(jié)尾的元素。

[屬性名*=屬性值] 選擇屬性值中含有某值的元素的元素。

5、偽類選擇器

?偽類(不存在的類,特殊的類)

????? - 偽類用來描述一個(gè)元素的特殊狀態(tài)

?????? 比如:第一個(gè)子元素、被點(diǎn)擊的元素、鼠標(biāo)移入的元素...

????? - 偽類一般情況下都是使用:開頭

屬性:

??????? :first-child 第一個(gè)子元素

????? ??:last-child 最后一個(gè)子元素

??????? :nth-child() 選中第n個(gè)子元素

?????????? ?特殊值:

????????????????? n 第n個(gè) n的范圍0到正無窮

???????????????? ?2n 或 even 表示選中偶數(shù)位的元素

???????????????? ?2n+1 或 odd 表示選中奇數(shù)位的元素

以上這些偽類都是根據(jù)所有的子元素進(jìn)行排序

:first-of-type

:last-of-type

:nth-of-type()

這幾個(gè)偽類的功能和上述的類似,不同點(diǎn)是他們是在同類型元素中進(jìn)行排序

:not() 否定偽類

??????????????? - 將符合條件的元素從選擇器中去除。

6、超鏈接偽類(a元素偽類)

:link 用來表示沒訪問過的鏈接(正常的鏈接)。

:visited 用來表示訪問過的鏈接,由于隱私的原因所以visited這個(gè)偽類只能修改鏈接的顏色。

:hover 用來表示鼠標(biāo)移入的狀態(tài)。

:active 用來表示鼠標(biāo)點(diǎn)擊。

7、偽元素選擇器

偽元素,表示頁(yè)面中一些特殊的并不真實(shí)的存在的元素(特殊的位置)

偽元素使用 :: 開頭

?????? ::first-letter 表示第一個(gè)字母

????? ?::first-line 表示第一行

?????? ::selection 表示選中的內(nèi)容

???? ??::before 元素的開始

?????? ::after 元素的最后

???????????? before 和 after 必須結(jié)合content屬性來使用

8、樣式的繼承

樣式的繼承,我們?yōu)橐粋€(gè)元素設(shè)置的樣式同時(shí)也會(huì)應(yīng)用到它的后代元素上,繼承是發(fā)生在祖先后后代之間的。

繼承的設(shè)計(jì)是為了方便我們的開發(fā),,利用繼承我們可以將一些通用的樣式統(tǒng)一設(shè)置到共同的祖先元素上,這樣只需設(shè)置一次即可讓所有的元素都具有該樣式

注意:并不是所有的樣式都會(huì)被繼承:

比如 背景相關(guān)的,布局相關(guān)等的這些樣式都不會(huì)被繼承。

9、選擇器的權(quán)重

??? 選擇器的權(quán)重

??????????????? 內(nèi)聯(lián)樣式??????? 1,0,0,0

??????????????? id選擇器??????? 0,1,0,0

??????????????? 類和偽類選擇器?? 0,0,1,0

??????????????? 元素選擇器?????? 0,0,0,1

??????????????? 通配選擇器?????? 0,0,0,0

??????????????? 繼承的樣式?????? 沒有優(yōu)先級(jí)

??????????? 比較優(yōu)先級(jí)時(shí),需要將所有的選擇器的優(yōu)先級(jí)進(jìn)行相加計(jì)算,最后優(yōu)先級(jí)越高,則越優(yōu)先顯示(分組選擇器是單獨(dú)計(jì)算的),

??????????????? 選擇器的累加不會(huì)超過其最大的數(shù)量級(jí),類選擇器在高也不會(huì)超過id選擇器

??????????????? 如果優(yōu)先級(jí)計(jì)算后相同,此時(shí)則優(yōu)先使用靠下的樣式

??????????? 可以在某一個(gè)樣式的后邊添加 !important ,則此時(shí)該樣式會(huì)獲取到最高的優(yōu)先級(jí),甚至超過內(nèi)聯(lián)樣式,

??????????????? 注意:在開發(fā)中這個(gè)玩意一定要慎用!

三、盒子模型

1、文檔流

? 文檔流(normal flow)

????????????? 我們所創(chuàng)建的元素默認(rèn)都是在文檔流中進(jìn)行排列

??????????? - 對(duì)于我們來元素主要有兩個(gè)狀態(tài)

??????????????? 在文檔流中

??????????????? 不在文檔流中(脫離文檔流)

??????????? - 元素在文檔流中有什么特點(diǎn):

??????????????? - 塊元素

??????????????????? - 塊元素會(huì)在頁(yè)面中獨(dú)占一行(自上向下垂直排列)

??????????????????? - 默認(rèn)寬度是父元素的全部(會(huì)把父元素?fù)螡M)

??????????????????? - 默認(rèn)高度是被內(nèi)容撐開(子元素)

??????????????? - 行內(nèi)元素

??????????????????? - 行內(nèi)元素不會(huì)獨(dú)占頁(yè)面的一行,只占自身的大小

??????????????????? - 行內(nèi)元素在頁(yè)面中左向右水平排列,如果一行之中不能容納下所有的行內(nèi)元素

??????????????????????? 則元素會(huì)換到第二行繼續(xù)自左向右排列(書寫習(xí)慣一致)

??????????????????? - 行內(nèi)元素的默認(rèn)寬度和高度都是被內(nèi)容撐開

2、盒子模型

(1)內(nèi)容區(qū)(content)

元素中的所有的子元素和文本內(nèi)容都在內(nèi)容區(qū)中排列 。

???????? 內(nèi)容區(qū)的大小由width 和 height兩個(gè)屬性來設(shè)置,width 設(shè)置內(nèi)容區(qū)的寬度,height 設(shè)置內(nèi)容區(qū)的高度。

(2)邊框

邊框(border),邊框?qū)儆诤凶舆吘?#xff0c;邊框里邊屬于盒子內(nèi)部,出了邊框都是盒子的外部,邊框的大小會(huì)影響到整個(gè)盒子的大小,要設(shè)置邊框,需要至少設(shè)置三個(gè)樣式:

邊框的寬度 border-width,邊框的顏色 border-color,邊框的樣式 border-style

(3)盒模型、盒子模型、框模型(box model)

CSS將頁(yè)面中的所有元素都設(shè)置為了一個(gè)矩形的盒子, 將元素設(shè)置為矩形的盒子后,對(duì)頁(yè)面的布局就變成將不同的盒子擺放到不同的位置,每一個(gè)盒子都由一下幾個(gè)部分組成:

內(nèi)容區(qū)(content), 內(nèi)邊距(padding),邊框(border),外邊距(margin

3、盒子模型-邊框

(1)邊框

邊框的寬度 border-width,邊框的顏色 border-color,邊框的樣式 border-style

border-width可以用來指定四個(gè)方向的邊框的寬度

??????????????????????? 四個(gè)值:上 右 下 左

??????????????????????? 三個(gè)值:上 左右 下

??????????????????????? 兩個(gè)值:上下 左右

??????????????????????? 一個(gè)值:上下左右

除了border-width還有一組 border-xxx-width, xxx可以是 top right bottom left 用來單獨(dú)指定某一個(gè)邊的寬度。

(2) 邊框的顏色

?border-color用來指定邊框的顏色,同樣可以分別指定四個(gè)邊的邊框, 規(guī)則和border-width一樣,? border-color也可以省略不寫,如果省略了則自動(dòng)使用color的顏色值。

(3)邊框樣式

border-style 指定邊框的樣式:solid 表示實(shí)線,dotted 點(diǎn)狀虛線,dashed 虛線,double 雙線, border-style的默認(rèn)值是none 表示沒有邊框。

border簡(jiǎn)寫屬性,通過該屬性可以同時(shí)設(shè)置邊框所有的相關(guān)樣式,并且沒有順序要求

除了border以外還有四個(gè) border-xxx, border-top,border-right,border-bottom,border-left

4、盒子模型-內(nèi)邊距

內(nèi)邊距(padding):內(nèi)容區(qū)和邊框之間的距離是內(nèi)邊距

一共有四個(gè)方向的內(nèi)邊距: padding-top, padding-right,padding-bottom,padding-left

, - 內(nèi)邊距的設(shè)置會(huì)影響到盒子的大小, 背景顏色會(huì)延伸到內(nèi)邊距上

,一共盒子的可見框的大小,由內(nèi)容區(qū) 內(nèi)邊距 和 邊框共同決定,所以在計(jì)算盒子大小時(shí),需要將這三個(gè)區(qū)域加到一起計(jì)算。

padding 內(nèi)邊距的簡(jiǎn)寫屬性,可以同時(shí)指定四個(gè)方向的內(nèi)邊距,規(guī)則和border-width 一樣

5、盒子模型-外邊距

外邊距(margin): 外邊距不會(huì)影響盒子可見框的大小, 但是外邊距會(huì)影響盒子的位置

一共有四個(gè)方向的外邊距:

margin-top:上外邊距,設(shè)置一個(gè)正值,元素會(huì)向下移動(dòng)。

margin-right:默認(rèn)情況下設(shè)置margin-right不會(huì)產(chǎn)生任何效果。

margin-bottom:下外邊距,設(shè)置一個(gè)正值,其下邊的元素會(huì)向下移動(dòng)。

margin-left:左外邊距,設(shè)置一個(gè)正值,元素會(huì)向右移動(dòng)。

margin也可以設(shè)置負(fù)值,如果是負(fù)值則元素會(huì)向相反的方向移動(dòng)。

元素在頁(yè)面中是按照自左向右的順序排列的,所以默認(rèn)情況下如果我們?cè)O(shè)置的左和上外邊距則會(huì)移動(dòng)元素自身,而設(shè)置下和右外邊距會(huì)移動(dòng)其他元素。

margin的簡(jiǎn)寫屬性,margin 可以同時(shí)設(shè)置四個(gè)方向的外邊距 ,用法和padding一樣。

margin會(huì)影響到盒子實(shí)際占用空間。

6、水平布局

元素的水平方向的布局: 元素在其父元素中水平方向的位置由以下幾個(gè)屬性共同決定“

margin-left, border-left,padding-left,width,padding-right, border-right,margin-right

,一個(gè)元素在其父元素中,水平布局必須要滿足以下的等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素內(nèi)容區(qū)的寬度 (必須滿足)。

7、垂直布局

子元素是在父元素的內(nèi)容區(qū)中排列的,如果子元素的大小超過了父元素,則子元素會(huì)從父元素中溢出,使用 overflow 屬性來設(shè)置父元素如何處理溢出的子元素

可選值:

????? visible,默認(rèn)值 子元素會(huì)從父元素中溢出,在父元素外部的位置顯示

????? hidden 溢出內(nèi)容將會(huì)被裁剪不會(huì)顯示

????? scroll 生成兩個(gè)滾動(dòng)條,通過滾動(dòng)條來查看完整的內(nèi)容

????? auto 根據(jù)需要生成滾動(dòng)條

8、外邊距的折疊

垂直外邊距的重疊(折疊):相鄰的垂直方向外邊距會(huì)發(fā)生重疊現(xiàn)象

兄弟元素:兄弟元素間的相鄰垂直外邊距會(huì)取兩者之間的較大值(兩者都是正值)

特殊情況:如果相鄰的外邊距一正一負(fù),則取兩者的和, 如果相鄰的外邊距都是負(fù)值,則取兩者中絕對(duì)值較大的

兄弟元素之間的外邊距的重疊,對(duì)于開發(fā)是有利的,所以我們不需要進(jìn)行處理

父子元素:父子元素間相鄰?fù)膺吘?#xff0c;子元素的會(huì)傳遞給父元素(上外邊距),父子外邊距的折疊會(huì)影響到頁(yè)面的布局,必須要進(jìn)行處理。

9、行內(nèi)元素的盒模型

(1)行內(nèi)元素不支持設(shè)置寬度和高度。

(2)行內(nèi)元素可以設(shè)置padding,但是垂直方向padding不會(huì)影響頁(yè)面的布局。

(3)行內(nèi)元素可以設(shè)置border,垂直方向的border不會(huì)影響頁(yè)面的布局。

(4)行內(nèi)元素可以設(shè)置margin,垂直方向的margin不會(huì)影響布局。

(5)display 用來設(shè)置元素顯示的類型

? 可選值: inline 將元素設(shè)置為行內(nèi)元素, block 將元素設(shè)置為塊元素, inline-block 將元素設(shè)置為行內(nèi)塊元素

(6)行內(nèi)塊,既可以設(shè)置寬度和高度又不會(huì)獨(dú)占一行, table 將元素設(shè)置為一個(gè)表格, none 元素不在頁(yè)面中顯示,

(7)visibility 用來設(shè)置元素的顯示狀態(tài),可選值:

visible 默認(rèn)值,元素在頁(yè)面中正常顯示

hidden 元素在頁(yè)面中隱藏 不顯示,但是依然占據(jù)頁(yè)面的位置。

10、默認(rèn)樣式

(1) 重置樣式表

專門用來對(duì)瀏覽器的樣式進(jìn)行重置的,reset.css 直接去除了瀏覽器的默認(rèn)樣式, normalize.css 對(duì)默認(rèn)樣式進(jìn)行了統(tǒng)一。

(2)默認(rèn)樣式

通常情況,瀏覽器都會(huì)為元素設(shè)置一些默認(rèn)樣式

默認(rèn)樣式的存在會(huì)影響到頁(yè)面的布局,? 通常情況下編寫網(wǎng)頁(yè)時(shí)必須要去除瀏覽器的默認(rèn)樣式(PC端的頁(yè)面)。

11、盒子尺寸

默認(rèn)情況下,盒子可見框的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定

box-sizing 用來設(shè)置盒子尺寸的計(jì)算方式(設(shè)置width和height的作用),可選值:?

content-box 默認(rèn)值,寬度和高度用來設(shè)置內(nèi)容區(qū)的大小。

border-box 寬度和高度用來設(shè)置整個(gè)盒子可見框的大小。

width 和 height 指的是內(nèi)容區(qū) 和 內(nèi)邊距 和 邊框的總大小。

12、輪廓和圓角

(1)box-shadow

box-shadow 用來設(shè)置元素的陰影效果,陰影不會(huì)影響頁(yè)面布局 。

第一個(gè)值 水平偏移量 設(shè)置陰影的水平位置 正值向右移動(dòng) 負(fù)值向左移動(dòng)。

第二個(gè)值 垂直偏移量 設(shè)置陰影的水平位置 正值向下移動(dòng) 負(fù)值向上移動(dòng)。

第三個(gè)值 陰影的模糊半徑。

第四個(gè)值 陰影的顏色。

(2)outline

outline 用來設(shè)置元素的輪廓線,用法和border一模一樣

輪廓和邊框不同的點(diǎn),就是輪廓不會(huì)影響到可見框的大小 。

border-radius: 用來設(shè)置圓角 圓角設(shè)置的圓的半徑大小

border-top-left-radius:? 左上

border-top-right-radius : 右上

border-bottom-left-radius:? 左下

border-bottom-right-radius:? 右下

border-radius 可以分別指定四個(gè)角的圓角

???? 四個(gè)值 左上 右上 右下 左下

???? 三個(gè)值 左上 右上/左下 右下

???? 兩個(gè)值 左上/右下 右上/左下?

將元素設(shè)置為一個(gè)圓形??? border-radius: 50%;

總結(jié)

以上是生活随笔為你收集整理的html标签和css参数的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。