标签：css position ble 上下左右 块元素 display 特性 padding alt
一、CSS三大特性
1. css层叠性
层叠性是指多种CSS样式的叠加，如果出现样式冲突，会按照CSS书写的顺序，以最后的样式为准。
2. css继承性
书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
3. css优先级
二、CSS盒子模型
1. 盒子边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> /*盒子边框：border （border-width | border-style | border-color）*/ div { width: 100px; height: 100px; border-width: 1px; border-color: pink; border-style: solid; /* none | hidden | dotted 点线| dashed 虚线| solid 实线| double 双实线*/ /*border: 1px solid pink; 连写*/ } </style> </head> <body> <!-- div是一个典型的盒子 --> <div></div> </body> </html>
2.盒子内边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> div { /*注：padding会撑开带有 width 和height的盒子，若父盒子给定了宽度，则会撑开，若子盒子没有给定宽度，用的默认的，则不会撑开*/ width: 80px; /*实际宽度 100px*/ height: 30px; /*实际高度 50px*/ border: 1px solid pink; /*盒子内边距padding（设置上下左右的边距）*/ padding: 10px; } a { height: 26px; background-color: #ccc; display: inline-block; line-height: 26px; text-decoration: none; color: #fff; /*内边距：padding-top、padding-bottom、padding-left、padding-right*/ padding: 2px; /*不方便给宽度时可以使用padding*/ } </style> </head> <body> <div>文本信息</div> <a href="#">首页</a> <a href="#">移动客户端</a> </body> </html>
3. 盒子外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> div { width: 100px; height: 100px; margin: 5px; border: 1px solid pink; } </style> </head> <body> <div></div> <div></div> </body> </html>
4. 嵌套块元素垂直外边距合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> /*嵌套块元素垂直外边距合并 解决方案 1. 为父元素定义1px的上边框或上内边框(会增大盒子，一定要减去边框距离) 2. 为父元素添加 overflow:hidden*/ .father { width: 100px; height: 50px; background-color: pink; /*border: 1px solid pink;*/ overflow: hidden; } .son { width: 50px; height: 30px; background-color: gray; margin: 10px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
5. 盒子居中对齐、圆角、阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> div { width: 100px; height: 100px; margin: 0 auto; /* 盒子水平居中的常用写法，上下是0， 左右auto*/ border: 1px solid pink; text-align: center; /*让盒子内容如文字、行内元素、行内块元素、居中对齐*/ /*盒子圆角*/ /*border-radius: 100%; 盒子宽高相同时，100%则表示一个圆*/ border-radius: 10px; /*或指定圆角半径*/ /*border-radius: 10px 15px 20px 25px; 或分别指定四个圆角的半径*/ /*盒子阴影：h-shadow水平阴影的位置，允许负值（必需）；v-shadow 必需；blur 模糊距离（可选）；spread 阴影的尺寸（可选）；color 阴影的颜色（可选）；inset将外部阴影outset改为内部阴影（可选）*/ box-shadow: 2px 2px 20px 2px pink; } </style> </head> <body> <div>盒子内容</div> </body> </html>
6. 盒子浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> div { /*浮动 left | right | none：可以使多个块元素如div在一行展示；可以让元素默认转换为行内块元素*/ float: left; } .up { width: 100px; height: 50px; background-color: pink; } .down { width: 120px; height: 70px; background-color: gray; float: right; } </style> </head> <body> <div class="up"></div> <div class="down"></div> </body> </html>
三、CSS练习
1. 背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> /* body { 背景颜色 background-color: pink; 背景图片：body中的内容将显示在背景图片之上 background-image: url(baidu.png); 是否平铺：默认repeat背景图像在纵向和横向上平铺|no-repeat背景图像不平铺|repeat-x背景图像在横向上平铺|repeat-y背景图像纵向平铺 background-repeat: repeat-y; } */ /* div { width: 500px; height: 5000px; background-color: purple; background-image: url(baidu.png); background-repeat: no-repeat; 背景图片平铺位置：水平、垂直，可以跟方位名词 top、bottom、right、left、center，也可以跟实际px值 background-position: center top; 设置背景图片是否随滚动条滚动：scroll|fixed background-attachment: fixed; }*/ div { width: 500px; height: 5000px; /*背景相关属性简写：书写顺序无严格要求*/ background: transparent url(baidu.png) repeat-y scroll 50% 0; } </style> </head> <body> <div> </div> </body> </html>
2. 购物车
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> a { width: 100px; height: 80px; background: url(test.png) no-repeat; display: block; } a:hover { background-position: left bottom; /*鼠标经过时切换背景图片对齐方式:即切换为登录*/ } </style> </head> <body> <a href="#"></a> </body> </html>
3. 背景半透明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> body { background-color: pink; } div { width: 200px; height: 500px; color: #fff; /*设置背景透明度：red、green、blue、alpha（透明度 0-1）*/ background: rgba(0, 0, 0, 0.2); } </style> </head> <body> <div></div> </body> </html>
4. 表格细边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> table { width: 100px; height: 50px; border: 0.5px solid black; } td { border: 0.5px solid black; text-align: center; } table, td { border-collapse: collapse; /* 合并表格边框 */ } </style> </head> <body> <table cellspacing="0" cellpadding="0"> <tr> <td>1.1</td> <td>1.2</td> </tr> <tr> <td>2.1</td> <td>2.2</td> </tr> </table> </body> </html>
5. 新浪导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> .nav { height: 50px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; background-color: #fcfcfc; } .nav a { height: 50px; line-height: 50px; display: inline-block; color: #4c4c4c; text-decoration: none; /*上下0px，左右18px*/ padding: 0px 18px; /*padding：10px 20px 30px; 上 10px，左右20px，下30px*/ /*padding: 10px 20px 30px 40px; 上右下左*/ font-size: 14px; } .nav a:hover { background-color: #edeef0; color: #ff8500; } </style> </head> <body> <div class="nav"> <a href="#">首页</a> <a href="#">新闻客户端</a> <a href="#">设为首页</a> <a href="#">奔跑吧</a> </div> </body> </html>
6.
标签：css position ble 上下左右 块元素 display 特性 padding alt
原文地址：https://www.cnblogs.com/sharef/p/10346005.html
