day47前端开发(03)

边框简介

HTML任何块元素和行内元素几乎都可以设置边框属性

div元素、img元素、table元素等

每个页面边框3个方面描述: 宽度、样式、颜色

border-left-width: 5px; # 设置边框的宽度（厚度）
border-left-style: # 设置边框的样式、例如实线、虚线
border-left-color: #0000ff; 设置边框的颜色
    
border-left:3px solid black; # 上面三个边框属性的缩写
    
border: 10px solid orange;

画园
border-radius: 50%;

border-style

border-style 属性用来设置元素中所有边框的样式，或者单独为某个边框设置样式，其语法格式如下：

border-style:border-top-style border-right-style border-bottom-style border-left-style

border-style属性的可选值如下:

值	描述
none	无边框
hidden	隐藏边框，与"none"类似
dotted	定义点状虚线边框
dashed	定义虚线边框
solied	定义实线边框
double	定义双实现边框，双实线边框的宽度 border-width的值
groove	定义3D凹槽边框 效果取决于 border-color的值
ridge	定义3D垄状边框 效果取决于 border-color的值
inset	定义3D嵌入边框 效果取决于 border-color的值
outset	定义3D突出边框 效果取决于 border-color的值
inherit	从父元素继承边框样式

display

块级元素和内联元素

块级元素(block):块元素是一个元素，占用了全部宽度，在前后都是换行符;总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
    <h1> <p> <div>

内联元素(inline):内联元素只需要必要的宽度，不强制换行;和相邻的内联元素在同一行
	<span> <a>

"""
行内标签是无法设置长宽 只有块儿级可以设置
"""
display:none 彻彻底底的隐藏标签(页面上不会显示 也不会保留标签的位置)
visibility: hidden 隐藏的不彻底

盒子模型

前言

盒子模型，英文即box model。无论是div、span、还是a都是盒子。

但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
1.快递包里面的实际物体			 content(内容)
2.物体与内部盒子墙的距离	       padding(内边距、内填充)
3.快递盒的厚度				   border(边框)
4.快递盒之间的距离				  margin(外边距)

padding: 20px; 上下左右
padding: 20px 40px;  上下   左右
padding: 10px 20px 30px;上  左右  下
padding: 10px 20px 30px 40px;上 右 下 左
margin与padding用法一致

针对标签的嵌套 水平方向可以居中
margin: 0 auto;

浮动

浮动就是用来做页面布局的


浮动的现象
	float:left\rigth
        
浮动带来的影响
	浮动的元素是脱离正常文档流的 会造成父标签塌陷
    
 如果解决浮动的影响
	clear
    
 解决浮动带来的影响终极方法
	先提前写好样式类
    	.clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
    谁塌陷了 就给谁添加clearfix样式类就可以了
   
ps:浏览器会优先展示文本内容(如果被挡住)

溢出

div {
    	height: 150px;
    	width: 150px;
    	border: 5px solid greenyellow;
    	border-radius: 50%
        overflow: hidden;
	}

div img {
    	max-width: 100%;
	}

CSS的四种定位方式

静态定位

1.静态定位:
    设置方式position: static
静态定位的盒子是标准流状态，用于取消定位。静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。

相对定位

设置方式为position: relative;相对定位的盒子没有脱离标准流，在页面中占据位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。
	.c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            position: relative;
        }

绝对定位

设置方式为position: absolute;绝对定位的盒子脱离了标准流，在页面中不占位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，绝对定位的盒子是相对设置了定位属性（静态定位不算）的最近的父级盒子的位置进行偏移，如果没有设置了定位的父级盒子，则是相对于body标签进行偏移。

绝对定位的盒子可以通过设置z-index属性改变层级。
	.c2 {
            background-color: greenyellow;
            height: 100px;
            width: 200px;
            position: absolute;
            top: 100px;
            left: 100px;
        }

固定定位

设置方式为position: fixed;固定定位的盒子脱离了标准流，在页面中不占位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，固定定位的盒子是相对浏览器串口进行偏移。不管浏览器滚动条如何滚动，固定定位的盒子永远显示在浏览器窗口，不会出现滚动条往下滚动后就看不到固定定位的盒子的情况。因此固定定位的盒子常用于做底部导航栏和顶部导航栏。

固定定位的盒子可以通过设置z-index属性改变层级。
	.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;
        }