前端开发3

今日内容概要

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

今日内容详细

边框

border-left-width: 5px;   /*左边框宽度*/
border-left-style: dotted;  /*边框样式*/
border-left-color: red;   /*边框颜色*/

border-left: 3px solid black;  /*可以缩写成这样*/

将边框画圆
border-radius: 50%  /*加上这个参数 并且宽高得相等 不然不是正圆*/

display

'''
行内标签是无法设置宽高的 只有块儿级标签才可以
'''
display: none;   /*彻彻底底的隐藏标签 页面上不会显示 也不会保留标签位置*/
visibility: hidden /*这个方法也能隐藏 但是隐藏的不彻底*/

盒子模型

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

1.快递包里面的实际物体			content(内容)
2.物体与内部盒子墙的距离    	  padding(内边距 内填充)
3.快递盒的厚度					border(边框)
4.快递盒之间的距离		  		  margin(外边距)

padding: 20px;  /*上下左右都是20px*/
padding: 20px 40px;  /*上下20px  左右40px*/
padding: 10px 20px 30px;  /*上10px  左右20px 下30px*/
padding: 10px 20px 30px 40px;  /*上10px 右20px 下30px 左40px*/

margin与padding用法与上述一致

针对标签的嵌套 水平方向可以居中
margin: 0 auto;  /* 上下0 左右自动*/

浮动

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

浮动的现象
	float: left\right;  /*用float方法 left靠左浮动 right靠右浮动*/

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

如何解决浮动
	clear: both;   /*可以通过clear解决*/

解决浮动带来的影响终极方法
	先提前写好样式类
    .clearfix:after {
        content:'';  /*空字符串填充*/
        display: block;  /*转换为块儿级*/
        clear: both;
    }
	之后谁塌陷了 就给谁添加clearfix样式类就可以了

ps:浏览器会优先展示文本内容(如果被挡住的话)

溢出

div {
    height: 100px;
    width: 100px;      /*块儿的大小*/
    border: 5px solid black;  /*设置边框宽度 样式及颜色*/
    border-radius: 50%;  /*将边框修饰为圆形*/
    overflow: hidden;    /*将溢出内容隐藏*/
}

div img {
    max-width: 100%;   /*将div标签下的img标签等比例填充满对应块*/
}

定位

标签在默认的情况下都是无法通过定位的参数来移动的
针对定位有四种状态
	1.static静态
	2.relative相对定位
	3.absolute绝对定位
	4.fixed固定定位(基于浏览器窗口固定不动)

.c1 {
    background-color: red;
    height: 100px;
    width: 100px;
    position: relative;   /*将定位状态改为相对定位*/
}

.c2 {
    background-color: blue;
    height;100px;
    width:100px;
    position:absolute;  /*将定位状态改为绝对定位*/
    left:100px;  /*向右移动*/
    top:100px;
}

z-index

body {
    margin: 0;
}
.cover {
    background-color: rgba(127,127,127,0.5);
    position: fixed;
    left: 0;
    botton: 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;
}