CSS 核心樣式、H5 + C3 新特性

粗細font-weight

我們提供的服務有：成都網站建設、網站設計、微信公眾號開發(fā)、網站優(yōu)化、網站認證、海北州ssl等。為1000多家企事業(yè)單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的海北州網站制作公司

設置文字是否加粗顯示 。 有兩種類型 ：單詞類型、數字類型

單詞類型 | 屬性值 | 說明

| normal | 默認值，定義批準的字體

| bold | 定義粗體字符 ，b strong標簽 的默認值

| bolder | 定義更粗的字體

| ligher | 定義更細的字體

數字類型 100-900之間的整百數字。數字越大文字顯示越粗。 400==normal 700==bold

字體風格font-style

設置字體是否斜體顯示。

| 屬性值 | 說明

|normal | 設置正規(guī)的字體 ， 大多是標簽的默認值

| italic | 設置斜體的文字 ，主要針對英文，要求英文以字體中的斜體樣式顯示

| oblique | 設置斜體的文字 ， 只是將文字傾斜顯示 ， 與字體無關

**行高 line-height **

設置的是一行文字實際占有的高度，文字字號在行高中是垂直居中的。

| px 像素值 | 設置的行高的具體像素值

| 百分比數值 | 設置的本身字號像素值的百分比

字體綜合font

1.字號 、 字體

2.字號 /行高 、字體 重點是字號和行高之間使用 /

3.加粗和斜 體兩個值之間可以互 換位置 、 字號、行高、字體不能更改位置。

水平對齊text-align

設置文本水平方向的對齊

| 屬性名 | 作用 |

| left | 居中對齊，大部分標簽的默認值

| center | 居中對齊

| right | 居右對齊

文本修飾 text-decoration

設置文本整體是否有線條的修飾效果

| 屬性名 | 作用 |

| none | 沒有修飾， 大部分標簽的默認值

| overline | 上劃線

| line-through | 中劃線，刪除線del 標簽的默認值

| underline | 下劃線，a標簽的默認值

**縮進 text-indent **

設置段落首行是否進行縮進

| px 單位 | 表示首行縮進多少像素

| em單位 | 首行縮進幾個中文字符的位置

| 百分比 | 表示縮進文字所在標簽的父級標簽width 屬性值的百分比

書寫元素內容區(qū)域 width+height

盒子可以實體化的區(qū)域 width + height + padding + border

盒子實際占位的位置 width + height + padding + border + margin

寬度width 高度height

設置可以添加元素內容的區(qū)域的寬度

| auto | 默認值，瀏覽器可計算出實際的寬度

| px | 像素值定義的寬度

| % | 定義參考父元素寬度width 的百分比寬度

內邊距padding 、 外邊距margin

內邊距padding：設置的是元素的邊框內部到寬高區(qū)域之間的距離。

外邊距margin： 設置的是盒子與盒子之間的距離。

四值法 上右下左 padding : 10px 20px 30px 40px;

三值法 上 左右 下

二值法 上下 左右

單值法 四個值相同

邊框border

設置的是內邊距外面的邊界區(qū)域 作為盒子的實體化的最外層

border ：“寬度 線 顏色 “

border-style | 屬性值 | 說明

| none | 定義無邊框

| solid | 定義實線

| dashed | 定義虛線 在大多數瀏覽器中呈現為實線

| dotted | 定義點狀邊框，在大多數瀏覽器中呈現為實線

| double | 定義為雙線，雙線的邊框的寬度等于 border-width的值

| groove | 定義3D凹槽邊框，其效果取決于border-color 的值

| ridge | 定義3D壟裝邊框，其效果區(qū)域于border-color 的值

| inset | 定義3D內容凹陷效果，其效果取決于border-color 的值

| outset | 定義3D內容凸出效果，其效果取決于border-coloe 的值

清除默認樣式

1.大部分容器標簽都有默認邊距，要么用標簽選擇器的并集方式，要么通配符清除。

2.ul和li兩種列表有默認的列表前綴，清除list-style屬性

3.a標簽的默認樣式，順帶設置頁面中常用的a的公共樣式：color和text-decorstion

4.清除默認加粗效果:設置font-weight

父子盒模型

父元素的width = 所有子元素width + padding + border + margin

margin塌陷現象

margin塌陷現象：在垂直方向如果有兩個元素的外邊距有相遇的，瀏覽器中加載的 真正的外邊距不是兩個間距的加和，而是兩個邊距中值較大的，邊距值小的塌陷到 了邊距值大的值內部

同級元素塌陷： 大的margin吃掉小的

標準文檔流：指得是元素排版布局過程中，元素會默認自動從左往右，從上往下的流式排版方式。前面內容發(fā)生了變化，后面的內容位置也會隨著發(fā)生變化

微觀現象

1.空白折疊現象。

2.文字類的元素如果排在一行會出現一種高低不齊、底邊對齊效果。

3.自動換行，元素內一行內容寫滿元素的width時會自動進行換行。[圖片上傳失敗...(image-5327c1-1604048626452)]

元素等級

塊級元素：大部分容器級標簽包括p標簽都是塊級元素，比如div,h1-h6,p,pre,ul,ol,li,form,table,label

行內元素：大部分的文本及標簽比如 a,span，i（斜體）,em（強調）,sub(下標)，sup（上標） 等。

行內塊元素： (img，button,input，textarea,select), img等

顯示模式display

display 屬性更改的顯示模式并沒有改變標準流本質性質

| 屬性值 | 作用

| block | 表示元素要以塊級元素模式加載，具備塊級特點

| inline | 表示元素要以行內元素模式加載，具備行內特點

|inline-block| 表示標簽及行內塊模式加載，具備行內塊特點

| none | 表示標簽及內容直接隱藏，讓出原有標準流的位置

脫離標準流

標簽元素脫離標準流的方法包括：浮動、絕對定位、固定定位

浮動定義

1.浮動 (float)：讓元素脫離標準流，同一級的浮動的元素可以并排在一排顯示

float : right / left

浮動的問題二：父元素沒有高度，會影響后面元素的標準流位置，如果福哦的那個的子元素足夠高，有可能影響到后面浮動的貼邊。

[圖片上傳失敗...(image-7923f-1604048626452)]

清除浮動方法

清除浮動一：給標準流的父元素強制給一個合適的高度height

解決：浮動元素影響后面元素標準流位置和貼邊。

問題：父元素不能高度自適應，后面父元素之間如果有margin效果不正確。

清除浮動五：溢出隱藏

overflow：hidden

總結 如果父元素高度是固定的，建議使用height屬性解決

如果父元素告訴需要自適應，建議使用overflow屬性解決浮動問題

要想讓每個偽類的狀態(tài)正常加載，書寫順序必須是：訪問前l(fā)ink、訪問后visited、 鼠標移上hover、鼠標點擊active。

-背景顏色 background-color

-背景圖片 background-image 屬性 url(圖片路徑)

-背景重復 background-repeat

| repeat | 重復，默認屬性值，表示會使用背景重復加載填滿整個盒子背景區(qū)域

| no-repeat| 不重復，不論背景圖是否大于盒子范圍，都只加載依次圖片

| repeat-x | 水平重復，使用背景圖片水平重復加載鋪滿第一行，垂直方向不重復

| repeat-y | 垂直重復，使用背景圖片垂直重復加載鋪滿第一列，水平方向不重復

-背景定位 background-position 主要用于設置 不重復 的圖片在背景區(qū)域的加載開始位置

單詞表示法 水平方向可選單詞：left、center、right

垂直方向可選單詞：top、center、bottom

像素表示法 水平 垂直 border以內的

百分比表示法 100%代表的數值

水平方向，等價于盒子的border以內的背景區(qū)域寬度減去圖片的寬度。

垂直方向，等價于盒子的border以內的背景區(qū)域高度減去圖片的高度。

-背景附著 background-attachment

| scroll | 滾動的，表示背景圖片與盒子保持相對位置不變，隨著頁面的滾動而滾走

| fixed | 固定的，背景圖的定位的參考點從盒子border，以內的左上頂點變?yōu)榱藶g覽器窗口的左 上頂點，頁面滾動時，瀏覽器窗口的左上頂點是不變的，導致背景圖固定在瀏覽器窗口 的某個位置，不會隨著頁面滾動而滾走

background 屬性可以將五個單一屬性的值進行合寫。 屬性值：可以有 1-5 個屬性值，值之間用空格進行分隔，背景定位的兩個屬性值算作 一個屬性值，不能被分開也不能顛倒順序。五個屬性值之間可以互換位置。

-背景縮放background-size 設置img的尺寸

| px值 | 1-2個像素值，只設置1個值，垂直方向等比例拉伸；設置2個值，按照設置值 加載

| 百分比 | 同像素值設置方法相同，設置百分比時，數值參照盒子的寬、高屬性

| cover | 自動調整縮放比例，把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū) 域。如有溢出部分則會被隱藏。

| contain | 自動調整縮放比例，把圖像圖像擴展至最大尺寸，保證圖片始終完整顯示在背 景區(qū)域

-相對定位 relative

相對定位的元素不能脫離標簽的原始狀態(tài)(標準流、浮動),不會讓出原來占有的位置

-絕對定位 absolute 脫離標準文檔流

子絕父相 、 子絕父絕 、 子絕父固

-固定定位 fixed 脫離標準文檔流

-壓蓋順序 z-index

HTML5

[圖片上傳失敗...(image-974217-1604048626452)]

audio音頻標簽 ogg mpeg wav

| 屬性 | 值 | 描述

| autoplay| autoplay| 如果出現該屬性，則音頻在就緒后馬上播放

| controls | controls | 如果出現該屬性，則向用戶顯示控件，比如播放按鈕

| loop | loop | 如果出現該屬性，則每當音頻結束時重新開始播放。

| preload | preload | 如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。

| src | url | 要播放的音頻的 URL。

video 視頻標簽 ogg mp4 webm

[圖片上傳失敗...(image-361a85-1604048626452)]

| 屬性 | 值 | 描述

|autoplay | autoplay | 視頻就緒自動播放（谷歌瀏覽器需要添加muted來解決自動播放問題）

| controls | controls | 向用戶顯示播放控件

| loop | loop |放完是否繼續(xù)播放該視頻，循環(huán)播放

| preload | auto |（預先加載視頻）

none（不應加載視頻） 規(guī)定是否預加載視頻(如果有了autoplay 就忽略該屬性）

| src | url | 視頻url地址

| width | pixels(像素) |設置播放器寬度

| height | pixels(像素) |設置播放器高度

| poster | Imgurl | 加載等待的畫面圖片

| muted | muted | 靜音播放

屬性值 描述

type="email" 限制用戶輸入必須為Email類型

type="url" 限制用戶輸入必須為URL類型

type="date" 限制用戶輸入必須為日期類型

type="time" 限制用戶輸入必須為時間類型

type="month" 限制用戶輸入必須為月類型

type="week" 限制用戶輸入必須為周類型

type="number" 限制用戶輸入必須為數字類型

type="range" 滑動條

type="tel" 手機號碼

type="search" 搜索框

type="color" 生成一個顏色選擇表單

datalist 標簽

? datalist 標簽規(guī)定了 input 元素可能的選項列表。

? datalist元素包含了一組option元素，這些元素表示預定義可選值，在input元素輸入

過程中，會自動響應option元素的值。

? 綁定的input標簽必須設置 list 屬性，屬性值等于datalist標簽的 id 屬性值。

新增表單屬性

屬性 值 描述

required required 表單擁有該屬性表示其內容不能為空，必填

placeholder 提示文本 表單的提示信息，存在默認值將不顯示

autofocus autofocus 自動聚焦屬性，頁面加載完成自動聚焦到指定表單，一般頁面中放1個

autocomplete off / on 當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應該顯示出在字段中填 寫的選項。

默認已經打開，如 autocomplete=”on “

關閉 autocomplete =”off”

-需要放在表單內同時加上name屬性

-同時成功提交

multiple multiple 可以多選文件提交

CSS3

子級選擇器

子級選擇器用于選取帶有特定父元素的元素 書寫語法element1element2

[圖片上傳失敗...(image-bb266d-1604048626452)]

兄弟選擇器

--相鄰兄弟選擇器 用于選擇 緊接 在另一個元素后的兄弟元素，而且二者有相同的父元素。

| element1+element2 | 匹同一個父元素中緊跟在element1后面的一個element2元素

--其他兄弟選擇器 匹配同一個父元素中在element1后面的 所有 element2元素

| elemenet~element2 | 匹配同一個父元素中elemenet1后面的所有element2元素

E:first-of-type 指定類型E的第一個

E:last-of-type 指定類型E的最后一個

E:nth-of-type(n) 指定類型E的第n個 這個是元素的第幾個在元素下選取

屬性選擇器

E[att] 選擇具有att屬性的E元素

E[att="val"] 選擇具有att屬性且屬性值等于val的E元素

E[att^="val"] 匹配具有att屬性、且值以val開頭的E元素

E[att$="val"] 匹配具有att屬性、且值以val結尾的E元素

E[att*="val"] 匹配具有att屬性、且值中含有val的E元素

box-sizing屬性

content-box 標準模式 盒子總體大小為 width(height) + padding + border

border-box 怪異模式 盒子總體大小為 width 和 height

[圖片上傳失敗...(image-cdef05-1604048626452)]

文字陰影text-shadow

| 屬性值 | 簡介

| h-shadow | 必需。水平陰影的位置。允許負值。

| v-shadow | 必需。垂直陰影的位置。允許負值。

| blur | 可選。模糊的距離。

| color | 可選。陰影的顏色。

--transition-property過渡的屬性

? none 表示沒有屬性過渡

? all 表示所有變化的屬性都過渡

? 屬性名 使用具體的屬性名，多個屬性名中間逗號分隔

--時間

以秒為單位 0s必須加單位

--transition-timing-function 時間曲線

對元素進行移動、縮放、旋轉、拉長或拉伸。配合過渡和即將學習的動畫知識，可 以取代大量之前只能靠Flash才可以實現的效果。

位移translate()

translate(x,y) x,y分別為水平和垂直方向位移的距離，可以為px值或百分比， 區(qū)分正負

translate(x) 只有一個數值，表示水平方向的位移

translate(y) 只有一個數值，表示垂直方向的位移

縮放 scale()

值 說明

scale(x, y) x,y分別為改變元素的寬度和高度的倍數

scale(n) 只有一個值，表示寬度和高度同時縮放n倍

scaleX(n) 改變元素的寬度

scaleY(n) 改變元素的高度

旋轉 rotate(deg)

deg為度數單位，正數表示順時針旋轉，負數表示逆時針旋轉

傾斜 skew()

transform: skew(數字deg,數字deg)

兩個屬性值分別表示水平和垂直方向傾斜的角度，屬性值可以為正可以為負，第二個 數值不寫默認為0

transform--origin 屬性

設置調整元素的水平和垂直方向原點的位置

x 定義 X 軸的原點在何處。可能的值：left 、center、right、像素值、百分比

y 定義 Y 軸的原點在何處。可能的值：top、center、bottom、像素值、百分比

[圖片上傳失敗...(image-ac107d-1604048626452)]

透視屬性 perspective

作用：設置在 z 軸的視線焦點的觀察位置，從而實現 3D 查看效果。

屬性值：像素值，數值越大，觀察點距離 z 軸原點越遠，圖形效果越完整且接近原始尺寸。 注意：透視屬性需要設置給 3D 變化元素的父級

3D 旋轉

rotateX(angle) 定義沿著 X 軸的 3D 旋轉。

rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。

rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。

[圖片上傳失敗...(image-e781c5-1604048626452)]

3D 位移

translateX(x) 設置 X 軸的位移值。

translateY(y) 設置 Y 軸的位移值。

translateZ(z) 定義3D位移，設置Z軸的位移值。

屬性值為像素值或百分比，正負表示位移的方向。正值向對應軸的正方向移動，負值向對應 軸的負方向移動。

transform-style屬性

用于設置被嵌套的子元素在父元素的 3D 空間中顯示，子元素會保留自己的 3D 轉換坐標軸。

屬性值：

flat：所有子元素在 2D 平面呈現

preserve-3d：保留 3D 空間

瀏覽器兼容

Internet Explorer 10、Firefox 以及 Opera 支持 transform 屬性。

Chrome 和 Safari 需要前綴 -webkit-。

Internet Explorer 9 需要前綴 -ms-。

CSS布局浮動(float)和定位(position)屬性的區(qū)別和如何使用

postion:relative是子塊級元素面向父級元素的相對定位，定位關鍵字使用left/right/top/bottom。兄弟塊元素之間相對進行定位，但是position移動后，原位置依然保留。而且隨后的兄弟塊元素定位基于被移走前的位置。 float:right/left是子塊級元素流集合面向父級元素的定位，定位的關鍵詞使用margin/padding。兄弟塊元素之間進行相對的定位均基于移動后的新位置進行重新渲染，可以重疊，原位置被清空。 二者之中最大的差別就是位置保留。 人們也就利用這種差異，可以做出CSS代碼的滑動門菜單。 hover時取當前元素為保留位置，定義一個relative時，沒有hover時使用float清空保留位置。 比較示例中的3個樣式表，就可以發(fā)現： !--style *{border:1px solid #eee;}body{border-color:#09f;}ul{list-style:none;width:800px;height:600px;margin:0 auto;padding:10px;} li{float:left;} #li1{width:200px;height:200px;border-color:red;} #li2{width:200px;height:150px;border-color:green;margin-left:-20px;} #li3{width:200px;height:100px;border-color:blue;margin-left:-20px;} /style-- !--style

什么是CSS 定位和浮動？

CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。

定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠勝于對其它方面的支持，對此不應感到奇怪。

另一方面，CSS1 中首次提出了浮動，它以 Netscape 在 Web 發(fā)展初期增加的一個功能為基礎。浮動不完全是定位，不過，它當然也不是正常流布局。

Web前端基礎】css中浮動屬性有什么？

css中的浮動屬性是float。屬性值有幾個我不太清楚，不過常用的就是left和right，即左浮動和右浮動。

左浮動就是設置了浮動樣式的元素飄到了屏幕左側，飄是表示元素脫流了。右浮動同理。

值得一提的是浮動元素的父元素是沒有高度的，需要做一些清除浮動的設置。比如給父元素加個高，或者設置overflow: hidden，當然最理想的是偽元素清除浮動。

css 中的浮動與對齊有什么區(qū)別？ 謝謝！

你好，css中浮動和對齊實際上是兩個不同的概念，談不上相同點和不同點，

首先是浮動，在 CSS 中，我們通過 float 屬性實現元素的浮動。實現塊狀元素變?yōu)樾袃仍兀愃朴赿iv之間不在換行，而并排顯示

對齊分為元素自身對齊，和元素里面內容對齊，比如div、p標簽里面的文本對象,text-align屬性設置居中、居左，居右，元素自身對齊，比如div相對于瀏覽器居中可以用margin:0 auto;實現

這兩個可以結合使用，沒有什么區(qū)別，是兩個不同的概念，要說又區(qū)別也是，float和display屬性的區(qū)別

希望可以解答你的問題

本文標題：css浮動樣式和特性,浮動css屬性有哪些
文章源于：http://chinadenli.net/article13/dsehhds.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站排名、外貿建站、建站公司、企業(yè)網站制作、網站建設、網站改版

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)