CSS:CSS学习总结
2024-10-18 17:21:52
CSS:CSS学习总结
背景
CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验。
1、规则声明顺序
因为CSS的样式具备层叠性和继承性,为了最小化代码量,规则的声明可以按照如下顺序:
- 常用标记
- 常用类
- 布局类
- 导航类
- 表格类
- 表单类
- 组件类
2、盒子模型、文档流、定位和浮动一定要清楚
- 盒子模型:浏览器把每种标记都当做一个盒子,有两种盒子(内联和框),他们在文档流中的布局模式是不同的。
- 文档流:框盒子会被从上到下的布局,内联盒子会被从左到右、从上到下的布局。
- 定位:可以修改框盒子的定位方式,static(正常的文档流中的位置)、absolute(相对于最近一个被定位(非static定位)了的祖先原始的位置,脱离了文档流)、relative(相对于正常的文档流的位置,保留原来的位置)、fixed(相对于窗口,脱离了文档流)。
- 浮动:浮动会导致元素脱离文档流,元素会浮动到父亲元素的边缘或其它浮动元素的边缘,如果遇到空间不够就会下降寻找足够的空间,浮动一般伴随着清楚,清除会让元素的左右没有任何浮动元素。
教程:http://www.w3school.com.cn/css/css_positioning.asp。
3、利用伪元素清除浮动
1 .clear-fix:after
2 {
3 content: ".";
4 clear: both;
5 display: block;
6 height: 0;
7 visibility: hidden;
8 }
教程:http://www.w3school.com.cn/css/css_pseudo_elements.asp。
4、margin可以支持负数
Bootstrap中的栅格系统就用了这个特性,row的margin-left为-20px,span*的margin-left也为20px,这样就抵消了第一个span的margin。
教程:http://www.w3school.com.cn/css/css_margin.asp。
5、属性选择器
1 [class*="span"] {
2 float: left;
3 min-height: 1px;
4 margin-left: 20px;
5 }
教程:http://www.w3school.com.cn/css/css_selector_attribute.asp。
6、相邻兄弟选择器
1 .main-content
2 {
3 background: url("../Images/accent.png") no-repeat;
4 padding-left: 10px;
5 padding-top: 30px;
6 }
7
8 .featured + .main-content
9 {
10 background: url("../Images/heroAccent.png") no-repeat;
11 }
教程:http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp。
备注
CSS不好学习,还是需要专门的人员来做,后端懂点CSS有利于更好的合作。
分类: CSS
最新文章
- GAMBIT、ICEM、HYPERMESH耦合面的处理方法
- markdown测试
- 关于eclipse删除servers之后,不能新建其所对应版本的Servers
- HDU(1572),最短路,DFS
- Android IOS WebRTC 音视频开发总结(十)-- webrtc入门002
- POJ1226 - Substrings(KMP+二分)
- Java基础知识强化之网络编程笔记07:TCP之服务器给客户端一个反馈案例
- poj1127 Jack Straws(线段相交+并查集)
- Qt5位置相关函数异同详解(附源码)
- hdu_1028_母函数
- bzoj2005 NOI2010 方案统计
- MyDAL - 组件适用范围说明
- Session 与 Token 的区别
- JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法
- js的运用1
- Ps中的难点问题分析
- python入门の缩进魔术
- MySQL事务概述-1
- 3.5 面向连接的运输:TCP
- logstash通过redis收集日志
热门文章
- 10. IDENTITY属性使用小结
- DirectX11 学习笔记2 - 加入关键事件 实现视角转换 旋转
- Cocos2d-x 3.0 编译出错 解决 error: expected &;#39;;&;#39; at end of member declaration
- Linq的理论知识
- Unofficial Microsoft SQL Server Driver for PHP (sqlsrv)非官方的PHP SQL Server 驱动
- C#正则学习
- each与list的用法
- npm err错误
- C语言实现全排列
- WINHTTP的API接口说明