css基礎系列

SexySix 發布于2019-04-22 16:12 / 1127人閱讀

摘要：盒子模型邊框，外邊距，內部距，內容，寬度。盒子模型和標準盒子模型行內塊元素，元素呈現為具有相依特性元素不會被顯示。文字基線屬性設置元素中文本行高語法長度值百分比瀏覽器有默認的行高，不同瀏覽器默認行高不一樣。

盒子模型：

border邊框，margin外邊距，padding內部距，content內容，width寬度。

高度：
height: 長度值|百分比|auto
最大高度:
max-height: 長度值|百分比|auto
最小高度:
min-height:長度值|百分比|auto

邊框的屬性：
邊框寬度：border-width
邊框顏色：border-color
邊框樣式：border-style

邊框屬性：

border- left | right | top | bottom -width
border ... -color
border ... -style

content+padding = ie

doctype html 聲明

display屬性
inline顯示內聯元素，元素前后沒有換行符
block顯示塊級元素，元素前后有換行符

內聯元素使用width和height屬性有效。
inline-block行內塊元素。

ie 盒子模型和標準 w3c 盒子模型

inline-block 行內塊元素，元素呈現為inline,具有block相依特性,none元素不會被顯示。

css文本樣式：

text-align設置元素內文本的水平對齊方式。

text-align:
left|right|center|justify

div{text-align:center;} div img src= / /div

文字基線：

line-height屬性
設置元素中文本行高
語法：
line-height:長度值|百分比

瀏覽器有默認的行高，不同瀏覽器默認行高不一樣。

word-spacing 設置元素內單詞之間的間距
letter-spacing 設置元素內字母之間的間距

文字樣式：字體，font-family和font-size。

文字粗細：
font-weight:normal|bold|bolder|lighter|100到900

文字樣式：
font-style:normal|italic|oblique

水平對齊：
text-align: left|right|center|justify

背景，列表

背景圖片重復問題：
設置元素的背景圖片重復方式：

background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景圖片顯示方式：
設置元素的背景圖片的顯示方式：

background-attachment: scroll | fixed

scroll: 默認值，背景圖片隨滾動條滾動
fixed:當頁面的其余部分滾動時，背景圖片不會移動

背景圖片定位：
設置元素的背景圖片的位置：

列表：

list-style-position: inside | outside

css中的float

float:left;
float:right;
float:none;
float:inherit;

浮動變塊狀元素，浮動能環繞效果。

定位css

標準流，定位，浮動

浮動的問題如何解決

手動給父元素添加高度
通過clear清除內部和外部浮動
給父元素添加overfloat屬性并結合zoom:1使用
給父元素添加浮動

css中的position

css背景與列表

css背景樣式
background-color:設置元素的背景顏色
background-image:把圖像設置為背景
background-position:設置背景圖像的起始位置
background-attachment:背景圖像是否固定或者隨著頁面的其余部分滾動
background-repeat:設置背景圖像是否重復以及如何重復
background：背景屬性設置

css列表樣式

list-style-type:設置列表項標志的類型
list-style-image:將圖像設置為列表項標志
list-style-position:設置列表中列表項標志的位置
list-style:簡寫

背景樣式
設置背景顏色和背景圖片

背景顏色，設置元素的背景顏色

background-color:顏色 | transparent
背景圖片
設置元素的背景圖片
background-image: url | none

背景圖片重復
background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景圖片顯示的方式
設置元素的背景圖片的顯示方式
background-attachment: scroll | fixed

scroll:隨著滾動條滾動，fixed:背景圖片不會移動

background: background-color background-image background-repeat background-attachment background-postion

列表項，list-style-type:關鍵字 | none
list-style-image: url | none
list-style-position : inside | outside

list-style: list-style-type list-style-position list-style-image

div, ul, li, dl, dt, dd, img

html,css,javascript關系

html是網頁內容的載體，css樣式是表現，javascript是行為。

css優先級
行內樣式內部外部

css選擇器
標簽選擇器，全局選擇器，類選擇器，群組選擇器，id選擇器，后代選擇器

群組選擇器

鏈接偽類
:link 未訪問
:visited 已經訪問
:hover 鼠標懸停
:active 激活

css繼承和層疊

從父元素那繼承部分css屬性
css層疊可以定義多個樣式

選擇器的權重

標簽選擇器1
類和偽類10
id選擇器100

通配符0
行內樣式1000

這種聲明高

id不要濫用，適當使用class

css導入式@import 外部css樣式

盒子模型：
盒子模型概念，內邊距設置，高和寬的設置，邊框的設置，外邊距設置，盒子的計算，元素顯示的方式。

border-width: thin | medium | thick
border-color: 顏色 | transparent

display: inline | block | inline-block | none

好了，歡迎在留言區留言，與大家分享你的經驗和心得。

感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。

作者簡介

達叔，理工男，簡書作者全棧工程師，感性理性兼備的寫作者，個人獨立開發者，我相信你也可以！閱讀他的文章，會上癮！，幫你成為更好的自己。長按下方二維碼可關注，歡迎分享，置頂尤佳。

感謝！承蒙關照！您真誠的贊賞是我前進的最大動力！

這是一個有質量，有態度的公眾號

喜歡本文的朋友們

歡迎長按下圖關注訂閱號

收看更多精彩內容

GPU云服務器云服務器 css基礎基礎css css基礎教程基礎選擇器css

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

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

webpack多頁應用架構系列（五）：聽說webpack連less/css也能打包？

摘要：用到什么了在多頁應用架構系列二配置常用部分有哪些里我就說過，的核心只能打包文件，而以外的資源都是靠進行轉換或做出相應的處理的。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000006897458如果您對本系列文章感興趣，歡迎關注訂閱這里：https://segmentfault...

Me_Kun 2019-08-22 10:39 評論0 收藏0
#WEB安全基礎 : HTML/CSS | 文章索引

摘要：黑體本系列講解安全所需要的和黑體安全基礎我的第一個網頁黑體安全基礎初識黑體安全基礎初識標簽黑體安全基礎文件夾管理網站黑體安全基礎模塊化黑體安全基礎嵌套列表黑體安全基礎標簽拓展和屬性的使用黑體安全基礎嵌套本系列講解WEB安全所需要的HTML和CSS #WEB安全基礎 : HTML/CSS | 0x0 我的第一個網頁 #WEB安全基礎 : HTML/CSS | 0x1初識CSS #WEB安全基...

EscapedDog 2019-04-23 11:53 評論0 收藏0
你需要的前端進階書籍清單，分享下載

摘要：寫在前面目前專注深入學習，特花了點時間整理了一些前端學習相關的書籍。大致分為以下大系列系列系列基礎系列應用系列進階系列類庫系列框架系列。這些書籍在這里免費提供下載，有興趣的一起學習。寫在前面目前專注深入JavaScript學習，特花了點時間整理了一些前端學習相關的書籍。大致分為以下7大系列：CSS系列、DOM系列、JavaScript基礎系列、JavaScript應用系列、Ja...

yuanzhanghu 2019-08-26 10:28 評論0 收藏0
【快速入門系列】CSS盒模型基礎

摘要：引言盒模型是頁面布局中經常會使用到的一種思維模型，將等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一什么是盒模型我們首先來看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內容內邊距邊框外邊距組成。引言 CSS盒模型是頁面布局中經常會使用到的一種思維模型，將margin、border、padding、content等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一、什么是...

Code4App 2019-08-29 15:20 評論0 收藏0
【快速入門系列】CSS盒模型基礎

摘要：引言盒模型是頁面布局中經常會使用到的一種思維模型，將等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一什么是盒模型我們首先來看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內容內邊距邊框外邊距組成。引言 CSS盒模型是頁面布局中經常會使用到的一種思維模型，將margin、border、padding、content等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一、什么是...

LinkedME2016 2019-08-02 10:22 評論0 收藏0