What is div

Div can define divisions in a document. Div tags can divide a web page into separate, distinct parts. Unlike h1 and P tags, they do not have any default style and are mainly used to identify an area of a web page. A common approach is to style a div element by adding an ID or class, and then selecting a div with CSS.

That’s about it. You can divide the whole page into different parts.



Each div can be thought of as a box

There are five main properties in a box: width, height, padding, border, and margin. Width: indicates the width of the content. CSS width refers to the width of the content, not the width of the box. Box width = content width + padding+border height: content height. CSS height refers to the height of the content, not the height of the box. Box height = content height + padding+border PADDING: inner margin border: border margin: outer margin

High wide

Width: width height: height

width:xxpx
height:xxpx

Copy the code

Sample code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 200px; background-color: cadetblue; } < / style > < / head > < body > < div > cattle to coax the conan < / div > < / body > < / HTML >Copy the code

Effect screenshot:

Border color

attribute instructions The sample
border-top-color Top border color border-top-color:#369
border-right-color Right border color border-right-color:#369
border-bottom-color Bottom border color border-bottom-color:#fae45b
border-left-color Left border color border-left-color:#efcd56
border-color The four borders are the same color border-color:#eeff34
border-color Top and bottom border colors: #369 Left and right border colors: #000 border-color:#369 #000
border-color Top border color: #369 Left and right border color: #000 Bottom border color: #f00 border-color:#369 #000 #f00
border-color Top, right, bottom and left border colors: #369, #000, # F00, # 00F border-color:#369 #000 #f00 #00f

Border thickness

Border – width: pixel values

border-width:5px

Copy the code

Border style

border: solid;

Copy the code
Attribute values instructions
none Default no border
dotted Define a dotted border
dashed Define a dotted border
solid Define a solid border
double Define two borders with the same width as the value of border-width
groove Define 3D groove borders
ridge Define 3D ridge borders
inset Define a 3D embedded border
outset Define a 3D highlight border

Sample code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 200px; background-color: cadetblue; border: solid; border-width: 5px; border-color:#369 #000 #f00 #00f; } < / style > < / head > < body > < div > cattle to coax the conan < / div > < / body > < / HTML >Copy the code

Effect screenshot:

Box model total size = border-width+padding+margin + content width

padding

Padding – Top, left, Right, bottom

Retrieves or sets the internal margins of the four edges of an object.

Transfer and the number of instructions
If all four parameter values are provided Will be applied to the four sides in the order of up, right, down and left.
If only one is provided Will be used on all four sides.
If you provide two The first one is for up and down, and the second one is for left and right.
If you provide three The first is for up, the second is for left and right, and the third is for down.

Note: Inline objects can use this property to set left and right inner patches. To set the upper and lower inner patches, the object must first behave as a block level or inline block level. The corresponding script feature is the padding.

From the outside

Margin (margin-top, left, right, bottom)

Transfer and the number of instructions
If all four parameter values are provided Will be applied to the four sides in the order of up, right, down and left.
If only one is provided Will be used on all four sides.
If you provide two The first one is for up and down, and the second one is for left and right.
If you provide three The first is for up, the second is for left and right, and the third is for down.

Note: Inline objects can use this property to set left and right outer patches. To set the upper and lower outer patches, the object must first behave as a block level or an inline block level. The extension margin is always transparent. The corresponding script feature is margin.

Center page Alignment Prerequisite: Center page elements must have a width

margin:0px  auto;

Copy the code

Sample code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .d1{ width: 200px; height: 200px; background-color: cadetblue; border: solid; border-width: 5px; border-color:#369 #000 #f00 #00f; margin-top: 10px; margin-right: 20px; padding-top: 10px; } .d2{ width: 200px; height: 200px; background-color: cadetblue; border: solid; border-width: 5px; border-color: #f00 #00f #369 #000; margin-top: 10px; padding-top: 10px; padding-left: 30px; } < / style > < title > < / title > < / head > < body > < div > cattle to coax the conan < / div > < div > Keaf < / div > < / body > < / HTML >Copy the code

Effect screenshot:



Screenshot of the effect without margins:

You can see from the comparison above that the inside margin and the outside margin make the div bigger and the outside margin make the div move

The display properties

Set to None not to display

For block-level elements, the width can be set. For inline elements, the width cannot be set

If you want to set the width of an inline element, you can change the element to an inline-block.

The main application is that we can use display: inline-block to display two div blocks in a row

Don’t write display: inline – block;

Example code 1:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .blockdiv{ border: solid 1px red; width: 200px; height: 100px; } < / style > < title > < / title > < / head > < body > < div > block 1 < / div > < div > block 2 < / div > < / body > < / HTML >Copy the code

Effect Screenshot 1:

Plus display: inline – block;

Example code 2:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .blockdiv{ display: inline-block; border: solid 1px red; width: 200px; height: 100px; } < / style > < title > < / title > < / head > < body > < div > block 1 < / div > < div > block 2 < / div > < / body > < / HTML >Copy the code

Effect Screenshot 2:



Writing is not easy, read if it helps you, thank you for your support!

If you are a computer terminal, see the lower right corner of the “one button three links”, yes click it [ha ha]

Come on!

Work together!

Keafmd