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

This article mainly introduces what are the Css layout knowledge points, have a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand.

Common block-level elements

Common inline elements

Display is the most important attribute in CSS for controlling attributes that you do not have. Each element has a default display value, which is related to the type of the element. Some default values are block, which are called block-level elements, and some default values are inline, which are called inline elements.

When the display value is none, the element is hidden. Unlike visibility, visibility:hidden; also takes up space. Display:none does not take up space. The default display value is none

Margin:auto

# main {width: 600px; margin: 0 auto;}

Setting the width of a block-level element prevents it from filling the entire container from left to right. Then you can set the left and right margin to auto to center it horizontally. The element will occupy the width you specify, and then the remaining width will be split into the left and right margin.

Box model

When the width of the element is set, the actual display of the element will exceed your setting, because the border border and inner margin (padding) of the element will stretch the element.

.simple {width: 500px; margin: 20px auto;}

.fancy {width: 500px; margin: 20px auto; padding: 50px; border-width: 10px;}

If you apply the above two class to different div, you will find that fancy is obviously larger than simple, although they are given the same width.

Box-sizing attribute: when you set an element to box-sizing: border-box;, the inner margins and borders of the element no longer increase its width.

.simple {width: 500px; margin: 20px auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}

.fancy {width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}

Thank you for reading this article carefully. I hope the article "what are the knowledge points of Css layout" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.