CSS 精华一页纸

CSS核心语法 :选择器{属性:值;...}

选择器


I、元素选择 | ID 选择器| Class选择器

II、伪类选择器 (除连接和表单外)| 属性选择器

选择器可以组合(多个选择器共同指定一类属性),可以有 子孙选择器, 可以有父子选择器

div p

div>p

div+p

div~p

结合了伪类,还可以指定某些状态/选择特定子孙/ 选择特定属性

属性和样式


所有元素都共有的属性

背景属性(颜色、图片)

文本属性(段落、颜色、对齐、修饰等)

字体属性(字体、样式、大小)

边框/OutLine(样式、宽度、颜色)

尺寸(width、height)

可见性(display 内联、块、none/visibility)

特殊元素的样式

列表(样式、图片)

表格(边框折叠?) - 好像没有特别的样式

链表(点击、悬停等 ?) - 悬停等样式也适合其他元素

盒子模型


margin - border - padding - content - padding - border - margin

定位和布局


定位有四种方式

1、static - 静态定位(默认流式布局)

2、relative - 相对定位

3、absolute - 绝对定位

4、fixed - 固定定位

// 绝对和相对都有一个比较固定的位置,不同的是 固定定位不随浏览器的滚动而滚动

结合定位有几种布局方式

1、普通流式布局(块元素纵向扩展、内联元素横向扩展)依次摆放

2、绝对定位布局 - 适用于 下来菜单等等

3、固定定位布局 - 使用于导航 菜单,表头等等

4、使用 浮动元素布局 + clear 属性,可以把某个 快元素布局在页面的某一个位置。

5、使用 可见性 display的样式,实现 table方式布局

6、使用 盒子模型的 marging/padding 实现凝胶布局

普通流式布局+浮动元素布局(左右分栏,可以使用浮动把整个块放到一边) 是页面整体布局的方式;

结合绝对定位布局+固定定位布局 做一些菜单导航的 细微控制

是布局的主要思路。

PS:样式里面,如果是同一个 属性的 不同值需要逗号分隔;如果是 多个属性合并在一起的比如 margin:10px 15px;则不需要逗号分隔

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 5,000评论 0 1
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 8,949评论 1 19
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,707评论 32 459
  • 要分清楚幽默和浮夸的区别。 幽默是讲一些有意思的,诙谐,风趣的话,发现并表达事物有趣的地方。 浮夸是自鸣得意的样子。
    对酒几何阅读 2,256评论 0 0