從零開始學 Web 之 CSS(三)連結偽類、背景、行高、盒子模型、浮動
大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧!
一、連結偽類
a:link{屬性:值;} /*連結預設狀態 ( a{屬性:值}效果是一樣的。)*/ a:visited{屬性:值;} /*連結訪問之後的狀態*/ a:hover{屬性:值;} /*滑鼠放到連結上顯示的狀態*/ a:active{屬性:值;} /*連結啟用的狀態*/ :focus{屬性:值;} /*獲取焦點*/
注意:
1.a:visited
之後要想回到之前的狀態,需要清除快取。
2.寫的順序要按照link,visited,hover,active
的順序來寫,否則可能不顯示。
- 文字修飾
text-decoration: none | underline | line-through | ...... /* 連結下劃線/刪除線/...... */
二、背景屬性
background-color: /*背景顏色*/ background-image: /*背景圖片*/ background-size: /*調節背景大小(一般用於美工給的背景圖大於需要的尺寸,設定此屬性,調節背景圖大小)*/ Background-repeat: repeat(預設) | no-repeat | repeat-x | repeat-y /*背景平鋪*/ Background-position: left | right | center(預設) | top | bottom /*背景定位*/ Background-attachment: scroll(預設) | fixed /*背景是否滾動*/
- Background-position
background-position: right;
// 方位值只寫一個的時候,另外一個值預設居中。
background-position: right bottom
// 寫2個方位值的時候,順序沒有要求
background-position: 20px 30px
// 寫2個具體值的時候,第一個值代表水平方向,第二個值代表垂直方向
- Background-attachment
scroll
: 背景圖的位置是基於盒子(假如是div)的範圍進行顯示
fixed
:背景圖的位置是基於整個瀏覽器body的範圍進行顯示,如果背景圖定義在div裡面,而顯示的位置在瀏覽器範圍內但是不在div的範圍內的話,背景圖無法顯示。
1、背景屬性連寫
background: red url("1.png") no-repeat 30px 40px scroll;
PS:連寫的時候沒有順序要求,url為必寫項
三、行高
瀏覽器預設文字大小:16px
行高:是基線與基線之間的距離
行高 = 文字高度+上下邊距
1、行高的單位
行高單位 | 文字大小 | 值 |
---|---|---|
20px | 20px | 20px |
2em | 20px | 20px*2=40px |
150% | 20px | 20px*150%=30px |
2 | 20px | 20px*2=40px |
總結:單位除了畫素以外,行高都是與文字大小與前面數值的乘積。
行高單位 | 父元素文字大小(定義了行高) | 子元素文字大小(子元素未定義行高時) | 行高 |
---|---|---|---|
40px | 20px | 30px | 40px |
2em | 20px | 30px | 40px |
150% | 20px | 30px | 30px |
2 | 20px | 30px | 60px |
總結:不帶單位時,行高是和子元素文字大小相乘,em和%的行高是和父元素文字大小相乘。行高以畫素為單位,就是定義的行高值。
PS: 推薦行高使用畫素為單位。
四、盒子模型
1、border(邊框)
Border-top-style: solid /*實線*/
dotted /*點線*/
dashed /*虛線*/
none /*無邊框*/
Border-top-color /*邊框顏色*/
Border-top-width /*邊框粗細*/
除了有
top
系列外還有left,right,bottom
系列
- 邊框屬性的連寫
border-top: 1px solid #fff;
沒有順序要求,線型為必寫項
- 四個邊框值相同的寫法
border: 1px solid #fff;
PS: 沒有順序要求,線型為必寫項
邊框合併(細線邊框)
border-collapse:collapse;
獲取焦點
- label for id 獲取游標焦點(效果:點選label也可以選擇文字框)
<label for="username">使用者名稱:</label><input type="text" class="username" id="username"></input>
2、padding(內邊距)
padding-left | right | top | bottom
- padding連寫
Padding: 20px; /*上右下左內邊距都是20px*/
Padding: 20px 30px; /*上下20px 左右30px*/
Padding: 20px 30px 40px; /* 上內邊距為20px 左右內邊距為30px 下內邊距為40px*/
Padding: 20px 30px 40px 50px; /*上20px 右30px 下40px 左 50px*/
- 內邊距撐大盒子的問題
盒子的寬度 = 定義的寬度 + 邊框寬度 + 左右內邊距
- 繼承的盒子一般不會被撐大
包含(巢狀)的盒子,
如果子盒子沒有定義寬度,給子盒子設定左右內邊距(內邊距不大於子盒子寬度),不會撐大子盒子。至於設定了上下內邊距的話是會撐大子盒子的。(不管怎樣父盒子永不變)
3、margin(外邊距)
margin-left | right | top | bottom
- 外邊距連寫
margin: 20px; /*上下左右外邊距20PX*/
margin: 20px 30px; /*上下20px 左右30px*/
margin: 20px 30px 40px; /*上20px 左右30px 下40px*/
margin: 20px 30px 40px 50px; /*上20px 右30px 下40px 左50px*/
注意:
margin: 0 auto;
盒子居中對齊
text-align:center
是盒子裡面的內容居中
- 垂直方向外邊距合併(取最大值)
兩個盒子垂直佈局,一個設定上外邊距,一個設定下外邊距,取的設定較大的值,而不是相加。
- 巢狀的盒子外邊距塌陷
巢狀的盒子,直接給子盒子設定垂直方向外邊距的時候,會發生外邊距的塌陷(父盒子跟著移動)
解決方法:
1.給父盒子設定邊框
2.給父盒子
overflow:hidden;
五、浮動
1、文件流(標準流)
元素自上而下,自左而右,塊元素獨佔一行,行內元素在一行上顯示,碰到父集元素的邊框換行。
2、浮動佈局
float: left | right /*浮動方向*/
特點:
1.元素浮動之後不佔據原來的位置(脫標)
2.浮動的盒子在一行上顯示
3.行內元素浮動之後自動轉換為行內塊元素。(不推薦使用,轉行內元素最好使用display: inline-block;
)
3、浮動的作用
- 文字繞圖
- 製作導航(經常使用)
把無序列表 ul li 浮動起來做成的導航。
- 網頁佈局
4、清除浮動
清除浮動不是不用浮動,清除浮動產生的問題。
問題:當父盒子沒有定義高度,巢狀的盒子浮動之後,下邊的元素髮生位置錯誤(佔據父盒子的位置)。
方法一
額外標籤法:在最後一個浮動元素後新增標籤。
clear: left | right | both /*用的最多的是clear:both;*/
方法二
給浮動元素的父集元素使用overflow:hidden;
注意:如果有內容出了盒子,不能使用這個方法。
方法三(推薦使用)
偽元素清除浮動。
: after 相當於在當前盒子後加了一個盒子。
相關推薦
從零開始學 Web 之 CSS(三)連結偽類、背景、行高、盒子模型、浮動
大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧! 一、連結偽類 a:
從零開始學 Web 之 CSS(一)選擇器
大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 W
從零開始學 Web 之 CSS(五)可見性、內容移除、精靈圖、屬性選擇器、滑動門
大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧! 一、CSS可見性
從零開始學 Web 之 CSS(四)CSS初始化、定位、overflow、標籤規範
大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧! 一、CSS初始化
從零開始學 Web 之 CSS(二)文字、標籤、特性
大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧! 一、文字元素 1、
從零開始學 Web 之 BOM(三)offset,scroll,變速動畫函數
樣式 清理 java mar dde sof mov har width 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博客園:
從零開始學 Web 之 Ajax(三)Ajax 概述,快速上手
lan 技術分享 php 概述 由於 val asc logs 更新 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博客園:ht
從零開始學 Web 之 ES6(三)ES6基礎語法一
arr 方法 foreach reac 公眾 存在 lock 數組名 回調函數 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博
從零開始學 Web 之 jQuery(三)元素操作,鏈式程式設計,動畫方法
一、使用css操作元素樣式 1、常規寫法 $("#dv").css("width", "200px"); $("#dv").css("height", "100px"); $("#dv").css("background", "red"); 2、鏈式寫法 $("#dv").css("width", "20
從零開始學 Web 之 BOM(三)offset,scroll,變速動畫函式
一、直接使用 document 獲取的元素 // 獲取 body document.body; // 獲取 title document.title; // 獲取的是 title 中的值 // 獲取 html document.documentElement; 1、案例:圖片跟著滑鼠移動 <!DOC
從零開始學 Web 之 DOM(三)innerText與innerHTML、自定義屬性
大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧! 一、相容程式碼 1
從零開始學 Web 之 HTML5(三)網路監聽,全屏,檔案讀取,地理定位介面,應用程式快取
一、網路監聽介面 ononline:網路連通時觸發 onoffline:網路斷開時觸發 window.addEventListener("online", function(){}); window.addEventListener("offline", function(){}); 二、全屏介面 全
從零開始學 Web 之 CSS3(三)漸變,background屬性
一、漸變 漸變是CSS3當中比較豐富多彩的一個特性,通過漸變我們可以實現許多炫麗的效果,有效的減少圖片的使用數量,並且具有很強的適應性和可擴充套件性。可分為線性漸變、徑向漸變。 1、線性漸變 線性漸變:指沿著某條直線朝一個方向產生漸變效果。 語法: background: linear-gradient(
從零開始學 Web 之 HTML(三)表單
大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧! 一、表格 1
從零開始學 Web 之 JavaScript(三)函式
大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧! 一、函式 1、函式
從零開始學 Web 之 DOM(一)DOM的概念,對標簽操作
關註 1.5 pan 什麽 tin p標簽 nod text == 大家好,這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,
從零開始學 Web 之 DOM(四)節點
def clas scrip while p標簽 設置 ner 操作 text 大家好,這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始,一步步學習 Web 相
從零開始學 Web 之 jQuery(二)獲取和操作元素的屬性
eight images idt 隱藏 lis 屬性 ner master lin 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔
從零開始學 Web 之 jQuery(六)為元素綁定多個相同事件,解綁事件
png 好用 添加 方式 執行 存在 區別 也會 地址 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博客園:http://ww
從零開始學 Web 之 jQuery(七)事件冒泡,事件參數對象,鏈式編程原理
eval uri turn 定位 return 也會 否則 ont sele 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博客