Home > Article > Web Front-end > Detailed introduction to learning common knowledge points of web front-end
Detailed introduction to learning common knowledge points of web front-end
- 高洛峰Original
- 2017-03-22 15:19:261497browse
1. Common block-level elements Inline 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-overflowAttribute 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 default display The attribute value is inline-block;
and the sibling element (ruler) is added (the style of the sibling element [ruler] is set to vertical-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)
, ,