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

This article mainly introduces "how to operate dynamic element size through CSS positioning". In daily operation, I believe many people have doubts about how to operate dynamic element size through CSS positioning. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "how to operate dynamic element size through CSS positioning". Next, please follow the editor to study!

Tips for not using width and height or JS to provide elements for volume.

This is a very simple technique, but many people don't know it.

Suppose you want to make a mode box that contains all the screens except 100px for each screen. How would you solve this problem?

Suppose you want to make a modal box that covers all screens, how would you solve this problem except for the 100px of each boundary?

HTML

Somecontent

First we need to add an attribute position:fixed to our div.

Then we want to position the mode box 100px from each side of the viewport. Why shouldn't we give it all 4 position attribute parameters (top, right, bottom, left)?

The solution is that you can give all four parameters for fixed / absolute positioning, top:100px,right:100px,bottom:100px;left:100px;.

By doing so, you can make the dynamic element size accordingly from each side of the 100px.

CSS

.popup {

Position:fixed

Z-index:5

Left:100px

Right:100px

Top:100px

Bottom:100px

/ * somestyles*/

Background-color:#ccc

Border-radius:10px

Border:solid3px#000

Padding:20px

}

The result div is an automatic size mode box without a row of JS.

Complete code:

.popup {

Position:fixed

Z-index:5

Left:100px

Right:100px

Top:100px

Bottom:100px

Background-color:#ccc

Border-radius:10px

Border:solid3px#000

Padding:20px

}

Text content

Now, suppose you want to add a mask under the mode box, exactly the same idea!

Here is the solution:

HTML:

CSS

.mask {

Position:fixed

Z-index:2

Left:0

Right:0

Top:0

Bottom:0

Background-color:rgba (0. 0. 8)

}

Complete code:

.popup {

Position:fixed

Z-index:5

Left:100px

Right:100px

Top:100px

Bottom:100px

Background-color:#ccc

Border-radius:10px

Border:solid3px#000

Padding:20px

}

.mask {

Position:fixed

Z-index:2

Left:0

Right:0

Top:0

Bottom:0

Background-color:rgba (0. 0. 8)

}

Text content

At this point, the study on "how to manipulate the size of dynamic elements through CSS positioning" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.