项目总结心得

总结一下最近做的静态页面布局项目,做个总结方便今后查阅项目的疑难点,做到项目的后期技术提升工作.以下是我在做这个项目中的体会和技术感想.还望大牛手下留情!

技术总结：

一、盒子居中

            /*父盒子内填充,用padding与子盒子隔开*/
            /*.father {
                width: 200px;
                height: 200px;
                margin: 0 auto;
                background-color: darkkhaki;
                padding-left:100px;
                padding-top:100px;
            }
            
            .son {
                width: 120px;
                height: 120px;
                margin-left: -60px;
                margin-top: -60px;
                background-color: skyblue;
            }
            
            /*使用子绝父相*/
            /*.father {
                width: 200px;
                height: 200px;
                margin: 0 auto;
                background-color: darkkhaki;
                position: relative;
            }
            
            .son {
                width: 100px;
                height: 100px;
                background-color: skyblue;
                position: absolute;
                left: 50%;
                margin-left: -50px;
                top: 50%;
                margin-top: -50px;
            }*/
            /*子盒子left right bottom top都为0*/
            
            .father {
                width: 200px;
                height: 200px;
                margin: 0 auto;
                background-color: darkkhaki;
                position: relative;
            }
            
            .son {
                width: 100px;
                height: 100px;
                background-color: skyblue;
                position: absolute;
                margin: auto;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

二、清除浮动

第一种                 .clearfix:after {
                content: '';
                height:0;
                line-height: 0;
                display:block;
                visibility:hidden;
                clear:both;
                }
                .clearfix {
                zoom:1;
                }

                使用在浮动元素的父级元素那里加上该样式

第二种

                overflow: hidden;

                同样在父级元素那加上此样式

第三种                clear:both

                在受影响元素那里直接加上这个样式清除浮动

三.隐藏元素

第一种
                使用子绝父相,并且margin-left值为负数

第二种
                设置元素的宽高为0

第三种
                display:none

第四种
                opacity:0;(设置透明度为0)

第五种    
                vilisity:hidden(超出隐藏)

四、兼容处理:

ie8背景图片不显示

                将background改为background-img

ie8圆角阴影不显示
                做成背景图片或者导入ie-css3-htc文件并在使用圆角的元素设置属性
                behavior:url(ie-css3.htc);
各版本的距离设置不合理
                单独写一个样式,采用分支的方式,遇到ie浏览器就用另外一套样式去渲染页面

内核渲染                凡是使用了C3的属性,前缀都必须写上浏览器的内核标志,如圆角的使用
                -webkit-border-radius:50%;
    　　              -moz-border-radius:50%;
    　　              -ms-border-radius:50%;
                        -o-border-radius:50%;
                    border-radius:50%;

文本框提示语            placeholder="请输入密码"这是高级浏览器兼容
                
                若是ie低版本的话,可做如下处理:
                

强制使用高级浏览器渲染页面    

五、布局小技巧:
                1、首先需要确定好版心,比如1100px;版心样式可以这样写:
                .context{width:110px;margin:0 auto;}之后页面如果是以版心为边缘的布局,
                就可以在内容的父盒子中引用版心样式,避免放大缩小布局分散开
                
                2、遇到文字跟图片水平居中对齐可以用一个盒子将文字装起来，再设置盒子的高度为
                图片高度大小 并且line-height为高度大小.
                
                3、遇到大背景图片的话 在父盒子里面写
                width:100%;  overflow:hidden;  display: flex;  justify-content: center;(图片内容居中)
                子img的话就只写个高度就可以了.
                
                4、超出文字隐藏并且省略号显示：
                overflow: hidden;
                text-overflow: ellipsis;(显示为...)
                white-space: nowrap;(禁止换行 用来控制是一行还是多行后就显示省略号)

                5、布局一行文字的时候尽量考虑到装它的盒子的高度，并且让文字居中，这样就可以少padding-top的样式.

                6、一行的图片要使图片间有距离并且两边的图片贴在框边上，需要在所有图片外加上一个父盒子,用来处理
                超出视觉范围盒子的部分隐藏掉,父盒子宽度为(四张图片大小*4+margin-right*4) 设置属性 overflow:hidden;
                
六、其他小技巧    
                1、对于布局、样式、行为做到分离.并且制定好基本样式.如果头部和尾部是一样的,可以写一个footer.css和
                head.css的样式,便于调用.
                
                2、命名可以考虑驼峰法或者主体(nav、head、content、footer)_栏目(right、left、center、top、bottom)_内容区(title、tips、hot)
                的形式.图片的命名也是类似.