简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> CSS Tutorial> body text

Detailed introduction to learning common knowledge points of web front-end

高洛峰
Release： 2017-03-22 15:19:26
Original
1430 people have browsed it

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-overflowAttributeis 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 defaultdisplayThe 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 thetag, but if you view the (x)html code, you cannot see the actual content of the image; the type of thetag Properties to determine whether to display input boxes, radio buttons, etc. (x),,