40. IE's two-sided distance BUG: Set the horizontal margin after the block-level element float, and the margin displayed by ie6 is larger than the setting.
Solution: add display: inline
41. HTML and XHTML-what is the difference between the two?
- All tags must have a corresponding closing tag
- The names of all tag elements and attributes must be lowercase
- All XML tags must be reasonably nested
- All attributes must be enclosed in quotation marks ""
- Use codes to represent all <and & special symbols
- Assign a value to all attributes
- Do not use "–" in the comment content
- Picture must have description text
42. Common html compatibility issues?
1. The display
2.3 pixel problem caused by the double-sided distance BUG float . The use of dislpay: inline -3px caused by the use of float
3. The hyperlink hover becomes invalid after being clicked. Use the correct writing order link visited hover active
4. Ie z-index problem to the parent Add position: relative
5. Png transparent use js code to change
6. Min-height minimum height! Important to solve'
7. Select to cover under ie6 using iframe nesting
8. Why is there no way to define a width container of about 1px (caused by the default line height of IE6, use over: hidden, zoom: 0.08 line-height: 1px)
9. IE5-8 does not support opacity, the solution:
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
- IE6 does not support PNG transparent background, the solution: use gif images under IE6
43. Understanding and understanding of WEB standards and W3C
Answer: closed tags, lowercase tags, no random nesting, improved search probability of search robots, use of external link css and js scripts, separation of structural behavior performance, faster file downloads and pages, and content that can be accessed by more users , The content can be accessed by a wider range of devices, with fewer codes and components, easy to maintain, easy to modify, no need to change the page content, provide a printed version without the need to copy the content, and improve the ease of use of the website.
44. What are the inline elements? What are the block-level elements? CSS box model?
Answer: Block-level elements: div p h1 h2 h3 h4 form ul Inline
elements: ab br i span input select
Css box model: content, border, margin, padding
45. What are the three layers of front-end pages, and what are they? What are their functions?
Answer: The structural layer Html represents the CSS behavior layer js.
46. What does Doctype do? Strict mode and promiscuous mode-how to trigger these two modes, and what's the point of distinguishing them?
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
47. What are the elements in the line? What are the block-level elements? What are the void elements?
(1) The CSS specification stipulates that each element has a display attribute to determine the type of the element. Each element has a default display value. For example, the default display attribute value of div is "block", which becomes a "block-level" element; span The default display attribute value is "inline", which is an "inline" element.
(2) In-line elements are: ab span img input select strong (emphasized tone) Block-level elements are: div ul ol li dl dt dd h1 h2 h3 h4...p
(3) Well-known empty elements:
<br><hr><img><input><link><meta>
lesser-known are:
<area><base><col><command><embed><keygen><param><source><track><wbr>
48. CSS box model?
(1) Two types, IE box model and standard W3C box model; the content part of IE includes border and pading;
(2) Box model: content, padding, margin, border .
49. What are the CSS selectors? Which properties can be inherited? How is the priority algorithm calculated? What are the new pseudo-classes in CSS3?
* 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 ;
* 优先级就近原则，样式定义最近者为准;
* 载入样式以最后载入的定位为准;
The priority is:
!important > id > class > tag
important 比 内联优先级高
CSS3 new pseudo-class example:
p:first-of-type selects <p>each <p>element belonging to the first element of its parent element.
p: last-of-type parent element belonging to the last selected <p>each element <p>element.
p: only-of-type that belongs to a unique parent element <p>for each element of <p>the element.
p: only-child selecting each unique sub-elements belonging to the parent element <p>element.
p: nth-child (2) belonging to each of the selected parent element of the second subelement <p>element.
:enabled, :disabled control the disabled state of form controls.
:checked, the radio button or check box is selected.
50.How to center a div and how to center a floating element?
Set a width to the div, and then add the margin:0 auto attribute
div{
width:200px;
margin:0 auto;
}
Center a floating element.
Determine the container's width, height, and width of 500 and 300, and
set the outer margin of the layer
.div {
width:500px ;
height:300px;//高度可以不设
margin: -150px 0 0 -250px;
position:relative;//相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
51. What is the kernel of the browser? What are the compatibility of the browsers frequently encountered? The reason, what is the solution, and common hack techniques?
* IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；
* png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #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; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
* IE下,even对象有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 {}
52. List the value of display and explain their role. What is the value of position, relative and absolute positioning origin?
- 1. The block is displayed like a block type element.
The default value of none. It is displayed as the type of inline element.
Inline-block is displayed like an inline element, but its content is displayed like a block type element.
The list-item is displayed like a block type element, and style list tags are added. - 2.position value
- Absolute
generates absolutely positioned elements, which are positioned relative to the first parent element other than static positioning. - fixed (old IE does not support)
generates absolutely positioned elements, which are positioned relative to the browser window. - relative
generating element relative positioning, positioning relative to its normal position. - static default value. Without positioning, the element appears in the normal flow
* (ignore the top, bottom, left, right z-index declarations). - inherit specifies that the value of the position attribute is inherited from the parent element.
- Absolute
53. What is the difference between the calculation method of absolute containing block and normal flow?
No matter which type it belongs to, it is necessary to find the nearest element whose position value is not static in its ancestor element, and then judge:
1. If this element is an inline element, then the containing block is the first sum that can contain this element. The smallest rectangle of the padding box (except margin and border) of the last inline box;
2. Otherwise, it is composed of the padding box of this ancestor element. If none is found, it is the initial containing block.
supplement:
- static (default)/relative: Simply put, it is the content box of its parent element (that is, the padding part is removed)
- absolute: find the closest element positioned as absolute/relative upward
- fixed: Its containing block is always the root element (html/body), and the root element is also the initialcontaining block
54. What happens when the position and display, margin collapse, overflow, and float are superimposed on each other?
Floating lines become block-level elements, and absolutely positioned lines also become block-level elements. Floating is invalid in absolute positioning, top, bottom, left, right can change the position. The margins in the vertical direction of adjacent common flow block levels are overlapped. Floating, inline-block, absolute positioning will not overlap with the margins of other elements in the vertical direction. BFC will not overlap with sub-element margins. (absolute, fixed are absolute positioning) For
details, please click
55. Repeat it, don't
56. What is the basic sentence composition of css?
Selector {attribute 1: value 1; attribute 2: value 2;...}
57. What is the difference between browser standard mode and weird mode?
The different detailed explanations of the box model rendering mode
can be clicked to jump
58. What attributes can be defined in CSS to prevent a DOM element from being displayed in the browser's visual range?
The most basic:
set the display property to none, or set the visibility property to hidden
Skills:
set the width and height to 0, set the transparency to 0, and set the z-index position to -1000
59. What is the problem that the hover style does not appear after the hyperlink is visited? How to solve?
Answer: The hyperlink styles that have been clicked and visited no longer have hover and active. The
solution is to change the order of CSS properties: LVHA (link, visited, hover, active)