CSS样式

1.块级元素与行内元素区别

• 块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行。
• 行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行
• 块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果
• 最后是块级元素和行内元素的相关属性：display，其中块级元素对应display：block，行内元素对应display：inline。可以通过修改元素的display属性来切换行内元素和块级元素

2.display

• display:none :此元素不会被显示。隐藏元素的时候经常会用到把display设为none或者’’，设为none效果很明显，就是让元素脱离文档流，不显示，不占文档空间
• display:inline :将块级元素转换为行内元素
• display:block :将行内元素转换成块级元素
• display:inline-block :可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。是一个很实用的属性
  image.png

3.position

• position:relative :相对定位；内层div的位置在外层div内发生了移动,它的参照对象是本身的div,不会脱离常规流,也不会对其他的元素造成影响.通过"left", "top", "right" 以及 "bottom" 属性进行规定。
  

  image.png

• position:absolute :绝对定位；这个结果说明了绝对定位使元素脱离常规流,它的参照点变为了容器的基点,也就是浏览器的基点.
  但是,如果它外层的div也有设置position属性的(除了static),那么它的参照点就是外层div的左上顶点.
  

  image.png

• position:static :默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明
  

  image.png

• position:fixed :生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  

  image.png

4.float

• float:right|left :浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。

<div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red; float:right;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; ">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>

image.png

• 如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,,直到有足够的扣减,如果浮动元素的高度不同,那么下下移动的时候可能被卡住。

<div style="border: solid 5px #0e0; width:250px;">
        <div style="height: 120px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
        </div>
    </div>

image.png

• 前面指出浮动会让元素脱离文档流,不影响不浮动元素.实际上并不完全如此,如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。

 <div style="border: solid 5px #0e0; width: 250px;">
        <div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
        <div style="height: 100px; width: 100px; background-color: Green;">
           11111111111
           11111111111
        </div>
    </div>

image.png

• 可以看出浮动后虽然绿色div布局不受浮动影响，正常布局，但是文字部分却被挤到了红色浮动div下边。要想阻止行框围绕在浮动元素外边，可以使用clear属性，属性的left，right，both，none表示框的哪些边不挨着浮动框。

<div style="border: solid 5px #0e0; width: 250px;">
        <div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
        <div style="height: 100px; width: 100px; background-color: Green; clear:both;">
           11111111111
           11111111111
        </div>
    </div>

image.png

4. Flex

• Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
  任何一个容器都可以指定为Flex布局。
  align-item:属性定义项目在交叉轴上如何对齐。
  align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
  区别：

• align-content:center
  1.对单行是没有效果的
  2.将多行当做一个整体进行处理：
  

  align-content:center

• align-items:center
  1.不管是对单行还是多行都有效果
  2.将每一行当做一个整体
  

  align-items:center

5. 居中

• 标签文字垂直居中：line-height: 45px 水平居中：text-align: center

    .item1{ flex-grow:0; 
            background-color:green;
            line-height:50px; 
            height:50px; 
            width:50px }

image.png

• 组件居中table-cell:

   <div class='box1'>
          <div class='item2'>标签</div>
   </div>
    .box1{
        width:50px;
        height:50px;
        background-color:green;
        display: table-cell;
        vertical-align: middle;
        text-align: center;        
    }

image.png

• 绝对布局position: absolute

   .span1 {
               position: absolute;
               width:100px;
               height: 50px;
               top:50%;
               left:50%;
               background:red;
               margin-left:-50px;
               margin-top:-25px;
               text-align: center;
           }

image.png

• 盒子布局display:flex

.box2{
    display: flex;
    justify-content:center;   //横向布局
    align-items:Center;   //纵向布局
}