border 边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .d1 { border-color: red; border-style: solid; # 设置边框 solid实线 none无边框 dotted点状虚线边框 dashed矩形虚线边框 border-width:1px; border: 5px solid red; # 简便写法 按照顺序设置边框宽度,形状和颜色 border-left:5px solid red # 左边框 border-right:5px solid red # 右边框 border-top:5px solid red # 上边框 border-bottom:5px solid red # 下边框 border-radius:5% # 改变边框的角的弧度 height: 200px; width: 200px; } </style> </head> <body> <table class="d1"> <thead> <th>name</th> <th>sex</th> </thead> <tbody> <td>alex</td> <td>male</td> </tbody> </table> </body> </html>
盒子模型
margin 外边距 元素和元素之间的距离
padding 内边距 内容和边框之间的距离
border 围绕在内边距和内容外的边框
centent 盒子的内容,显示文本和图像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .d1,.d2{ border: 5px solid green; padding: 18px 20px; # 上下18px,左右20px height: 100px; # 内容的宽高 width: 100px; background-color: red; # 背景颜色 } </style> </head> <body> <div class="d1"> 我是div1 </div> <div class="d2"> 我是div2 </div> </body> </html>
float 浮动
父级标签塌陷问题:当标签都处于浮动,父级标签内的其他标签会自动顶到上边,造成被浮动标签遮盖的现象
有两种方式清除浮动,解决父级标签塌陷问题
1.给父级标签加高度
2..clearfix:after{
content: '';
display: block;
clear: left;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; padding: 0; } .c1{ background-color: red; width: 200px; height: 100px; float: left; } .c2{ background-color: green; width: 200px; height: 140px; float: left; } .c3{ background-color: yellow; width: 400px; height: 100px; } .cc { # 方法: 给父级标签加高度 height:100px } .clearfix:after{ # 方法二: 使用clearfix.after content: ''; display: block; clear: left; /* 清除左边的浮动 */ } .cc{ content: ''; display: block; clear: both; } </style> </head> <body> <div class="cc clearfix"> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3"></div> </body> </html>
标签嵌套
通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。div是可以包含div的
p标签比较特殊，不能包含块级标签，p标签也不能包含p标签。p标签套p标签，会自动补全,成为三个p标签
定位
static 无定位
relative 相对定位 相对于自己原本位置的左上角
absolute 绝对定位 脱离文档流,会存在父级标签塌陷问题
fixed 固定定位 不管页面怎么滚动,始终固定在一个位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; padding: 0; } .c1,.c3{ height: 100px; width: 100px; background-color: red; } .c2{ height: 100px; width: 100px; background-color: green; position: relative; 相对定位 相对于原来的位置上移100px右移100px top:-100px; left: 100px; } .c3{ position: absolute; 绝对定位 先找距离最近的已定位的祖先元素,如果没有就根据body,即页面左上角进行定位 top:40px; left: 40px; } .cc{ margin-left: 200px; cc为c3的父级标签,cc设置了相对定位,c3在绝地定位时会参照cc的位置 position: relative; } .c4{ height: 1000px; width: 100px; background-color: yellow; } .s1{ height: 40px; line-height: 40px; text-align: center; width: 80px; background-color: pink; position: fixed; 固定定位 left: 40px; bottom: 40px; } .s1 a{ text-decoration: none; # 去除下划线 } .s1 a:hover{ color:black; # 设置鼠标放上时的样式 } </style> </head> <body> <a href="" name="top"></a> #埋点 <div class="c1">c1</div> <div class="c2">c2</div> <div class="cc">cc <div class="c3">c3</div> </div> <div class="c4">c4</div> <span class="s1"> <a href="#top">回到顶部</a> </span> </body> </html>
z-index 模态对话框
决定谁覆盖谁 数值大的覆盖数值小的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .shadow{ background-color: rgba(0,0,0,0.3); /*背景颜色的透明度*/ opacity: 0.3; /*整个标签内容透明度*/ position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 99; # 设置z-index的值 } .model{ width: 700px; height: 400px; background-color: white; position: fixed; top:50%; left: 50%; margin-left: -350px; # 让模态对话框位于中心 margin-top: -200px; z-index: 100; # 设置z-index的值,需要比阴影部分的值大,才会覆盖 } </style> </head> <body> <div class="shadow"></div> <div class="model"></div> <div>我是底层,正常文档流</div> </body> </html>
圆形头像示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 80px; width: 80px; border-radius: 50%; # 圆形 border: 1px solid red; overflow: hidden; # 将溢出圆形之外的部分隐藏 } .c1{ height: 80px; width: 100px; border: 1px solid green; overflow: scroll; # 添加滚动条,可以查看溢出的部分 } div img{ max-width: 100%; # 同比例缩放 } </style> </head> <body> <p class="c1"> 猴哥,假云龙,书记,班长,强,静哥,兰妹妹,配哥,大眼萌,棒哥,星哥 </p> <div> <img src="znns.jpg" alt=""> </div> </body> </html>