CSS笔记

- CSS学习:

1 . 类选择器和id选择器的区别和使用,id选择器只能够用一次,类选择器可以用多次,使用方法是一致的.
2 . css样式的优先级, 外部 < 内嵌 < 内联
3 .*{ … } 通用选择器
4 . food >li 子类选择器
5 . a:hover{color:red;}伪类选择符鼠标滑过显示的效果样式..
6 . 段落缩进

 p{text-indent:2em;}

7 . 行高(行间距)

p{line-height:1.5em;}

8 . 文字间隔

h1{
    letter-spacing:50px;
}

9 .布局属性text-align (left,center,right) 与iOS差不多

10 . 常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
11 . 将div等块元素转换成内联元素

<style type="text/css">
      div{display:inline;}
 </style>
<div style="color:red">
我是谁</div><br>

12 . 盒子模型
填充也可分为上、右、下、左(顺时针)。如下代码：

div{padding:20px 10px 15px 30px;}

顺序一定不要搞混。可以分开写上面代码：

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

这上右下左也是醉了和苹果的(上左下右)刚好相反一个顺时针一个逆时针
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}

13 .定位
absolute:表里如一，移动了就是移动了。
relative:只是表面显示移动了，但实际还在文档流中原有位置，别的元素无法占据。
fixed:传说中的右下角悬浮小广告。
Relative与Absolute组合使用：子元素定位时，它的前辈元素必须设置有position属性，从而子元素使用absolute进行定位

CSS笔记

- CSS学习:

推荐阅读更多精彩内容