CSS3 Book notes 2015/12/10

12th Chapter 13th Chapter

First, the layout type of the Web page

Fixed type, streaming (automatically adjusts to browser width), responsive web design (solves different screen size problems)

Second, floating

first, the cause of floating  

What is the general floating situation? The CSS float property is typically used in a box, which causes the parent object box to not be opened so that the CSS float floats.

Floating produces style effects

Second, the fluctuation produces the negative effect

1 , background cannot be displayed
Because of the floating, if the parent set (CSS background background) CSS background color or CSS background image, and the parent can not be open, so that the CSS background can not be displayed.

2 , borders cannot be stretched
As in, if the parent set CSS border properties (CSS border), because the child uses the float property, resulting in floating, the parent cannot be open, resulting in the border can not be open with the content.

3 , margin padding setting value does not display correctly
The value of the CSS margin property is not expressed correctly because of a float that causes the parent child to set the CSS padding. In particular, the padding and margin on the bottom are not displayed correctly.

Three, floating mode

Float:left/right/none

Note:

1) The floating element is treated as a block-level element, so there is no problem of margin, padding, which often plagues the element in the line.

2) Border (border, background) does not surround floating

Iv. removal of floating mode

1. Clear (Clear) indicates that the element does not surround the floating item. When an element is cleared, it is essentially forcing it to fall below the floating item

The. Left style will fall below the floating element, but the object will still float right

. Right forces the style to fall underneath the floating object, but will still wrap around the left floating object

. Both forcing styles to fall below the left-floating and right-floating elements

. None close Clear Properties completely

. Copyright {

Clear:both;

}

To unify the style, we create a new style selector CSS named ". Clear", and the corresponding selector style is "Clear:both", then we add this div to the "class=" clear "style before the end of parent </div>". This clears the float.

Specific CSS code:

1. . divcss5{width:400px;border:1px solid #F00; background: #FF0}
2. . divcss5-left,.divcss5-right{width:180px;height:100px;
3. border:1px solid #00F; background: #FFF}
4. . divcss5-left{Float:left}
5. . divcss5-right{Float:right}
6. . clear{Clear:both}

HTML code:

1. <div class= "DIVCSS5" >
2. <div class= "Divcss5-left" >left floating </div>
3. <div class= "Divcss5-right" >right floating </div>
4. <div class="clear"></div>
5. </div>

Clear clears floating

Clear clear floating using CSS clear clears floating

2 The parent setting is appropriate for the CSS height
For the parent setting to fit the height style clear float, here to ". Divcss5" set a certain height, the general setting height needs to be able to determine the content height to set. Here we know that the content height is 100px+ the upper and lower border is 2px, so that the specific parent height is 102px

Clear floating with height heights

3 , parent Div definition Overflow:hidden
The Overflow:hidden style is added to the parent CSS selector, which can be cleared to create floats using float within the parent. The advantage is that few CSS code can solve the floating generation.

Overflow:hidden Resolving CSS Code:

1.. divcss5{width:400px;border:1px solid #F00; background: #FF0; Overflow:hidden}

2. divcss5-left,.divcss5-right{width:180px;height:100px; border:1px solid #00F; background: #FFF}

3.. divcss5-left{Float:left}

4.. divcss5-right{Float:right}

The HTML code does not change.

Resolve after clearing floating

Overflow clear float produces floating overflow:hidden clear float

Why join Overflow:hidden to clear the float? That's because the Overflow:hidden property is equivalent to having the parent cling to the content so that it fits inside its object (including the div box using float), which clears the float. Css Overflow:hidden Clear Floating method DIVCSS5 recommended.

The above three points is compatible with the major browser to clear the floating method, other browsers incompatible with the incompatible methods are not necessary to introduce, we remember above three points to solve float floating clear floating method. But here the 3rd and 2nd resolutions are recommended to clear the floating method.

15th Chapter

Third, positioning

First, the way of positioning

(1) Absolute positioning: absolute

Leave the element out of the page stream and place it on top of the page, sometimes obscuring other content

(2) Relative positioning: relative

It is positioned relative to its default location on the Web page and leaves a hole in the position before the element is positioned. Other elements do not occupy the position where the relative anchor element was originally located in the HTML stream.

1) If the position of a label is absolutely positioned, and it is not in any other label that has the absolute, relative, or fixed positioning set, it is positioned relative to the browser's window

2) If a label is in another label that sets the absolute, relative, or fixed positioning, it is positioned relative to the edge of the other element.

(3) Positioning: fixed

Fixed elements remain on the screen when the Visitor Scrolls the page

(4) Static positioning: The default way for the static browser to display content

Note: Do not set the Float property and any kind of positioning in one style at the same time except static and relative positioning. float and abosolute or fixed positioning cannot act on the same element at the same time.

Second, optional attributes

Left/right/top/bottom

Third, stacking elements (general with absolute positioning)

In general, the stacking order of anchored elements is done in the order in which they are in the HTML code of the Web page. A <div> tag with two absolute positioning on a webpage is that the <div> tag in the second place in the HTML will appear on the top of the other <div>. This can be controlled with the Z-index property.

Z-index: Value

If the value is larger, it appears on the top level.

Iv. Hidden parts of the Web page (general with absolute positioning)

Visibility:hidden/visible

There is also an attribute Display:none

The difference between the two: Display:none without leaving traces of the page disappears from the

Visibility:hidden prevents the browser from displaying content and leaves a hole in the original location

Because absolute positioning is out of the document flow, two attributes are equivalent

CSS3 Book notes 2015/12/10