美文网首页
CSS学习的一部分内容

CSS学习的一部分内容

作者: StrawberrySan | 来源:发表于2018-02-19 22:11 被阅读0次

    本篇是将CSS中的表格,轮廓,定位,浮动的学习进行的总结。完全个人理解,仅供参考。(耶!!!)


    CSS表格


    • CSS表格:

    CSS表格属性可以帮助我们极大的改善表格的外观。

    • 表格边框(solid)
    • 折叠边框(collapse)
    • 表格宽高
    • 表格文本对齐
    • 表格内边距
    • 表格颜色

    例如以下示例:

    CSS表格示例

    其外部样式表为:

    外部样式表示例

    CSS轮廓


    CSS轮廓属性包括6种:
    • outline(设置轮廓属性)
    • outline-color(设置轮廓的颜色)
    • outline-style(设置轮廓的样式)
    • outline-width(设置轮廓的宽度)

    CSS定位-定位


    1. CSS定位:

    改变元素在在页面上的位置。

    2.CSS定位机制:
    • 普通流:元素按照其在HTML中的位置顺序决定排布的过程。
    • 浮动
    • 绝对布局
    3.CSS定位属性:
    • position属性:把元素都放在一个静态的,相对的,绝对的,或固定的位置中。那么该属性有4个值:
      • static(静态的,滚动页面时不会随页面滚动)
      • fixed(滚动页面时不发生变化,会随页面滚动)
      • relative(相对布局,会适应当前页面)
      • absolute(绝对布局,很直很直,和直男一样的布局)

    如以下示例(通过Javascript的for循环对position的属性值进行理解):

    position示例

    其外部样式表为:

    外部样式表示例

    PS:其动态效果,可以自行尝试就可以看到。(废话!!)


    CSS浮动


    1.浮动:
    float属性可用的值:
    • left:元素向左浮动
    • right:元素向右移动
    • none:元素不浮动
    • inherit:从父级继承浮动属性
    2.clear属性:
    去掉浮动属性(包括继承来的属性)
    clear属性值:
    • left,right:去掉元素向左向右浮动。
    • both:左右两侧均去掉浮动
    • inherit:从父级继承来clear的值

    如以下示例:

    folat实例示例

    其外部样式表:

    外部样式表

    更多学习到的内容我已经放到了 我的Github中的仓库。更多学习的内容来源是从小甲鱼上学习到的。更多内容将不定期更新~~~~~

    相关文章

      网友评论

          本文标题:CSS学习的一部分内容

          本文链接:https://www.haomeiwen.com/subject/uuijtftx.html