CSS3 盒子模型全面掌握 -cyy

  • A+
所属分类:Web前端
摘要

元素居中定义与外边距定义:  边距合并与负值使用:  尺寸限制与内边距使用方法:

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         article{             border:1px solid #ddd;         }         div{             border:1px solid red;             margin:30px;             padding:50px;         }     </style> </head> <body>     <article>         <div>          </div>     </article> </body> </html>

CSS3 盒子模型全面掌握 -cyy

 

 

边距合并与负值使用:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         body{             padding:100px;         }         article{             border:1px solid #ddd;             padding:50px 0;         }         div{             border:1px solid red;             /* 设置负值会溢出 */             margin-left:-20px;             margin-right:-20px;             text-align:center;         }         h2{             border:1px solid blue;             /* 上下间距存在合并情况,会取两个边距中最大的那个元素 */             margin-top:30px;             margin-bottom:60px;         }     </style> </head> <body>     <h2>h2</h2>     <h2>h2</h2>     <article>         <div>             aaa         </div>     </article> </body> </html>

CSS3 盒子模型全面掌握 -cyy

 

 

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

box-sizing: border-box;
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         body{             padding:10px;         }         .div1{             border:10px solid;             margin:20px;             padding:40px;             width:300px;             height:100px;         }         .div2{             border:10px solid;             margin:20px;             padding:40px;             box-sizing: border-box;             width:300px;             height:100px;         }     </style> </head> <body>     <div class="div1">div1</div>     <div class="div2">div2</div> </body> </html>

 

元素边框的使用规范:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         body{             padding:10px;         }         .div{             border-style:solid;             border-top-width:10px;             border-right-width:5px;             border-top-color:red;             border-right-color:blue;             margin:20px;             padding:40px;             width:300px;             height:100px;         }         p>em{             border-bottom:1px solid green;         }     </style> </head> <body>     <div class="div">div</div>     <p>this is <em>cyy</em></p> </body> </html>

CSS3 盒子模型全面掌握 -cyy

 

 

圆角控制的详细使用:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         body{             padding:10px;         }         .div{             border-radius:20px 30px 40px 10px;             border:1px solid red;             margin:20px;             padding:40px;             width:300px;             height:100px;         }         p>em{             border-bottom:5px solid red;             border-radius:50%;         }     </style> </head> <body>     <div class="div">div</div>     <p><em>cyy</em></p> </body> </html>

CSS3 盒子模型全面掌握 -cyy

 

 

轮廓线使用技巧:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;padding:0;         }         .div{             /* 轮廓线 */             outline:10px double #ddd;             border:10px solid red;             padding:50px;             width:300px;         }         h1{background:green;}     </style> </head> <body>     <div class="div">div</div>     <h1>h1</h1> </body> </html>

CSS3 盒子模型全面掌握 -cyy

 

 

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

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

 

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;padding:0;         }         .div{             /* 轮廓线 */             outline:10px double #ddd;             border:10px solid red;             padding:50px;             width:300px;         }         h1{background:green;}         .no_line{             /* 去掉input的轮廓线 */             outline:none;         }     </style> </head> <body>     <div class="div">div</div>     <h1>h1</h1>     <input type="text" class="no_line">     <input type="text"> </body> </html>

CSS3 盒子模型全面掌握 -cyy

 

 

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         div>a{             text-decoration: none;             display:block;                      }         div>a:hover{             color:red;             background:pink;         }         ul>li{             display:inline-block;             width:200px;height:20px;             text-align: center;line-height:20px;             border:1px solid;         }         ul>li:hover{             color:red;             background:pink;             cursor: pointer;         }     </style> </head> <body>     <div>         <a href="">html</a>         <a href="">css</a>     </div> <hr>     <ul>         <li>li</li>         <li>li</li>         <li>li</li>     </ul> </body> </html>

CSS3 盒子模型全面掌握 -cyy

 

 

使用visibility控制元素隐藏:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         div{             border:1px solid;             margin:20px;             background:pink;         }         div:first-of-type{             /* display:none;不占空间 */             /* display:none; */              /* visibility和opacity类似,相当于眼睛看不见,但依然占据空间 */             /* visibility:hidden; */             opacity: 0;         }     </style> </head> <body>     <div>         div1     </div>     <div>         div2     </div> </body> </html>

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

CSS3 盒子模型全面掌握 -cyy

 

 

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;             padding:0;         }         div{             width:100%;             height:500px;             background:lightblue;         }         p{             border:1px solid;             background:pink;             width:200px;             height:-webkit-fill-available;         }     </style> </head> <body>     <div>         <p>111</p>     </div> </body> </html>

CSS3 盒子模型全面掌握 -cyy

 

 

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;             padding:0;         }         div{             background:lightblue;             margin:0 auto;             width:fit-content;         }     </style> </head> <body>     <div>111</div> </body> </html>

CSS3 盒子模型全面掌握 -cyy

 

 

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

 

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="keywords" content="关键词1,关键词2,关键词3">     <meta name="description" content="网站描述bla bla">     <title>网站标题</title>     <style>         *{             margin:0;             padding:0;         }          article{             /* width:min-content; */             width:max-content;         }         div{             background:lightblue;             margin-bottom:10px;             padding:10px;         }     </style> </head> <body>      <article>         <div>             层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。         </div>          <div>             层叠样式表。         </div>     </article> </body> </html>