zoukankan      html  css  js  c++  java
  • css新属性box-sizing应用

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style>
     7         #content{width:440px;height:200px;border:1px solid #f45}
     8         #nei{width:100px;background:#f45;border:20px solid #f0f;height:100px;padding:30px;
     9         margin:20px;
    10             box-sizing: border-box;}
    11         .h{width:10px;height: 10px;background:#00f;}
    12         .content{width:100%;height:20px;background:#00f;}
    13         .tip{width:50%;padding:10px;box-sizing: border-box;background:#f0f;float:left;border:3px solid #ff0}
    14     </style>
    15 </head>
    16 <body>
    17 <div id="content">
    18     <div id="nei">
    19         <div class="h"></div>
    20     </div>
    21 </div>s
    22 <div class="content">
    23     <div class="tip"></div>
    24     <div class="tip"></div>
    25 </div>
    26 <!--order-box,含义是将盒子的border和padding计算到设置的width中,而不是实际宽度中。所以,
    27 如果你设置width为100px,而border为1px的时候,盒子的实际大小仍旧是100px而不是102px。用这个属性,-->
    28 </body>
    29 </html>

     学习内容源自:http://www.cnblogs.com/constantince/p/4896419.html

    坚持下去就能成功
  • 相关阅读:
    moment.js相关知识总结
    git相关使用解释
    .我的第一篇博客
    QT项目配置
    重载->
    内核对象同步
    模式对话框与非模式对话框
    显示与隐式类型转换
    size_t与size_type
    系统级源代码:系统裁剪
  • 原文地址:https://www.cnblogs.com/suoking/p/4900183.html
Copyright © 2011-2022 走看看