目录
边框
border-left-width: 5px; 宽度
border-left-style: dotted; 样式
border-left-color: #0000ff; 颜色
border-top-width: 10px;
border-top-style: solid;
border-top-color: green;
border-right-width: 10px;
border-right-style: dashed;
border-right-color: red;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: darkorange;
前缀一样可以缩写
border-left: 3px solid black;
border-top: 5px dotted orange;
打乱顺序也可以
border-right: coral 10px solid;
border-bottom: dashed 15px red;
这个就是上下左右都用一样的格式
border: 10px solid orange;
画圆
边框默认是矩形，通过 border-radius: 50%; 变成圆形，但要设置长宽，长宽不一样就是矩形
display
"""
行内标签是无法设置长宽 只有块儿级可以设置
"""
display:none 彻彻底底的隐藏标签(页面上不会显示 也不会保留标签的位置)
没隐藏之前
隐藏之后
visibility: hidden 隐藏的不彻底，不会显示，但是位置还会保留，不好用
盒子模型
我们可以将标签看成是一个盒子(快递盒)
所有标签都有，主要是说div标签
1.快递包里面的实际物体 content(内容)
2.物体与内部盒子墙的距离 padding(内边距、内填充)
3.快递盒的厚度 border(边框)
4.快递盒之间的距离 margin(外边距)
padding-left: 50px; 让文字离边框左边50px
padding-top: 60px;让文字离边框上边60px
padding-right: 10px;让文字离边框右边50px，要文字长度够长，不然看不出效果
padding-bottom: 80px;让文字离边框下边50px
padding: 20px; 一个位置，上下左右
padding: 20px 40px;两个位置 上下 左右
padding: 10px 20px 30px;三个位置 上 左右 下
padding: 10px 20px 30px 40px;四个位置 上 右 下 左
按照上、右、下、左的顺序
margin
调节边框与边框的距离
margin-top: 20px;
margin与padding相似
浮动
浮动就是用来做页面布局的
浮动的现象
float:left\right，多个浮动依次排列
浮动带来的影响
浮动的元素是脱离正常文档流的 会造成父标签塌陷
未浮动前
浮动后
如何解决浮动的影响
clear (地面 天空)不允许出现浮动的元素
解决浮动带来的影响终极方法
先提前写好样式类
.clearfix:after { 给某个标签尾部添加东西
content: ''; 添加空字符串，是文本的格式
display: block; 变成块级标签，独占一行
clear: both; 左右两边不允许有浮动元素（地面、天空）
}
谁塌陷了 就给谁添加clearfix样式类就可以了
ps:浏览器会优先展示文本内容(如果被挡住)
溢出
边框里面放不下
overflow: hidden; 直接多的就隐藏
overflow: auto; 生成一个可以滚动的区域查看
图片操作
图片溢出了
div {
height: 150px;
width: 150px;
border: 5px solid greenyellow;
border-radius: 50%;
}
overflow: hidden; 被隐藏
overflow: auto; 滚动条，效果也不好
div img {
max-width: 100%; 等比缩放，要配合overflow使用，先把图片放进去
}
定位
标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
1.static静态(标签默认的状态 无法定位移动)
2.relative相对定位(基于标签原来的位置)
3.absolute绝对定位(基于某个定位过的父标签做定位)
4.fixed固定定位(基于浏览器窗口固定不动)
relative相对定位(基于标签原来的位置)
.c1 {
background-color: red;
height: 100px;
width: 100px;
position: relative;
}
absolute绝对定位(基于某个定位过的父标签做定位,就是一个已经定位过了的标签)
.c1 {
background-color: red;
height: 100px;
width: 100px;
position: relative;
}
.c2 {
background-color: greenyellow;
height: 100px;
width: 200px;
position: absolute;
top: 100px;
left: 100px;
}
fixed固定定位(基于浏览器窗口固定不动)
.c1 {
border: 5px solid black;
height: 100px;
width: 100px;
position: fixed;
right: 100px;
bottom: 200px;
}
z-index
做出分层的页面
body {
margin: 0; 把浏览器自带的间隙去除
}
.cover {
background-color: rgba(127,127,127,0.5);
position: fixed; 把位置固定
left: 0; 把浏览器所有位置顶满
bottom: 0;
right: 0;
top: 0;
z-index: 100; 浏览器默认高度是零，可以改
}
.modal {
height: 200px;
width: 400px;
background-color: white;
z-index: 101;
position: fixed;
left: 50%; 调整位置
top: 50%;
margin-left: -200px;
margin-top: -100px;
}
