经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
CSS3 盒子模型全面掌握 -cyy
来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/9 15:18:37　　对本文有异议

元素居中定义与外边距定义：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         article{
  11.             border:1px solid #ddd;
  12.         }
  13.         div{
  14.             border:1px solid red;
  15.             margin:30px;
  16.             padding:50px;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <article>
  22.         <div>
  23.  
  24.         </div>
  25.     </article>
  26. </body>
  27. </html>

 

 

边距合并与负值使用：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         body{
  11.             padding:100px;
  12.         }
  13.         article{
  14.             border:1px solid #ddd;
  15.             padding:50px 0;
  16.         }
  17.         div{
  18.             border:1px solid red;
  19.             /* 设置负值会溢出 */
  20.             margin-left:-20px;
  21.             margin-right:-20px;
  22.             text-align:center;
  23.         }
  24.         h2{
  25.             border:1px solid blue;
  26.             /* 上下间距存在合并情况，会取两个边距中最大的那个元素 */
  27.             margin-top:30px;
  28.             margin-bottom:60px;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <h2>h2</h2>
  34.     <h2>h2</h2>
  35.     <article>
  36.         <div>
  37.             aaa
  38.         </div>
  39.     </article>
  40. </body>
  41. </html>

 

 

尺寸限制与内边距使用方法：

  1. box-sizing: border-box;
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         body{
  11.             padding:10px;
  12.         }
  13.         .div1{
  14.             border:10px solid;
  15.             margin:20px;
  16.             padding:40px;
  17.             width:300px;
  18.             height:100px;
  19.         }
  20.         .div2{
  21.             border:10px solid;
  22.             margin:20px;
  23.             padding:40px;
  24.             box-sizing: border-box;
  25.             width:300px;
  26.             height:100px;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="div1">div1</div>
  32.     <div class="div2">div2</div>
  33. </body>
  34. </html>

 

元素边框的使用规范：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         body{
  11.             padding:10px;
  12.         }
  13.         .div{
  14.             border-style:solid;
  15.             border-top-width:10px;
  16.             border-right-width:5px;
  17.             border-top-color:red;
  18.             border-right-color:blue;
  19.             margin:20px;
  20.             padding:40px;
  21.             width:300px;
  22.             height:100px;
  23.         }
  24.         p>em{
  25.             border-bottom:1px solid green;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="div">div</div>
  31.     <p>this is <em>cyy</em></p>
  32. </body>
  33. </html>

 

 

圆角控制的详细使用：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         body{
  11.             padding:10px;
  12.         }
  13.         .div{
  14.             border-radius:20px 30px 40px 10px;
  15.             border:1px solid red;
  16.             margin:20px;
  17.             padding:40px;
  18.             width:300px;
  19.             height:100px;
  20.         }
  21.         p>em{
  22.             border-bottom:5px solid red;
  23.             border-radius:50%;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="div">div</div>
  29.     <p><em>cyy</em></p>
  30. </body>
  31. </html>

 

 

轮廓线使用技巧：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;padding:0;
  12.         }
  13.         .div{
  14.             /* 轮廓线 */
  15.             outline:10px double #ddd;
  16.             border:10px solid red;
  17.             padding:50px;
  18.             width:300px;
  19.         }
  20.         h1{background:green;}
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="div">div</div>
  25.     <h1>h1</h1>
  26. </body>
  27. </html>

 

 

可以看到轮廓线和边框线的区别：

轮廓线不占空间，边框线占据空间。

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;padding:0;
  12.         }
  13.         .div{
  14.             /* 轮廓线 */
  15.             outline:10px double #ddd;
  16.             border:10px solid red;
  17.             padding:50px;
  18.             width:300px;
  19.         }
  20.         h1{background:green;}
  21.         .no_line{
  22.             /* 去掉input的轮廓线 */
  23.             outline:none;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="div">div</div>
  29.     <h1>h1</h1>
  30.     <input type="text" class="no_line">
  31.     <input type="text">
  32. </body>
  33. </html>

 

 

元素显示的多种模型控制：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         div>a{
  11.             text-decoration: none;
  12.             display:block;
  13.             
  14.         }
  15.         div>a:hover{
  16.             color:red;
  17.             background:pink;
  18.         }
  19.         ul>li{
  20.             display:inline-block;
  21.             width:200px;height:20px;
  22.             text-align: center;line-height:20px;
  23.             border:1px solid;
  24.         }
  25.         ul>li:hover{
  26.             color:red;
  27.             background:pink;
  28.             cursor: pointer;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div>
  34.         <a href="">html</a>
  35.         <a href="">css</a>
  36.     </div>
  37. <hr>
  38.     <ul>
  39.         <li>li</li>
  40.         <li>li</li>
  41.         <li>li</li>
  42.     </ul>
  43. </body>
  44. </html>

 

 

使用visibility控制元素隐藏：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         div{
  11.             border:1px solid;
  12.             margin:20px;
  13.             background:pink;
  14.         }
  15.         div:first-of-type{
  16.             /* display:none;不占空间 */
  17.             /* display:none; */
  18.  
  19.             /* visibility和opacity类似，相当于眼睛看不见，但依然占据空间 */
  20.             /* visibility:hidden; */
  21.             opacity: 0;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div>
  27.         div1
  28.     </div>
  29.     <div>
  30.         div2
  31.     </div>
  32. </body>
  33. </html>
display:none;不占空间
visibility和opacity类似，相当于眼睛看不见，但依然占据空间
 
overflow溢出隐藏：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         div:first-of-type{
  11.             border:1px solid;
  12.             margin:20px;
  13.             background:pink;
  14.             width:200px;
  15.             height:100px;
  16.             overflow:auto;
  17.  
  18.         }
  19.         div:nth-of-type(2){
  20.             border:1px solid;
  21.             margin:20px;
  22.             background:pink;
  23.             width:200px;
  24.             height:100px;
  25.             overflow:hidden;
  26.             white-space: nowrap;
  27.             text-overflow: ellipsis;
  28.  
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div>
  34.         层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] 
  35. CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 
  36.     </div>
  37.     <div>
  38.         层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] 
  39. CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 
  40.     </div>
  41. </body>
  42. </html>

 

 

fill-available 自动撑满可用空间：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         div{
  15.             width:100%;
  16.             height:500px;
  17.             background:lightblue;
  18.         }
  19.         p{
  20.             border:1px solid;
  21.             background:pink;
  22.             width:200px;
  23.             height:-webkit-fill-available;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div>
  29.         <p>111</p>
  30.     </div>
  31. </body>
  32. </html>

 

 

fit-content根据内容自适应尺寸：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         div{
  15.             background:lightblue;
  16.             margin:0 auto;
  17.             width:fit-content;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div>111</div>
  23. </body>
  24. </html>

 

 

其实我感觉跟display:inline-block;差不多……

 

max-content & min-content 盒子根据内容尺寸自适应：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  15.         article{
  16.             /* width:min-content; */
  17.             width:max-content;
  18.         }
  19.         div{
  20.             background:lightblue;
  21.             margin-bottom:10px;
  22.             padding:10px;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.  
  28.     <article>
  29.         <div>
  30.             层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  31.         </div>
  32.  
  33.         <div>
  34.             层叠样式表。
  35.         </div>
  36.     </article>
  37. </body>
  38. </html>

 

 

原文链接：http://www.cnblogs.com/chenyingying0/p/13939500.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号