TML5 元素有多種維度展示方式,常見以下:
根元素
參考文獻:
,介紹一下標準的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
(1)有兩種, IE 盒子模型、W3C 盒子模型;
(2)盒模型: 內容(content)、填充(padding)、邊界(margin)、 邊框(border);
(3)區 別: IE的content部分把 border 和 padding計算了進去;
2,CSS選擇符有哪些?哪些屬性可以繼承?
* 1.id選擇器( # myid)
2.類選擇器(.myclassname)
3.標簽選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.后代選擇器(li a)
7.通配符選擇器( * )
8.屬性選擇器(a[rel = "external"])
9.偽類選擇器(a:hover, li:nth-child)
* 可繼承的樣式: font-size font-family color, UL LI DL DD DT;
* 不可繼承的樣式:border padding margin width height ;
3,CSS優先級算法如何計算?
* 優先級就近原則,同權重情況下樣式定義最近者為準;
* 載入樣式以最后載入的定位為準;
優先級為:
!important > id > class > tag
important 比 內聯優先級高
4,CSS3新增偽類有那些?
舉例:
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。
:after 在元素之前添加內容,也可以用來做清除浮動。
:before 在元素之后添加內容
:enabled
:disabled 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中。
5,如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?
給div設置一個寬度,然后添加margin:0 auto屬性
居中一個浮動元素
確定容器的寬高 寬500 高 300 的層
設置層的外邊距
讓絕對定位的div居中
6,display有哪些值?說明他們的作用。
block 象塊類型元素一樣顯示。
none 缺省值。象行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示,但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示,并添加樣式列表標記。
table 此元素會作為塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值
7,position的值relative和absolute定位原點是?
absolute 生成絕對定位的元素,相對于值不為 static的第一個父元素進行定位。
fixed (老IE不支持) 生成絕對定位的元素,相對于瀏覽器窗口進行定位。
relative 生成相對定位的元素,相對于其正常位置進行定位。
static 默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right z-index 聲明)。
inherit 規定從父元素繼承 position 屬性的值。
8,CSS3有哪些新特性?
新增各種CSS選擇器 (: not(.input):所有 class 不是“input”的節點)
圓角 (border-radius:8px)
多列布局 (multi-column layout)
陰影和反射 (Shadow\Reflect)
文字特效 (text-shadow、)
文字渲染 (Text-decoration)
線性漸變 (gradient)
旋轉 (transform)
增加了旋轉,縮放,定位,傾斜,動畫,多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
9,用純CSS創建一個三角形的原理是什么?
把上、左、右三條邊隱藏掉(顏色設為 transparent)
10,一個滿屏 品 字布局 如何設計?
簡單的方式:
上面的div寬100%,
下面的兩個div分別寬50%,
然后用float或者inline使其不換行即可
11,li與li之間有看不見的空白間隔是什么原因引起的?有什么解決辦法?
行框的排列會受到中間空白(回車\空格)等的影響,因為空格也屬于字符,這些空白也會被應用樣式,占據空間,所以會有間隔,把字符大小設為0,就沒有空格了。
12,為什么要初始化CSS樣式。
- 因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
- 當然,初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。
最簡單的初始化方法: * {padding: 0; margin: 0;} (強烈不建議)
淘寶的樣式初始化代碼:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, b8bf53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
13,absolute的containing block(容器塊)計算方式跟正常流有什么不同?
無論屬于哪種,都要先找到其祖先元素中最近的 position 值不為 static 的元素,然后再判斷:
1、若此元素為 inline 元素,則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形;
2、否則,則由這個祖先元素的 padding box 構成。
如果都找不到,則為 initial containing block。
補充:
1. static(默認的)/relative:簡單說就是它的父元素的內容框(即去掉padding的部分)
2. absolute: 向上找最近的定位為absolute/relative的元素
3. fixed: 它的containing block一律為根元素(html/body),根元素也是initial containing block
14,對BFC規范(塊級格式化上下文:block formatting context)的理解?
(W3C CSS 2.1 規范中的一個概念,它是一個獨立容器,決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用。)
一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
不同類型的 Box,會參與不同的 Formatting Context(決定如何渲染文檔的容器),因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
創建規則:
根元素
浮動元素(float不是none)
絕對定位元素(position取值為absolute或fixed)
display取值為inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素
作用:
可以包含浮動元素
不被浮動元素覆蓋
阻止父子元素的margin折疊
15,css定義的權重
以下是權重的規則:標簽的權重為1,class的權重為10,id的權重為100,以下例子是演示各種定義的權重值:
/*權重為1*/ div{}
/*權重為10*/ .class1{}
/*權重為100*/ #id1{}
/*權重為100+1=101*/ #id1 div{}
/*權重為10+1=11*/ .class1 div{}
/*權重為10+10+1=21*/ .class1 .class2 div{}
如果權重相同,則最后定義的樣式會起作用,但是應該避免這種情況出現
16,移動端的布局用過媒體查詢嗎?
css的媒體查詢允許通過@media標簽為特定媒體的瀏覽器設定樣式,其中包含眾多篩選,功能強大。
17,使用 CSS 預處理器嗎?喜歡那個?
SASS (SASS、LESS沒有本質區別,只因為團隊前端都是用的SASS)
18,CSS優化、提高性能的方法有哪些?
將樣式表放到頁面頂部
不使用CSS表達式
不使用@import
不使用IE的Filter
19,在網頁中的應該使用奇數還是偶數的字體?為什么呢?
應該是用偶數字體。原因:
像谷歌一些比較流行的瀏覽器一般會有個默認的最小字體,而且對奇數字體渲染的不太好看
20,元素豎向的百分比設定是相對于容器的高度嗎?
是的,元素的百分比設置一般是根據父級元素的寬高決定的,如果父級元素沒有寬高百分比是不起作用的
lt;!doctype html>
<html>
<!--
常見問題答疑
Question 1:HTML標簽可以大寫嗎?
大小寫都可以,比如<P> 和 <p> 都一樣,但是推薦小寫,XHTML強制小寫(小寫肯定對,大寫……看情況)
Question 2:有<h7>、<h8>、<h9>……嗎?
沒有。<h1>最大,<h6>最小.
Question 3:所有HTML標簽都需要<></>嗎?
不是。有特例,比如<img>是自閉合的,沒有</img>;<br>是空元素,需要在開始標簽閉合<br/>;<hr> <link> <base>不需要閉合,等等。
Question 4:標簽里的屬性有先后順序嗎?
沒有。比如<img src="" alt="" width="" height="">和<img alt="" width="" height="" src="">效果是一樣的。
-->
<head>
<!--
<meta>元素通常用于指定網頁的描述,關鍵詞,文件的最后修改時間,作者,和其他元數據。
!元數據也不顯示在頁面上,但會被瀏覽器解析。
-->
<meta charset="utf-8">
<!-- <title>標簽定義HTML文檔的標題 -->
<title>HTML復習 2019-2-3</title>
<!--
<base>定義了所有鏈接的URL(地址) URL->Uniform Resource Locator(全球資源定位器)
<base > 所有鏈接都指向www.baidu.com
-->
<!--
<link>標簽定義文檔和外部資源的關系,鏈接到另一個文件,把另一個文件的東西拿過來用
通常引用 css文件 和 js文件
調用樣式的優先級:<link>外部文件 < 文件內<style> < 標簽內style屬性
-->
<link rel="stylesheet" type="text/css" href="filename.css">
<link rel="stylesheet" type="text/javascript" href="filename.js">
<!--
<style>標簽定義標簽的樣式 CSS -> Cascading Style Sheets(層疊樣式表)
1.直接定義標簽樣式 標簽名{ 屬性1:值; 屬性2:值; }
2.定義具有某一ID的標簽樣式 #id名{ 屬性1:值; 屬性2:值; }
3.定義某一類(class)的標簽樣式 .類名{ 屬性1:值; 屬性2:值; }
#多個元素用 , 隔開
-->
<style>
td,p{
text-align:center;
}
#top{
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.show{
background-color: aqua;
}
</style>
<!-- <script>標簽用于定義腳本文件(一般就是JavaScript) -->
<script>
alert("lycute!"); //彈出一個消息框
</script>
</head>
<body>
<!--
常用HTML屬性:
class 定義一個或多個類名(classname);相當于把不同的標簽分到一個組,屬于同一類
id 定義元素的唯一id;id是唯一的,不能兩個標簽用一個,相當于學號,不能重復
style 定義元素的行內樣式(inline style);只能修改該標簽的樣式(大小、顏色、位置等)
-->
<!-- <h1> ~ <h6> 標簽定義了六個等級的標題 h->head/headline(標題) -->
<h1 id="top">This is a title level 1</h1>
<h2 class="show">This is a title level 2</h2>
<h3 class="show">This is a title level 3</h3>
<h4 class="show">This is a title level 4</h4>
<h5>This is a title level 5</h5>
<h6>This is a title level 6</h6>
<!--
<p>標簽定義段落 p->paragragh(段落)
HTML文檔中不能直接敲回車,需要使用 <br/> 標簽 br->break(打斷?……可能是這個吧)
HTML文檔中不能直接打空格,需要使用 nbsp->Non-breaking Space(不間斷空格)
!!上兩條在<pre>標簽內不受影響
<hr>標簽用于創建水平線,用于分隔內容 hr->horizontal line(水平線)
<b>和<strong>都可以加粗文字
<i>和<em>都可以定義斜體文字
通常使用<strong>和<em>,因為它們有強調的含義
-->
<p>
This is a paragragh.<br/>
And this is the second line.
</p>
<hr>
<p>
This is another paragragh<br/>
<!--常用文本格式化屬性:
<b> 定義粗體文本 b->bold(粗體)
<em> 定義著重文字 em->emphasize(強調)
<i> 定義斜體字 i->italic(斜體)
<small> 定義小號字
<strong>定義加重語氣
<sub> 定義下標字 sub->subscript(下標)
<sup> 定義上標字 sup->superscript(上標)
<ins> 定義插入字 ins->insert(插入)
<del> 定義刪除字 del->delete(刪除)
-->
<strong>I am bold</strong><br/>
<em>I am italic</em><br/>
<small>I am small</small><br/>
<sub>I am subscript</sub>
<sup>I am superscript</sup><br/>
<ins>I am ins</ins><br/>
<del>I am del</del>
</p>
<!--
段落中“計算機”輸出標簽(一般不用,了解就行)
<code> 定義計算機代碼
<kbd> 定義鍵盤碼 kbd->keyboard(鍵盤)
<samp> 定義計算機代碼樣本 samp->sample(樣例)
<var> 定義變量 var->variate(變量)
<pre> 定義預格式文本 pre->preposition(前置?……這個,應該吧)
-->
<p>
<pre>
<code>
#include"stdio.h"
int main()
{
printf("Hello World!");
}
</code>
</pre>
<kbd>Shift鍵 VK_SHIFT</kbd><br/>
<samp>system.out.print("hello world");</samp><br/>
</p>
<!--
HTML引文、引用和標簽定義
<abbr> 定義縮寫 abbr->abbreviation(縮寫)
<address> 定義地址
<bdo> 定義文字方向 bdo->Bi-Directional Override
<blockquote> 定義長的引用
<q> 定義短的引用語 q->quote(引用)
<cite> 定義引用、引證
<dfn> 定義一個定義項目 dfn->definition(定義)
-->
<p>
<abbr title="abbreviation">abbr</abbr><br/>
<address>Hebei,Shijiazhuang</address><br/>
<bdo dir="rtl">text direction from right to left</bdo>
<bdo dir="ltr">text direction from left to right</bdo>
<blockqoute cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockqoute><br/>
<q>This is a short qoute</q><br/>
<cite>This is cite</cite><br/>
<dfn>This is dfn</dfn>
</p>
<!--
<a>標簽定義鏈接 a->anchor(錨點)
href屬性定義鏈接地址 href->hypertext reference(超文本引用)
target屬性定義被鏈接的文檔在何處顯示
1.可以用來鏈接到外部地址實現頁面跳轉功能
2.可以鏈接到當前頁面的某部分實現內部導航功能
3.鏈接不一定是文本,也可以是圖片或者其他HTML元素
-->
<a href="#">This is a null link</a><br/>
<a href="#top">This is a link to h1.</a><br/>
<a target="_blank">This is a link to baidu</a><br/>
<!--
<img>標簽定義圖像、圖片 img->image(圖像)
<img>是一個自閉合標簽,不需要也不存在</img>.
src屬性指向圖像的地址 src->source(來源)
alt屬性定義如果圖片加載不出來時的替換文字 alt->alter(變更)
height、width屬性分別定義圖片的 高度 和 寬度,值可以是數字(單位px:像素)或者百分比(相對于源文件) px->pixel(像素)
-->
<img src="http://m.jungjaehyung.com/uploadfile/2024/0807/20240807024119207.jpg" alt="kirito" height="50%" width="50%">
<!-- HTML 可以通過 <div> 和 <span> 將元素組合起來 -->
<div style="background:skyblue;">
<p>This is a paragragh in a div</p>
<a >www.nelzh.cn</a>
</div>
<p>
Ly <span style="background:pink;">cute</span>
</p>
<!--
HTML表格 <table> (table有表格的意思)
<th> 定義表格的標題欄 th -> table headline(我jiao著應該是……)
<tr> 定義表格的行 tr -> table row
<td> 定義表格的列 td -> table ???
<caption> 定義表格標題
<colgroup> 定義表格列的組
<col> 定義用于表格列的屬性
<thead> 定義表格的頁眉
<tbody> 定義表格的主體
<tfoot> 定義表格的頁腳
-->
<table border="1">
<caption>LYCUTE</caption>
<colgroup>
<col span="2" style="background-color:skyblue;">
</colgroup>
<thead>
<tr>
<th>L</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>LY</td>
<td>CUTE</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>CUTE</td>
<td>LY</td>
</tr>
</tfoot>
</table>
<!--
有序列表<ol> & 無序列表<ul> & 自定義列表<dl>
ol -> ordered list
ul -> unordered list
dl -> ??? list
-->
<ol>
<li>lycute</li>
<li>lycute</li>
<li>lycute</li>
</ol>
<ul>
<li>lycute</li>
<li>lycute</li>
<li>lycute</li>
</ul>
<dl>
<dt>ly</dt>
<dd>-cute</dd>
<dt>cute</dt>
<dd>-ly</dd>
</dl>
<!-- HTML表單<form> 和 輸入<input> -->
<form>
<!-- 文本域(Text Fields)-->
Username:<input type="text" name="username"><br/>
<!-- 密碼(Password)-->
Password:<input type="password" name="pwd"><br/>
<!-- 多行輸入(Textarea)-->
<textarea></textarea><br/>
<!--
下拉列表(select)
<select> 定義了下拉選項列表
<optgroup> 定義選項組
<option> 定義下拉列表中的選項
-->
<select>
<optgroup label="program">
<option value="c">C</option>
<option value="java">Java</option>
<option value="python">python</option>
</optgroup>
<optgroup label="cute or not">
<option value="cute">lycute</option>
<option value="verycute">lyverycute</option>
</optgroup>
</select><br/>
<!-- 單選按鈕(Radio Buttons)-->
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female<br/>
<!-- 復選框(Checkboxes)-->
<input type="checkbox" name="program" value="c">C<br/>
<input type="checkbox" name="program" value="java">Java<br/>
<input type="checkbox" name="program" value="python">python<br/>
<!-- 提交按鈕(Submit Button)-->
<input type="submit" value="submit">
<!-- 按鈕(Button)-->
<input type="button" value="找回密碼">
</form>
<!-- <iframe> 標簽規定一個內聯框架 過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。-->
<center>
<iframe src="http://www.baidu.com/" width="1200" height="400"></iframe>
</center>
</body>
</html>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。