1. Common block-level elementsInline elements
p - the most commonly used block-level elements
dl - block-level elements used with dt-dd
form - interactive form
h1 -h6- large Title
hr - horizontal separator line
ol - ordered list
p - paragraph
ul - unordered list
fieldset - form field set
colgroup-col - form column grouping element
table-tr- td Tables and rows - cells
pre - formatted text
a - hyperlink (anchor)
br - line break
i - italics
em - emphasis
img - picture
input - input box
label - form label
span - commonly used inline container, defining blocks within text
strong - bold emphasis
sub - subscript
sup - superscript
textarea - multi-line text input box
u - Underline
Select - Project selection
2. Several conditions for realizing three points of text
text-overflow Attribute is only: whether to display an omission mark when the text overflows, and does not have other styles Attribute definition, to achieve the effect of producing an ellipse when overflowing, you need to define:
1. Container width:width : value; (px, %, both are acceptable)
2. Force the text to be displayed in one line:white- space :nowrap;
3. Overflow content is hidden: overflow: hidden;
4. Overflow text displays ellipsis: text-overflow: ellipsis;
Note: It must be a single line of text to set the overflow of this article! ! !
IE6+; chrome1.0+; safari3.1+ (firefox, opera are not supported yet)
3. Several conditions for vertical centering
To set an element to be vertically centered in a container, you must change the defaultdisplay The attribute value is inline-block;
and the sibling element (ruler) is added (the style of the sibling element [ruler] is set tovertical-align :middle;width:0;height :100%;display:inline -block;).
Three conditions:
1:text-align :center must be added to the container (parent element);
2: The current element must be converted into an inline block element (display:inline-block;) and then added Add vertical-align:middle to the current element;
3: Add the same-level element span after the current element (without carriage return); and perform vertical-align:middle;width:0;height:100%; on the span; display:inline-block
4. Replacement elements and non-replacement elements
Replacement elements and non-replacement elements
a) Replacement elements: The browser determines the specific display content of the element based on its tags and attributes. For example: the browser will read the image information and display it based on the value of the src attribute of the tag, but if you view the (x)html code, you cannot see the actual content of the image; the type of the tag Properties to determine whether to display input boxes, radio buttons, etc. (x) , ,in HTML are all replacement elements. These elements often have no actual content, that is, they are empty elements.The replacement element generates a box in its display, which is why some inline elements (img, input) can set the width and height.b) Non-replaceable elements (non-replaceable elements): (x) Most elements of html are non-replaceable elements, that is, their content is directly displayed to the user (such as a browser).5. What is a sprite? What are the advantages?Image integration, integrate small single background images into one large background image.Advantages of image integration: 1) Reduce the number of requests to the server through image integration, thereby improving the page loading speed. 2) Reduce the size of pictures by integrating them.6. What iscss cascadingstyle sheet? How is the priority algorithm calculated?a. The priority order of importance and source from low to high is:1) Browser default style2)class/id.....selector weight3) Interline Style4) Inline or external (writing order)5) !important The highest7. The difference between display:none andvisibility:hiddenThe former: hidden without occupying space The latter: hidden but Occupy position8,Several ways to clear floathack1: Add the declaration overflow:hidden to the parent element;hack2: Add height to the parent elementhack3: Add an empty p below the floating element, and give This element adds a 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;}9. What attributes can be inherited?1) Text related: font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, text-align, text-indent, text-transform, word -spacing2) List-related: list-style-image, list-style-position, list-style-type, list-style3) Color-related: color4) Transparency (child elements will inherit the ancestor element opacity, but cannot be changed)Note: font-size inherits the size of the parent element, not the ratio. line-height When the parent element is a percentage or px value, the child element is the same as the parent element. When the parent element is normal or a number, the line-height of the child element is the font size of the child element multiplied by the number.10. Positioning methodposition attribute value:static, relative, absolute, fixed1) staticstatic is the default value. The element is located in the document flow and is displayed normally. Thetopof the element is ignored.bottom,left,rightattributes. Thez-indexattribute is always 0.2) relativerelative positioning, retaining the position and size occupied by the element in the document flow, and the relative movement distance is determined by the left/right/top/bottom attributes. Original The position is retained3) AbsoluteAbsolute positioning, detach the object from the document flow, use left/right/top/bottom and other attributes to perform absolute positioning relative to its closest parent element with positioning settings ;If not, based on the body object4) fixedfixed is similar to absolute, but it is relative to the upper left corner of the window and will not scroll with the document. But if it is in a multi-frame page, it is relative to the upper left corner of the frame, not the upper left corner of the browser.11. What is the difference between link and @import?1. The difference between ancestors. Link belongs to the XHTML tag, and @import is completely a method provided by CSS.2. In addition to loading CSS, the link tag can also do many other things, such as definingRSS, defining rel connection attributes, etc. @import can only load CSS3. The difference in loading order. When a page is loaded (that is, when viewed by a viewer), the CSS referenced by link will be loaded at the same time, while the CSS referenced by @import will wait until the page is completely downloaded before being loaded. So sometimes when browsing the page where @import loads CSS, there will be no style (it just flickers)4. Difference in compatibility. Since @import was proposed by CSS2.1, old browsers do not support it. @import can only be recognized by IE5 or above, but the link tag does not have this problem. 5. The difference when using dom to control the style. When using JavaScript to control the dom to change the style, you can only use the link tag, because @import cannot be controlled by the dom12. What are the positioning attribute values? Is each worth it?The role of each attribute value:static: default value. An element whose position is set to static displays normally, always at the position given by the document flow (static elements ignore any top, bottom, left, or right declarations).absolute: relative to the absolute positioning of the parent element, s floats out of the layout flow. It does not occupy space. It is what we call a layer. Its position is relative to the position of the nearest positioned parent element, which can be directly Specify the "left", "top", "right" and "bottom" properties. If the parent is not positioned, html (root element) will be used. (Stacking order z-index: value)relative: It is an offset positioning relative to the default position. By setting the left, top, right, and bottom values, it can be moved to a position relative to its normal position (relative to itself) The movement of the starting position [will not disrupt the normal layout flow]fixed: absolute positioning relative to the browser, the position of this element can be positioned relative to the specified coordinates of the browser window. left", "top", "right" and "bottom" attributes. Regardless of whether the window is scrolled or not, the element will stay in that position.13. Write 15 newtags inhtml5header nav footermainaside article section figure datalist video audio fieldest label caption14. What is BFC? How is it generated?1. Block-level formatting context2. Adaptive two-column layout , clear internal floats and prevent verticalmarginfrom overlapping (put in two BFCs)3. Root element,floatattribute is not none, position is absolute or fixed, display is inline-block, table-cell, table-caption, flex, inline-flex, overflow are not visible15, the difference between .px, em, rem, pt1) px is actually a pixel, when using px to set the font size, it is more stable and accurateBut there is a problem with this method. When the user browses the web page we created in the browser, if the browser is zoomed, our webpage layoutwill be broken. Therefore, it was proposed to use "em" to define the font of the web page.2) em scales the font size based on the baselineem sets the font size relative to its parent element, so there will be a problem. To set any element, you may need to know the size of its parent element.3) rem is displayed relative to the font size of the root elementrem is relative to the root element, which means that we only need to determine a reference value in the root element4) The size of pt Equal to 1/72 of 1 inchpound: It is a unit of measurement as a text這種度量方式來自列印-設計背景,最適合媒體,但同樣廣泛應用於顯示器16、實現垂直+水平居中有哪些方法?1、p{width:200px;height:200px;background:#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:針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的使用者體驗。優雅降級 graceful degradation:一開始就建立完整的功能,然後再針對低版本瀏覽器進行相容18、css選擇符有哪些?1)一般選擇子 *2)型別選擇子/元素選擇子 a3)屬性選擇子 input[type="button"]4)包含選擇符 p .code a5)子物件選擇符 ul.test>li6)ID選擇子##7)類別選擇符 .8)群組選擇符 body,ul,li9)偽類別及偽物件選擇子 p:first-lettera:hover##10)相鄰選擇詞 li+li19、animation和transition的差異相同點:都是隨著時間改變元素的屬性值。不同點: transition需要觸發一個事件(hover事件或click事件等)才會隨時間改變其css屬性; 而animation在不需要觸發任何事件的情況下也可以明確的隨著時間變化來改變元素css的屬性值,從而達到一種動畫的效果,css3的animation就需要明確的動畫屬性值。20、什麼是標準盒子模型和怪異盒模型。兩者的區別,如何實現怪異盒模型,和標準和模型標準盒模型:content+border+padding##怪異盒模型:content一個算盒子的寬度的時候加上border和padding另一個不加怪異盒子模型實作:box-sizing:border-box標準盒模型:box-sizing: content-box21、如何讓一個元素在父元素內上下左右居中css:.box{display:flex;width:800px;height:300px ;justify-content:center}.box p{align-self:center}html:#22、video與audio常用的格式有哪些用於影片:video /ogg video/mp4 video/webm 用於音訊:audio/ogg audio/mpeg23、簡單的解釋下彈性盒模型的屬性和屬性值(至少寫出6個屬性)display:flex;flex-#direction:justify-content:align-items:align-self:align-content:flex-wrap:23、簡單的介紹一下線性漸變和徑向漸變、重複漸變的用法線性漸變:linear-gradient()徑向漸層:radial-gradient()##重複線性漸層:repeating-linear-gradient()重複徑向漸層:repeating-radial-gradient()24、簡單介紹下animation的用法animation有兩個部分組成:animation:動畫名稱 動畫執行時間 動畫類型動畫延遲時間 動畫重複次數動畫方向;@#keyframes動畫名稱25、css3D的主要幾個屬性和屬性值1、景深:perspactive:number; 想要看到的物體越大,那麼就把值設的較小,如果要看物體看的越小就把值設的越大2、3D的舞台:transform-style:preserve-3d;3、translateZ() rotateZ() scaleZ()26、2D中的主要幾個屬性transform:translate() rotate() skew() scale()transform-origin:27、簡單介紹過度動畫的屬性和屬性值transition:屬性名稱(可以用all) 動畫執行的時間 動畫的類型 動畫的延遲時間28、css3中新增的背景屬性background-origin:背景原點background-clip:背景裁切background-size:背景圖片的尺寸以下為background-size的三個值length規定背景圖的大小。第一個值寬度,第二個值高度。Percentage(%)以百分比為值設定背景圖大小cover把背景圖像擴展至足夠大,以使背景圖像完全涵蓋背景區域29、寫出5大瀏覽器的核心以及他們的代表作品*Trident: IE、Maxthon(遨遊)、騰訊、Theworld世界之窗、360瀏覽器*Gecko:: 代表作品Mozilla Firefox 是開源的*Webkit : 代表作品Safari、Chrome , 是開源專案。*Presto : 代表作品Opera ,Presto是由Opera Software開發的瀏覽器排版引擎。它也是世界上公認的渲染速度最快的引擎。*Blink :由Google和Opera Software開發的瀏覽器排版引擎,2013年4月發布。30、寫出IE6裡面常見的幾種bug以及解決方案(最少4種)1)圖片有邊框BUG 方案:圖片加border:0;或border:0 none;2、雙倍浮向(雙倍邊距) 方案:display:inline3、預設高度(IE6、IE7) 方案:為元素新增宣告:font-size :0; 方案2:為元素新增宣告:overflow:hidden;4、按鈕元素預設大小不一 方案:用a標籤模擬31、IE的過濾器有哪些?1、 _ 底線屬性篩選器2、 \9 : IE版本辨識;其他瀏覽器都不辨識語法:選擇符號{屬性:屬性值\9;}3、 \0 : IE8以上版本辨識;其他瀏覽器無法辨識 語法:選擇符號{屬性:屬性值\0;}32、元素高度塌陷解決方案(至少4種)hack1:為父元素加上宣告overflow:hidden;hack2: 為父元素加heighthack3: 在浮動元素下方新增空p,並給該元素新增 宣告:p{clear:both; height:0; overflow:hidden;}hack4:萬能清除浮動法p:after{content:「.」;clear:both;display:block;height :0;overflow:hidden; visibility:hidden;}The above is the detailed content of Detailed introduction to learning common knowledge points of web front-end. For more information, please follow other related articles on the PHP Chinese website!Related labels:web front endsource:php.cnPrevious article:How to use bootstrap IE8 compatibility processingNext article:Example of ie writing using css3Statement of this WebsiteThe content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cnLatest Articles by AuthorExamples of html settings for bold, italic, underline, strikethrough and other font effects1970-01-01 08:00:00Implement a Java version of Redis1970-01-01 08:00:00The simplest WeChat applet Demo1970-01-01 08:00:00Introduction to simple operation methods of pandas.DataFrame (create, index, add and delete) in python1970-01-01 08:00:00WeChat Mini Program: Example of how to implement tabs effect1970-01-01 08:00:00Python constructs custom methods to beautify dictionary structure output1970-01-01 08:00:00HTML5: Use Canvas to process Video in real time1970-01-01 08:00:00Asp.net uses SignalR to send pictures1970-01-01 08:00:00WeChat Mini Program Development Tutorial-App() and Page() Function Overview1970-01-01 08:00:00Detailed explanation of how to use python redis1970-01-01 08:00:00Latest IssuesDownload pdf from Laravel API via Axios in VueJS 3Hello, I have a VUEJS3 front-end and Laravel8 back-end. I will download the pdf saved in p...From 2023-11-16 12:48:5002301WordPress 6.0 (add_editor_style) does not load style.css in Gutenberg editorI'm taking the UdemyWordPress course to create a custom WordPress block theme. I successfu...From 2023-11-12 20:37:5002261How to simulate a request to a third-party API using the GuzzleHttp client in a Laravel functional test?In a Laravel project (Laravel8 on PHP8.0) I have a functional test where an internal endpo...From 2023-11-09 11:42:5801207Ways to get image: from base64 or ArrayBuffer using VueI have a Flask backend that sends an image to the Vue frontend as described here: withopen...From 2023-11-06 15:34:1301207Heroku/Nuxt: nuxt command not found (sh: 1: nuxt: not found)I ran into a problem where I ended up deploying a server side nuxt app with express server...From 2023-11-05 18:59:0201290Related TopicsMore>What is web front endThree mainstream frameworks for web front-endKnowledge needed for web front-endHow to implement recursive query in mysqlshib coin latest newsHow to open gff fileHow to set link style in cssodmPopular RecommendationsHow to set css to exceed the display ellipsesHow to set font size in cssHow to use hover in cssHow to set character spacing in cssWhat are the new features of css3Popular TutorialsMore>Related TutorialsPopular RecommendationsLatest coursesThe latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)1394902PHP introductory tutorial one: Learn PHP in one week4206594JAVA Beginner's Video Tutorial2350834Little Turtle's zero-based introduction to learning Python video tutorial493318PHP zero-based introductory tutorial826293The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)1394902 times of learningJAVA Beginner's Video Tutorial2350834 times of learningLittle Turtle's zero-based introduction to learning Python video tutorial493318 times of learningQuick introduction to web front-end development213415 times of learningMaster PS video tutorials from scratch842833 times of learning[Web front-end] Node.js quick start3148 times of learningComplete collection of foreign web development full-stack courses2542 times of learningGo language practical GraphQL1988 times of learning550W fan master learns JavaScript from scratch step by step465 times of learningPython master Mosh, a beginner with zero basic knowledge can get started in 6 hours10884 times of learningLatest DownloadsMore>Web EffectsWebsite Source CodeWebsite MaterialsFront End Template[form button] jQuery enterprise message form contact code[Player special effects] HTML5 MP3 music box playback effects[Menu navigation] HTML5 cool particle animation navigation menu special effects[form button] jQuery visual form drag and drop editing code[Player special effects] VUE.JS imitation Kugou music player code[html5 special effects] Classic html5 pushing box game[Picture special effects] jQuery scrolling to add or reduce image effects[Photo album effects] CSS3 personal album cover hover zoom effect[Front-end template] Home Decor Cleaning and Repair Service Company Website Template[Front-end template] Fresh color personal resume guide page template[Front-end template] Designer Creative Job Resume Web Template[Front-end template] Modern engineering construction company website template[Front-end template] Responsive HTML5 template for educational service institutions[Front-end template] Online e-book store mall website template[Front-end template] IT technology solves Internet company website template[Front-end template] Purple style foreign exchange trading service website template[PNG material] Cute summer elements vector material (EPS PNG)[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)[PNG material] Golden graduation cap vector material (EPS PNG)[PNG material] Black and white style mountain icon vector material (EPS PNG)[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses[banner picture] Flat style Arbor Day banner vector material (AI+EPS)[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)[Front-end template] Home Decor Cleaning and Repair Service Company Website Template[Front-end template] Fresh color personal resume guide page template[Front-end template] Designer Creative Job Resume Web Template[Front-end template] Modern engineering construction company website template[Front-end template] Responsive HTML5 template for educational service institutions[Front-end template] Online e-book store mall website template[Front-end template] IT technology solves Internet company website template[Front-end template] Purple style foreign exchange trading service website templateAbout usDisclaimerSitemapphp.cn:Public welfare online PHP training,Help PHP learners grow quickly!