css布局笔记

     布局主要用三种方法：flexbox，float，position

    1，把li元素修改成 inline，制作成水平菜单

    2，max-width 替代width可以使浏览器处理小窗口情况

    3， box-sizing： border-box  ，内边距和边框不再会增加它的宽度

          

        可以确保所有的元素都会用这种更直观的方式排版

        box-sizing是个很新的属性，目前还应该像上例那样用-webkit-和 -moz-前缀

        这可以启用特定浏览器实验中的特性，同时记住它是支持IE8+的

    4，position属性（层模型，Layer）：

        static，默认值

        relative，相对定位，可以设置top right bottom left值而定位到任何位置

        fixed，固定定位，让元素相对视窗定位，脱离文档流

        absolute，绝对定位absolute与fixed的表现类似，但它不是相对于视窗而是相对于最近的“positioned”父元素，脱离文档流之后不占据空间。如果绝对定位的元素没有“positioned”父元素，那么它是相对于文档的 body 元素，并且会随着页面滚动而移动。ps：一个“positioned”元素是指 position 值不是static的元素。 可以通过z-index来设置它们的堆叠顺序

        如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方，而且即便子元素z-index设置的比父元素小，仍会出现在父元素上方，如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效

    5，float：浮动，clear：清除浮动

        让元素正常排列

        

        图片超过框的高度时

        

        浮动定位的水很深

        比如浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性，因此，无法用来实现自动填满容器的自适应布局：

        

          左侧固定，右侧自适应（原文链接）：利用块状元素的流体特性，左侧部分进入到了右侧部分的margin里面；元素的BFC（块级格式化上下文）特性，左侧部分设置右侧margin间距，来代替右侧来设置左侧margin间距，代码如下

        

        overflow:hidden 这个超棒的哦！不像浮动和绝对定位，玩得有点过。也就是溢出剪裁什么的，本身还是个很普通的元素。因此，块状元素的流体特性保存相当完好，附上BFC的独立区域特性，可谓如虎添翼，宇宙无敌。然而由于很多场景我们是不能float+overflow的，因此，无法作为一个通用CSS类整站大规模使用。因此，float+overflow的自适应布局，我们可以在局部（你确定不会有什么被剪裁的情况下）很happy地使用

        一个比float+overflow更牛逼的声明，即BFC特性加身，又流体特性保留：

        

        display:table-cell 让元素表现得像单元格一样，IE8+以上浏览器才支持。跟display：inline-block一样，会跟随内部元素的宽度显示，看样子也是不合适的命。但是，单元格有个非常神奇的特性，就是你宽度值设置地再大，大到西伯利亚，实际宽度也不会超过表格容器的宽度，但是，还是有两点制约，一是IE8+以上浏览器兼容，有些苦逼的团队还要管IE6；二是应付连续英文字符换行有些吃力（可以嵌套table-layout：fixed解决）。但是，总体来看，适用的场景要比 overflow:hidden 广博很多

        

        对BFC声明家族大致过了一遍，能担任自适应布局重任的也就是：

        

        由于overflow有剪裁和出现滚动条等隐患，不适合作为整站通用类，于是，最后，类似清除浮动的通用类语句：

        

        两栏或多栏自适应布局的通用类语句是（block水平标签，需配合浮动）：

        

        当然，由于和浮动元素合作，清除浮动还是要的，于是，就有了.fix + .l/.r + .cell的无敌组合，可以多栏，也可以无限嵌套。如果是局部，且确认安全；或有连续英文字符换行的隐患，你也可以使用.fix + .l/.r + .ovh的无敌组合，可以多栏，也可以无限嵌套

    6，媒体查询（没懂）：百分比布局

    7，有时候可以用inline-block来代替浮动，vertical-align 属性会影响到inline-block元素，可以把它的值设置为top

    8，新属性，column、flexbox

    9，css框架：

        

    10，对齐方式：

       1）行内元素水平居中，如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素

        2）块级元素水平居中，定宽可以通过设置“左右margin”值为“auto”来实现居中；不定宽比如网页上的分页导航，因为分页的数量是不确定的，所以不能通过设置宽度来限制它的弹性，可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素加text-align:center 来实现居中效果

        3）垂直居中：子元素是行内元素时，高度是由其内容撑开的，可设定父元素的line-height为其高度来使得子元素垂直居中；子元素是块级元素但子元素高度没有设定，在不知道子元素的高度时，无法通过计算得到padding或margin来调整，可给父元素设定display:table-cell;vertical-align:middle，子元素设置为inline-block元素；子元素是块级元素且高度已经设定，可计算子元素的margin-top或margin-bottom，计算方法为父(元素高度-子元素高度)/2；子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0，子元素本身设置vertical-align:middle；相对+绝对定位使用absolute，利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto

    11,布局应用：

        双飞翼布局和圣杯布局，自适应布局

        三栏网页宽度自适应布局方法：绝对定位法，margin负值法，自身浮动法（原文链接写于2009年）

       例子：左中右三栏布局，左右两栏宽度固定（要想不固定将宽度值改为百分值即可），中间栏宽度自适应

        1）绝对定位法

        

        优点是，理解容易，上手简单，受内部元素影响而破坏布局的概率低，就是比较经得起折腾。

       缺点在于，如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。然而，一般情况下，除非用户显示器分辨率宽度>=1600像素，否则用户不会把浏览器缩小到1000像素以下的，所以该缺陷危害指数3

       2）margin负值法

       这种方法是在实际的网站中应用的最多的，我个人感觉多少有些跟风的嫌疑。此方法很难用一句话概括。首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采取margin负值定位的，左栏左浮动，margin为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%，margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素

       

        需要注意几个div的顺序，无论是左浮动还是右浮动，先是主体部分div，这是肯定的，至于左右两栏谁先谁后，都无所谓，我测试了IE6，Firefox，以及chrome浏览器，表现一致。此方法的优点：三栏相互关联，可谓真正意义上的自适应，有一定的抗性——布局不易受内部影响。缺点在于：相对比较难理解些，上手不容易，代码相对复杂。出现百分比宽度，过多的负值定位，如果出现布局的bug，排查不易

       3）自身浮动法

       此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应

       

        这里三个div标签的顺序的关键是要把主体div放在最后，左右两栏div顺序任意。此方法的优点是：代码足够简洁与高效不足在于：中间主体存在克星，clear：both属性。如果要使用此方法，需避免明显的clear样式

    12，flexbox布局，flexbox-direction的默认值为row横向排列，可改为column纵向排列，row-reverse和column-reverse反向排列，子元素溢出可给父元素添加属性flex-wrap：wrap

    13，flexbox实现水平垂直对齐，align-items控制 flex 项在交叉轴上的位置，justify-content控制 flex 项在主轴上的位置，

        flex项排序，order 值大的 flex 项比 order 值小的在显示顺序中更靠后

        flex嵌套，