CSS布局相关

盒子模型+浮动+定位

float:left;
把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
浮动元素脱离正常流,布局时后面元素当它不存在（文字还是当它存在，环绕其身边），但仍然在dom树上。

包裹性:
    float属性会改变元素display属性最终的计算值。
破坏性:
    破坏性是指元素浮动后可能导致父元素高度塌陷
    因为浮动元素被从文档正常流中移除了，父元素当然还处在正常流中，所以父元素不能被浮动元素撑大。

清除浮动:

清除浮动的本质:是清除浮动元素脱离标准流造成的影响
清除浮动的策略:闭合浮动、只让浮动在父盒子内部影响、不影响父盒子外面的其他盒子

1.额外标签法:也被称之为隔墙法,W3C推荐用法
    clear:both
        //优点:通俗易懂、书写方便   //缺点:添加许多无意义的标签,结构化差
2.父级元素添加overFlow属性
    overflow:hidden/auto/scroll
        //优点:代码简洁、缺点:无法显示出溢出的部分(会把盒子之外露出的部分切掉)

3.父级添加after伪元素
    .clearfix:after{
        content:'';
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .clearfix{//IE6、7专有
        *zoom:1;
    }
    //优点:没有增加标签、结构简单  //缺点:照顾低版本浏览器  代表网站(百度、淘宝、网易等)
4.父级添加双伪元素
    .clearfix:before,.clearfix:after{
        content:'';
        dispalytable;
    }
    .clearfix:after{
        clear:both;
    }
    .clearfix{
        *zoom:1;
    }
    //优点:代码更简介  缺点:照顾低版本浏览器  代表网站(小米、腾讯等)

 定位

定位:将盒子定在某一个位置、定位也是摆放盒子、按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式:指定一个元素在文档中的定位方式
边偏移:决定了该元素的最终位置
position:
    static:静态定位
    relative:相对定位
    absolute:绝对定位
    fixed:固定定位
    sticky:粘性定位

静态定位:
    默认定位方式、无定位的意思
    没有脱离标准流、无边偏移
相对定位:
    相对定位是元素在移动位置的时候、是相对它原来的位置来说的(自恋型)
    1.总是以自己原来的位置移动的
    2.原来的标准流位置继续占用、后面的盒子任然以标准流的方式对待(不脱标)
绝对定位:
    绝对定位是元素在移动位置时，是相对于它祖先元素的(拼爹型)
    1.如果没有祖先元素，则以浏览器定位为主
    2.如果祖先有定位(相对、绝对、固定定位),则以最近一级的有定位的元素为参考点移动位置
    3.绝对定位不在占用原先的位置(脱标)
固定定位:
    固定定位是元素固定于浏览器可视区的位置、主要使用场景:可以在浏览器页面滚动时元素的位置不会改变
    1.以浏览器的可视化窗口为参照点移动元素(跟父元素没有关系、不随滚动条滚动)
    2.固定定位不在占有原先的位置(脱标的、可以看做是一种特殊的绝对定位)
粘性定位:
    被认为是相对定位和固定定位的混合，Sticky粘性的
    1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
    2.粘性定位占有原先的位置(相对定位特点)
    3.必须添加 top 、left 、right 、bottom 的其中一个
子绝父相:
    1.子级绝对定位、不会占用位置、可以放到父盒子里面的任何一个地方、不会影响其他的兄弟盒子
    2.父盒子需要加定位限制子盒子在父盒子内显示
    3.父盒子布局时、需要占有位置、因此父盒子只能是相对定位

 精灵图sprites:

background-position 
一般情况下精灵图都是负值。(网页中的坐标、X轴右边走是正值、左边走时负值、Y轴同理)
background:url(XXX.jpg) no-repeat x轴 y轴;
或者
background-position x轴 y轴;
缺点:
    1.图片文件比较大
    2.图片本身的放大和缩小会失真
    3.一旦图片制作完毕想要更换非常复杂

字体图标:

轻量级:一个图标字体要比一系列的图像要小、一旦字体加载了、图标就会马上渲染出来、减少服务器的请求
灵活性:本质其实是文字、可以随便的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有浏览器
1.引入fonts文件夹
2.字体声明
3.使用
追加字体图标
selectionjson从新上传

移动端布局

1.单独制作移动端页面

流式布局(百分比布局)
flex弹性布局
less+rem+媒体查询布局
混合布局

2.响应式页面兼容布局

媒体查询
bootstrap

Flex

flex是flexble Box 的缩写，意为弹性布局、用来为盒状模型提供最大的灵活性、任何一个容器都可以指定为flex布局
当父元素设为flex布局后、子元素的float、clear和vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
通过给父盒子添加flex属性、来控制子盒子的位置和排列方式
常见父项属性
flex-direction 设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

rem单位:

1.em相对于父元素的字体大小来说的、
2.rem(root em)是相对单位、类似于em、em是父元素字体大小
3.不同的是rem的基准是相对于html元素的字体大小
4.比如，根元素设置font-size=12px;非根元素这只width：2rem,则转换成px表示24px;

 媒体查询

媒体查询 Media Query
使用@media查询，可以针对不同的媒体类型定义不同样式
@Media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中、页面也会根据浏览器的宽度和高度重新渲染页面

引入资源就是针对不同屏幕尺寸、调用不同的css文件

 

Less

css弊端
1.不方便维护、冗余度很高
2.CSS没有很好的计算能力

Less是一门CSS扩展语言、也成为CSS预处理器、是一门新的语言、在CSS的语法基础上、引入了变量、mixin(混入)、运算以及函数等功能
常见css预处理器:sass、less、stylus


变量:
    变量是指没有固定的值、可以改变、
    @变量名:值
    #变量命名规范
    1.必须有@为前缀  2.不能包含特殊字符    3.不能以数字开头    4.大小写敏感

嵌套:
    如果遇到(交集|伪类|伪元素选择器)
    1.内层选择器的前面没有&符号、则它被解析成父选择器的后代
    2.如果有&符号、它就被解析为父元素自身或父元素的伪类
运算:
    运算符中间有个空格隔开1px + 5
    对于两个不同的单位之间运算、运算结果的值取第一个值的单位
    如果两个值之间只有一个值有单位、则运算结果就取该单位
    元素大小取值方法:
        最后的公式:页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
        屏幕宽度/划分的份数 就是html font-size的大小
        或者页面的元素rem值= 页面元素值(px)/html font-size字体大小