css边框盒子模型浮动定位

今日内容概要

• 边框
• 盒子模型
• 浮动
• 定位
• 补充说明
• 简易博客页面搭建

今日内容详细

边框

border-left-widh: 5px;
border-left-style: dotted;
border-left-color: #0000ff;

border-left: 3px solid black;

border: 10px solid orange;

画圆
border-radius: 50%;

display

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

盒子模型

我们可以将标签看成是一个盒子(快递盒)

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\right

浮动带来的影响
	浮动的元素是脱离正常文档刘的 会造成父标签塌陷

如何解决浮动的影响
	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%;
}

定位

标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
	1.static静态(标签默认的状态 无法定位移动)
	2.relative相对定位(基于标签原来的位置)
	3.absolute绝对定位(基于某个定位过的父标签做定位)
	4.fixed固定定位(基于浏览器窗口固定不动)
		.ci {
            background-color: red;
            height: 100px;
            width: 100px;
            position: relative;
        }
		.c2{
            background-color: greenyellow;
            height:100px;
            width:200px;
            position:absolute;
            top:100px;
            left:100px;
        }
		.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:400;
    background-color:white;
    z-index:101;
    position:fixed;
    left:50%;
    top:50%;
    margin-left:-200px;
    margin-top:-100px;
}