03- CSS进阶

• 盒子模型
• Reset CSS
• CSS 浮动
• CSS 定位

盒子模型

可以把页面上的元素看成一个盒子
盒子模型由内容、内边距、边框、外边距构成
padding - 内边距
margin - 外边距 ☆
border - 边框
content(width、height) - 内容
border-top: 上边框
border-right: 右边框
border-left: 左边框
border-bottom: 下边框 
double 双线
dotted 点
dashed 虚线
solid 实线
padding、margin - 参数 上右下左 顺时针
px 像素

Reset 重置

Reset - 重置CSS
浏览器解析标签的时候本身自带一些
样式，有时会导致我们自身写的样式
出现的效果不一致，每个公司会根据
自己的业务需求写一套属于自己的ResetCss

浮动

float:left 向左浮动
float:right 向右浮动
要先改成内联块状
脱离文档流
可能会造成高度塌陷
三种解决方法：
    1、overflow:hidden;不推荐只适用于纯浮动的页面布局
    2、加一个空的<div></div>;也不推荐
    3、.clearfix::{
            display:block;
            clear:both;
            content:''; 空字符
        } 推荐 比较常用

定位

作用：对元素进行精确的定位
三种形式
    1、绝对定位:position:absolute;
    2、相对定位:posttion:relative;
    3、固定定位:position:fixed;
固定定位于相对定位不脱离文档流，是相对于自己的一个偏移
绝对定位是脱离文档流的
父相子绝 保持页面的布局完整
以网页页面为基础 
left:100px
bottom:100px
right:100px
top:100px

转载于:https://www.cnblogs.com/jincieryi1120/p/10837039.html