本人系计算机专业汉子一枚，一开始接触C、C++、Java等等编程语言，但都是跟着老师走，把基础学了，会点皮毛。当时都天真的认为学的都是些没用的东西，因为自己根本就没有用出去，没有真正的做一些实用的东西出来。后来在大三学习了前端开发，感觉还不够扎实，所有来黑马系统的学习一番，我把我这些天的心得给大家分享一下。

  清楚浮动：在我们的实际工作中，很多情况下我们不方便给父级盒子设置高度，但是由于浮动之后子元素不占据原有的位置，最后父盒子高度为0，就影响了下面的标准流盒子。所以清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。清楚浮动的方式：一、额外标签法，二、父级添加overflow属性方法，三、使用after伪元素清除浮动，四、使用双伪元素清除浮动。通常在我们的实际工作中我们基本上选用的是（使用after伪元素清除浮动） .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。
  定位：定位也是我们网页布局中重要的一个途径。定位由定位模式与边偏移这两个属性组成。根据定位模式的不同，定位又分为四种（静态定位、相对定位、绝对定位、固定定位）。其中我们实际中用的较多的是相对定位与绝对定位。其中就有定位口诀 —— 子绝父相：就是子级是绝对定位，父级要用相对定位。主要是相对定位不脱离标准流，绝对定位是根据带有定位的父级（祖级）作为参考对象，如果父级（祖级）元素中不带有定位属性，那么他就会以浏览器做为参考对象。绝对定位中盒子水平居中不能通过设置margin：auto来解决。绝对定位水平居中公式：left：50%，margin-left盒子自身宽带的一半（负值）。在使用定位布局时，可能出现盒子层叠的问题，通常情况下没设置z-index属性时盒子默认层级为0并遵循后来者居上的原则。通常我们想要更改盒子的显示顺序我们可以通过设置z-index属性（正负整数及0），属性值越大盒子的层级越高优先显示（覆盖其他低层级的)。定位也可以改变原先的display属性，改成类似于行内块的元素。
  css高级技巧：元素的显示与隐藏（display： 隐藏之后，不再保留位置。 visibility： 隐藏之后，继续保留原有位置。overflow 溢出：隐藏超出内容，隐藏掉,  不允许内容超过父盒子。）CSS用户界面鼠标样式cursor（default小白  默认，pointer小手，move移动，text文本，not-allowed禁止）。轮廓线 outline（outline: none）防止拖拽文本域resize（resize: none）vertical-align 垂直对齐（vertical-align ：bottom）这个可以解决图片底侧空白缝隙问题。溢出的文字省略号显示分三步（white-space:nowrap强制文本在一行上显示， overflow: hidden超出部分隐藏，text-overflow：ellipsis当对象内文本溢出时显示省略标记）精灵图技术主要是减少服务器的请求次数，提高页面的加载速度。精灵图主要通过background-position属性进行背景定位。

本人系计算机专业汉子一枚，一开始接触C、C++、Java等等编程语言，但都是跟着老师走，把基础学了，会点皮毛。当时都天真的认为学的都是些没用的东西，因为自己根本就没有用出去，没有真正的做一些实用的东西出来。后来在大三学习了前端开发，感觉还不够扎实，所有来黑马系统的学习一番，我把我这些天的心得给大家分享一下。

  清楚浮动：在我们的实际工作中，很多情况下我们不方便给父级盒子设置高度，但是由于浮动之后子元素不占据原有的位置，最后父盒子高度为0，就影响了下面的标准流盒子。所以清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。清楚浮动的方式：一、额外标签法，二、父级添加overflow属性方法，三、使用after伪元素清除浮动，四、使用双伪元素清除浮动。通常在我们的实际工作中我们基本上选用的是（使用after伪元素清除浮动） .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。
  定位：定位也是我们网页布局中重要的一个途径。定位由定位模式与边偏移这两个属性组成。根据定位模式的不同，定位又分为四种（静态定位、相对定位、绝对定位、固定定位）。其中我们实际中用的较多的是相对定位与绝对定位。其中就有定位口诀 —— 子绝父相：就是子级是绝对定位，父级要用相对定位。主要是相对定位不脱离标准流，绝对定位是根据带有定位的父级（祖级）作为参考对象，如果父级（祖级）元素中不带有定位属性，那么他就会以浏览器做为参考对象。绝对定位中盒子水平居中不能通过设置margin：auto来解决。绝对定位水平居中公式：left：50%，margin-left盒子自身宽带的一半（负值）。在使用定位布局时，可能出现盒子层叠的问题，通常情况下没设置z-index属性时盒子默认层级为0并遵循后来者居上的原则。通常我们想要更改盒子的显示顺序我们可以通过设置z-index属性（正负整数及0），属性值越大盒子的层级越高优先显示（覆盖其他低层级的)。定位也可以改变原先的display属性，改成类似于行内块的元素。
  css高级技巧：元素的显示与隐藏（display： 隐藏之后，不再保留位置。 visibility： 隐藏之后，继续保留原有位置。overflow 溢出：隐藏超出内容，隐藏掉,  不允许内容超过父盒子。）CSS用户界面鼠标样式cursor（default小白  默认，pointer小手，move移动，text文本，not-allowed禁止）。轮廓线 outline（outline: none）防止拖拽文本域resize（resize: none）vertical-align 垂直对齐（vertical-align ：bottom）这个可以解决图片底侧空白缝隙问题。溢出的文字省略号显示分三步（white-space:nowrap强制文本在一行上显示， overflow: hidden超出部分隐藏，text-overflow：ellipsis当对象内文本溢出时显示省略标记）精灵图技术主要是减少服务器的请求次数，提高页面的加载速度。精灵图主要通过background-position属性进行背景定位。