嘍大家好,我是作者“未來”,本期分享的內容是Web前端系列課程,本系列總共29個階段,堅持學習3個月蛻變為Web前端高手哦!
志同道合的小伙伴跟我一起學習交流哦!
其實,CSS就三個大模塊:盒子模型、浮動、定位,其余的都是細節。要求這三部分,無論如何也要學的非常精通。
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子,也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距( padding)、邊框( border)和外邊距( margin)組成。
1 看透網頁布局本質
網頁布局中,我們是如何把里面的文字,圖片,按照美工給我們的效果圖排列的整齊有序呢?
我們說過,行內元素比如文字類似牛奶,也需要一個盒子把他們裝起來,我們前面學過的雙標簽都是一個盒子。有了盒子,我們就可以隨意的,自由的,擺放位置了。
網頁布局的本質:把網頁元素 比如文字圖片等等,放入盒子里面,然后利用CSS擺放盒子的過程,就是網頁布局。
CSS其實沒有太多邏輯可言,類似我們小時候玩的積木我們可以自由的,隨意的擺放出我們想要的效果。
2 認識盒子模型組成
盒子模型( Box Model)
首先,我們來看一張圖,來體會下什么是盒子模型
所有的文檔元素(標簽)都會生成一個矩形框,我們稱為元素框( element box),它描述了一個文檔元素在網頁布局匯總所占的位置大小。因此,每個盒子除了有自己大小和位置外,還影響著其他盒子的大小和位置。
3 盒子邊框(border)
語法:
邊框屬性——設置邊框樣式( border-stye)
邊框樣式用于定義頁面中邊框的風格,常用屬性值如下:
none:沒有邊框即忽略所有邊框的寬度(默認值)
solid:邊框為單實線(最為常用的)
dashed:邊框為虛線
dotted:邊框為點線
double:邊框為雙實線
4 邊框綜合寫法(一)
5 邊框綜合寫法(二)
6 合并細線表格
以前學過的html表格邊框很粗,這里只需要CSS一句話就可以美觀起來。讓我們真的相信,CSS就是我們的白馬王子(白雪公主)。
Table{ border- collapse:collapse;} collapse單詞是合并的意思border-collapse:collapse:表示邊框合并在一起。
7 圓角矩形
從此以后,我們的世界不只有矩形。 radius半徑(距離)
語法格式:
8 盒子內邊距
padding屬性用于設置內邊距。是指邊框與內容之間的距離。
padding-top:上內邊距
padding-right:右內邊距
padding-bottom:下內邊距
padding-left:左內邊距
注意:后面跟幾個數值表示的意思是不一樣的。
9 fireworks測量工具
類似ps
滴管用來拾取顏色,切片工具用來測量距離。
10 新浪導航欄(一)
案例:要求做出下面的效果
11 新浪導航欄(二)
12 外邊距以及盒子居中對齊
margin屬性用于設置外邊距。設置外邊距會在元素之間創建“空白”,這段空白通常不能放置其他內容。
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距 下外邊距 左外邊距。 取值順序跟內邊距相同。
外邊距實現盒子居中
可以讓一個盒子實現水平居中,需要滿足以下兩個條件:
1 必須是塊級元素。
2 盒子必須指定了寬度(width)
然后就給左右的外邊距都設置為auto,就可使塊級元素水平居中。
實際工作中常用這種方式進行網頁布局,示例代碼如下:
13 文字、盒子、圖片和背景水平居中的區別
14 清除內外邊距
為了更方便地控制網頁中的元素,制作網頁時,可使用如下代碼清除元素的默認內外邊距:
15 行內元素上下內外邊距的問題
注意:行內元素是只有左右外邊距的,是沒有上下外邊距的。內邊距,在ie6等低版本瀏覽器也會有問題。
我們盡量不要給行內元素指定上下的內外邊距就好了。
16 外邊距合并(一)
使用 margin定義塊元素的垂直外邊距時,可能會出現外邊距的合并。
相鄰塊元素垂直外邊距的合并當上下相鄰的兩個塊元素相遇時,如果上面的元素有下外邊距 margin-bottom,下面的元素有上外邊距 margin-top,則他們之間的垂直間距不是margin-bottom與 margin-top之和,而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合并(也稱外邊距塌陷)。
解決方案:避免就好了。
17 外邊距合并(二)
嵌套塊元素垂直外邊距的合并
對于兩個嵌套關系的塊元素,如果父元素沒有上內邊距及邊框,則父元素的上外邊距會與子元素的上外邊距發生合并,合并后的外邊距為兩者中的較大者,即使父元素的上外邊距為0,也會發生合并。
解決方案:
1.可以為父元素定義1像素的上邊框或上內邊距。
2.可以為父元素添加 overflow:hidden
18 盒子的計算尺寸
content寬度和高度
使用寬度屬性width和高度屬性 height可以對盒子的大小進行控制。
width和 height的屬性值可以為不同單位的數值或相對于父元素的百分比%,實際工作中最常用的是像素值。
大多數瀏覽器,如 Firefox、lE6及以上版本都采用了W3C規范,符合CSS規范的盒子模型的總寬度和總高度的計算原則是:
注意:
1、寬度屬性width和高度屬性 height僅適用于塊級元素,對行內元素無效(img標簽和 input除外)。
2、計算盒子模型的總高度時,還應考慮上下兩個盒子垂直外邊距合并的情況。
19 學會計算盒子尺寸(重點)
Padding-left:15px 會讓盒子向右拉長15像素,所以,寬度weidth要減去15px。
20 padding不影響盒子大小的情況
如果一個盒子沒有給定寬度高度或者繼承父親的寬度高度,則 padding不會影響本盒子大小
21 搜索趣圖(一)案例分析
22 搜索趣圖(二)大盒子
23 搜索趣圖(三)標題
24 搜索趣圖(四)
25 搜索趣圖(五)
26 盒子模型布局穩定性
開始學習盒子模型,同學們最大的困惑就是,分不清內外邊距的使用,什么情況下使用內邊距,什么情況下使用外邊距?
答案是:其實他們大部分情況下是可以混用的。就是說,你用內邊距也可以,用外邊距也可以。你覺得哪個方便,就用哪個。
但是,總有一個最好用的吧,我們根據穩定性來分,建議如下:
按照優先使用寬度(width)其次使用內邊距( padding)再次外邊距( margin)。
原因:
1. margin會有外邊距合并還有ie6下面 margin加倍的bug(討厭)所以最后使用。
2. padding會影響盒子大小,需要進行加減計算(麻煩)其次使用。
3. width沒有問題(嗨皮)我們經常使用寬度剩余法、高度剩余法來做。
第一個盒子不是寬度剩余法,后面就是寬度剩余法,解決間距問題。
27 CSS3盒模型
CS53中可以通過box- sazing來指定盒模型,即可指定為 content-box、 border-box,這樣我們計算盒子大小的方式就發生了改變。
可以分成兩種情況:
1、box-sizing:content-box盒子大小為width+ padding+ border content-box:此值為其默認值,其讓元素維持W3C的標準 Box Mode
2、 box-sizing:border-box盒子大小為width就是說 padding和 border是包含到width里面的。
注:上面的標注的width指的是CSS屬性里設置的width:length, content的值是會自動調整的。
28 盒子陰影
語法格式:
box- shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色內/外影;
29 水晶圖片案例?
看不懂的小伙伴不要氣餒,后續的分享中將持續解釋,只要你跟著我分享的課程從頭到尾去學習,每篇文章看三遍,一個月后,回過頭來看之前的文章就會感覺簡單極了。
本章已結束,下篇文章將分享《11 浮動及應用》小伙伴們不要錯過喲!
1、html標簽是用來給文本添加語義的,而不是用來修飾文本的;
2、<meta charset="GBK">指定字符集(GB2312、UTF-8),html保存和指定字符一樣,才不會亂碼;
3、<!DOCTYPE html> DTD文檔申明告訴瀏覽器我用的什么協議來寫的,不是html標簽;
4、webstorm快捷鍵大全:https://www.cnblogs.com/yeminglong/p/5995421.html
1、h、p 和 hr 標簽
2、注釋:<!-- -->
3、圖片:<img src=" ">
4、換行:<br> 用于內容未完的換行
5、跳轉:<a href=" "></a>
6、base 標簽:<base target="_self ">
7、假鏈接:點擊不會跳轉
8、錨點:<a href="#id值"><\a>
1、無序列表(!)
2、有序列表(*)
3、定義列表
?
1、格式
?
2、屬性
(1)寬高
(2)水平和垂直對齊(align 和 valign)
(3)內邊距和外邊距(cellpadding 和 cellspacing)
(4)細線表格
3、表格的其他標簽
(1)caption:表格的標題標簽,必須寫在 table 內而且需緊跟 table
(2)th:th 和 td 同級,th 有加粗的效果
4、表格的結構
(1)組成:caption 標題、thead 表頭、tbody 主體、tfoot 尾部
(2)說明:
5、單元格的合并
(1)水平方向:td 屬性 colspan = "2";
(2)垂直方向:td 屬性 rowspan = "2";
1、格式
?
2、input 標簽
(1)type = text:
(2)password:
(3)radio:互斥要設置 name 相同;默認選中 checked
(4)checkbox:選中 checked
(5)button:
(6)image:
(7)reset:value 修改標題
(8)submit:
(9)hidden:
-----------------------------------------------------------------------------------------------------------------------
*相關標簽:
?
3、非 input 標簽
(1)select
?
(2)textarea
4、練習
(1)表單標簽除了 button 外都可以用 value 來指定提交的值
(2)表單添加邊框可以在 form 中添加 fieldset 來實現
1、video 標簽
(1)格式:<video src=" " autoplay="autoplay"></video>;
(2)屬性:controls(控制條)poster(海報)loop(循環)preload(預加載,與autoplay沖突)muted(靜音)width/height;
(3)另一種 video 格式:解決瀏覽器的兼容
?
(4)讓所有的瀏覽器支持 video 標簽:通過 js 框架來實現
2、audio 標簽
(1)使用基本和 video 一樣,屬性只有寬高和 poster 不能用,也是兩種格式
3、details 和 summary 標簽
(1)格式:
?
4、marquee標簽(跑馬燈效果)
(1)w3c 不推薦,但是瀏覽器的支持好
(2)屬性:direction(方向)scrollamount(滾動的速度)loop(滾動次數,默認-1)behavior(滾動類型 slide)
(3)廢棄的標簽:<br><hr><font><b>加粗<u>下劃線<i>斜體<s>刪除線(無語義)
替代的標簽:<strong><ins><em><del>(加入了語義)
5、字符實體
(1) ;空格 <;>; ©;版權符號
(2)理解:html 占用了的不顯示的特殊字符用另外的代替符號表示,使他們正常在 html 頁面上顯示
eta介紹
icon網頁圖標
表格
表單
設置編碼
<meta charset="utf-8">
設置關鍵字
<meta name="keywords" content="html, java, 前端" />
設置網頁描述
<meta name="description" content="這是一個簡單的html頁面" />
網頁重定向
<meta http-equiv="refresh" content="3; http://www.baidu.com">
作者
<meta name="author" content="小火柴" />
設置蜘蛛爬取狀態
<meta name="robots" content="all|none|index|follow|noindex|nofollow">all 文件將被檢索,且頁面上的連接可以被查詢
<link rel="icon" href="test.ico"/>
<table border="1" width="500" height="300" cellspacing="0" cellpadding="10" bgcolor="#cfcfcf" align="centers">
表格的標準結構
<table border="1" width="500" height="300">
表頭
<table border="1" width="500" height="300">
合并
<table border="1" width="500" height="300">
表格的標題 直接在td的地方換成th 邊框的顏色
<table border="1" width="500" height="300" bordercolor="red">
內容的垂直對其方式 在td中添加屬性 valign="top" top 頂部 middle 居中 bottom 靠下 細線的表格
<table bgcolor="green" width="500" height="300" cellspacing="1">
表格小案例 -- 課程表
<table width="300" height="250" bgcolor="green" cellspacing="1" align="center">
表單的作用的就是用來收集信息
表單域
<form action="" method="get">
輸入框屬性簡介
<input type="text" name="userName" maxlength="8" readonly="readonly" value="admin" disabled="disabled">
單選框
<input type="radio" name="sex" value="男" checked="checked" />男
下拉列表
<select multiple="multiple">
多選框
<input type="checkbox" name="play" value="籃球" checked="checked">籃球
多行文本框 文本域
<textarea cols="30" rows="10"></textarea>cols 輸入字符寬
文件上傳組件
<input type="file" name="myfile">
文件的提交
<input type="submit" value="提交">
按鈕
<input type="button" value="我的第一個按鈕"/>
圖片提交按鈕
<input type="image" src="submit.jpg" />
重置按鈕
<input type="reset" value="重置" />
信息分組
<fieldset>
h5表單控件
<!-- 網址控件 --><input type="url"/><!-- 日期控件 --><input type="date" /><!-- 時間控件 --><input type="time" /><!-- 郵件控件 --><input type="email" /><!-- 數字控件 --><input type="number" step="5"/><!-- 滑塊控件 --><input type="range" step="5" value="10"/>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。