Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > CSS DIV layout application_html/css_WEB-ITnose

CSS DIV layout application_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:42:58
Original
1056 people have browsed it

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;

}

<div class="news">

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

<p>some text</p>

</div>

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 {
Copy after login</div></div>
Copy after login</div></div> 
  background-color: gray;
Copy after login</div></div>
Copy after login</div></div> 
  border: solid 1px black;
Copy after login</div></div>
Copy after login</div></div> 
  }
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div> 
.news img {
Copy after login</div></div>
Copy after login</div></div> 
  float: left;
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div> 
  }
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div> 
.news p {
Copy after login</div></div>
Copy after login</div></div> 
  float: right;
Copy after login</div></div>
Copy after login</div></div> 
  }
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div> 
.clear {
Copy after login</div></div> 
  clear: both;
Copy after login</div></div> 
  }
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div> 
<div class="news">
Copy after login</div></div>
Copy after login</div></div> 
<img src="news-pic.jpg" />
Copy after login</div></div>
Copy after login</div></div> 
<p>some text</p>
Copy after login</div></div>
Copy after login</div></div> 
<div class="clear"></div>
Copy after login</div></div> 
</div>
Copy after login</div></div>
Copy after login</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 {
Copy after login</div></div>
Copy after login</div></div> 
  background-color: gray;
Copy after login</div></div>
Copy after login</div></div> 
  border: solid 1px black;
Copy after login</div></div>
Copy after login</div></div> 
  float: left;
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div> 
  }
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div> 
.news img {
Copy after login</div></div>
Copy after login</div></div> 
  float: left;
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div> 
  }
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div> 
.news p {
Copy after login</div></div>
Copy after login</div></div> 
  float: right;
Copy after login</div></div>
Copy after login</div></div> 
  }
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div>
Copy after login</div></div> 
<div class="news">
Copy after login</div></div>
Copy after login</div></div> 
<img src="news-pic.jpg" />
Copy after login</div></div>
Copy after login</div></div> 
<p>some text</p>
Copy after login</div></div>
Copy after login</div></div> 
</div>
Copy after login</div></div>
Copy after login</div></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.

< /tr>

值

描述

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;
Copy after login</div></div>

· 上边框是点状

· 右边框是实线

· 下边框是双线

· 左边框是虚线

例子 2

border-style: dotted solid double;
Copy after login</div></div>

· 上边框是点状

· 右边框和左边框是实线

· 下边框是双线

例子 3

border-style: dotted solid;
Copy after login</div></div>

· 上边框和下边框是点状

· 右边框和左边框是实线

例子 4

border-style: dotted;
Copy after login</div></div>

· 所有 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;
Copy after login</div></div>

· 上边框是细边框

· 右边框是中等边框

· 下边框是粗边框

· 左边框是 10px 宽的边框

例子 2

border-width: thin medium thick;
Copy after login</div></div>

· 上边框是 10px

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

· 下边框是粗边框

例子 3

border-width: thin medium;
Copy after login</div></div>

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

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

例子 4

border-width: thin;
Copy after login</div></div>

· 所有 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;
Copy after login</div></div>

· 上边框是红色

· 右边框是绿色

· 下边框是蓝色

· 左边框是粉色

例子 2

border-color: red green blue;
Copy after login</div></div>

· 上边框是红色

· 右边框和左边框是绿色

· 下边框是蓝色

例子 3

border-color: red green;
Copy after login</div></div>

· 上边框和下边框是红色

· 右边框和左边框是绿色

例子 4

border-color: red;
Copy after login</div></div>

· 所有 4 个边框都是红色

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

border-top-color: ……

border-right-color: ……

border-bottom-color: ……

border-left-color: ……

Related labels：
CSS+DIV布局应用
source：php.cn
Previous article：CSS image flip example_html/css_WEB-ITnose Next article：CSS3 transform implements image projection effect_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to position a div next to a sidebar so that when the sidebar opens the div is pushed to the left Whenever I open the sidebar, the main content div will be positioned below the sidebar ins...
From 2024-04-03 14:47:21
0
1
325
Create diverse card layouts using a single grid or Flex: a practical guide I'm trying to make a responsive card layout like the one pictured. What I'm currently doin...
From 2024-04-02 21:07:36
0
2
377
Layout in Next.js obscures page content I'm trying to use bottom navigation from Material-ui (https://mui.com/material-ui/react-bo...
From 2024-04-02 19:42:19
0
1
275
Flex spacing broken when trying to overflow HTML <pre><code> tag instead of wrapping I apply CSS to the precode selector in order to make styled code blocks like you would see...
From 2024-04-01 12:22:06
0
1
296
Can CSS display grid lines? I started learning CSS grid layout. In an ideal world I would be able to set up a div with...
From 2024-03-31 20:38:21
0
2
395
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved