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

This article introduces a wave of CSS+Div practical skills summary, the content is very detailed, interested friends can refer to, hope to be helpful to you.

As most people know, HTML and CSS are not difficult to learn and use, and in terms of the learning curve, they are not even as difficult as using VIM. But whether it is well written or not is another matter. Good CSS code can achieve function with the least amount of code, easy to modify and good performance. Easy to modify, to take the simplest example, such as the requirement to modify the height and width of a div and to maintain the adaptive height and width of the child div, if you write the height and width of the child div, the modification work is very troublesome, so it is best to write the child div as adaptive as possible on demand, so you only need to modify the height and width of the parent div. Good performance, can be achieved with CSS absolutely without js implementation, whether it is web layout or animation effects, native CSS is a fast and highly compatible choice.

Clear float

Clearing floats is a common problem, and the solution for many people is to add an empty div application clear:both. In fact, you only need to use the after pseudo class to automatically clear the float at the end of the element.

CSS

.clear-fix {overflow: hidden; zoom: 1;}

.clear-fix:after {display: table; content: ""; width: 0; clear: both;}

DIV peer arrangement

The easiest thing to think of is to set a row of div all to display:inline-block, but this creates a "gap" between the two div, which is usually determined by the font-size. The cleanup interval can be achieved by using comments.

CSS

A better way is to use float naturally.

CSS

.item {float: left}

Flexible use of BFC

BFC (Block Formatting Context) is literally translated as "block-level formatting scope". A BFC is generated when a HTML element satisfies any of the following points:

The value of float is not none

The value of overflow is not visible

The value of display is table-cell, table-caption, or inline-block

Whether the values of position are relative and static

BFC provides an environment in which elements do not affect layout in other environments. For example, the floating element forms a BFC, and the internal child elements of the floating element are mainly affected by the floating element, and the two floating elements do not affect each other. BFC is a scope that can be thought of as a separate container, and the layout of the container has nothing to do with the elements outside the container.

The element of the BFC cannot overlap with the floating element, and when the container has enough remaining space to accommodate the width of the BFC, all browsers place the BFC in the remaining space in the row of the floating element.

Not vertically aligned

When a group of class on the same line uses display:inline-block or float:left for the div of item, vertical misalignment may occur if some text and other contents are filled in the internal label of a div. But it is very strange that the internal element is not beyond the scope of the parent div, there is no overflow or support, which I do not quite understand, students who know the cause are welcome to leave a message. The solution is not difficult:

CSS Code copies content to the clipboard

.item {vertical-align: top;}

Application of display:table-cell

Table-cell can be corrupted by other CSS attributes, such as float and position:absolute, so it's best not to use display:table-cell with float:left or position:absolute attributes. Elements with this attribute set are highly sensitive to width, respond to the padding attribute, and do not respond to margin values

Vertical center

CSS

.content {

Display: table-cell

Border: 1px solid # eee

Width: 600px

Text-align: center

}

What a beautiful day

Two-column adaptive layout

It is suitable for scenes where the width of one column is not fixed, such as a picture with uncertain size, and the other column automatically adjusts the scene with the remaining width.

CSS

.box {

Width: 70%

}

.content {

Display: table-cell

Border: 1px solid # eee

}

.fix {

Float: left

Color: # a8c

}

This is left fixed block

The wind has stopped the dust and fragrant flowers have come to an end, and I am tired to comb my hair day and night. When things are different, everything is off, and tears flow first if you want to speak. Smell that Shuangxi spring is still good, but also plan to pan light boat. Just for fear that Shuangxi can't carry a lot of sorrow.

This is the end of the summary on a wave of CSS+Div practical skills. I hope the above content can be helpful to you and learn more. If you think the article is good, you can share it for more people to see.

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.