前端学习-CSS-03

1、文本格式化(重要)

   1、字体属性

      1、指定字体(非重要)

          font-family:value1,value2,value3....;

    font-family:"微软雅黑","宋体","Arial";

      2、字体大小(重要)

         font-size:  取值 ： px 或 pt作为单位的值

      3、字体加粗(非重要)

         相当于 : <b></b>         font-weight:normal/bold/无单位数字;

 无单位数字：400  - normal

             900  - bold

      4、字体样式(非重要)

         相当于 ：<i></i>   功能：斜体 显示文字  font-style : normal / italic;

      5、小型大写字母(非重要)         font-variant:normal/small-caps;

      6、字体属性         font:font-style font-variant font-weight font-size font-family;

 常用设置方式：

   font:12px "微软雅黑","Arial";

   font:12px/24px "microsoft yahei";

   font:font-size/line-height "微软雅黑";

                  行高

   2、文本属性

      1、文本颜色 (重要)         color:value;

      2、文本水平排列方式(重要)         相当于：html属性中的 align

  text-align:left / right / center

 功能：能够控制 当前元素内所有的文本、行内元素、行内块、水平对齐方式。

      3、文字线条修饰         属性：text-decoration

 取值：

       none 无线条(重要)

       underline 下划线(重要)

 

       overline 上划线(非重点)

       line-through 删除线(非重点) --> <s></s>

      4、行高(重要)         一行文本所占据的高度是多少

 如果 行高大于 文本大小的话，那么这行文字将呈现出垂直居中的显示方式

 属性：line-height    取值：以 px为单位的值

      5、首行文本缩进(非重要)         属性：text-indent    取值：以 px 为单位的值

      6、文本阴影(非重要)

        text-shadow:h-shadow v-shadow blur color;

  h-shadow:水平投射距离

  v-shadow:垂直投射距离

  blur:模糊距离

  color:颜色

******************************************************

1、表格 属性

   1、表格常用属性(重点)

      1、内边距 : padding

      2、尺寸属性 ：width,height

      3、文本属性 : font-* , text-*

      4、背景属性 : background-*

      5、边框 : border

      6、vertical-align  功能：控制单元格内容的垂直对齐方式  取值：top / middle / bottom

   2、表格特有属性      注意：该组属性只能在 table中使用

      1、边框合并(重要)

         属性：border-collapse

   功能：合并两个相邻的边框

   取值：

      separate : 默认值，分离边框      collapse : 合并

      2、边框边距(非重点)         两个边框间的 上下  和  左右的距离

 注意：只有在 border-collapse:separate;时才有效

 属性：border-spacing

 取值：取一个值：每两个单元格之间的垂直和水平间距是一致的。

       取两个值：第一个值，指定的是水平间距，第二个值，指定的是垂直间距。两个值用空格 隔开

      3、显示规则(非重点)

         属性：table-layout

   取值：

       auto : 列宽度由内容来决定，默认值。自动表格布局

       fixed: 列宽度由设置的值来决定。固定表格布局

 自动表格布局：

     单元格的大小会适应内容的大小

     加载时较慢

     适用于不确定每列大小时使用

 固定表格布局：

     列宽度取决于设置好的相关属性值，与内容无关

     会加速显示表格，每次加载表格时不用计算  

 固定表格布局虽然速度较快，但是不够灵活，不能体现出表格的特点。

 自动表格布局，虽然算法较慢，但是是传统表格的体现

2、浮动定位

   1、定位      元素框 相对于其正常位置 应该出现的 位置在哪

      分类：

      1、普通流定位

         流：排列元素的一种方式,又称为 文档流定位 ，是页面默认排列元素的一种方式。

  页面中的块级元素：元素是从上到下的方式排列

  页面中的行内元素：元素是从左到右的方式排列

 弊端：块级元素 无法一行内显示多个，布局不好做。

      2、浮动定位      

      3、相对定位

      4、绝对定位

      5、固定定位

   2、浮动定位      解决问题：让多个块级元素能够在一行内显示

      1、什么是浮动定位

    1、将元素排除在文档流之外，即元素脱离文档流。不受 默认排列方式(从上到下 或 从左到右)的控制

2、元素将不再占用页面的空间     有可能会压住其他的元素

3、元素 会停靠在包含框的左边 或 右边，或者停靠在已经浮动的元素的左边 或 右边

4、元素无论怎么浮动，最终还是在包含框之内

      2、浮动属性

         属性：float  取值：none / left / right;

 注意：

    1、块级元素浮动后 ，宽度会变成自适应

    2、行内元素 浮动起来后，除具备以上特点外，它将变成块级元素

      3、清除浮动

         功能：清除当前元素的左边(上边)或 右边 已浮动元素对它所带来的影响

   属性：clear

   取值：left / right / both / none

      4、float与 overflow

         原因：浮动元素 会对 父元素的高度带来影响，父元素的高度，最终以没有浮动元素的高度为准。

 解决方案：

 1、手动设置元素的高度     弊端：自适应高度时无法使用

 2、通过 overflow属性改变

    overflow:hidden;放在 包含浮动元素的父元素中，它会撑起当前元素的高度，变得自适应     弊端：能够隐藏超出范围的元素

 3、在父元素内最后位置处，追加一个子元素 div，增加clear:both;属性即可*******************************************************************************02_CSS3Basic  day04  all

1、显示

   1、显示方式(重点)

      功能：可以通过 display 属性 修改元素框的显示方式

      属性：display

      取值：none : 让生成的元素没有框  让元素脱离文档流   不显示元素(隐藏)

  隐藏元素，并且不占据页面空间

   block : 让元素 像块级一样显示

           使用场合：将行内元素 改变成块级元素

   inline : 让元素 像行内元素一样去显示

           注意：不要将块级元素 改成 行内元素

   inline-block : 让元素显示的向 行内块 一样

           本身是行内元素：一行内能够显示多个

   具备块级元素特点：允许改宽和高

   table : 让元素 显示的和 table一样

       总结：display 常用方式

          1、隐藏元素 以及 显示元素

      可以通过 display:none的方式隐藏

      如果需要显示的话，按照自己默认的方式显示出来即可

      比如：div : display:block , span : display:inline;

          2、如果程序中 ，想修改 行内元素的 尺寸时使用

      float:left / right;

      display:block / inline-block;

   2、显示效果

      1、可见性(非重点)

         特点：元素可以隐藏，但是空间会保留，不允许被其他元素占据

 属性：visibility

 取值：visible : 默认值，可见的

       hidden : 元素不可见，但保留空间

       collapse : 用在表格元素上，删除一行或一列时，不影响表格整体布局

      2、透明度(非重点)

         属性：opacity

   取值：0 - 1 之间的小数(能取0也可以取1)

        值越小，越看不清

      3、垂直对齐方式

         使用场合：

    1、在td中使用 ：

    2、在 img中使用 :控制图像两端的文本 相对于图像的垂直对齐方式

  属性：vertical-align

  取值：

        top:         middle:         bottom:

        baseline : 默认值，基线对齐，默认会将文本放在元素的基线上

 注意：通过 修改图像的vertical-align 为 非 baseline的值，取消默认底部的3px空白距离

   3、光标(非重点)

      属性：cursor

      取值：

            default 默认值

     pointer : 小手(重点)

     crosshair : +

     text : I

     wait : 等待

     help : 帮助

********************************************************