htmlcss小记

1，float不是绝对意义上的浮动，absolute才是（float无法压住盒子里面的文字 和图片，absoulte可以）（写两个盒子上面一个盒子浮动下面的盒子放img或者盒子里写文字进行测试）

2，加了定位或者浮动的盒子 margin:0 aruto 就失效了，如何居中对齐？（垂直居中同理）  

1. 首先left 50% 父盒子的一半大小

2. 然后走自己外边距负的一半值就可以了 margin-left。

3，position:fixed 的定位之参考浏览器 absolute是父级没有定位才参考浏览器 relative参考自己。

4，跟浮动一样，元素添加了 绝对定位和固定定位之后（相对定位没有影响）， 元素模式也会发生转换， 都转换为 行内块模式，（如果元素是继承的宽度 添加定位后无法显示因为行内块的性质决定的，除了相对定位元素不会继承父元素的宽度要想继承得加width:100%）

5，内容是定位的脱离文档流撑不开，跟浮动一样不过没法通过清除浮动来处理，只能自己设置高度或者其他内容填充 （如果想让高度自适应可以使用js动态获取子元素高度赋值给父元素）。

6，vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。7，

7，1个值 上下左右  2个值 上下 左右   3个值 上 左右 下   4个值 上 右 下 左       border-radius：左上角开始 顺时针
8，能用文档流布局实现 就不要用浮动  能用浮动实现 就不要用定位 定位慎用 定位会渲染多个层级 性能低下 而且不利于维护 ，上下尽量内边距 ，上下尽量内边距  ，定位尽量不用 ，是在比较跳脱的地方用定位

9，恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

10，（多重背景添加背景色只能写一个在后面）background:url(paopao.png) 0 0 no-repeat,skyblue url(paopao.png) right bottom no-repeat ;

11，transform: translate(X轴, Y轴) x 和 y给百分比参照的是自身的宽和高不是父容器  （小技巧：让一个盒子水平垂直居中）
      （首先得让子盒子 left:50%,top:50% 在运用这个技巧好处不要计算盒子宽高因为要回去自身高度宽度一半）

12，为什么给定盒子的宽高子元素还会溢出盒子，类似给定盒子宽高里面的img会溢出 可以做一个小测试父元素给200宽高子元素给400

    

13,定位元素如果不设置边偏移起点还是在父元素的左上角 如果设置边偏移才会偏移 这里指的边偏移比如 position：absolute 不设置left 或者 top 不管父元素有没有定位都不参照body还是在父元素内部，position:fixed 也不会参照浏览器可视区域还是在父元素内部左上角

14，自适应布局的方式：1，左侧固定右侧自适应2，右侧固定左侧自适应3，两侧固定中间自适应

解决方式：伸缩布局 flex。父元素加padding子元素定位加100%。BFC实现：触发了BFC的普通盒子不会与浮动元素重叠，使用方法例如两个兄弟元素上一个兄弟元素浮动，下一个兄弟元素会上去，给下一个兄弟元素可以设置宽度如果想要全屏宽度的直接默认就好不要设置width:100%，然后在触发下一个兄弟元素的BFC那么下一个兄弟元素会仅挨着上一个并且不会重叠。BFC如果是做左右固定中间自适应注意left 和rigth要在center上面因为浮动只会影响下面的盒子。