css基础知识汇总
2016-07-18 14:41
281 查看
仅作为学习笔
css性质
继承 | 特殊性 | 层叠 | 重要性 |
---|---|---|---|
即继承上级的样式 | 权限问题,注意继承权限为0.1 | 相同权值时,后面的样式覆盖前面的样式 | 设置最高权限!important(高于浏览器默认的样式权限) |
权限理解
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/
易混理解
<style type="text/css"> p{color:red;} .first{color:green;}/*因为权值高显示为绿色*/ span{color:pink;}/*设置为粉色*/ </style> </head> <body> <h1>勇气</h1> <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> 运行结果是文字是绿色,只有“胆小如鼠”是粉色,因为<span>是继承上级的权限是0.1,而span本身是1,所以粉色起作用。 ---------- 文字排版 字体:font-family:"Micorsoft YaHei"; 字号,颜色:font:12px #888; 粗体:font-style:Bold; 斜体:font-style:Italic; 下划线:text-decoration:underline; 删除线:text-decoration:line-through; 缩进:text-indent:2em;(2em表示两倍字体大小的意思) 行间距:text-height:2em; 中文字间距,字母间距:letter-spacing:20px; 英文单词间距:word-spacing:20px; 对齐:块级元素中文字或图片text-align:center/left/right; ---------- 常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有: <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有: <img>、<input>
display:block/inline/inline-block
设置成块级元素/内联元素/内联块状元素
属性 | 块状元素 | 内联元素 | 内联块状元素 |
---|---|---|---|
是否占一行 | 是 | 否 | 否 |
height/width/行高/margin-top/bottom是否可设置 | 可 | 不可 | 可 |
默认宽度,宽度是否可改变 | 宽度与父级一致,可改 | 宽度就是包含内容的宽度,不可改 | 宽度就是包含内容的宽度,可改 |
<nav> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> </nav>
css样式
nav a { display: inline-block; padding: 5px; background: red; }
上面的代码显示的效果如下:
这里的间隙是由于回车键的存在产生的效果,把标签关闭放在最后可解决,也可在每个和下一个之间加注释解决
<a>one</a><!-- --><a>two</a><!-- --><a>three</a>
盒子模型
层模型,类似图层的感觉
绝对定位position:absolute;就是把元素从文件流中取出来。相对定位position:relative;按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
固定定位position:fixed;固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。
关于居中
行内元素居中:给父元素设置 text-align:center 来实现定宽块状元素居中:通过设置“左右margin”值为“auto”来实现居中的。eg: margin:20px auto;
不定宽块状元素居中:
加table:利用table的长度自适应性,可视为定宽块状元素,再用margin:0 auto,设置。
设置display:inline方法,改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。
设置position:relative和left:50%,利用相对定位方式,将元素向左偏移50%,达到居中。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- css如何搞正方形
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧
- 设计更快的网页(三):字体和 CSS 调整