CSS DIV layout application_html/css_WEB-ITnose

Div css layout application

1. HTML element classification

2.1. Top-level element (Top-level element)

Definition

Composes an html pageTop-level tag

Features

1. The width and height cannot be set;

2. Required At the highest level in the document flow;

3. Contains all block-level elements and inline elements and cannot be included;

Common elements

html

body

frameset

2.2. Block-level element (Block-level element)

Definition

Displayed in blocks Element, often used for typesetting. By default, each block-level element will be line wrapped displayed.

Features

1. Each block-level element always starts on a new line;

2. Height, line height and margins and The padding can be controlled;

3. The width defaults to 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 quote

center - center alignment block (cancelled in html5 This tag)

div - commonly used block level, also the main tag of css layout

dl - definition list

fieldset - form control group

form - Interactive form

h1 - Heading

h2 - Subtitle

h3 - Level 3 heading

h4 - Level 4 heading

h5 - Level 5 heading

h6 - Level 6 heading

hr - Horizontal separator line

isindex - input prompt

menu - Menu list

noframes - frames optional content, (this block content is displayed for browsers that do not support frames)

noscript - optional script content (this content is displayed for browsers that do not support scripts)

ol - sorted form

p - paragraph

pre - formatted text

table - table

ul - unsorted list (none) Sequence list)

address - address

2.3. Inline element (Inline element)

Definition

Inline element, inline element, by default One or more inline elements will be displayed in a row .

Features

1. Inline elements will be displayed on the same line;

2. Setting the width width is invalid, the width depends on the element Chinese The width of words or pictures;

3. Setting the height height is invalid, the height can only be set through line-height;

4. Setting the outer margin only the left and right margins are valid, and the top and bottom are invalid;

5. Setting margin padding is only valid for left and right padding, not top and bottom;

6. It can only accommodate text or other inline elements;

Common elements

a - anchor

abbr - abbreviation

acronym - first word

b - bold (not recommended)

bdo - bidi override

big - big font

br - line break

cite - quote

code - computer code (required when citing source code)

dfn - Define fields

em - Emphasis

font - Font settings (not recommended) (html5 cancels this tag)

i - Italics

img - image

input - input box

kbd - define keyboard text

label - table label

q - short quote

s - underscore (not recommended)

samp - definition sample computer code

select - project selection

small - small font text

span - commonly used inline container, defining blocks within text

strike - underline

strong - bold emphasis

sub - subscript

sup - superscript

textarea - multi-line text input box

tt - telex text

u - underline

var - define variables

2. Introduction to key layout css attributes

2.1. Position (position) 2.1.1. Default value - static

Default value, no positioning, that is, normal position , element Appears in the normal HTML stream. When a div is unpositioned, the top, bottom, left, right or z-index declarations are invalid. (Relative positioning demo1)

2.1.2. Relative positioning-relative

Definition

Generates a relatively positioned element, relative to its normal position, combined with TRBLAttributes (TOP, RIGHT, BOTTOM, LEFT) for positioning .

Features

1. Relative maintains the position of the object in the document flow, that is to say, it has and static The same presentation method , it also occupies a fixed position in the document flow, and subsequent objects will not occupy or cover ;

2. Positioning refers to the parent The original point is the original point. If there is no parent, the original point of the BODY is the original point. When there are CSS attributes such as padding in the parent, the original point of the current level is positioned with reference to the original point of the parent content area;

2.1.3. Absolute positioning-absolute

definition

Absolute positioning, positioning the element out of the document flow, Combined with TRBL attributes (TOP, RIGHT, BOTTOM, LEFT) for positioning.

Features

1. Absolute does not maintain the position of the object in the document flow. It does not occupy a fixed position in the document flow. The subsequent object will Occupy or cover ;

2. If the parent (infinite) does not set the position attribute , then the current absolute is Combined with the TRBL attribute, the upper left corner of the browser is used as the original point for positioning. If the parent (infinite) sets the position attribute , then the current absolute is combined with the TRBL attribute to the upper left corner of the parent (nearest) Position the original point;

2.1.4, fixed positioning-fixed

Definition

Fixed positioning, so that the element is separated from the document flow position, CombinedTRBL attributes (TOP, RIGHT, BOTTOM, LEFT) based on browser location Locate.

Features

When a layer is defined as fixed, this layer will always fix elements based on the browser window combined with the TRBL attribute Positioning, automatically adjusts the position of this layer relative to the browser.

2.1.5, div layer-z-index

Definition

The z-index attribute sets the stacking order of elements. Elements with a higher stacking order will always appear in front of elements with a lower stacking order.

Features

1. Z-index can only be effective on elements whose position attribute value is relative, absolute, or fixed;

2. The same Elements whose level and position attribute values ​​are both relative cannot compare z-index;

3. The z-index value only determines the stacking order of child elements of the same level in the same parent element. The z-index value of the parent element (If any) The stacking order is defined for the child elements (the CSS version of stacking "Pin Daddy");

4. If the parent element containing the z-index value cannot be found by tracing upward, it can be regarded as A free z-index element, which can compare the z-index value with the parent element's sibling positioned elements or other free positioned elements to determine its stacking order;

5. Z of sibling elements -If the index values ​​are the same, the stacking order is determined by the position of the elements in the document, and the element that appears later will be on top;

2.2. Float (float) 2.2.1. Define the

float attribute to define the direction of the element. float. In CSS, any element can be floated. A floated element creates a block-level box, regardless of what type of element it is.

If there is very little space for a floating element on a row, the element will jump to the next row. This process will continue until a row has enough space.

2.2.2. Features

Look at the picture below. When box 1 is floated to the right, it breaks away from the document flow and moves to the right until its right edge touches the right edge of the containing box.

Look at the image below again. When box 1 floats to the left, it breaks away from the document flow and moves to the left until its left edge touches the left edge of the containing box. Because it is no longer in the document flow, it takes up no space and actually covers box 2, causing box 2 to disappear from view.

If you move all three boxes to the left, then box 1 floats to the left until it hits the containing box, and the other two boxes float to the left until it hits the previous floated box.

As shown in the figure below, if the containing box is too narrow to accommodate three floating elements arranged horizontally, then the other floating blocks move downward until there is enough space. If floated elements are of different heights, they may get "stuck" by other floated elements as they move downward.

2.2.3. Float clear-clear

Definition

The

clear attribute specifies which side of the element does not allow other floating elements.

Attribute value

left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

left

Floating elements are not allowed on the left .

right

No floating elements allowed on the right side.

both

Floating elements are not allowed on the left and right sides.

none

Default value. Allows floated elements to appear on both sides.

inherit

Specifies that the value of the clear attribute should be inherited from the parent element.

特点

假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p {

float: right;

}

9e59c74aa5e5ffe4edf05198a047c62d

00a0212c122335a467f1c3e699e5514d

e388a4556c0f65e1904146cc1a846beesome text94b3e26ee717c64999d7867364b1b4a3

16b28748ea4df4d9c2150843fecfba68

In this case, a problem arises. Because floated elements are out of the document flow, the divs surrounding images and text take up no space.

How to make the surrounding element visually surround the floating element? Clear needs to be applied somewhere within this element.

With this implementation, since there is no existing element to which cleanup can be applied, you can only add an empty element and clean it. The code is as follows

.news {

  background-color: gray;

  border: solid 1px black;

  }

.news img {

  float: left;

  }

.news p {

  float: right;

  }

.clear {

  clear: both;

  }

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

<div class="clear"></div>

</div>

This can achieve the effect we want, but it requires adding extra code. There are often elements that can be cleared, but sometimes you have to add meaningless markup for layout purposes.

Therefore, to solve this problem, the following solution is recommended, which 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">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

2.3. Margins, padding (margin & padding) 2.3.1. Margin-margin

defines

borders, and generates extra margins around the element blank area. "White space" usually refers to the area where other elements cannot appear and the background of the parent element is visible. ??The Definitive Guide to CSS

Features

1. Margin is always transparent.

2. Margin can set the top, right, bottom, and left margins by using separate attributes. That is: margin-top, margin-right, margin-bottom, margin-left.

3. The value types of margin-width of margin are: auto | length | percentage. You can also use the abbreviated margin attribute to change all margins at the same time: margin: top right bottom left; (eg: margin:10px 20px 30px 40px) The memory method is "top, right, bottom, left" clockwise from right above the element.

Attribute value

The way to write the omitted value of margin is basically as follows:

1. If margin has only one value, it means the margin of top, right, bottom and left Same as this value.

For example: margin:10px; is equivalent to margin:10px 10px 10px 10px;

2. If margin has only two values, the first value represents the upper and lower margin values, and the second value is The left and right margin values.

For example: margin:10px 20px; is equivalent to margin:10px 20px 10px 20px;

3. If margin has three values, the first value represents the upper margin value, and the second value represents The value of the left and right margins, and the third value represents the value of the lower margin.

For example: margin:10px 20px 30px; is equivalent to margin:10px 20px 30px 20px;

4. If margin has four values, then these four values ​​correspond to top, right, bottom and left respectively. Four margin values.

For example: margin:10px 20px 30px 40px;

Vertical margin merge

Margin merge means that when two vertical margins When they meet, they form a margin. The height of the merged margin is equal to the greater of the heights of the two merged margins. Margin merging only occurs for vertical margins of block boxes in normal document flow. Margins between inline boxes, floated boxes, or absolute positioning will not be merged.

When an element appears above another element, the bottom margin of the first element and the top margin of the second element will be merged. Take a look at the image below:

When an element is contained within another element (assuming there is no padding or border separating the margins), their top and/or bottom Margins will also be merged. Take a look at the image below:

Suppose you have an empty element, which has margins but no border or padding. In this case, the top margin and the bottom margin meet together, and they will merge:

If this margin encounters the margin of another element, it will also Merging will occur:

2.3.2, padding-padding

definition

padding shorthand attribute sets all padding in one statement property. This property does not allow negative values ​​.

Features

1. Padding is not transparent, and its background is determined based on the background of the element.

2. Padding can set the top, right, bottom, and left padding by using separate attributes. That is: padding-top, padding-right, padding-bottom, padding-left.

3. The value types of padding-width in padding are: auto | length | percentageIt is forbidden to use auto, and auto is used in the abbreviation of padding behaves abnormally (css bug)You can also use the abbreviated padding attribute to change all padding at the same time: padding: top right bottom left;(eg: padding:10px 20px 30px 40px) The memory method is "top, right, bottom, left" clockwise from right above the element.

Attribute value

The way to write the omitted value of padding is basically as follows:

1. If padding has only one value, it means padding for top, right, bottom and left. Same as this value.

For example: padding:10px; is equal to padding:10px 10px 10px 10px;

2. If padding has only two values, the first value represents the upper and lower padding values, and the second value is the left and right padding values. value.

For example: padding:10px 20px; is equal to padding:10px 20px 10px 20px;

3. If padding has three values, the first value represents the upper padding value, and the second value represents The left and right padding values, the third value represents the lower padding value.

For example: padding:10px 20px 30px; is equal to padding:10px 20px 30px 20px;

4. If padding has four values, then these four values ​​correspond to top, right, bottom and left respectively. Four padding values.

For example: padding: 10px 20px 30px 40px;

2.3.3. Box model -box model

There are two types of box models, namely IE box model and standard W3C box model, as shown below

As you can see from the above figure, the scope of the standard W3C box model includes margin, border, padding, and content, and the content part does not include other parts.

As you can see from the above picture, the scope of the IE box model also includes margin, border, padding, and content. The difference from the standard W3C box model is: IE box The content part of the model contains borders and padding.

Standard Box Model Statement

In actual development, we should choose "Standard W3C Box Model". What does it mean to choose the "standard W3C box model"? It's as simple as adding a DOCTYPE declaration at the top of your web page. If you do not add a DOCTYPE statement, each browser will understand the web page according to its own behavior, that is, the IE browser will use the IE box model to interpret your box, and FF will use the standard W3C box model to interpret your box, so the web page will It is displayed differently in different browsers. On the contrary, if you add a DOCTYPE statement, then all browsers will use the standard W3C box model to interpret your box, and the web page will be displayed consistently in various browsers.

2.4. Border (border) 2.4.1. Definition

The border of the element is within the outer margin of the element. An element's border is one or more lines that surround the element's content and inner borders.

Border has 3 properties: width, style, and color.

For example: border:1px solid #333333; (Here defines a border style with a width of 1 pixel, a solid line style, and a gray color)

2.4.2. Style-border-style

The border-style attribute of CSS defines 10 different non-inherit styles, including none.

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

Value

Description

none

Define no border.

hidden

Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts.

dotted

Define dotted border. Renders as a solid line in most browsers.

dashed

Define the dashed line. Renders as a solid line in most browsers.

solid

Define a solid line.

double

Define double line. The width of the double line is equal to the value of border-width.

groove

Define the 3D groove border. The effect depends on the value of border-color.

ridge

Define the 3D ridge border. The effect depends on the value of border-color.

inset

Define the 3D inset border. The effect depends on the value of border-color.

outset

Define the 3D outset border. The effect depends on the value of border-color.

inherit

Specifies that the border style should be inherited from the parent element.

Border-style 支持省略式写法，如下：

例子 1

border-style: dotted solid double dashed; 

· 上边框是点状

· 右边框是实线

· 下边框是双线

· 左边框是虚线

例子 2

border-style: dotted solid double;

· 上边框是点状

· 右边框和左边框是实线

· 下边框是双线

例子 3

border-style: dotted solid;

· 上边框和下边框是点状

· 右边框和左边框是实线

例子 4

border-style: dotted;

· 所有 4个边框都是点状

除了省略式写法，必要时还可以进行单边定义，如：

border-top-style：……

border-right-style：……

border-bottom-style：……

border-left-style：……

2.4.3、宽度-border-width

border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

CSS 的border-width属性定义了几种样式，见下表。

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。

与border-style同理，border-width也支持省略式写法：

例子 1

border-width: thin medium thick 10px;

· 上边框是细边框

· 右边框是中等边框

· 下边框是粗边框

· 左边框是 10px 宽的边框

例子 2

border-width: thin medium thick;

· 上边框是 10px

· 右边框和左边框是中等边框

· 下边框是粗边框

例子 3

border-width: thin medium;

· 上边框和下边框是细边框

· 右边框和左边框是中等边框

例子 4

border-width: thin;

· 所有 4 个边框都是细边框

同样地，除了省略式写法，也可以通过下列属性分别设置边框各边的宽度：

border-top-width: ……

border-right-width: ……

border-bottom-width: ……

border-left-width: ……

2.4.4、颜色-border-color

border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。

border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为4个边分别设置不同的颜色。

CSS 的border-color属性支持下表几种颜色写法：

值	描述
color_name	规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number	规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent	默认值。边框颜色为透明。

省略式写法

例子 1

border-color:red green blue pink;

· 上边框是红色

· 右边框是绿色

· 下边框是蓝色

· 左边框是粉色

例子 2

border-color: red green blue;

· 上边框是红色

· 右边框和左边框是绿色

· 下边框是蓝色

例子 3

border-color: red green;

· 上边框和下边框是红色

· 右边框和左边框是绿色

例子 4

border-color: red;

· 所有 4 个边框都是红色

还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：

border-top-color: ……

border-right-color: ……

border-bottom-color: ……

border-left-color: ……