CSS学习的一部分内容

本篇是将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中的仓库。更多学习的内容来源是从小甲鱼上学习到的。更多内容将不定期更新~~~~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,844评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,902评论 0 6
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,103评论 0 1
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,659评论 32 459
  • 你说爱我的那一天 星星只顾眨着眼 黑夜像白天 我一夜无眠 你说爱我的那一天 行人都有一副微笑的脸 常去的那家面店 ...
    大风暖暖阅读 318评论 2 9