整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS盒模型及應用(重點)

          嘍大家好,我是作者“未來”,本期分享的內容是Web前端系列課程,本系列總共29個階段,堅持學習3個月蛻變為Web前端高手哦!

          志同道合的小伙伴跟我一起學習交流哦!

          第二階段 CSS3

          10 CSS盒模型及應用(重點)



          其實,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 浮動及應用》小伙伴們不要錯過喲!

          、html概述

          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=" ">

          • 不會獨占一行;
          • 保證不變形,指定寬或者高即可;
          • title 和 alt 屬性;
          • src 可以是相對路徑(../ 上一級)和絕對路徑,路徑中盡量不含中文,相對路徑不可跨盤符,路徑分隔統一寫 / ,絕對路徑的可移植性不好;

          4、換行:<br> 用于內容未完的換行

          5、跳轉:<a href=" "></a>

          • 支持文字和圖片的跳轉;
          • 地址必須加 http 或者 https;
          • href 可以指定本地的地址;
          • target(_self 和 _blank) 屬性控制跳轉是否打開新的選項卡;
          • title 提示作用;

          6、base 標簽:<base target="_self ">

          • 統一指定 a 標簽怎么打開,寫在 head 中

          7、假鏈接:點擊不會跳轉

          • a 標簽的 href 屬性值為 # 或者 javascript
          • # 會跳轉到頁面的頂部,而 js 不會

          8、錨點:<a href="#id值"><\a>

          • 可以跳轉到頁面的指定位置
          • 可以跳轉到其他頁面的指定位置,只需在 # 前面加上頁面的路徑即可
          • 跳轉無過度動畫

          三、列表標簽

          1、無序列表(!)

          • <ul><li><\li><\ul>;
          • 整體不可分割;
          • ul 除了 li 不建議再加其他的標簽,li 標簽中可以放其他標簽來豐富內容;
          • li 中還可嵌套列表;
          • ws快捷生成 ul>li*3>h2+p;

          2、有序列表(*)

          • <ol><li><\li><\ol>;

          3、定義列表

          ?

          • dt 是標題,dd 是具體的描述;
          • 推薦一個 dt 一個 dd ,也可以一個 dt 對多個 dd 或者沒有 dd;
          • dl 中不建議加其他標簽,二 dt 和 dd 可以加;
          • 應用:網站尾部,圖文混排(仿京東做個網站的尾部);

          四、表格標簽

          1、格式

          ?

          • 表格的邊框默認不顯示(border)

          2、屬性

          (1)寬高

          • table 和 td 可用;
          • 默認高寬根據內容調整;
          • td 設置高寬只會改變當前單元格的狀態,而不會改變 table 的高寬;

          (2)水平和垂直對齊(align 和 valign)

          • 水平對齊三個都可以用,而垂直對齊針對 tr 和 td;
          • table 設置 align 控制表格在水平方向的對齊,給 tr 和 td 設置都是控制單元格里的內容的對齊方式,不過 tr 影響一行,td 影響一個,tr 和 td 都設置 td 會覆蓋 tr 的效果;
          • tr 和 td 設置 valign 都是控制單元格內容的垂直方向的對齊,不過 tr 影響一行,td 影響一個,tr 和 td 都設置 td 會覆蓋 tr 的效果;

          (3)內邊距和外邊距(cellpadding 和 cellspacing)

          • 兩個屬性都是 table 的;
          • 外邊距是指格子與格子之間的空隙,而內邊距是指格子與文字之間的間隙;

          (4)細線表格

          • 先給 table 設置 bgcolor;
          • 再給 tr 設置 bgcolor;
          • 最后 table 設置 cellspacing;

          3、表格的其他標簽

          (1)caption:表格的標題標簽,必須寫在 table 內而且需緊跟 table

          (2)th:th 和 td 同級,th 有加粗的效果

          4、表格的結構

          (1)組成:caption 標題、thead 表頭、tbody 主體、tfoot 尾部

          (2)說明:

          • 瀏覽器自動添加 tbody;
          • table 設置高度后,tfoot 和 thead 的高度是不會變化的;

          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:

          • form 的 action 確定提交的地址
          • 提交數據加 name 屬性

          (9)hidden:

          -----------------------------------------------------------------------------------------------------------------------

          *相關標簽:

          • label 標簽:讓文字與 input 標簽綁定;兩種綁定的方式:

          ?

          • datalist 標簽:給輸入框綁定輸入的提示:<datalist><option>haha</option></datalist>
          • h5 中新增的 input 標簽:email 、url 、number 、color、date(瀏覽器的支持不好)

          3、非 input 標簽

          (1)select

          ?

          (2)textarea

          • cols 和 rows 指定輸入的行列,但是還是可以無限輸入
          • 默認可拉伸,也可通過 css 固定大小

          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)&nbsp;空格 &lt;&gt; &copy;版權符號

          (2)理解:html 占用了的不顯示的特殊字符用另外的代替符號表示,使他們正常在 html 頁面上顯示

          • eta介紹

          • icon網頁圖標

          • 表格

          • 表單


          meta介紹

          設置編碼

          <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 文件將被檢索,且頁面上的連接可以被查詢

          icon網頁圖標

          <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"/>

          主站蜘蛛池模板: av无码免费一区二区三区| 国产乱码精品一区二区三区四川人| 人妻少妇AV无码一区二区| 国产成人精品一区二区三区免费 | 亚洲一区AV无码少妇电影| 国产精品无码一区二区三区不卡| 一本色道久久综合一区| 国产精品丝袜一区二区三区| 国产一区二区三区在线影院 | 精品在线一区二区三区| 国产一区二区三区不卡AV| 精品一区二区高清在线观看| 亚洲sm另类一区二区三区| 亚无码乱人伦一区二区| 99精品国产高清一区二区麻豆| 无码国产精品一区二区免费式直播 | 国模视频一区二区| 国产伦精品一区二区三区四区| 亚欧免费视频一区二区三区| 精品国产免费一区二区| 亚洲一区二区三区精品视频| 亚洲AⅤ视频一区二区三区| 日韩一区精品视频一区二区| 久久亚洲色一区二区三区| 国产精品成人国产乱一区| 成人在线观看一区| 最新中文字幕一区| 日本一区二区三区精品视频| 国产成人综合一区精品| 午夜性色一区二区三区免费不卡视频| 亚洲AV无码一区二区二三区软件 | 成人精品视频一区二区三区尤物| 99精品一区二区三区无码吞精| 久久精品亚洲一区二区三区浴池 | 中文字幕色AV一区二区三区| 91一区二区三区| 国产福利91精品一区二区| 国产精品综合一区二区| 韩日午夜在线资源一区二区| 亚洲AV本道一区二区三区四区| 亚洲蜜芽在线精品一区|