1关于元素浮动使用float可以给元素添加浮动的属性元素浮动可以使对应元素脱离文档流默认宽高都尽可能小的被内容撑开但仍然可以设置宽高。不会独占一行可以与其他元素共用一行也不会受到margin的影响。并不再被视为文本处理。元素浮动后会对兄弟元素和父元素造成一定影响在后面的兄弟元素会占据其原先的位置而前面的兄弟元素不受影响。父元素的高度可能会产生高度的塌陷但父元素的宽度仍然能包裹住浮动元素。2关于如何解决浮动元素解决浮动元素通常有5个方案详细内容见上图我主要记录一下这些方法的缺点。在这五种方法中一般我们会使用后两种方法前三种方法直接对父元素进行改动从而达到目的这种方法容易产生其他问题难以解决所以不常使用第五种方法虽然也是作用在父元素上但父元素本身就是浮动状态通过设置伪元素可以达到类似第种方法的效果。所以在后两者中更推荐第五种方案。3关于相对定位给元素设置position:relative可以实现相对定位也能单独对上下左右四个方向进行设置。相对定位以自己原来的位置为参考可以在使元素在不脱离文档流的情况下产生视觉变化同时不对其他元素造成影响。定位元素的显示层级比普通元素高但无论什么定位显示层级是一样的。定位的元素可以覆盖在别的元素之上并且也遵守的“后来者居上”的原则可参考以前对优先级的探讨。但相对定位不可同时对左和右上和下这样相对的方向进行统一设置也不建议对这类元素使用float属性和margin属性。4关于绝对定位绝对定位通过给元素设置position:absilute来实现同样的它也可以对上下左右进行设置也同样不能同时操控两个相对的方向。绝对位置的参考点是它的包含快包含块通常为父元素也有可能是更上一层的元素。绝对定位会使元素脱离文档流并对兄弟元素和父元素造成影响并且不能与float属性连用也不推荐与margin连用。5用position:fixed为元素进行固定定位固定定位的元素同样可以修改上下左右四个方向的属性固定定位的参考点为视口简单的说就是对应网页的窗口。固定定位会使对应元素脱离文档流并对后面的兄弟元素和父元素造成影响相对方向的属性不能同时设置也同样不能与float连用不建议与margin连用。6关于粘性定位用position:sticky给元素设置粘性定位可以单独对上下左右四个方向的属性进行设置也可以同时控制相对方向的属性。粘性定位的参考点是离他最近的有“滚动机制”的祖先元素有滚动属性不一定真实可滚动。粘性定位元素不会脱离文档流也不推荐与float和margin连用。7关于定位层级对于以上的属性它们都可以把普通元素转化成定位元素定位元素显示层级高于普通元素但无论什么定位显示的层级都是一样的。定位元素会发生重叠一般是后面的重叠在前面元素的身上可以通过z-index调整显示层级z-index的属性值只能是纯数字且只对定位元素生效。当z-index大的元素未覆盖z-index小的元素一般是其包含块的层级出错导致的。8关于定位的特殊应用上图仅针对绝对定位和固定定位。若想让定位元素宽度充满包含快可以同时给left和right值设置为0高度同理。让定位元素在包含块中居中一般有两种写法分别为left:0; right:0; top:0; margin: auto;或left:50%; top:50%; margin-left:负的宽度一半; margin-top:负的高度的一半;一般推荐第一种方法但有一个注意点该定位元素必须设置宽高9关于版心版心指在pc端网页中一般都会有一个固定宽度且水平居中的盒子用于显示网页的主要内容这就是网页的版心版心宽度一般为960px到1200px之间这与主流屏幕的像素值有关版心可以是一个也可以是多个。10关于常用的布局名词上图为常见的常用布局名词可以与类选择器等配合使用。11关于重置默认样式随着网页设计的发展网页原先使用的样式已经不能满足人们的需求所以人们通过设置新的默认样式模板对默认样式进行重置。现在主要有三种重置方法第一种是使用全局选择器对所有元素进行修改这种方法效率很低且正常开发时一般不会使用。第二种方法是比较主流的方式通过单独写一份css文件进行嵌套开发者也会根据实际要求进一步做详细修改这种方式简单比第一种方法效率高而且人人可用。。方案三则是最近新兴起的一种方案它在清除默认样式基础上保留了一些有价值的东西可以通过官网去详细了解内容。相对于第二种方案这种方案更加温和现在也在逐渐变得流行实际开发时可按照实际情况选择哪一种方案。12关于动画讲动画首先要提的就是帧简单说多少帧就是指一秒钟动画会用到多少张图像关键帧就是一段动画中起到决定性作用的几帧。设计动画一般分两个步骤第一步就是给动画定义关键帧一般用keyframes来给动画添加关键帧。第二步就是给元素应用动画可以用animation-nameanimation-duration和animation-delay为动画具体的动作关键帧时间和延迟进行设置。以上列举了动画的一些属性包括动画的快慢变化循环次数方向状态以及复合方法。对于一些通过不断切换图片完成且有固定长度的动画还可以使用下列属性13关于伸缩盒子伸缩盒子又称弹性盒子它通过对元素布局的自动调整逐渐演变出一种新的布局方式即flex布局这种布局一般会在移动端使用这是因为移动端屏幕的长宽比以及像素值不像电脑那样比较统一pc端更喜欢displaypositionfloat的传统布局的原因很大程度上也与人们长期养成的习惯有关而并非flex布局不好。开启了flex的元素会变成伸缩容器而伸缩容器的所有子元素会自动成为伸缩项目。给元素设置fles一般会用display:flex而不是display:inline-flex伸缩项目有“块状化”的特点。伸缩项目的排列与主轴和侧轴密切相关默认情况下主轴即网页的水平从左到右侧轴则是网页的竖直从上下但也可以人为的控制轴的方向主要通过flex-direction属性详细改发如上图但要注意的是主轴方向改变侧轴方向也随之改变。用flex-wrap可以控制主轴换行方式nowrap为默认不换行wrap为自动换行wrap-reverse则为反向换行。flex-flow是一个复合了flex-direction和flex-wrap两个属性的复合属性对值没有顺序的要求。