Home > Article > Web Front-end > Summary of important and difficult knowledge points in HTML and CSS

Summary of important and difficult knowledge points in HTML and CSS

小云云Original: 2018-03-02 10:33:171890browse

This article mainly shares with you a summary of the important and difficult knowledge points of HTML and CSS, hoping to help everyone.

How to center a p with variable width and height vertically and horizontally?
Using Flex

You only need to set: display in the parent box : flex; justify-content: center;align-items: center;

Use CSS3 transform

Parent box settings: position:relative
p settings: transform: translate(-50% , -50%);position: absolute;top: 50%;left: 50%;

Use display:table-cell method

Parent box settings: display:table-cell; text -align:center;vertical-align:middle;
p Settings: display:inline-block;vertical-align:middle;

2. Position The functions of several attributes
Four common positions Attribute values: relative, absolute, fixed, static. Generally used in conjunction with the "left", "top", "right" and "bottom" attributes.

static: Default location. Under normal circumstances, we do not need to declare it specifically, but sometimes when encountering inheritance, we do not want to see the attributes inherited by the element affect itself, so we can use Position:static to cancel the inheritance, that is, to restore the positioning of the element. default value. An element set to static will always be at the position given by the page flow (static elements ignore any top, bottom, left or right declarations). Generally not commonly used.
relative: Relative positioning. Relative positioning is relative to the default position of the element. Its offset top, right, bottom, and left values are all offset based on its original position, regardless of what will happen to other elements. Note that the relative moved element still occupies space in its original position.
absolute: Absolute positioning. For an element set to absolute, if its parent container has the position attribute set, and the position attribute value is absolute or relative, it will be offset according to the parent container. If its parent container does not set the position property, the offset is based on body. Note that elements with the absolute attribute set do not occupy a position in the standard flow.
fixed: Fixed positioning. Elements whose position is set to fixed can be positioned at specified coordinates relative to the browser window. The element will stay in that position whether the window is scrolled or not. It is always based on body. Note that elements with the fixed attribute set do not occupy a position in the standard flow.

Floating and clearing float
3.1 Floating related knowledge
The value of the float attribute:

left: The element floats to the left .
right: The element floats to the right.
none: Default value. The element is not floated and appears where it appears in the text.

Characteristics of floating:

Floating elements will be separated from the normal document flow, but floating elements not only affect themselves, they will also affect the alignment and surrounding elements of the surrounding elements.
Regardless of whether an element is an inline element or a block-level element, if it is set to float, the floating element will generate a block-level box, and its width and height can be set. Therefore, float is often used to create horizontally arranged menus. Set size and align horizontally.

The display of floating elements will have different rules under different circumstances:

When a floating element is floating, its margin will not exceed the padding of the containing block. PS: If you want the element to exceed, you can set the margin attribute
If one of the two elements floats to the left and the other floats to the right, the marginRight of the left floating element will not be adjacent to the marginLeft of the right floating element.
If there are multiple floating elements, the floating elements will be arranged in order without overlap.
If there are multiple floating elements, the height of the following element will not exceed the previous element, and will not exceed the containing block.
If there are non-floating elements and floating elements at the same time, and the non-floating elements are in front, the floating elements will not be higher than the non-floating elements
The floating elements will be aligned to the top, left or right as much as possible

Overlap problem

If an inline element overlaps a floating element, its border, background and content will be displayed on top of the floating element
When a block-level element overlaps a floating element, the border and The background will be displayed below the floating element, and the content will be displayed above the floating element

clear property
clear property: Ensure that there are no floating elements on the left and right sides of the current element. clear only affects the layout of the element itself.
Values: left, right, both
3.2 The problem of parent element height collapse
Why should we clear the float and the parent element height collapse
Solve the problem of parent element height collapse: If a block-level element does not set height , whose height is expanded by child elements. After using float on the child element, the child element will break away from the standard document flow. That is to say, there is no content in the parent element to expand its height, so the height of the parent element will be ignored. This is the so-called height collapse.
3.3 Method of clearing floats
Method 1: Define height for parent p
Principle: Defining a fixed height (height) for parent p can solve the problem of parent p being unable to obtain the height.
Advantages: Simple code
Disadvantages: The height is fixed, so it is suitable for modules with fixed content. (Not recommended)
Method 2: Use empty elements, such as

(.clear{clear:both})
原理：添加一对空的 p 标签，利用 css 的 clear:both 属性清除浮动，让父级 p 能够获取高度。
优点：浏览器支持好
缺点：多出了很多空的 p 标签，如果页面中浮动模块多的话，就会出现很多的空置 p 了，这样感觉视乎不是太令人满意。（不推荐使用）
方法三：让父级 p 也一并浮起来
这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。不推荐使用
方法四：父级 p 定义 display:table
原理：将 p 属性强制变成表格
优点：不解
缺点：会产生新的未知问题。（不推荐使用）
方法五：父元素设置 overflow：hidden、auto；
原理：这个方法的关键在于触发了 BFC。在 IE6 中还需要触发 hasLayout（zoom：1）
优点：代码简介，不存在结构和语义化问题
缺点：无法显示需要溢出的元素（亦不太推荐使用）
方法六：父级 p 定义伪类: after 和 zoom

.clearfix:after{ 
content:’.’; 
display:block; 
height:0; 
clear:both; 
visibility: hidden; 
}

.clearfix {zoom:1;}
原理：IE8 以上和非 IE 浏览器才支持: after，原理和方法 2 有点类似，zoom(IE 转有属性) 可解决 ie6,ie7 浮动问题
优点：结构和语义化完全正确, 代码量也适中，可重复利用率（建议定义公共类）
缺点：代码不是非常简洁（极力推荐使用）
经益求精写法

.clearfix:after { 
content:”\200B”; 
display:block; 
height:0; 
clear:both; 
} 
.clearfix {*zoom:1;} 照顾 IE6，IE7 就可以了

4.BFC 相关知识
定义：BFC(Block formatting context) 直译为 “块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
BFC 布局规则
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC 这个元素的垂直方向的边距会发生重叠，垂直方向的距离由 margin 决定，取最大值
BFC 的区域不会与浮动盒子重叠（清除浮动原理）。
计算 BFC 的高度时，浮动元素也参与计算。

哪些元素会生成 BFC

根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不为 visible

5.box-sizing 是什么
设置 CSS 盒模型为标准模型或 IE 模型。标准模型的宽度只包括 content，二 IE 模型包括 border 和 padding
box-sizing 属性可以为三个值之一：

content-box，默认值，只计算内容的宽度，border 和 padding 不计算入 width 之内
padding-box，padding 计算入宽度内
border-box，border 和 padding 计算入宽度之内

6.px，em，rem 的区别
px 像素 (Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem 是 CSS3 新增的一个相对单位 (root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
7.CSS 引入的方式有哪些? link 和 @import 的区别是?
有四种：内联 (元素上的 style 属性)、内嵌 (style 标签)、外链 (link)、导入 (@import)
link 和 @import 的区别：

link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。
link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

流式布局与响应式布局的区别
流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

超小屏幕 (移动设备) 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

Because responsive development seems more cumbersome, it is generally completed using a third-party responsive framework, such as bootstrap to complete part of the work. Of course, you can also write responsive development yourself.
Difference

-
Flow layout
Responsive development

Development method
Mobile Web development + PC development
Responsive development

Application Scenario
Generally, when there is already a PC website, when developing a mobile version, you only need to develop the mobile version separately
For some new websites, it is now required to adapt to the mobile version, so a set of pages is compatible with various Terminal

Development
Strong alignment, high development efficiency
Compatible with various terminals, low efficiency

Adaptation
Only adapted to mobile devices, the experience on the pad is relatively Poor
Can be adapted to various terminals

Efficiency
Simple code, fast loading
Relatively complex code, slow loading

Progressive enhancement and Graceful degradation
The key difference is what they focus on, and the difference in workflow caused by this difference

Graceful degradation builds complete functionality at the beginning, and then targets Lower version browsers are compatible. .
Progressive enhancement builds pages for low-version browsers to ensure the most basic functions, and then improves effects and interactions and adds additional functions for advanced browsers to achieve a better user experience.

Difference:

Graceful downgrade starts from the complex status quo and tries to reduce the supply of user experience
Progressive enhancement starts from a very basic version that can work. And continue to expand to adapt to the needs of the future environment
Downgrade (functional attenuation) means looking back; while progressive enhancement means looking forward while ensuring that its foundation is in a safe zone

10.CSS Several ways and differences of hiding elements
display:none

The element will disappear completely on the page, and the space originally occupied by the element will be occupied by other elements, which means it will cause the browser to reload. Row and redraw.
The click event will not be triggered

visibility:hidden

The difference between display:none is that after the element disappears from the page, the space it occupies will still be retained, so it only Will cause the browser to redraw without reflowing.
Cannot trigger its click event
Suitable for those scenarios where the page layout is not expected to change after the element is hidden

opacity:0

After setting the transparency of the element to 0, In the eyes of our users, elements are also hidden. This is a method of hiding elements. One thing that
and visibility:hidden have in common is that the element still occupies space after being hidden, but we all know that after setting the transparency to 0, the element is just invisible, and it still exists on the page.
Click events can be triggered

Set the box model attributes such as height and width to 0

Simply put, the margin, border, padding, height and width of the element affect the element box model The attribute is set to 0. If there are child elements or content within the element, its overflow:hidden should also be set to hide its child elements. This is a kind of trick.
If the border, padding and other attributes of the element are set to non-0, obviously, the element can still be seen on the page, and there is no problem in triggering the click event of the element. If all attributes are set to 0, it is obvious that the element disappears, that is, the click event cannot be triggered.
This method is neither practical nor may have some problems. But some page effects we usually use may be completed in this way, such as jquery's slideUp animation, which sets the element's overflow:hidden and then continuously sets the element's height and margin-top through a timer. , margin-bottom, border-top, border-bottom, padding-top, padding-bottom are 0, thus achieving the slideUp effect.

Other creative methods

Set the element's position and left, top, bottom, right, etc., and move the element out of the screen
Set the element's position and z-index, change z -index is set to as small a negative number as possible

Briefly describe the difference between src and href
href points to the location of the network resource, establishes the current element (anchor) or the current document A link between (links), used for hyperlinks.
src points to the location of external resources. The pointed content will be embedded in the document at the location of the current tag; when requesting the src resource, the resource pointed to will be downloaded and applied to the document, such as js scripts, img images and frame and other elements. When the browser parses this element, it will pause the downloading and processing of other resources until the resource is loaded, compiled, and executed. The same is true for elements such as pictures and frames, which is similar to embedding the pointed resource into the current tag. This is also why the js script is placed at the bottom instead of the head.
What are the inline elements? What are block-level elements? What are the void elements?
This question is occasionally asked in interviews and I am a bit confused~~~ I usually don’t pay attention to it. . . .
Inline elements: a, b, span, img, input, strong, select, label, em, button, textarea
Block-level elements: p, ul, li, dl, dt, dd, p, h1- h6, blockquote
Empty elements: HTML elements without content, such as: br, meta, hr, link, input, img

How to center a p with variable width and height vertically and horizontally?
Using Flex

Only need to place it in the parent box Settings: display: flex; justify-content: center;align-items: center;

Use CSS3 transform

Parent box settings: position:relative
p Settings: transform: translate( -50%, -50%);position: absolute;top: 50%;left: 50%;

Use display:table-cell method

Parent box settings: display:table- cell; text-align:center;vertical-align:middle;
p Setting: display:inline-block;vertical-align:middle;

2.position The role of several attributes
position Four common attribute values: relative, absolute, fixed, static. Generally used in conjunction with the "left", "top", "right" and "bottom" attributes.

static: Default location. Under normal circumstances, we do not need to declare it specifically, but sometimes when encountering inheritance, we do not want to see the attributes inherited by the element affect itself, so we can use Position:static to cancel the inheritance, that is, to restore the positioning of the element. default value. An element set to static will always be at the position given by the page flow (static elements ignore any top, bottom, left or right declarations). Generally not commonly used.
relative: Relative positioning. Relative positioning is relative to the default position of an element. Its offset values of top, right, bottom, and left are all offset based on its original position, regardless of what will happen to other elements. Note that the relative moved element still occupies space in its original position.
absolute: Absolute positioning. For an element set to absolute, if its parent container has the position attribute set, and the position attribute value is absolute or relative, it will be offset according to the parent container. If its parent container does not set the position property, the offset is based on body. Note that elements with the absolute attribute set do not occupy a position in the standard flow.
fixed: Fixed positioning. Elements whose position is set to fixed can be positioned at specified coordinates relative to the browser window. The element will stay in that position whether the window is scrolled or not. It is always based on body. Note that elements with the fixed attribute set do not occupy a position in the standard flow.

Floating and clearing float
3.1 Floating related knowledge
The value of the float attribute:

left: The element floats to the left .
right: The element floats to the right.
none: Default value. The element is not floated and appears where it appears in the text.

Characteristics of floating:

Floating elements will be separated from the normal document flow, but floating elements will not only affect themselves, they will also affect the alignment and surrounding elements of the surrounding elements.
Regardless of whether an element is an inline element or a block-level element, if it is set to float, the floating element will generate a block-level box, and its width and height can be set. Therefore, float is often used to create horizontally arranged menus. Set size and align horizontally.

The display of floating elements will have different rules under different circumstances:

Overlap problem

(.clear{clear:both})
Principle: Add a pair of empty p tags, use the clear:both attribute of css to clear the float, so that the parent p can obtain the height.
Advantages: Good browser support
Disadvantages: There are a lot of empty p tags. If there are many floating modules on the page, there will be a lot of empty p tags, which does not seem very satisfactory. (Not recommended)
Method 3: Let the parent p also float
This can initially solve the current floating problem. But it also makes the parent float, which will cause new floating problems. Not recommended
Method 4: Parent p definition display:table
Principle: Force the p attribute into a table
Advantages: Puzzling
Disadvantages: New unknown problems will arise. (Not recommended)
Method 5: Parent element setting overflow: hidden, auto;
Principle: The key to this method is to trigger BFC. In IE6, hasLayout (zoom: 1) also needs to be triggered
Advantages: Code introduction, no structural and semantic problems
Disadvantages: Unable to display elements that need to overflow (not recommended)
Method 6 : Parent p defines pseudo-classes: after and zoom
.clearfix:after{
content:'.';
display:block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {zoom:1;}
Principle: IE8 or above and non-IE browsers only support: after, the principle is somewhat similar to method 2, zoom (IE transfer has Property) can solve the floating problem of ie6 and ie7
Advantages: The structure and semantics are completely correct, the code amount is moderate, and the reusability rate (it is recommended to define a public class)
Disadvantages: The code is not very concise (highly recommended)
Jingyiqiujing writing method
.clearfix:after {
content:”\200B”;
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;} Take care of IE6 and IE7

For detailed knowledge about floating, please refer to this article:
http://luopq.com/2015/ 11/08/CSS-float/

4.BFC related knowledge
Definition: BFC (Block formatting context) literally translates as "block-level formatting context". It is an independent rendering area, with only Block-level boxes participating. It specifies how the internal Block-level Boxes are laid out and has nothing to do with the outside of this area.
BFC layout rules
BFC is an isolated independent container on the page. The sub-elements in the container will not affect the elements outside. And vice versa.

BFC The vertical margins of this element will overlap. The vertical distance is determined by margin. The maximum value
BFC area will not overlap with the floating box (clear the floating principle).
When calculating the height of BFC, floating elements also participate in the calculation.

Which elements will generate BFC

Root element
float attribute is not none
position is absolute or fixed
display is inline-block, table-cell, table- caption, flex, inline-flex
overflow is not visible

5.box-sizing What is
Set the CSS box model to the standard model or IE model. The width of the standard model only includes content, and the second IE model includes border and padding. The
box-sizing attribute can be one of three values:

content-box, the default value, only calculates the width of the content, border and padding are not calculated into the width
padding-box, padding is calculated into the width
border-box, border and padding are calculated into the width

6.The difference between px, em, and rem
px Pixel. Absolute unit. Pixel px is relative to the monitor screen resolution. It is a virtual length unit and the digital image length unit of the computer system. If px is to be converted into physical length, the precision DPI needs to be specified.
em is a relative length unit, relative to the font size of the text within 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. It inherits the font size of the parent element, so it is not a fixed value.
rem is a new relative unit (root em) in CSS3. 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.
7.What are the ways to introduce CSS? What is the difference between link and @import?
There are four types: inline (style attribute on the element), embedded (style tag), external link (link), Import (@import) The difference between
link and @import:

link is an XHTML tag. In addition to loading CSS, it can also define other transactions such as RSS; @import belongs to the CSS category and can only load CSS.
link When referencing CSS, it will be loaded at the same time when the page is loaded; @import requires the page to be loaded after it is fully loaded.
link is an XHTML tag and has no compatibility issues; @import was proposed in CSS2.1 and is not supported by lower version browsers.
link supports using Javascript to control the DOM to change the style; @import does not support it.

流式布局与响应式布局的区别
流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。