css学习

[whitejy]

一、几种居中方式 1）水平居中 1、块内元素中的行内元素 text-align： center 2、内部元素是块级元素（不能脱离文档流） margin: 0 auto（前提是宽度有具体的值） 3、脱离文档流 top、left各为50%，margin-top设置为负的高度的一半，margin-left设置为负的宽度的一半 也可以使用绝对定位来处理（设置了固定宽度）：

   position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
----为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块块将填充其父元素的所有可用空间，所以margin 垂直方向上有了可分配的空间。

4、在不设置 Div 元素的宽度（width）的情况下，如何让 Div 元素居中

最后一种方法，也是最近做响应式web开发时遇到的问题，在不设置宽的的情况下怎么让div居中就是一个问题，下面我就讲一下怎么让不设置宽度的div居中的方法

<div class="wrap">
      <div class="inner">让这个div居中</div>
</div>
.wrap {
      float: left; /* 自适应内容宽度 */
      position: relative;
      left: 50%; }.inner {
      position: relative;
      left: -50%; 

2）垂直居中 1、固定高（行内元素） height和line-height; 2、脱离文档流（不固定宽度） top：50%，left：50%，transform: translate(-50%, -50%); 3、固定宽度

  position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;

也可以设置父高度为容器的高度一半，即height：50%，再设置子元素高度为父元素外边距的负一半，即：margin-top：-height；

https://www.cnblogs.com/zyt-it/p/10288038.html

[whitejy]

二、盒子模型 1、css盒子模型 ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。 2、两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。（普通文档流） 3、标准盒模型：只包含内容宽度。 IE盒模型：包含border+padding+内容； 4、可以通过box-sizing设置，也可以直接在html文件中设置！DocType来默认设置文档为标准盒模型。

[whitejy]

三、清除浮动 1、对父级元素设置适当的高度，可以撑开父级元素； 2、在浮动后面增加一个空元素，设置样式为clear：both；

<div class="divcss5"> 
    <div class="divcss5-left">left浮动</div> 
    <div class="divcss5-right">right浮动</div> 
    <div class="clear"></div> 
</div> 

缺点：margin不生效 3、父级div定义 overflow:hidden或auto，需要设置宽度或者zoom：1（IE浏览器专有） 为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。

4、父元素里面定义伪类after after里面设置clear：both，content为空。设置zoom为1可以兼容IE6、7