HTML+CSS partial front-end basic interview questions

1. Inline elements and block-level elements? What is img? How to convert inline elements into block-level elements?

Inline elements: and All other elements are on a line, and the height, line height, outer margins, and inner margins cannot be changed. The width of the text image cannot be changed. It can only accommodate text or other inline elements; where img is a line element
Block-level element : Always starts on a new line, the height, line height, margins and padding can all be controlled, and can accommodate inline elements and other elements;
Ways to convert line elements into block-level elements: display: block;

Special Recommendation:Summary of CSS interview questions in 2020 (latest)

2. Set multiple elements How many ways to clear floats for the same row?

Set multiple elements to the same row: float, inline-block
How to clear floats: Method 1: Add new elements, Apply clear: both;
Method 2: Parent p defines overflow: hidden;
Method 3: Use :after and :before to insert two element blocks inside the element to achieve the effect of clearing the float.
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

3. Weird box model box-sizing? Flexible box model | Box layout?

The box model in standard mode: total box width/height=width/height padding border margin
Under the box model in weird mode, the box's The total width and height include padding and border width. The total width/height of the box = width/height margin = content area width/height padding border margin;
box-sizing has two values. One is content-box, the other is border-box.
When set to box-sizing:content-box, standard mode parsing and calculation will be used;
When set to box-sizing:border-box, weird mode parsing and calculation will be used.

4. Briefly describe a few css hacks?

(1) Picture gap
Insert a picture into p, and the picture will expand the bottom of p by 3px. hack1: Write e388a4556c0f65e1904146cc1a846bee and a1f02c36ba31691bcfe87b2722de723b on the same line. Hack2: Add display: block;
dt li to the image gap in a1f02c36ba31691bcfe87b2722de723b. Hack: Add display: block to a1f02c36ba31691bcfe87b2722de723b
(2) Default height. In versions below IE6, some block elements have a default height (less than 18px)
hack1: Add: font-size to the element : 0;
hack2: Statement: overflow: hidden;
The form row height is inconsistent
hack1: Add a statement to the form: float: left; height: ; border: 0;
Mouse pointer
Hack: If you unify the mouse pointer of a certain element to a hand shape: cursor: pointer;
When a in li is converted into a block element, set float to a, and a ladder shape will appear in IE
hack1: Add display to a : inline-block;
hack2: Add float to li: left;

5. The difference between href and src? title and alt

href (Hypertext Reference) Specifies the location of a web resource (hypertext reference), thereby defining a link or relationship between the current element or current document and the required anchor or resource defined by the current attribute. Used on elements such as link and a.
The src (Source) attribute only embeds the current resource into the position defined by the current document element. It is an essential part of the page and is an introduction. Used on img, script, iframe and other elements.
title: It is both an html tag and an html attribute. When title is used as an attribute, it is used to provide additional descriptive information for the element.
alt: alt is an attribute of the html tag, and the alt attribute is used to specify replacement text. It can only be used in img, area and input elements (including applet elements). It is used to provide text descriptions for users to understand the image information when the images on the web page cannot be displayed normally.

6.transform? animation? The difference?animation-duration

Transform: Like width and left, it defines many static styles of elements to implement functions such as deformation, rotation, scaling, displacement, and perspective. Through a combination of functions, we Can achieve very cool static effects (non-animated).
Animation: Acts on the element itself rather than the style attribute. It belongs to the category of keyframe animation. It itself is used to replace some purely expressive javascript code to implement animation. The attribute value of the current frame can be explicitly controlled through keyframe.
animation-duration: Specifies the time it takes to complete the animation, in seconds or milliseconds.

7.nth-of-type | nth-child?

Example:
ff6d136ddc5fdfeffaf53ff6ee95f185 e388a4556c0f65e1904146cc1a846bee11194b3e26ee717c64999d7867364b1b4a3 45a2772a6b6107b401db3c9b82c049c222254bdf357c58b8a65c66d7c19c8e4d114 25edfb22a4f469ecb59f1190150159c61bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c62bed06894275b65c1ab86501b08a632eb < ;li>3bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
li:nth-of-type(2): Represents the second li element under ul
li:nth-child(2): Represents both The li element is the second element under ul (cannot be found).
It is recommended to generally use nth-of-type, which is less likely to cause problems.

8. What is the difference between :before and ::before?

Single colon (:) is used for CSS3 pseudo-classes, and double colon (::) is used for CSS3 pseudo-elements . For pseudo-elements that existed before CSS2, such as :before, the single colon and the double colon::before have the same effect.

9. How to center a p up, down, left, and right?

Answer: There are three methods.

方法1： .p1{ width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   8eb75804e58375c7a2a4dd2914b2cc8394b3e26ee717c64999d7867364b1b4a3 方法2： .p2{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; }  25fdd61924ec43f68f6d130ac257deb194b3e26ee717c64999d7867364b1b4a3 方法3： .p3{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;  }   2b9d554b5f57adf913ed7fb08b7f273594b3e26ee717c64999d7867364b1b4a3

10.css2.0 and css3.0

Answer: css3 strengthens the functions of css2, adds new attributes and new tags, and deletes Some redundant tags reduce the amount of code in terms of layout. The previously complicated layout can now be solved with just one attribute (attributes such as columns). More effects have been added (rounded corners, animations, etc.), and improvements have been made to the box model and list modules. However, CSS3 compatibility is not good, and only some advanced versions of browsers support it.

11. Flexible box model? flex|box difference?

(1) The purpose of introducing the flexible box layout model is to provide a more effective way to Items in the container are arranged, aligned, and white space allocated.

The flexible box layout model can work normally even if the size of the items in the container is unknown or changes dynamically. In this layout model, a container adjusts the size and order of the items it contains to best fill all available space according to the needs of the layout.

When the size of the container changes due to screen size or window size, the items contained in it will also be dynamically adjusted. For example, when the size of the container becomes larger, the items contained in it will be stretched to fill the excess empty space; when the size of the container becomes smaller, the items will be shrunk to prevent them from exceeding the scope of the container. Flexbox layout is direction-independent.

In the traditional layout method, the block layout arranges the blocks in the vertical direction from top to bottom;
The inline layout arranges the blocks in the horizontal direction. Flexbox layout has no such inherent direction restrictions and can be freely manipulated by developers.

(2) The difference between flex and box: display: box is an old standard. If you want to take into account the antique machine, add it; after the parent element has the display: box; attribute. Add the box-flex attribute to its child elements. You can let child elements occupy a certain proportion of space according to the width of the parent element. Flex is the latest and is not supported by Dong Ji's old machines;

After the parent element sets display:flex, the width of the child element will change with the width of the parent element, but display:box will not. Android UC browser only supports display: box syntax; while iOS UC browser supports both methods.

12.viewport all properties?

(1)width: Set the width of the layout viewport, which is a positive integer, or the string 'device-width';
(2)initial-scale: Set the initial scaling value of the page , is a number, with decimals allowed.
(3)minimum-scale: The minimum scaling value allowed by the user, which is a number and can contain decimals.
(4)maximum-scale: The maximum zoom value allowed by the user, which is a number and can contain decimals.
(5)height: Set the height of the layout viewport. This attribute is not important to us and is rarely used.
(6)user-scalable: Whether the user is allowed to zoom, the value is 'no' or 'yes' .
Android also supports: target-densitydpi, which represents the density level of the target device. Its function is to determine how many physical pixels 1px in CSS represents.
(7) target-densitydpi: The value can be a numerical value or high-dpi, One of these strings medium-dpi, low-dpi, device-dpi

13. How to understand the semantics of HTML structure?

The so-called label semantics refers to the meaning of the label. The main purpose of semantics is to let everyone intuitively understand the purpose and function of tags (markup) and attributes (attributes), and to be friendly to search engines. With good structure and semantics, our web page content will naturally be easily crawled by search engines. This approach, which complies with search engine retrieval rules, can save a lot of effort in website promotion and is more maintainable because the structure is clear and very easy to read. This is also an important step in search engine optimization (SEO).

14. Pseudo-class selectors and pseudo-elements? Are there any pseudo-class selectors introduced in c3? What are the pseudo elements in c3?

Pseudo-classes are represented by one colon, while pseudo-elements are represented by two colons.

Pseudo-class selector:
Since the state changes dynamically, when an element reaches a specific state, it may get a pseudo-class style; when the state changes, it will lose this style. .

Pseudo element selector:
is not a selector used for real elements, but a selector used for pseudo elements that have been defined in CSS;

Introduced in c3 Pseudo-class selector:
:root() selector, root selector, matches the root element of the document where element E is located. In an HTML document, the root element is always 100db36a723c770d327fc0aef2ce13b1. The :root selector is equivalent to the 100db36a723c770d327fc0aef2ce13b1 element.

: The:not() selector is called a negative selector, which is exactly the same as the :not selector in jQuery. It can select all elements except a certain element.

:The empty() selector represents empty. Used to select elements without any content. No content here means no content at all, even a space.

: The target() selector is used to specify a style for a target element on the page (the id of the element is used as a hyperlink in the page). This style is only used when the user clicks a hyperlink on the page. And it works after jumping to the target element.

: The first-child() selector represents the selection of the element E that is the first child element of the parent element. A simple understanding is to select the first child element in the element. Remember that it is a child element, not a descendant element.

:nth-child() selects one or more specific child elements of an element.

:nth-last-child() starts counting from the last child element of a parent element to select a specific element

:nth-of-type(n) selector and: The nth-child(n) selector is very similar, except that it only counts child elements of a certain type specified in the parent element.

:only-child means that an element is the only child element of its parent element.

:first-line Use styles for the first line of text of an element.

:first-letter Use a style for the first letter or first word of text in an element.

:before Insert some content before an element.

:after Insert some content after an element.

Pseudo elements in c3:
::first-line selects the first line of the element, for example, changing the style of the first line of text in each paragraph
::before and::after The two are mainly used to insert content in front or behind the element. These two commonly used "content" are used together. The most common one I have seen is to clear the float.
::selection is used to change the default effect of selecting text when browsing web pages

15.What are the new features of html5 and which elements have been removed? How to deal with browser compatibility issues with HTML5 new tags? How to differentiate between HTML and HTML5?

* HTML5 is now no longer a subset of SGML, it is mainly about the addition of images, location, storage, multitasking and other functions.
* Drag and drop API Better semantic content tags (header, nav, footer, aside, article, section) Audio, video API (audio, video) Canvas API Geolocation ) API Local offline storage localStorage long-term storage of data, the data is not lost after the browser is closed;
sessionStorage data is automatically deleted after the browser is closed Form controls, calendar, date, time, email, url, search New technology webworker, websocket, Geolocation
* Removed elements Purely expressive elements: basefont, big, center, font, s, strike, tt, u;
Elements that have a negative impact on usability: frame, frameset, noframes;
Support HTML5 new tags:
* IE8/IE7/IE6 supports tags generated by the document.createElement method. You can use this feature to make these browsers support HTML5 new tags. After the browser supports the new tags, you need to add The default style of the tag:
* Of course, the best way is to directly use a mature framework. The most used one is the html5shim framework6fc79538f41ba7309e847292db36ab30 3f1c4e4b6b16bbbd69b2ee476dc4f83a src=" http://html5shim.googlecode.com/svn/trunk/html5.js"2cacc6d41bbb37262a98f745aa00fbf0 ef8d428f62053f467d29023cecb49d94
* How to distinguish: DOCTYPE statement\new structural element\functional element

16.placeholder? How to make the effect of placeholder compatible on ie8

方法一：
首先判断浏览器是否支持placeholder属性，如果不支持的话，就遍历所有input输入框，获取placeholder属性的值填充进输入框作为提示信息，同时字体设置成灰色。

当输入框获得焦点( focus )同时输入框内文字等于设置的提示信息时，就把输入框内清空；

当输入框失去焦点( blur )同时输入框内文字为空时，再把获取的placeholder属性的值填充
进输入框作为提示信息，同时字体设置成灰色；

当输入框内有输入( keydown )时，此时输入框内的提示信息已经由focus事件清除，此时只需要把字体再恢复成黑色即可

此方法的缺点是，不适用于加载完DOM时即获得焦点的输入框，因为在用户的角度，加载完页面时看到的获得焦点的那个输入框，它的提示文字是看不到的。

HTML：<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>CSS：.phcolor{ color:#999;}JS$(function(){  
  //判断浏览器是否支持placeholder属性  supportPlaceholder=&#39;placeholder&#39;in document.createElement(&#39;input&#39;),
  placeholder=function(input){
    var text = input.attr(&#39;placeholder&#39;),
    defaultValue = input.defaultValue;
    if(!defaultValue){
      input.val(text).addClass("phcolor");
    }
    input.focus(function(){
      if(input.val() == text){
        $(this).val("");
      }
    });
    input.blur(function(){
      if(input.val() == ""){
        $(this).val(text).addClass("phcolor");
      }
    });
    //输入的字符不为灰色    input.keydown(function(){
      $(this).removeClass("phcolor");
    });
  };
  //当浏览器不支持placeholder属性时，调用placeholder函数  if(!supportPlaceholder){
    $(&#39;input&#39;).each(function(){
      text = $(this).attr("placeholder");
      if($(this).attr("type") == "text"){
        placeholder($(this));
      }
    });
  }});

方法二：
此方法的思路是做一张含有提示文字的图片作为input输入框的背景图，初始时获得焦点同时加载背景图；
当输入框不为空时，去掉背景图；
当输入框为空时，加载背景图；
当用户键盘按键且输入框不为空( 输入字符 )时，去掉背景图；
当用户键盘按键且输入框为空( 删除字符 )时，加载背景图。
此方法的缺点是：需要为每一个提示文字不同的input制作背景图片，并且设置input的样式。

CSS：.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}JS$(function(){  
   //判断浏览器是否支持placeholder属性   supportPlaceholder='placeholder' in document.createElement('input');
   if(!supportPlaceholder){
     //初始状态添加背景图片     $("#uname").attr("class","phbg");
     //初始状态获得焦点     $("#uname").focus;
     function destyle(){
      if($("#uname").val() != ""){
        $("#uname").removeClass("phbg");
      }else{
        $("#uname").attr("class","phbg");
       }
     }
     //当输入框为空时，添加背景图片；有值时去掉背景图片     destyle();
     $("#uname").keyup(function(){
      //当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片      destyle();
     });
     $("#uname").keydown(function(){
      //keydown事件可以在按键按下的第一时间去掉背景图片      $("#uname").removeClass("phbg");
     });
   }});

方法三：
使用插件：Placeholders.js

17.常见兼容性问题？

* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理。

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）   #box{ float:left; width:10px; margin:0 0 0 100px;}  这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

*  渐进识别的方式，从总体中逐渐排除局部。    首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。    接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。  
css// .bb{ background-color:#f1ee18; .background-color:#00deff\9;        +background-color:#a200ff;  _background-color:#1e0bd1;  }  

*  IE下,可以使用获取常规属性的方法来获取自定义属性,    也可以使用getAttribute()获取自定义属性;    Firefox下,只能使用getAttribute()获取自定义属性.     解决方法:统一通过getAttribute()获取自定义属性。

* IE下,event对象有x,y属性,但是没有pageX,pageY属性;    Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,    可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

* 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

* 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：`0583f58d9786e05a39f68209743461b5`

* 上下margin重合问题
ie和ff都存在，相邻的两个p的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

* ie6对png图片格式支持不好(引用一段脚本处理)

18.简述前端优化的方式 旧的雅虎34条|h5新添加的方式

1. Minimize the number of HTTP requests
2. Reduce the number of DNS lookups
3. Avoid jumps
4. Cacheable AJAX
5. Delay loading of content
6. Preparation Loading
7. Reduce the number of DOM elements
8. Divide page content according to domain names
9. Minimize the number of iframes
10. Do not cause 404 errors
11. Use content distribution network
12. Specify Expires or Cache-Control for the file header 13. Gzip compress the file content
14. Configure ETag
15. Refresh the output buffer as early as possible
16. Use GET to complete the AJAX request
17. Put style sheets at the top
18, Avoid using CSS expressions
19, Use external JavaScript and CSS
20, Cut JavaScript and CSS
21, Use 2cdf5bf648cf2f33323966d7f58a7f3f instead of @ import
22. Avoid using filters
23. Place the script at the bottom of the page
24. Eliminate duplicate scripts

19.jquery version? 1.11 compatible?

The Query 2.x series has the same API as jQuery 1.x, but it no longer supports IE6, 7, and 8.
It is recommended to use the 1.x version, unless you are sure that IE6, 7, and 8 users will no longer access the website.
jquery1.11 belongs to the 1.x version, which is compatible with IE6, 7, and 8, so it also supports IE9.

20. Block level? Inside the industry? Empty elements?

Inline elements: They are on the same line as other elements. The height, line height, outer margins, and inner margins cannot be changed. The width of the text image cannot be changed and can only accommodate text. Or other inline elements
Block-level elements: always start on a new line, height, line height, margins and padding can be controlled, can accommodate inline elements and other elements;
Empty elements: in HTML Elements, HTML elements without content are called empty elements. Empty elements are closed in the opening tag. 0c6dc11e160d3b678d68754cc175188a is an empty element without a closing tag.

21.media attribute? screen? All? The max-width?min-width?

media attribute specifies the device on which the linked document will be displayed. The media attribute is used to specify different styles for different media types. Screen is the computer's default screen, all is applicable to all devices, max-width will not be executed if it exceeds the maximum width, and min-width must be greater than the minimum width before execution.

22. What is the name attribute value of the meta tag?

The name attribute is mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly used by search engine robots to find information and classify information.
The syntax format of the name attribute of the meta tag is: .
The name attribute mainly has the following parameters:
A. Keywords (keywords) description: keywords are used to tell the search engine what the keywords of your web page are.
B, description (website content description) Description: description is used to tell search engines the main content of your website.
C, robots (robot guide) description: robots are used to tell search robots which pages need to be indexed and which pages No index is required.
The parameters of content include all, none, index, noindex, follow, nofollow, and the default is all.
Example: ＜meta name="robots" content="none"＞D, author(author)

23. How many ways are there to cut pictures on mobile pages?

Responsive layout, flexible layout display: flex, use js to write and set the proportion, set pixels for the root element, and use rem as the unit.

24. What is the difference between px/em/rem? Why is the font size usually set to 62.5%

The font size relative to the text in the current object. If the current font size for inline text has not been manually set, it will be relative to the browser's default font size.
1. The value of em is not fixed;
2. Em will inherit the font size of the parent element. When using rem to set the font size for an element, it is still a relative size, but it is only relative to the HTML root element. This unit can be said to combine the advantages of relative size and absolute size. Through it, you can adjust all font sizes proportionally by modifying only the root element, and you can avoid the chain reaction of compounding font sizes layer by layer.
rem is scaled relative to the browser. The default value of 1rem is 16px. In responsive layout, it is too troublesome to convert one by one into rem, so reset rem
body{font-size=62.5% } At this time 1rem = 10px; if it is 12px, it is 1.2rem .

25. What is the difference between sass and scss? How is sass generally compiled?

The file extensions are different. Sass uses the ".sass" suffix as the extension. , and SCSS uses the ".scss" suffix as the extension; the syntax is written differently. Sass is written with strict indented syntax rules, without braces ({}) and semicolons (;), while SCSS's The syntax writing is very similar to our CSS syntax writing.

26. How to deal with optimization of css?

Compress and package, integrate images, avoid using Hack, solve compatibility issues, use abbreviations, so that CSS can ensure future maintenance.

27. How to compress and merge css files? gulp ?

Use gulp, install gulp globally on the homepage.
1. npm install --global gulp
2. Secondly, install gulp locally. npm install gulp --save-dev
3. Create a file named gulpfile.js in the project root directory
var gulp = require('gulp');
gulp.task('default' , function() {
//Put your default task code here});
4. Run gulp. (The default task named default will be run. If you want to execute a specific task separately, please enter gulp 5a3616b73b29b6ef8523164b750a7aee 7d6b528363c38dfdf8956b7f1cce7869)
gulp
Merge and compress JS , CSS file
Compress JS, CSS file needs to reference the following components:
gulp-minify-css: Compress css

28. Component? Modular programming?

Component programming: wrap js css html together to provide methods and effects;
Modularization: extract the same functions and store them in one location for programming

29. Display pictures and text on the same line?

1 Add the "vertical-align:middle" attribute to p in css.
2 Put the pictures and text into different p respectively, and then use the "margin" attribute to position them so that they can be displayed on the same line.
3 Set the image as the background image.

30. Disable event bubbling

event.stopPropagation()

31. Disable default events

event.preventDefault()

32. What is the correct setting sequence for the active hover link visited in the a tag?

a tag’s link, visited, hover, Active has a certain order
a:link
a:visited
a:hover
a:active

33. How to disable href jump page in a tag Or locate the link

e.preventDefault();
href="javascript:void(0);

34. Long-term clicks on pictures on the mobile phone will cause How to deal with selected pictures?

onselect=function() {
return false
}

35. Several attribute methods of video tag

src: URL of the video poster: video cover, no picture displayed during playback preload: preloading autoplay: automatic playback loop: loop playback controls: browser's own control bar width: video width height : Video height

36. How many common video encoding formats are there? How many video formats are there?

Video formats: MPEG-1, MPEG-2 and MPEG4 , AVI, RM, ASF and WMV formats
Video encoding formats: H.264, MPEG-4, MPEG-2, WMA-HD and VC-1

37.canvas on the label What is the difference between setting the width and height and setting the width and height in the style?

The width and height of the canvas tag are the actual width and height of the canvas, and the graphics are drawn on this. And the width and height of the style Height is the height and width of the canvas when it is rendered in the browser. If the width and height of the canvas are not specified or the values ​​are incorrect, they are set to the default values.

38.border-image?box -sizing?

Border-image : Graphical border
Box-sizing : Property allows you to define specific elements that match a certain area in a specific way.
Syntax: box-sizing: content-box | border-box
Content-box: padding and border are not included in the defined width and height. The actual width of the object is equal to the sum of the set width value, border, and padding, that is (Element width = width border padding). This property behaves as a box model in standard mode.
Border-box: padding and border are included in the definition Within the width and height. The actual width of the object is equal to the set width value. Even if border and padding are defined, the actual width of the object will not be changed, that is (Element width = width). This attribute behaves like a box model in weird mode.

39. Progressive enhancement and graceful degradation

Progressive enhancement: Build pages for low-version browsers to ensure the most basic functions, and then improve effects, interactions, and add functions for advanced browsers to achieve a better user experience.
Graceful degradation: Build complete functionality from the beginning, and then make it compatible with lower version browsers.
Difference: Graceful degradation starts from the complex status quo and tries to reduce the supply of user experience, while progressive enhancement starts from a very basic, functioning version and continues to expand to adapt to the needs of the future environment. .
Degradation (functional decay) means looking back; while progressive enhancement means looking forward, while ensuring that its foundation is in a safe zone.
"Elegant downgrade" point of view
The "graceful downgrade" point of view believes that the website should be designed for the most advanced and complete browsers. Arrange the testing of browsers that are considered "outdated" or have missing functions at the last stage of the development cycle, and limit the test objects to the previous version of mainstream browsers (such as IE, Mozilla, etc.).
Under this design paradigm, older browsers are considered to provide only a "poor, but passable" browsing experience. You can make some small adjustments to suit a specific browser. But since they are not the focus of our attention, other differences will be ignored except for fixing larger bugs.
"Progressive enhancement" perspective
The "progressive enhancement" perspective believes that focus should be on the content itself.
Content is our incentive to build a website. Some websites display it, some collect it, some seek it, some operate it, and some websites even include all of the above, but the same thing is that they all involve content. This makes "progressive enhancement" a more reasonable design paradigm. That's why it was immediately adopted by Yahoo! and used to build its "Graded Browser Support" strategy.
Then the question comes. Now the product manager sees that the web page effects of IE6, 7, and 8 are much less rounded corners and shadows (CSS3) than modern browsers of higher versions, and they require compatibility (use image backgrounds and abandon CSS3). How will you convince him?

40. Explain the weird box model and the weird box model and flexible box model of c3 in lower versions of IE?

IE When the value of padding border is less than width or height:
The width of the box model = margin (left and right) width (width already contains the values ​​of padding and border)
The height of the box model = margin (up and down) height (height already contains the values ​​of padding and border)
When the value of padding border is greater than width or height:
The width of the box model = margin (left and right) padding (left and right) border (left and right)
The height of the box model = margin (up and down) padding (up and down) border (top and bottom) 19px (plus a default line height of 19px) So it is equivalent to the padding border and width or height ratio, whichever is larger.
The above DOCTYPEs are all standard document types. No matter which mode is used to completely define the DOCTYPE, the standard mode will be triggered. If the DOCTYPE is missing, the weird mode (quirks mode) will be triggered under ie6, ie7, and ie8 CSS3box -sizing has two values, one is content-box and the other is border-box.
When set to box-sizing:content-box, the standard mode will be used for analysis and calculation, which is also the default mode;
When set to box-sizing:border-box, the weird mode will be used for analysis and calculation;
Css3 flexbox model introduces a new box model - the flexbox model, which determines how a box is distributed among other boxes and how the available space is treated. Using this model, you can easily create a fluid layout that adapts to the browser window or a flexible layout that adapts to the font size.

41.Animation corresponding attributes

Writing method: animation: name duration timing-function delay iteration-count direction;
The following is an introduction to the corresponding attributes
animation-name specifies the keyframe name that needs to be bound to the selector.
animation-duration specifies the time it takes to complete the animation, in seconds or milliseconds.
animation-timing-function Specifies the speed curve of animation.
animation-delay Specifies the delay before the animation starts.
animation-iteration-count Specifies the number of times the animation should be played.
animation-direction Specifies whether the animation should be played in reverse in turn.

42.transition?

css transition allows css attribute values ​​​​to transition smoothly within a certain time interval. This effect can be triggered by a mouse click, focus, being clicked, or any change to the element, and smoothly changes the CSS property value with an animation effect. Note the difference between transform, which performs 2D transformations such as movement, scaling, and inversion. Come over, rotate, and stretch elements.

43.h5 new features?

1、绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，比如 calendar、date、time、email、url、search

44.canvas 如何绘制一个三角形|正方形  

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。
这两个函数加起来就是画一条直线。 画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。 每次与前面一个坐标相连 。
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

<!DOCTYPE HTML5><html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>画布</title>
  </head> <body>
     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
     Your browser does not support the canvas element.     </canvas>
     <script type="text/javascript">
         var c=document.getElementById("myCanvas");//三角形         var cxt=c.getContext("2d");
         cxt.moveTo(10,10);
         cxt.lineTo(50,50);
         cxt.lineTo(10,50);
         cxt.lineTo(10,10);
         cxt.stroke();//正方形         var cxt2=c.getContext("2d");
         cxt2.moveTo(60,10);
         cxt2.lineTo(100,10);
         cxt2.lineTo(100,50);
         cxt2.lineTo(60,50);
         cxt2.lineTo(60,10);
         cxt2.stroke(); 
     </script></body></html>

45.所用bootstap版本？

3.0

46.css清除浮动的几种方式？

1、父级p定义 height
2、结尾处加空p标签 clear:both
3、父级p定义 伪类:after 和 zoom  
4、父级p定义 overflow:hidden  
5、父级p定义 overflow:auto  
6、父级p 也一起浮动
7、父级p定义 display:table

47.为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

48.CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋转,缩放,定位,倾斜增加了更多的CSS选择器  多背景 rgba 在CSS3中唯一引入的伪元素是::selection.媒体查询，多栏布局 border-image

49.解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。

50.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁
6e4c09dfadbdc8532a2121b9890677a7@import "../fouc.css";531ac245ce3e4fe3d50054a55f265927
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法：只要在93f0f5c25f18dab9d176bd4f6de5d30e之间加入一个2cdf5bf648cf2f33323966d7f58a7f3f或者3f1c4e4b6b16bbbd69b2ee476dc4f83a元素就可以了。

51.a点击出现框，解决方法:

a,a:hover,a:active,a:visited,a:link,a:focus{ 
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 outline:none;background: none;
 text-decoration: none;border:none;
 -webkit-appearance: none; }

相关教程推荐：CSS视频教程

The above is the detailed content of HTML+CSS partial front-end basic interview questions. For more information, please follow other related articles on the PHP Chinese website!