html css box-sizing

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html css box-sizing相关的知识,希望对你有一定的参考价值。

.app {
  display: -webkit-flex;
  display: flex;
}
// .app to display 2 div child as element in row
.screenshot {
  max-width: 450px;
}
.description {
  max-width: 705px;
  margin: 10px;
  padding: 12px;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
* {
  outline: 1px solid red !important;
}
<!DOCTYPE html>
<html>

<head>
    <link rel='stylesheet' type='text/css' href='style.css'>
</head>

<body>
    <h1 class="title">My App </h1>
    <div class="app">
        <div class='screenshot'>image</div>
        <div class='description'>In ac ipsum quis turpis adipiscing commodo. <em>Mauris fermentum quam</em> in risus eleifend fringilla. Aliquam placerat,
            ipsum sit amet cursus rhoncus, augue mi tincidunt erat, et consequat velit massa a velit. Cras eleifend lectus
            nec diam ornare, eu placerat mi ultricies. Etiam tempor iaculis feugiat. Ut tincidunt tempus libero non convallis.
            Morbi consequat eros eget elit porta porta. Curabitur placerat eros dui, vitae lobortis sapien laoreet ac. Maecenas
            a lacus diam. Morbi ante lectus, ornare sed suscipit at, tempus elementum purus. Suspendisse sodales hendrerit
            pharetra. Integer odio risus, convallis eu egestas ad, venatis nec leo. ac ipsum quis turpis adipiscing commodo.
            <em>Mauris fermentum quam</em> in risus eleifend fringilla. <a href="#">Aliquam placerat</a>, ipsum sit amet
            cursus rhoncus, augue mi tincidunt erat, et consequat velit massa a velit. Cras eleifend lectus nec diam ornare,
            eu placerat mi ultricies. Etiam tempor iaculis feugiat. Ut tincidunt tempus libero non convallis. Morbi consequat
            eros eget elit porta porta. Curabitur placerat eros dui, vitae lobortis sapien laoreet ac. Maecenas a lacus diam.
            Morbi ante lectus, ornare sed suscipit at, tempus elementum purus. Suspendisse sodales hendrerit pharetra. Integer
            odio risus, convallis eu egestas ac, venenatis nec leo.</div>
    </div>

</body>

</html>

以上是关于html css box-sizing的主要内容,如果未能解决你的问题,请参考以下文章

盒子模型以及css3指定盒子模型种类的box-sizing

CSS高级技巧

css盒模型(css的两种盒模型:标准盒模型怪异盒模型)和 css3指定盒子模型种类的box-sizing属性

前端面试之盒子模型(标准盒模型怪异盒模型)和 css3指定盒子模型种类的box-sizing属性

APP reset.css

box-sizing