css(4)
类选择器和id选择器都有父子选择器。
在css文件中国，有时候为了简化样式，可以把相同的样式拿出来放在一起。
display:inline
display:block
行内元素里只能放行内元素，而块内元素内部可以放行内元素和块内元素。
清除掉li中文字前的点，可以使用list-style-type:none来搞定。
还有浮动。
标准流：写在前面出现在前面，写在后面的元素出现在后面。
盒子模型
每个html元素都可以看做一个盒子。那么它们就有四个东西：
从元素看，margin-top,从div看就是padding-top.
使用padding可能会将盒子撑大，而使用margin不当可能使元素被挤出来。
优先选择margin.
css核心-浮动
浮动：元素默认是纵向排列，但是当我们需要横向排列时，使用float:left
当某些元素过大时会卡住其他div。
你可以这么理解浮动：如果一个元素向右/左浮动则：
1.它本身会尽可能向右/左移动，直到碰到边框或者别的浮动元素，特别强调浮动对块内元素和行内元素都生效
2.元素向右/左浮动，就相当于让出自己的左/右边，这就解释了笔记css(3)中截图中出现的问题。
补充：html中可以使用<pre></pre>保留文本中的原有格式。
浮动-清除浮动
如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的方法clear:right;clear:left;clear:both.
css核心内容-浮动
css（四大）核心内容-定位
css定位属性允许你对元素进行定位，position属性。
定位-基本概念
static（默认值）：元素框正常生成。块内元素生成一个矩形框，作为文档流/标准流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
元素仍保持其未定位前的形状，它原本所占空间仍保留，从这一角度看，好像该元素仍然在文本流/标准流。
其实相对是相对原有的空间的移动。
relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。从这一角度看。
absolute（绝对定位）：absolute定位是对离自己最近的那个非标准流盒子而言的。
css的定位有以下几种：
1.static定位
这个是默认的方式.
2.relative定位（相对定位）
元素框偏移某个位置（left和top），元素本身形状不变化，它原本所占有的空间仍然保留。
3.绝对定位
元素从原来的位置脱离，并让出自己的空间，后面的元素就会占有让出的空间。
特别说明 1.relative的参照点是它原来的位置，进行再定位。
2.absolute定位是离自己最近的那个非标准流。
绝对布局的代码展示如下所示：
<!DOCTYPE html> <html> <head> <title>relative.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="relative.css" type="text/css" rel="stylesheet"> </head> <body> <div class="s1">内容1</div> <div class="s1">内容3</div> <div class="s1">内容4</div> <div class="s2">abc<div id="special" class="s1">内容2</div></div> </body> </html>
css文件如下所示：
.s1{ width:100px; height:60px; background-color:gray; float:left; margin-left:4px; } #special{ /*position:relative;*//*这里我们使用了相对定位*/ position:absolute; left:40px;/*在原来的位置，向左移动多少（如果希望向左边移动，则值就是负数）*/ top:100px;/*在原来的位置，向下移动大小（如果希望向上移动，则值是负数）*/ /*坐标体系是原来的位置*/ /*相对原来的位置移动*/ } .s2{ position:relative; left:200px; top:100px; width:300px; height:100px; float:left; background-color:green; }
运行结果如下所示：
如果定位是static，会发现left(margin-left),right(margin-right)没有作用。
对static而言，left和right属性是不生效的，但是对于absolute和relative是生效的。
fixed：和absolute很像，元素框表现类似于absolute，不过其包含块是元素框本身。
fixed只认body。
