Basic use css box model -05-

Box model (CSS focus)

Learn three key css: css box model, float, location

Theme ideas:

1. The nature of the layout of the page

• Firstly, set the CSS box size and placement of the box.
• Finally, the page elements such as text and graphics, and so on, put inside the box.

2. box model (Box Model)

• The so-called box model:

  • It is to layout elements in HTML pages viewed as a rectangular box, which is the content of a container loaded.
  • Box model has content elements, borders (border), Padding (padding), and margins (margin) components.
  • Box inside the text and pictures and other elements of the content area
  • Box border
  • From the box and the frame content is a padding (similar to cell cellpadding)
  • The distance between the box and the box is margins (similar to cell cellspacing)

Standard box model

3. box frame (border)

• grammar:

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

Attributes	effect
border-width	Defined border thickness, the unit is px
border-style	Border style
border-color	Border Color

• Border-style:
  • none: no border width that is ignored (default) All borders
  • solid: solid line is a single frame (the most common)
  • dashed: the border is dashed
  • dotted: the border as a dotted line

3.1 Integrated Border settings

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

E.g:

 border: 1px solid red;  没有顺序  

Table 3.2 summarizes the wording of the box frame

In many cases, we do not need to specify four borders, we can give a separate four designated border respectively.

On the border	Bottom border	Left border	Right border
border-top-style: style;	border-bottom-style: style;	border-left-style: style;	border-right-style: style;
border-top-width: Width;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width: Width;
border-top-color: color;	border- bottom-color: color;	border-left-color: color;	border-right-color: color;
border-top: width style color;	border-bottom: width style color;	border-left: width style color;	border-right: width style color;

3.3 Form of the thin line border

• By the table cellspacing="0", the distance between the cell and the cell is set to 0,

• However, the border between two cells may overlap, so that the thicker border

• By css property:

  table{ border-collapse:collapse; }  
  

  • collapse word is the meaning of the merger
  • border-collapse: collapse; indicates adjacent loop combined.

• E.g:

<style>
	table {
		width: 500px;
		height: 300px;
		border: 1px solid red;
	}
	td {
		border: 1px solid red;
		text-align: center;
	}
	table, td {
		border-collapse: collapse;  /*合并相邻边框*/
	}
</style>

4. padding (padding)

4.1 margins:

padding properties is used to set margins. It refers to the distance between the border and the content.

Set 4.2

Attributes	effect
padding-left	Left padding
padding-right	Within the right margin
padding-top	Within the margin
padding-bottom	The lower margins

When the padding value to the specified box, two things happen:

1. Content and borders with distance, added padding.
2. Box becomes big.

The number of values	Expression meaning
A value	padding: the left and bottom margins;
2 values	padding: the upper and lower margins left and right margins;
3 values	padding: padding the padding on the lower left and right margins;
4 value	padding: padding the padding on the left and right margins of the inner padding;

4.3 padding Case: Navigation Bar

In the navigation bar, because there is not as much of words, it is not convenient to directly set the width, then a padding value, the box will automatically distraction.

4.4 Calculation box size (actual size elements)

• height

  Element Height = content height + padding + border (Height is the height of the content)

• width

  Element Width = content width + padding + border (Width Width content)

• Width and height of the actual size of the box content = + + frame padding

Problems of padding 4.5

• problem

  

  It will stretch the original box

• solve:

  By setting the width and height of a box, subtracting a value corresponding to the padding , maintain the original size of the box

  

4.6 padding does not affect the size of the box case

If no specified width of a box, case, if the padding to the specified box, the box will not be softened.

The margins (margin)

5.1 Margin

margin property is used to set margins. margin is to control the distance between the box and the box

5.2 Setting:

Attributes	effect
margin-left	Left Margin
margin-right	Right Margin
margin-top	On Margin
margin-bottom	Bottom margin

Shorthand margin value (composite writing) represents exactly the same meaning with padding.

5.3-level box is centered horizontally

• Can make a block-level box is centered horizontally must achieve:

  • Box must specify the width (width)
  • Then give the outside around the pitch are set to Auto ,

• E.g:

  .header{ width:960px; margin:0 auto;}
  

Common wording, the following three can be.

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

5.4 centered text box and centered difference

1. Text box is centered horizontally within the text-align: center, but also allows the element row and the row block centered

2. Block-level box is centered horizontally to the left and right margin auto

   text-align: center; /*  文字 行内元素 行内块元素水平居中 */
   margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */
   

5.5 Insert images and background image difference

1. Insert picture we use the most, such as Product class position only by moving the box model padding margin
2. Our background images are generally used for large or small icons background background image background image position can only be set by background-position

 img {  
		width: 200px;/* 插入图片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入图片也是一个盒子 */
	}

 div {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
		background-position: 30px 50px; /* 背景图片更改位置 用 background-position */
	}

The default clear element within and outside the 5.6 margin

For more flexible control over page elements, while making web pages, we need to remove the default margins and external elements

Code:

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

note:

• Inline elements for compatibility, or try to set up only about inner and outer margins, do not set the upper and lower inner and outer margins.

5.7 Margin merger

Use margin definition block element perpendicular outer margin , the margins merging may occur.

(1). The combined vertically adjacent block elements margins of

• When two vertically adjacent block elements meet, if the above element has bottom margin margin-bottom
• The following elements have a margin-top margins, the margin-bottom than the vertical spacing of the margin-top therebetween and
• But it takes the greater of two values , a phenomenon known as vertical integration block elements adjacent margins (also referred to collapse margins).

Solution: Try to give only a box to add margin value .

(2) nested block elements combined vertical margins (collapse)

• For the nested relationship of two block elements, if not the parent element and frame padding
• From the sub-elements will be on the outside on the outside of the parent element from the merger occurred
• The combined distance is outside the larger of the two

solution:

1. The parent element can define the border.
2. It can be defined on the parent element padding
3. The parent element can add overflow: hidden.

There are other ways, such as floating, fixed, absolute positioning of the box will not have a problem

6. The box model layout stability

• Box model, padding and finished learning from the outside, with padding under what circumstances, with margins under what circumstances?

  • In most cases it can be mixed in. That is, you can also use padding, margins can also be used. Do you think is easy to use which.

Stability according to points, the following recommendations:

Preferentially used according to the width (width) secondly padding (padding) again margins (margin).

  width >  padding  >   margin   

• the reason:
  • Margin margin would merge there ie6 margin below double the bug so in the end use.
  • padding will affect the size of the box, it needs to be followed by the use of addition and subtraction.
  • Problems often do not use width height width of the remaining residual method method.

expand@

The following are some of the new CSS3 properties, the following, we will not affect the page layout, but it looked better style.

1. The rounded corners (CSS3)

• grammar:

  border-radius:length;  
  

• Wherein each value can be a value or a percentage.

• Each sequence of four values ​​of radius are: the top left, top right, bottom right, bottom left.

• Example 1: Let the square becomes a circle

  border-radius: 50%;
  

• Example 2:
  

• FIG rounded rectangle above effects, do not use the percentage, expressed as a percentage would be half of the height and width.
• And here we will only use half of the rectangle highly enough. Precise units.

2. Box shadow (CSS3)

• grammar:

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

• The first two properties are to be written. The rest may be omitted.
• Outer shadow (outset) is the default, do not write, you want to be in the shadow write inset

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}