1. css排版-缩进(text'-indent)
<style>
p{text-indent:2em;}
</style>
2. CSS行间距(line-height)
<style>
p{line-height:2em;}
</style>
3. CSS文字间隔(letter-spacing)
<style>
p{letter-spacing:20px;}
</style>
4. CSS段落对齐(text-align)
<style>
p{text-align:left/right/center;}
</style>
5. em与px的区别
em: 倍数,是一个相对的单位,具有继承性;取决于给定的font-size值,例如font-size="10px",则1em="10px" .
px: 像素 ,是一个绝对的单位。
另:" % "号表示相对与font-size的大小。
6. CSS元素分类
类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
①强制转换为块状元素;
a{display:block;}
②强制转换为内联元素:
div{display:inline;}
③转换为内联块状元素
a{ display:inline-block;}
7. CSS盒模型-边框(一)
添加边框样式: div { border-width: ...px;
borer-style:dashed/dotted/solid;
border-color: red ;
}
以上可以简写成: div { border: ..px dashed/dotted/solid red ; }
8.CSS 盒模型--边框(二)
对盒子的某条边设置边框
实例 : div{border-bottom/top/left/right: ..px solid/dotted/dashed color ; }
9. padding , border,margin
10. CSS填充设定( padding)
div { padding-top/bottom/left/right :(..px) } 也可以直接写padding:m px 表示四个填充都取相同的值。
11. CSS边界设定(margin)
和上面一样
div { margin-top/bottom/left/right :(..px) } 也可以直接写margin:m px 表示四个填充都取相同的值。
12. CSS布局模型
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
13. CSS 流动模型(flow)
流动模型是网页采取的默认的布局方式。
一个块状元素占宽100%,而且分行显示。
内联元素,包含元素内从左到右水平分布。
14. CSS浮动模型(float)
如何让块状元素并排显示,这时候就要用到浮动模型了;设置元素浮动就可以实现了。
float:left/right;
层模型的三种形式:
1)绝对定位 position:absolute
2)相对定位 position: relative
3) 固定定位 position :fixed
层模型-绝对定位: 对块元素进行绝对定位; position: absolute;
left/right/top/bottom: ? px //这里的方位表示距离各个边的距离,而不是移动的方向
层模型-相对定位: 相对于块元素以前的位置进行移位: position: relative;
left/right/top/bottom: ? px
层模型-固定定位:相对于浏览器视图的绝对定位,简单来讲就是绝对定位是确定了在页面中的位置,而固定定位是对于浏览器的窗口而言,其块元素与浏览器的边界值是没有发生变化的;简而言之,其效果就是当滑动鼠标改变页面在浏览器中的位置是,固定定位的元素块相对于浏览器窗口的位置是不会发生变化的。
16. relative 与absolute定位结合使用
可实现相对于其它元素的定位。
假设有 “块中块” : <div id="father"> //父块
<div id="son"> hello world ! </div> //子块
</div>
下面来实现子快元素相对与父块元素的定位:
<style type="text/css">
#father
{ width:?px;
height:?px;
position:relative; /* 注意参照的元素这里必须设置成相对定位*/
}
#son
{ position:absolute;
top/bottom/left/right: ?px; /*相对于参照元素进行位置设置*/
}
</style>
17. 盒模型代码简写
padding和margin一样,可以按照顺时针的顺序,即top-right-bottom-left 的顺序来书写值,若top与bottom值相同,left和right值相同;则可以简写成(top/bottom)px (left/right)px;若这四个值都相同,则可同写为一个值。
18. 颜色值缩写
关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
例子1:
p{color:#000000;}
可以缩写为:
p{color: #000;}
例子2:
p{color: #336699;}
可以缩写为:
p{color: #369;}
19.
{font-variant: small-caps}
将普通型的大写字母转换成小写型大写字母。
20. text-align 文本居中显示
p{text-align:center}