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

This article mainly explains "what are the box models of css". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what the box models of css are.

In fact, CSS has only three big modules: box model, floating, positioning, and the rest are details. These three parts are required to be very proficient in any case.

The so-called box model treats the elements in the HTML page as a rectangular box, that is, a container containing content. Each rectangle consists of the content of the element, the inner margin (padding), the border (border) and the outer margin (margin).

See through the nature of web layout

In the layout of the web page, how do we arrange the text and pictures in an orderly manner according to the effect drawings given to us by the artists?

In-line elements, such as words that are similar to milk, also need a box to hold them. The double labels we have learned before are all in the same box. With the box, we can put it freely and freely.

See through the nature of web page layout: the process of putting web page elements such as text and pictures into a box, and then using CSS to put the box, is the process of web page layout.

CSS actually does not have much logic to speak of, similar to the building blocks we played with when we were children, we are free to display the effects we want.

Box model (Box Model)

Skip the old ie box model (below IE6) here. I'm sorry, I haven't even seen IE5's browser.

First of all, let's look at a picture to understand what a box model is.

All document elements (tags) generate a rectangle, which we call an element box (element box), which describes the size of a document element and page layout summary. Therefore, each box not only has its own size and position, but also affects the size and position of other boxes.

Box frame (border)

The frame is that layer of skin. Orange peel. Grapefruit peel. Orange peel.

Syntax:

Border: border-width | | border-style | | border-color

Border Properties-set Border style (border-style)

The border style is used to define the style of the border in the page. The common attribute values are as follows:

None: ignore the width of all borders without borders (default) solid: the border is a single solid line (the most commonly used) dashed: the border is dotted dotted: the border is dotted double: the border is double solid box border writing summary table

Set content style properties common property values top border border-top-style: style; border-top-width: width; border-top-color: color; border-top: width style color

The following border border-bottom-style: style; border-bottom- width: width; border-bottom- color: color; border-bottom: width style color

Left border border-left-style: style; border-left-width: width; border-left-color: color; border-left: width style color

Right border border-right-style: style; border-right-width: width; border-right-color: color; border-right: width style color

Border-style: upper side [lower right side, left side]; none none (default), solid single solid line, dashed dashed line, dotted dot line, double double solid line width comprehensive setting border-width: upper side [lower right side, left side]; pixel value color comprehensive setting border-color: upper side [lower right side, left side] Color value, # hexadecimal, rgb (rMagnegMagneb), rgb (r% recorder g% rem b%) frame comprehensive setting border: quadrilateral width, quadrilateral style, quadrilateral color

The thin line border of a table

The border of the html table that I have learned before is very thick, and it only needs a word of CSS to make it beautiful. Let us really believe that CSS is our Prince Charming (Snow White).

The word table {border-collapse:collapse;} collapse means to merge

Border-collapse:collapse; indicates that the borders are merged together.

Fillet border (CSS3)

From then on, our world is not just a rectangle. Radius Radius (distance)

Syntax format:

Border-radius: upper left corner, upper right corner, lower right corner, lower left corner; inside margin (padding)

The padding property is used to set the inner margin. Refers to the distance between the border and the content.

Padding-top: top inside margin

Padding-right: right inside margin

Padding-bottom: bottom inside margin

Padding-left: left inside margin

Note: the meaning expressed by several numbers is different.

The number of values means 1 value padding: upper and lower left and right margins such as padding: 3px; upper and lower left and right margins are 3 pixels 2 values padding: upper and lower margins such as padding: 3px 5px; upper and lower 3 pixels 5 pixels 3 values padding: upper margin left and right margin bottom margin such as padding: 3px 5px 10px It means that the upper margin is about 3 pixels, and the lower pixel is 10 pixels. The value padding is 10 pixels below: the upper inner margin, the right inner margin, the lower inner margin, the lower inner margin, the left inner margin, for example: padding: 3px 5px 10px 15px; the upper 3px, the right, the 5px, the lower 10px, the left 15px, clockwise.

A general understanding of the order:

Outer margin (margin)

The margin property is used to set the outer margin. Setting the margin creates "white space" between elements, which usually does not allow for other content.

Margin-top: top and outer margin

Margin-right: right margin

Margin-bottom: lower outer margin

Margin-left: top and outer margin

Margin: upper outer margin, right outer margin, lower outer margin, left outer margin

The order of values is the same as the inner margin.

The outer margin makes the box center.

If you can center a box horizontally, you need to meet two conditions:

Must be a block-level element.

The box must have a width specified (width)

Then set the outer margins around * to auto**, to center the block-level elements horizontally.

This method is often used for web page layout in practical work. The sample code is as follows:

.header {width:960px; margin:0 auto;} text box centered picture and background difference

Text horizontal center is text-align: center

The box is centered horizontally and changed from margin to auto.

Text-align: center; / * text is centered * / margin: 10px auto; / * the box is centered horizontally and margin is changed to auto * /

Insert pictures we use most, such as product presentation.

Background pictures we usually use small icon backgrounds or oversized background pictures.

Section img {width: 200pxramp * insert picture change size width and height * / height: 210px; margin-top: 30px; / * insert picture to change position using margin or padding box model * / margin-left: 50px / * insert when the picture is also a box * /} aside {width: 400px; height: 400px; border: 1px solid purple; background: # fff url (images/sun.jpg) no-repeat; background-size: 200px 210px / * background image size can only be changed using background-size * / background-position: 30px 50px; / * background image change this position I use background-position * /} to clear the default inner and outer margin of the element

To make it easier to control the elements in a web page, when creating a web page, you can use the following code to clear the default inner and outer margins of the elements:

* {padding:0; / * clear inner margin * / margin:0; / * clear outer margin * /}

Note: inline elements are only left and right margins, there are no upper and lower margins. Inner margins can also be problematic in lower versions of browsers such as ie6.

Let's just try not to specify the upper and lower inner and outer margins of the elements in the line.

Outer margin merging

When you use margin to define the vertical outer margins of a block element, a merge of the outer margins may occur.

Merging of vertical outer margins of adjacent block elements

When two adjacent block elements meet, if the upper element has a lower outer margin margin-bottom and the lower element has an upper outer margin margin-top, then the vertical spacing between them is not the sum of margin-bottom and margin-top, but the larger of the two. This phenomenon is called the merging of vertical outer margins of adjacent block elements (also known as outer margin collapse).

Solution: just avoid it.

Merging of vertical margins of nested block elements

For two nested block elements, if the parent element does not have an upper inner margin and a border, the upper outer margin of the parent element is merged with the upper outer margin of the child element, and the merged outer margin is the larger of the two. Merging occurs even if the upper outer margin of the parent element is 0.

Solution:

You can define a 1-pixel top border or upper inner margin for the parent element.

You can add an overflow:hidden to the parent element.

Width and height of content

The size of the box can be controlled using the width property width and the height property height.

The attribute values of width and height can be values in different units or as a percentage of the parent element, and pixel values are the most commonly used in practice.

Most browsers, such as Firefox, IE6 and above, adopt the W3C specification. The principle for calculating the total width and height of the box model that conforms to the CSS specification is:

/ * Outer box size calculation (element space size) * / Element space height = content height + padding + border + margin Element space width = content width + padding + border + margin / * Inner box size calculation (element actual size) * / Element Height = content height + padding + border (Height is content height) Element Width = content width + padding + border (Width is content width)

Note:

1. The width attribute width and height attribute height apply only to block-level elements and are not valid for inline elements (except img tags and input).

2. When calculating the total height of the box model, the merging of the vertical outer margins of the upper and lower boxes should also be considered.

3. If a box does not have a given width / height or inherits the father's width / height, padding will not affect the size of the box.

Layout stability of box model

At the beginning of learning the box model, the biggest confusion for the students is that they can't distinguish between the inner and outer margins, under what circumstances do they use the inner margins, and under what circumstances do they use the outer margins?

The answer is: in fact, they can be mixed in most cases. That is to say, you can use the inner margin or the outer margin. You can use whichever is convenient for you.

However, there must be one that works best. We will divide it according to stability, and the recommendations are as follows:

Use the width first (width) followed by the inner margin (padding) and then the outer margin (margin).

Width > padding > margin

Reason:

Margin will have outer margins merge and margin under ie6 will double bug (annoying) so use it last.

Padding will affect the size of the box, need to add and subtract calculation (trouble) followed by use.

There is no problem with width (hi skin) We often use the width residual method and the height residual method to do it.

Box shadow

Syntax format:

Box-shadow: horizontal Shadow Vertical Shadow Blur distance Shadow size Shadow Color inside / outside Shadow

The first two attributes must be written. The rest can be omitted.

Outer shadow (outset) but cannot write default want inner shadow inset

P {width: 200px; height: 200px; border: 10px solid red; / * box-shadow: 5px 5px 3px 4px rgba (0,0,0,.4) * / / * box-shadow: horizontal position Vertical position blur distance Shadow size (Shadow size) Shadow Color Inner / Outer Shadow * / box-shadow: 0 15px 30px rgba (0,0,0,0.4);} Box basic training case

Box training / * 1. Box case * / p {width: 300px; height: 300px; border-width: 10px; border-color: yellow; border-style: solid / * solid line * / border-style: dashed;/* dashed line * / border-style: dotted;/* dotted line * / / * border: 1px solid blue;*/ border-top: 10px solid green Border-bottom: 5px solid red; border-left:: 15px solid # daaa; border-right:: 30px dashed yellow;} / * 2. Form border * / .inputtest input {border:5px 3px 10px 26px dotted purple;} .inputtest button {width:50px; height: 100px; border: 1px solid purple } / * 3. Table border * / table {width: 500px; height: 300px; border: 1px solid red;} td {border: 1px solid red; text-align: center } table, td {border-collapse: collapse; / * merge adjacent borders * /}

Box

Form user name: button

The King of Heaven, the King of Tigers, the King of Tigers, the King of Heavenly King, the King of Heavenly Tiger, the King of Heavenly Tiger, the King of Heaven, the King of Heaven, the King of Earth, the King of Heaven, the King of Earth, the King of Heaven, the King of Heaven, the King of Earth, the King of Tiger, the King of Heavenly Tiger, the King of Heavenly King, the case of stewed Mushroom Navigation Bar

Document .nav {height: 50pxrampact * height is 50 pixels / border-top: 3px solid # FF8500; / * the top border is 3 pixels * / border-bottom: 1px solid # EDEEF0; / * the bottom border is 1 pixel * / background-color: # FCFCFC / * background color * /} .nav a {/ * what the mouse looks like normally * / height: 50px; line-height: 50px; / * background-color: pink;*/ display: inline-block; / * conversion * / color: # 4c4c4c; text-decoration: none / * padding-left: 18px; padding-right: 18px; padding: 0 18px; font-size: 14px;} .nav a:hover {background-color: # edeef0; color: # ff8400 } the home news client is set as the home page limit challenge

A case study of beautifying the layout of News content

Document / * p {width: 100px; height: 100px; border: 2px solid red; padding: 20px; margin: 30px;} * / * {margin: 0; padding: 0 / * clear the inner and outer margins * /} body {background-color: # eee;} .article {width: 380px; height: 263px; border: 1px solid # ccc; margin: 100px; padding: 20px 15px 0 Article h5 {color: # 202026; font-size: 20px; border-bottom: 1px solid # ccc; padding-bottom: 5px; / * margin-bottom: 12pxscape /} li {list-style: none / * cancel the dot in front of li * /} .article ul li {height: 38px; line-height: 38px; border-bottom: 1px dashed # ccc; / * 1 pixel dotted border * / text-indent: 2em;} .article a {font-size: 12px Color: # 333; text-decoration: none;} .article a:hover {text-decoration: underline; / * add an underscore * /} .article ul {margin-top: 12px Latest article / New Articles Beijing recruitment web design, graphic design, php experience the charm of javascript the world of jquery is coming what is the dream of web designers chain programming in jquery

Thank you for your reading, the above is the content of "what is the box model of css". After the study of this article, I believe you have a deeper understanding of what the box model of css has, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.