首頁 >web前端 >css教學 >學習web前端常用知識點的詳細介紹

學習web前端常用知識點的詳細介紹

高洛峰原創: 2017-03-22 15:19:261510瀏覽

1、常見的區塊級元素內嵌元素

p -最常用的區塊級元素

dl - 和dt-dd 搭配使用的區塊級元素

form - 互動表

h1 -h6- 大標題

hr - 水平分隔線

## ## # p - 段落

## ul - 無序列表

fieldset - 表單欄位集

colgroup-col - 表單欄位組

td 表格及行-單元格

pre - 格式化文字

a –超連結（錨點）

br - 更換文字

## ## br - 換行

em - 強調

img - 圖片

input - 輸入方塊

label - 表，定義內文內區塊

strong - 粗體強調

# sub - 下標

# 與中標線文字方塊

u - 底線

select - 項目選擇

2、實現文字三點的幾個條件

text-overflow

##屬性

僅為：當文字溢出時是否顯示省略標記，並不具備其它的樣式屬性定義，要實現溢出時產生省略號的效果還需定義：

#1、容器寬度：

width：value;（px、%，都可以）2、強製文字在一行內顯示:white-space

：nowrap;

3、溢出內容為隱藏：overflow：hidden;

4、溢出文字顯示省略號：text-overflow：ellipsis;

註：必須是單行文字才能設定本文溢位！！！

IE6+；chrome1.0+；safari3.1+（firefox,opera暫不支援）

3、垂直居中的幾個條件

設定一個元素在一個容器中垂直居中，必須更改預設的

display

屬性值為inline-block;

並加上同級元素（標尺）（同級元素[標尺]樣式設定為

vertical-align

:middle;width:0;

height:100%;display:inline-block;）。

三個條件：

1：必須為容器（父元素）加上text-align:center;

2:必須給予當前元素轉成行內塊元素（display:inline-block;）再給目前元素加上vertical-align:middle;

3：在目前元素的後面（沒有回車）加上同級元素span ;並對span進行vertical-align:middle;width:0;height:100%;display:inline-block

4、置換元素與非置換元素

#置換元素與非置換元素

a) 置換元素：瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。例如：瀏覽器會根據標籤的src屬性的值來讀取圖片資訊並顯示出來，而如果查看(x)html程式碼，則看不到圖片的實際內容；標籤的type屬性來決定要顯示輸入框，還是單選按鈕等。 (x)html中的、、、<select>都是置換元素。這些元素往往沒有實際的內容，就是一個空元素。 置換元素在其顯示中產生了框，這也就是有的內聯元素（img,input）能夠設定寬高的原因。 b) 不可替換元素（非置換元素）：(x)html 的大多數元素是不可替換元素，即其內容直接表現給使用者端（如瀏覽器）。 5、什麼是精靈圖？優勢是什麼？ 圖片整合，將小的單張背景圖整合到一張大的背景圖上。 圖片整合的優勢： 1）透過圖片整合來減少對伺服器的請求次數，從而提高頁面的載入速度。 2）透過整合圖片來減少圖片的體積。 6、什麼是<a href="http://www.php.cn/code/5005.html" target="_blank">css層疊</a>樣式表？優先權演算法如何計算？ a.重要性和來源的優先權排序從低到高是： 1）瀏覽器預設樣式 2）<a href="http://www.php.cn/wiki/164.html" target="_blank">class</a>/ id.....選擇器的權重 3）行間樣式 4）內聯或外聯（書寫順序） 5）!important 最高的 7、display:none與<a href="http://www.php.cn/wiki/929.html" target="_blank">visibility</a>:hidden的區別 前者：隱藏不佔位後者：隱藏但是佔位置 8、 <a href="http://www.php.cn/code/6440.html" target="_blank">清除浮動</a>的幾種方式 hack1：為父元素加入宣告overflow:hidden; hack2: 為父元素加height #hack3:在浮動元素下方添加空p,並給該元素添加聲明：p{clear:both; height:0; overflow:hidden;} #hack4:萬能清除浮動法p:after{content:“. 」;clear:both;display:block;height:0;overflow:hidden; visibility:hidden;} 9、哪些屬性可以繼承？ 1）文字相關：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text -transform、word-spacing 2）清單相關：list-style-image、list-style-position、list-style-type、list-style 3）顏色相關：color 4）透明度（子元素會繼承祖元素的opacity，但無法改變） 註：font-size繼承的是父元素的大小，而不是比例。 line-height當父元素是百分比或px值得時候，子元素跟父元素相同，當父元素是normal或數字的時候，子元素的line-height是子元素的字體大小乘以數字。 10、定位的方式 position屬性值：<a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>，relative，absolute，fixed 1）static static是預設值，元素位於文件流程中，正常顯示，忽略元素的<a href="http://www.php.cn/wiki/904.html" target="_blank">top</a>，<a href="http://www.php.cn/wiki/906.html" target="_blank">bottom</a>#，<a href="http://www.php.cn/wiki/907.html" target="_blank">left</a>，<a href="http://www.php.cn/wiki/905.html" target="_blank">right</a>#。 <a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a>屬性始終為0. 2）relative 相對定位，保留元素在文件流中佔用的位置和尺寸，由left/right/top /bottom幾個屬性決定相對移動的距離，原來的位置保留 3）absolute <a href="http://www.php.cn/code/6074.html" target="_blank">絕對定位</a>，將物件從文檔流中脫離出來，使用left /right/top/bottom等屬性相對其最接近的一個並有定位設定的父元素進行絕對定位；如果沒有，則依據body物件 4）fixed fixed和absolute差不多，但是他相對的是視窗的左上角，不會跟隨文件滾動。但如果在多frame頁裡面，他相對的是所在frame的左上角，而不是瀏覽器左上角。 11、link和@import區別？ 1、老祖宗的差別。 link屬於XHTML標籤，而@import完全是CSS提供的一種方式。 2、link標籤除了可以載入CSS外，還可以做很多其它的事情，例如定義<a href="http://www.php.cn/wiki/1541.html" target="_blank">RSS</a>，定義rel連接屬性等，@import就只能載入CSS了 3、載入順序的差異。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面全部被下載完再被加載。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍） 4、相容性的差異。由於@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題 5、使用dom控制樣式時的差別。使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的 #12、定位的屬性值都有哪些？每個值得意思？ 各屬性值的功能： static：預設值。位置設定為 static 的元素會正常顯示，它總是會處於文件流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。 absolute：相對於父級元素的絕對定位，s浮出、脫離佈局流，它不佔據空間，就是我們所說的層，其位置相對於最近的已定位父元素而言的位置，可直接指定「left」、「top」、「right」以及「bottom」屬性。若父級都沒有定位，則以html（根元素）。 (層疊的順序z-index:value) relative：是相對於預設位置的偏移定位，透過設定left、top、right、bottom值可將其移至相對於其正常位置的地方（相對於自己的開始的位置發生的位置上的移動，【不會破壞正常的佈局流】 fixed：相對瀏覽器的絕對定位，是相對於瀏覽器視窗的指定座標進行定位。 ##html5 新增<a href="http://www.php.cn/wiki/1118.html" target="_blank">的標籤15個</a><a href="http://www.php.cn/php/php-tp-append.html" target="_blank">header nav footer </a>main aside article section figure datalist video audio fieldest legend label caption<a href="http://www.php.cn/wiki/646.html" target="_blank"></a> <a href="http://www.php.cn/wiki/931.html" target="_blank"></a> <a href="http://www.php.cn/wiki/919.html" target="_blank"></a> <a href="http://www.php.cn/code/7955.html" target="_blank"></a> ##################################################################################################################' #14、一、BFC是什麼？ margin###重疊（放在兩個BFC裡）######3、根元素、 ###float###屬性不為none、 position為absolute或fixed、 display為inline-block，table- cell，table-caption，flex，inline-flex、 overflow不為visible######15、.px，em，rem，pt的區別######1）px其實就是像素，用px設定字體大小時，比較穩定且精確######但是這種方法存在一個問題，當使用者在瀏覽器中瀏覽我們製作的web頁面時，如果對瀏覽器進行了縮放，這時會使我們的web###頁面佈局###被打破。因此，這時就提出了使用「em」來定義web頁面的字體。 ######2）em就是根據基準來縮放字體的大小######em是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小######3）rem是相對於根元素字體大小來顯示的######rem是相對於根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值######4）pt的大小等於1英吋的1/72######磅：他是作為文字的一種計量單位###This measurement method comes from a print-design background and is most suitable for media, but it is also widely used in monitors 16. What are the methods to achieve vertical + horizontal centering? 1.p{width:200px;height:200px;<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin :auto;} 2, p{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px; } 17. Progressive enhancement and graceful degradation Progressive enhancement: Build pages for low-version browsers to ensure the most basic functions, and then perform effects and interactions for advanced browsers Wait for improvements and additional functions to achieve a better user experience. Graceful degradation: Build complete functions from the beginning, and then make them compatible with lower version browsers 18. What are the css selectors? 1) Wildcard selector * 2) Type selector/element selector a 3) Attribute selector input[type="button"] 4) Contains selector p .code a 5) Sub-object selector ul.test>li 6) ID selector #7) Class selection Symbol . 8) Group selector body,ul,li 9)<a href="http://www.php.cn/code/6014.html" target="_blank">Pseudo class</a> and pseudo object selector p<a href="http://www.php.cn/wiki/970.html" target="_blank">:first-letter</a> a<a href="http://www.php.cn/wiki/966.html" target="_blank">:hover</a> 10) Adjacent selector li+li 19, the difference between animation and transition The same point: they are all following Time changes an element's attribute value. Differences: Transition needs to trigger an event (hover event or click event, etc.) to change its css properties over time; animation can also be used without triggering any events. Explicitly change the element's CSS attribute value over time to achieve an <a href="http://www.php.cn/code/9595.html" target="_blank">animation</a> effect. CSS3 animation requires clear animation attribute values. 20. What are the standard <a href="http://www.php.cn/code/6444.html" target="_blank">box model</a> and the weird box model. The difference between the two, how to implement the weird box model, and the standard sum model Standard box model: content+border+<a href="http://www.php.cn/wiki/948.html" target="_blank">padding</a> Weird box model: content When calculating the width of the box, one adds border and padding and the other does not. Weird box model implementation: box-sizing:border-box Standard box model: box-sizing: content-box 21. How to center an element up, down, left, and right within the parent element css: .box{display:flex;width:800px;height:300px ;justify-content:center} .box p{align-self:center} html: 22. What are the commonly used formats for video and audio? For video: video /ogg video/mp4 video/webm for <a href="http://www.php.cn/code/6093.html" target="_blank">audio</a>: audio/ogg audio/mpeg 23. Briefly explain the attributes and attribute values of <a href="http://www.php.cn/code/10723.html" target="_blank">flexible box model</a> (Write out at least 6 attributes) display:flex; flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>: justify-content: align-items: align-self: align-content: flex-wrap: 23. Briefly introduce linear gradient and path Usage of gradient and repeated gradient Linear gradient: linear-gradient() Radial gradient: radial-gradient() Repeating linear gradient: repeating-linear-gradient() Repeating radial gradient: repeating-radial-gradient() 24. Briefly introduce the usage of animation animation consists of two parts: animation: animation name animation execution time animation type animation delay time animation repetition number animation direction; @<a href="http://www.php.cn/wiki/1051.html" target="_blank">key</a>frames Animation name 25. Several main attributes and attribute values of css3D 1. Depth of field: perspactive:number; If the object you want to see is larger, then set the value smaller , if you want to see the object smaller, set the value larger 2. 3D stage: transform-style:preserve-3d; 3. translateZ() rotateZ() scaleZ() 26. Main attributes in 2D transform:translate() rotate() skew() scale() transform-origin: 27. Briefly introduce the attributes and attribute values of transition animation transition: attribute name (you can use <a href="http://www.php.cn/wiki/1483.html" target="_blank">all</a>) animation execution time animation type animation delay time 28. New <a href="http://www.php.cn/code/6021.html" target="_blank"> background attributes in css3</a> <a href="http://www.php.cn/code/865.html" target="_blank">background-origin</a>: background origin <a href="http://www.php.cn/code/868.html" target="_blank">background-clip</a>:Background cropping <a href="http://www.php.cn/code/872.html" target="_blank">background-size</a>:<a href="http://www.php.cn/code/8294.html" target="_blank">The size of the background image</a> The following are the three values of background-size length Specifies the size of the background image. The first value is width, the second value is height. Percentage(%) Set the background image size as a percentage cover Expand the background image to a large enough size so that the background image is completely Cover the background area 29, write the core of the five major browsers and their representative works *Trident: IE, Maxthon, Tencent, Theworld, 360 Browser *Gecko:: The representative work Mozilla Firefox is an open source project *Webkit: The representative work Safari and Chrome are an open source project. *Presto: Representative work Opera, Presto is a browser layout engine developed by Opera Software. It is also recognized as the fastest rendering engine in the world. *Blink: Browser layout engine developed by Google and Opera Software, released in April 2013. 30. Write down several common bugs and solutions in IE6 (at least 4 types) 1) The picture has a border BUG Solution: Add border:0; or border:0 to the picture none; 2. Double floating direction (double margin) Solution: display:inline 3. Default height (IE6, IE7) Solution: Add declaration to element: font-size :0; Option 2: Add a statement to the element: overflow:hidden; 4. The default sizes of button elements are different. Option: Use a tag to simulate 31. IE’s <a href="http://www.php.cn/code/120.html" target="_blank"> filter </a>What? 1, _ Underline attribute filter 2, \9: IE version recognition; other browsers do not recognize syntax: selector {attribute: attribute value\9;} 3. \0: Recognized by IE8 and above; not recognized by other browsers. Syntax: selector {attribute: attribute value\0;} 32. Element height collapse solutions (at least 4 types ) hack1: Add the declaration overflow:hidden to the parent element; hack2: Add height to the parent element hack3: Add an empty p below the floating element, and give the Element addition Declaration: p{clear:both; height:0; overflow:hidden;} hack4: Universal clear floating method p:after{content: ".";clear:both;display:block;height :0;overflow:hidden; visibility:hidden;}以上是學習web前端常用知識點的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">陳述：<div>本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn</div></div></div><div class="nphpSytBox">上一篇：<a class="dBlack" title="使用bootstrap IE8相容性處理的方法" href="https://m.php.cn/zh-tw/faq/358069.html">使用bootstrap IE8相容性處理的方法</a>下一篇：<a class="dBlack" title="使用bootstrap IE8相容性處理的方法" href="https://m.php.cn/zh-tw/faq/358073.html">使用bootstrap IE8相容性處理的方法</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><a href="https://m.php.cn/zh-tw/article.html" class="bBlack">看更多</a><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><a href="https://m.php.cn/zh-tw/faq/841.html" title="編寫CSS時關於Border必須注意的地方總結" class="aBlack">編寫CSS時關於Border必須注意的地方總結</a><div class="clear"></div></li><li><a href="https://m.php.cn/zh-tw/faq/961.html" title="如何實現多風格選擇樣式即時切換_經驗交流" class="aBlack">如何實現多風格選擇樣式即時切換_經驗交流</a><div class="clear"></div></li><li><a href="https://m.php.cn/zh-tw/faq/1345.html" title="marquee的詳細用法解析" class="aBlack">marquee的詳細用法解析</a><div class="clear"></div></li><li><a href="https://m.php.cn/zh-tw/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><a href="https://m.php.cn/zh-tw/faq/269606.html" title="CSS3中优雅降级和渐进增强的区别" class="aBlack">CSS3中优雅降级和渐进增强的区别</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt="">公益線上PHP培訓，幫助PHP學習者快速成長！</div><div class="footermid"><a href="https://m.php.cn/zh-tw/about/us.html">關於我們</a><a href="https://m.php.cn/zh-tw/about/disclaimer.html">免責聲明</a><a href="https://m.php.cn/zh-tw/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"> © php.cn All rights reserved </div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append(""); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>