03- CSS进阶

2019-05-09 10:45:09 阅读：172 来源： 互联网

盒子模型
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

标签：浮动,03,进阶,定位,100px,边框,border,CSS
来源： https://www.cnblogs.com/jincieryi1120/p/10837039.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

03- CSS进阶

盒子模型

Reset 重置

浮动

定位