- 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>
边距合并与负值使用：
<!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>
尺寸限制与内边距使用方法：
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>
圆角控制的详细使用：
<!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>
轮廓线使用技巧：
<!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>
可以看到轮廓线和边框线的区别：
轮廓线不占空间，边框线占据空间。
<!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>
元素显示的多种模型控制：
<!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>
使用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>
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>
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>
其实我感觉跟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>
