Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about the attributes related to the CSS3 frame, the content is detailed, and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Border of Box Model

Border related properties

Border-width controls the size of the border with a length assignment

Border-style controls the style of the border none has no borders solid solid lines dotted dots dashed dashed lines double double lines

Border-color controls the color of the border four color representations

Border-top controls the style of the top border

Border-right controls the style of the right border

Border-bottom controls the style of the bottom border

Border-left controls the style of the left border

In fact, the four edges are also compound attributes:

Border-top can be divided into several attributes: border-top-color border-top-width border-top-style (the remaining three edges, and so on)

Border continuous writing

In theory: if there is no order, it can be omitted.

Examples: table borders, colorful boxes, form borders

Document

Table {

Width:800px

Height:300px

Border:1pxsolid#000

Border-collapse:collapse;/* remove the border: thin line * /

}

Th,td {

Border:1pxsolid#000

}

The list of Today's novels

Ranking

Keywords

Trend

Search today

The last seven days

Related links

one

candle in the tomb

65589

forty-five

Post pictures encyclopedia

two

The Graver Robbers’ Chronicles

one

four hundred and fifty six

Post pictures encyclopedia

Document

Untitled document

Input {

Width:150px

Height:18px

Outline-style:none;/* cancels the blue border * /

} .username {

Border:1pxdashed#ccc

Background-color:#E7EEFE

Color:blue

} .username: focus {/ * status of gaining focus * /

Border:1pxdashedpink

Background-color:#FFF7FB

Color:pink

} .email {

Border:0none

Border-bottom:1pxdashedred

} .search {

Border:1pxsolid#ccc

Color:#ccc

Background:url (search.png) no-repeatrightcenter

} user name: mailbox: search:

Padding of Box Model

Inner margin: controls the distance between the content and the border

Padding property and padding concatenation

Padding-top top inner margin padding-right right inner margin padding-bottom lower inner margin padding-left left inner margin

Four kinds of serial writing

1 write only one value padding:10px; represents the first number in all four directions

2 write two padding:10px20px; to show that the upper and lower inner margin is equal to the first number, and the left and right inner margin is equal to the second number.

3 write three padding:10px20px30px; to indicate: the upper inner margin = the first number, the left and right inner margin equal to the second number, and the lower inner margin equal to the third number.

4 write four padding:10px20px30px40px; to indicate that the upper, right, lower and left correspond to each number respectively.

The influence of padding and border on the box

Setting padding and border will affect the actual size of the box

Actual width of the box = width set in css + horizontal paddding+ horizontal border

Actual height of the box = set height + vertical padding+ vertical border

But be careful:

If there is a father-son relationship,

If the width of the child box is not set, and the padding+border of the child box does not exceed the width of the parent box, the width of the child box will not change.

If the padding+border of the child box exceeds the width of the parent box, the width will be stretched by padding and border

Case study:

The function of padding and the calculation of padding

Document

P {

Border:1pxsolid#000

Width:500px

Height:500px

Padding:10px

}

I am the content of the box.

Document

/ * question: the big box is 500px in width and 300px in height.

There is a small box in the center of the big box.

The small box is 300px wide and 150px high.

Please write the structure in padding * /

.father {

Width:300px

Height:150px

Padding:75px100px

Background-color:red

}

.son {

Width:300px

Height:150px

Background-color:green

}

Margin of Box Model

Outer margin attribute and outer margin concatenation

Margin-top controls the upper and outer margins of the box

Margin-right controls the right outer margin of the box

Margin-bottom controls the bottom and outer margin of the box

Margin-left controls the left outer margin of the box

The concatenation of margin is the same as padding

Vertical collapse (merger) phenomenon

When the two boxes are distributed vertically and the relative margin values are set for the two boxes at the same time, the actual distance between the two boxes depends on the maximum of the successive margin values.

Contains the phenomenon of collapse (merger)

When setting margin-top for the child box, it is possible to take the parent box away with it.

How to solve:

1. Set a frame for the parent box

2. Set overflow:hidden to the parent box

Case: list display

Ul {

List-style:none

}

Ulli {

Background:url (li.gif) no-repeatleft4px

Padding-left:25px

}

Lia {

Text-decoration:none

}

A:hover {

Color:#9E7878

Text-decoration:underline

}

Big star: Jiang Chao's magic New year's greetings.

Soft cute is the interpretation of "Little Lucky" by Xu Hao.

Marvel's stunning collection of movie scenes

I have never seen such a funny grandparent-grandchild combination.

The most easily beaten buffet in history

The problem of setting margin and padding for in-line elements

Setting margin-top and margin-bottom for in-line elements has no effect

When you set a vertical padding for an in-line element, you can increase the height, and the position does not depend on where the padding is stretched.

Control the position of the elements in the line later, do not use vertical padding and margin

We usually use row height to control the vertical position of elements in a row.

Margin:0auto; 's Secret

When margin-left and maring-right are both auto, the child elements (block level) will be centered.

Can center a block-level element with a width set horizontally relative to its parent element

It is usually used to center the center of the page

Center inline elements and inline block-level elements

Set text-align:center to the container

These are all the contents of the article "what are the attributes related to the CSS3 frame?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.