Home > Web Front-end > HTML Tutorial > css layout box-sizing uses _html/css_WEB-ITnose

css layout box-sizing uses _html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:46:52
Original
1023 people have browsed it

div{

box-sizing:border-box;

width:200px;

padding:20px;

border: 1px solid red;

}

This css means that the div width is 200px, the border is 1px, the left and right margins are 20px, and the time content width is Adaptive, it is 200-2-20*2=158px;

If the value of box-sizing is content-box, it means that the width of the content area is set, not the div box Width;

Browser compatibility:

ie8 and above support this attribute, firefox needs to add the browser manufacturer prefix -moz-, low version IOS and Android browsing You also need to add -webkit-

*,*:before,*:after{

-moz-box-sizing:border-box;

-webkit- box-sizing:border-box;

box-sizing:border-box;

}

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template