CSS基础语法学习——CSS三大特性，网页布局，浮动，清除浮动

一、CSS三大特性

  1. CSS层叠样式

    • 若样式冲突，遵循的原则是就近原则，哪个样式距离结构近就执行哪个样式
    • 样式不冲突是不会层叠的

  2. CSS继承性

    • 子标签会继承父标签的某些样式，如文本颜色和字号
    • text- , font- , line- 这些元素开头的几乎都能继承

  3. CSS优先性

    • 元素定义的样式会覆盖继承样式
    • 权重相同时，css遵循就近原则，也就是靠近元素的优先级更大
    • CSS定义了一个!important命令，该命令赋予最大优先级

  4. CSS特殊性（Specificity）

    • Specificity是一个四位的数字串，更像四个级别，从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可跨越。继承的权重为0
    继承或*的贡献值 0，0，0，0
    每个元素（标签）贡献值为 0，0，0，1
    每个类，伪类贡献值为 0，0，1，0
    每个ID贡献值为 0，1，0，0
    每个行内样式贡献值为 1，0，0，0
    每个!important贡献值为 无穷大
    • 权重叠加
      1
      2
      3
      4
      5
      6
      7
      ul li{
          color:red
      }
      li{
          color:green
      }  
      /* 最终会显示红色 */

二、网页布局

  1. 网页布局的本质:把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

  2. 盒子模型（box-model）

    • 盒子边框（border）

      • 语法：border:border-width||border-style||border-color
      • 边框样式用于定义页面中边框的风格
      • none:没有边框即忽略所有边框的宽度
      • solid: 边框为单实线
      • dashed:边框为虚线
      • dotted:边框为点线
      • double:边框为双实线
      • 表格细线边框：border-collapse:collapse表示边框合并在一起
      • 圆角边框：border-radius:左上角 右上角 右下角 左下角

    • 内边距（padding）

      • 内容距离边框的距离
      • padding只有一个值代表四边均为这个值，只有两个值，表示上下边距为第一个数值，左右边距为第二个数值
      • 上 右 下 左

    • 外边距(margin)

      • 用于设置外边距，设置外边距会使元素之间变为”空白”，这段空白通常不能放置其他内容
      • 外边距实现盒子水平居中对齐：必须是块级元素，设置宽度(width)
        1
        div {width:100px;margin: 0 auto}

    • 清除内外边距，默认样式

      1
      2
      3
      4
      *{
          margin: 0;
          padding: 0;
      }

    • 注：行内元素没有上下外边距，只有左右外边距

    • 相邻块元素外边距合并：同一列的两个盒子在上面一个设置下外边距，下面一个设置上外边距的时候会合并，最终间距为两个中的大者；如下：最终两个盒子间距为100px

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
           <head>
      <meta charset="utf-8">
      <title></title>
      <style type="text/css">
      div{
      	width: 100px;
      	height: 100px;
      	background: #008000;
      }
      .top{
      	background: pink;
      	margin-bottom:100px ;
      }
      .bottom{
      	margin-top: 40px;
      }
       </style>
        </head>
          <body>
         <div class="top"></div>
        	<div class="bottom"></div>
       </body>

    • 嵌套块元素垂直外边距的合并：对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。解决方案为：为父元素定义1像素上边框或上内边距，或者为父元素定义overflow:hidden

    • 注：度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img标签和input除外）。

    • 注：计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

    • 注：如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

  3. 盒子模型布局稳定性

    • width>padding>margin
    • margin会有外边距合并，在IE6下面margin加倍的bug，所以最后使用
    • padding会影响盒子大小，需要进行加减计算（比较麻烦）其次使用
    • width最常用，我们经常使用宽度剩余法和高度剩余法来做

  4. CSS3盒模型

    • CSS3中可通过box-sizing来指定盒模型，即可指定为content-box,border-box。这样我们计算盒子大小的方式就会发生改变。
    • box-sizing:content-box 盒子大小为width+padding+border，content-box为默认值
    • box-sizing:border-box 盒子大小为width,也就是说padding和border包含在width里面

  5. 盒子阴影

    • box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影；

三、浮动（float）

  1. CSS定位的三种机制：普通流（标准流）、浮动、定位
  2. 普通流（normal flow）
  3. 浮动流
    • 原本用于图文显示的文字环绕效果，后用于页面布局
    • 设置浮动的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。不占位置，会影响标准流。浮动只有左右浮动。
    • 浮动首先需要添加标准流父级，浮动元素总会找到离它最近的父级元素对齐，但是不会超出内边距的范围。
    • 块级元素添加浮动后具有行内块的特性
    • 行内元素添加浮动后也具有行内块特性

四、版心与布局流程

  1. “版心”（可视区）是指网页中主体内容所在的区域/一般在浏览器窗口中水平居中显示。常见的宽度有960px,980px,1000px,1200px等。

  2. 布局流程

    • 确定页面版心（可视区）
    • 分析页面中的行模块，以及每个行模块中的列模块
    • 制作HTNL结构
    • CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制页面的各个模块。

  3. 快捷命令.top+.banner+(.main>.left+.right)+.bottom,点击tab键生成

    1
    2
    3
    4
    5
    6
    7
    <div class="top"></div>
    <div class="banner"></div>
    <div class="main">
    	<div class="left"></div>
    	<div class="right"></div>
    </div>
    <div class="bottom"></div>

  4. 清除浮动

    • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
    • 并不是清除浮动，而是清除浮动后造成的影响
    • 清除浮动的本质：解决父级元素因为子级元素浮动造成的高度为0的问题。
    • 清除浮动的方法（闭合浮动），用于在添加额外标签后添加样式
      • 选择器:{clear:属性值}
      • left:不允许左侧有浮动元素（清除左侧浮动的影响）
      • right:不允许右侧有浮动元素（清除右侧浮动的影响）
      • both:同时清除左右浮动的影响

  5. 清除浮动的方法

    • 额外标签法： 是wac推荐的做法是通过在浮动元素末尾添加一个空的标签，例如〈div style="clear:both"></div>，或则其他标签br等亦可。

      • 优点：通俗易懂，书写方便
      • 缺点：添加许多无意义标签，结构化较差。

    • 父级添加overflow属性方法

      • 可以通过触发BFC的方式清除浮动效果（块级格式化上下文）
      • 可以给父级添加：overflow：hidden|auto|scroll 均可实现
      • 优点：代码简洁
      • 缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

    • 使用after伪元素清除浮动

      • 本质也是额外标签法，但要将content中的内容不显示
      • 以下.clearfloat为选择浮动元素的父级块元素
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
             	.clearfloat:after{
      	content: ".";     /* 内容为小点,尽量不要多加内容,否则旧版本浏览器会有间隙 */
      	display: block;    /* 转换为块级元素 */
      	height: 0;
      	visibility: hidden;   /* 隐藏盒子 */
      	clear: both;      /* 清除浮动 */
      }
      .clearfloat{
      	*zoom: 1;    /* *代表只有IE6,7浏览器能识别的特殊符号,带*号后只有IE6,7才执行.zoom就是IE浏览器清除浮动的方式 */
      }
      • 优点：符号闭合浮动的思想，结构语义化准确
      • 缺点：由于IE6-7不支持 :after ，使用zoom:1触发hasLayout

    • 使用after和before双伪元素清除浮动

      • 优点：代码更简洁
      • 缺点：由于IE6-7不支持 :after ，使用zoom:1触发hasLayout
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
               	.clearfloat:before,.clearfloat:after{
        	content: "";
        	display: table;  /* 触发BFC,BFC可以清除浮动 */
        }
        .clearfloat:after{
        	clear: both;
        }
        .clearfloat{
        	*zoom: 1;
        }