工作项目总结心得_项目心得总结-CSDN博客

本文链接：https://blog.csdn.net/Smell_rookie/article/details/81709325

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

技术总结：

一、盒子居中

           /*父盒子内填充,用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低版本的话,可做如下处理:
               <input type="text" name="text" value="请输入文本" class="text" onFocus="if(this.value=='请输入文本') this.value = ''" onBlur="if(this.value=='') this.value='请输入文本'" />

强制使用高级浏览器渲染页面 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

五、布局小技巧:
               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)
               的形式.图片的命名也是类似.