边框、display、盒子模型、浮动、溢出、定位、z-index

目录

• 边框
• display
• 盒子模型
• 浮动
• 溢出
• 定位
• z-index

边框

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;
        }