box-sizing

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             /* padding和border计算在width,height里 */
  14.             box-sizing: border-box;
  15.         }
  17.         html {
  18.             font-size: 10px;
  19.         }
  21.         .box {
  22.             width: 20rem;
  23.             height: 20rem;
  24.             border: #000 solid 2px;
  25.             background-color: lightblue;
  27.         }
  28.     </style>
  29. </head>
  31. <body>
  32.     <div class="box">box</div>
  33. </body>
  35. </html>

定位

  • 相对定位
    相对于它在文档流中的原始位置进行定位
  • 绝对定位
    绝对定位元素脱离了文档流

    ```html
    <!DOCTYPE html>

    <html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.box {
/ position: relative; /
/ position: absolute; */
top: 5em;
left: 10em;
background-color: lightskyblue;
width: 20rem;
height: 4rem;
}
</style>
</head>

<body>
<div class="box">box</div>
<p>Hello</p>
</body>

</html>
```

更多相关文章

  1. box-sizing功能，相对定位/绝对定位
  2. 【CSS入门】学习CSS盒模型及常用样式属性详解（整理）
  3. Mongodb数据库基础入门（一）
  4. Mac电脑永久删除了文档该怎么找回？
  5. MongoDB实战篇：高级查询----$elemMatch与aggregate
  6. DSaaS，一个创新的云密码服务
  7. Excelize -Go 开源项目中唯一支持复杂样式 XLSX 文件的类库
  8. 为Dynamics CRM的Office附件注释定制个无需下载即可在线查看的功
  9. iPhone如何修改手机定位？

随机推荐

  1. Android练手小项目（KTReader）基于mvp架构（三
  2. 使用Android(安卓)Studio为系统级的app签
  3. android 设置布局为无标题样式
  4. android 通过 button 弹出menu
  5. 【技术直通车】ArcGIS for Android地图控
  6. android stuido中修改最低sdk
  7. Android AIDL 理解及开发要点
  8. android ndk 入门3 - log实现
  9. 布局（2、相对布局）
  10. 监听android电话呼叫状态