CSS + DIV layout application, css div Layout
Div + css layout Application 1. html element classification 2.1, Top-level element)
Definition
Html pageTopTag
Features
1. The width and height cannot be set;
2. It must be at the highest level in the document stream;
3. All block-level elements and inline elements cannot be contained;
Common elements
Html
Body
Frameset
2.2 Block-level elements)
Definition
It is a block-level display element, which is often used for layout. By default, each block-level element willLine feedDisplay.
Features
1. Each block-level element always starts on a new line;
2. The height, row height, and outer and inner margins can be controlled;
3. The default width is 100% of its container unless a width is set;
4. It can accommodate inline elements and other block elements;
Common elements
Address-address
Blockquote-block reference
Center-align block in the example (html5 removes this tag)
Div-Easy to use block-level, which is also the main tag of css layout
Dl-definition list
Fieldset-form Control Group
Form-interactive form
H1-title
H2-subtitle
H3-Level 3 title
Level h4-4 title
H5-Level 5 Title
H6-6 level title
Hr-horizontal Separator
Isindex-input prompt
Menu-menu list
Optional content of noframes-frames (content in this block is displayed in browsers that do not support frame)
Noscript-optional script content (this content is displayed in browsers that do not support scripts)
Ol-sort form
P-paragraph
Pre-format text
Table-table
Ul-non-sorted list (unordered list)
Address-address
2.3 Inline element)
Definition
Embedded element and line element. By default, one or more inline elements willOne rowDisplay.
Features
1. inline elements are displayed in the same line;
2. The width setting is invalid. The width depends on the text or image width in the element;
3. The height setting is invalid. The height can only be set through line-height;
4. Set the margin to be valid only for the left and right margin, and for the upper and lower margins;
5. Set the outer margin padding to only valid for the left and right padding and not for the upper and lower sides;
6. Only text or other inline elements can be accommodated;
Common elements
A-anchor
Abbr-abbreviation
Acronym-First word
B-bold (not recommended)
Bdo-bidi override
Big-font size
Br-line feed
Cite-Reference
Code-computer code (required when source code is referenced)
Dfn-define Fields
Em-emphasis
Font-font setting (not recommended) (html5 removes this tag)
I-italic
Img-Image
Input-input box
Kbd-define keyboard text
Label-Table label
Q-short reference
S-hyphen (not recommended)
Samp-definition example computer code
Select-Project Selection
Small-small font text
Span-commonly used inline containers that define text blocks
Strike-dashes
Strong-highlighted in bold
Sub-subscript
Sup-superscript
Textarea-multi-line text input box
Tt-telex text
U-underline
Var-define variables
II. Introduction of css attributes in key layout 2.1, position 2.1.1, default value-static
Default Value, no location, that isNormal location, The element appears in the normal HTML stream. When a div is unpositioned, the top, bottom, left, right, or z-index statements are invalid. (Relative positioning: demo1)
2.1.2. relative positioning-relative
Definition
Generate relative positioning elements,Compared with its normal locationTRBLProperty (TOP, RIGHT, BOTTOM, LEFT).
Features
1. relative maintains the position of the object in the Document Stream, that is, it hasAndStaticSame Rendering MethodIt also occupies a fixed position in the Document Stream, followed by objectsNot encroached or overwritten;
2. Positioning refers to the original point of the parent level as the original point. If there is no parent level, the original point of the BODY is the original point. When the parent level has CSS attributes such as padding, the original vertex of the current level is located by referring to the original vertex of the parent level content area;
2.1.3. absolute positioning-absolute
Definition
Absolute positioning, removing elements from the Document Stream location,IntegrationTRBLProperty (TOP, RIGHT, BOTTOM, LEFT).
Features
1. absolute does not keep the position of the object in the document stream. It does not occupy a fixed position in the Document Stream.It encroaches on or overwrites;
2. If the parent level (unlimited)Not SetPositionAttribute, Then the current absolute is combined with the TRBL attributeBrowser upper left cornerLocate the original vertex. If the parent level (unlimited)SetPositionAttribute, Then the current absolute is combined with the TRBL attributeUpper left corner of parent (recent)Locate the original vertex;
2.1.4 fixed positioning-fixed
Definition
Fixed positioning, removing elements from the Document Stream location,IntegrationTRBLProperty (TOP, RIGHT, BOTTOM, LEFT) According to the browser location.
Features
When a layer defines fixed, this layer is alwaysBased on the browser windowUse the TRBL attribute to locate the element.Automatic AdjustmentThe location of the layer.
2.1.5. div layer-z-index
Definition
The z-index attribute sets the stacking sequence of elements. Elements with a higher stacking order are always in front of elements with a lower stacking order.
Features
1. z-index can only be valid for elements whose position attribute value is relative, absolute, or fixed;
2. The element with the same level and the position attribute value is relative cannot compare z-index;
3. the z-index value only determines the stacking sequence of child elements of the same level in the same parent element. The z-index value of the parent element (if any) defines the stacking sequence for sub-elements (css stack "fight dad ");
4. If the parent element containing the z-index value is not found, it can be regarded as a free z-index element, it can compare the value of z-index with the sibling positioning element of the parent element or other free positioning elements to determine the stack sequence;
5. If the z-index values of the same-level elements are the same, the stacking order is determined by the order of the elements in the document, which will appear later;
2.2 float 2.2.1 Definition
The float attribute defines the direction in which the element floats. In CSS, any element can float. A floating element generates a block-level box, regardless of its own elements.
If there is only a small amount of space on top of a row for floating elements, the element will jump to the next row, and the process will continue until a row hasSufficient spaceSo far.
2.2.2. Features
When frame 1 is moved to the right, it is moved out of the Document Stream and to the right until its right edge hits the right edge of the contained box.
Left
Float elements are not allowed on the left.
Right
Float elements are not allowed on the right.
Both
Float elements are not allowed on both sides.
None
Default value. Float elements can appear on both sides.
Inherit
Specifies that the value of the clear attribute should be inherited from the parent element.
Features
Suppose you want an image to float to the left of the text block and want the image and text to be included in another element with the background color and border. You may write the following code:
. News {
Background-color: gray;
Border: solid 1px black;
}
. News img {
Float: left;
}
. News p {
Float: right;
}
<Div class = "news">
<P> some text </p>
</Div>
In this case, a problem occurs. Because the floating element is out of the Document Stream, the div surrounding the image and text does not occupy space.
How can we visually enclose floating elements? You need to apply clear somewhere in this element.
. News {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<p>some text</p>
<div class="clear"></div>
</div>
In this way, we can achieve the desired effect, but we need to add additional code. There are often elements that can apply clear, but sometimes you have to add meaningless labels for layout.
Therefore, the following solution is recommended to solve this problem, that is, to float the container div.
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<p>some text</p>
</div>
2.3. margin, margin (margin & padding) 2.3.1, and margin-margin
Definition
Boundary. An extra blank area is generated around the element. "Blank area" usually refers to areas where other elements cannot appear and the parent element background is visible. -- CSS authoritative guide
Value
Description
None
Defines borderless borders.
Hidden
Same as "none. Except for tables, hidden is used to resolve border conflicts.
Dotted
Defines a dotted border. It is displayed as a solid line in most browsers.
Dashed
Define the dotted line. It is displayed as a solid line in most browsers.
Solid
Define a solid line.
Double
Defines a double line. The width of the double line is equal to the value of border-width.
Groove
Defines the 3D groove border. The effect depends on the value of border-color.
Ridge
Defines a 3D ridge border. The effect depends on the value of border-color.
Inset
Defines the 3D inset border. The effect depends on the value of border-color.
Outset
Defines the 3D outset border. The effect depends on the value of border-color.
Inherit
It is required that the border style should be inherited from the parent element.
Border-style can be omitted as follows:
Example 1
border-style: dotted solid double dashed;
· The upper border is dotted
· The right border is a solid line
· The Bottom Frame is a double line
· The left border is a dotted line.
Example 2
border-style: dotted solid double;
· The upper border is dotted
· The right border and the left border are solid lines
· The Bottom Frame is a double line
Example 3
border-style: dotted solid;
· The upper and lower borders are dotted.
· The right border and the left border are solid lines
Example 4
border-style: dotted;
· All four borders are dotted
In addition to the omitted syntax, you can also define a single side if necessary, such:
Border-top-style :......
Border-right-style :......
Border-bottom-style :......
Border-left-style :......
2.4.3. width-border-width
The abbreviation of border-width attribute is to set the width of all borders of an element, or to set the width of each border separately.Only when the border style is notNoneIt takes effect. If the border style is none, the Border width is actually reset to 0. The negative length value cannot be specified.
The border-width attribute of CSS defines several styles, as shown in the following table.
Value |
Description |
Thin |
Define the border. |
Medium |
Default value. Define a moderate border. |
Thick |
Define a thick border. |
Length |
You can customize the Border width. |
Similar to border-style, border-width also supports the omitted Syntax:
Example 1
border-width: thin medium thick 10px;
· The upper border is a fine border.
· The right border is a medium border.
· The bottom border is a thick border.
· The left border is a 10 PX border
Example 2
border-width: thin medium thick;
· The top frame is 10px.
· The right and left borders are middle borders.
· The bottom border is a thick border.
Example 3
border-width: thin medium;
· The upper and lower borders are fine borders.
· The right and left borders are middle borders.
Example 4
border-width: thin;
· All four borders are fine borders
Similarly, in addition to the omitted style, you can also set the width of each side of the border using the following attributes:
Border-top-width :......
Border-right-width :......
Border-bottom-width :......
Border-left-width :......
2.4.4. color-border-color
The border-color attribute sets the color of the four borders. This attribute can be set to 1 to 4 colors.
The border-color attribute is a short attribute. You can set the colors of visible parts of all borders of an element, or set different colors for the four sides.
The border-color attribute of CSS supports the following colors:
Value |
Description |
Color_name |
Specifies the border color (such as red) of the color name ). |
Hex_number |
Specifies the border color of the hexadecimal value (for example, # ff0000 ). |
Rgb_number |
Specifies the border color of the rgb code (such as rgb (, 0, 0 )). |
Transparent |
Default value. The border color is transparent. |
Omitted writing
Example 1
border-color:red green blue pink;
· The upper border is red.
· The right border is green
· The bottom border is blue
· The left border is pink.
Example 2
border-color: red green blue;
· The upper border is red.
· The right and left borders are green
· The bottom border is blue
Example 3
border-color: red green;
· The upper and lower borders are red.
· The right and left borders are green
Example 4
border-color: red;
· All four borders are red
There are also some color attributes of a single border. They work in the same way as the single-side style and width attributes:
Border-top-color :......
Border-right-color :......
Border-bottom-color :......
Border-left-color :......