CSS_day04

一.表格
1.表格特有属性
1.边框合并
属性：border-collapse
取值：
1.separate 默认值，即分离边框模式
2.collapse 边框合并
2.边框边距
作用：设置单元格之间或单元格与表格之间的距离
属性：border-spacing
取值：
1.指定一个值，水平和垂直的间距相同
2.指定两个值，
第一个值表示的水平间距
第二个值表示的垂直间距
注意：只有在分离边框的模式下才能设置边框的边距。
3.标题位置
属性：caption-side
取值：
top:默认值，标题在表格正上方
bottom:标题在表格的正下方
4.显示规则
作用：用来帮助浏览器指定如何布局一张表，也就是指定td尺寸的计算方式。
属性：table-layout
取值：
1.auto 默认值，即自动表格布局，列的尺寸实际上是由内容来决定的。
2.fixed 固定表格布局，列的尺寸由设定的值为准
自动表格布局和固定表格布局：
1.自动布局
(1)单元格的大小适应内容
(2)自动布局会比较灵活（优点）
(3)表格复杂时，加载速度较慢（缺点）
(4)适用于不确定每列大小并表格不太复杂时使用
2.固定布局
(1)单元格的尺寸取决于设定的值
(2)任何情况下都会加速显示表格(优点)
(3)固定表格不够灵活(缺点)
(4)适用于确定每一列的大小时使用
二.定位-浮动定位（重点）
1.定位
定位：指的是改变元素在页面中的位置。
2.定位的分类
按照定位的效果，可以分成以下几类：
1.普通流定位(默认定位方式)
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位
3.定位-普通流定位
普通流定位又称"文档流定位"，页面中元素们默认定位方式。
1.每个元素在页面中都是在父元素左上角开始显示。
2.每个元素在页面中一定都有自己的空间。
3.块级元素都是按照从上往下排列，每个元素独占一行。
4.行内元素以及行内块元素都是按照从左往右的方式来排列。
如何解决多个块级元素在一行中显示？
4.定位-浮动定位
1.什么是浮动定位&特点
如果将元素的定位方式设置为浮动定位，元素将具备以下特点：
1.元素将被排出文档流之外（脱离了文档流），不再占页面空间，其它未浮动的元素将上前补位。
2.浮动元素会停靠在其父元素的左边或右边，或其它已经浮动元素的边缘上。
3.浮动定位解决的问题：让多个块级元素在一行中显示。
2.语法
属性：float
取值：
1.none 默认值，即无任何浮动效果
2.left 左浮动，让元素停靠在父元素的左边，或挨着左侧已经浮动的元素边缘。
3.right 右浮动，让元素停靠在父元素的右边，或挨着右侧已经浮动的元素边缘。

   练习：页面中创建三个元素，id分别为d1,d2,d3,设置其尺寸各200px，分别设置背景颜色为blue,green,yellow,依次让d1,d2,d3实现右浮动，观察效果，然后再依次将d1,d2,d3分别实现左浮动观察效果。
	 3.浮动引发的特殊效果
	   1.当父元素显示不下所有已浮动元素时，最后一个将换行,但是，有可能被卡住。
		 2.元素一旦浮动起来后，宽度将以内容为主（未指定宽度情况下）。
		 3.元素一旦浮动起来，将变为块级元素
		   允许设置尺寸，正常处理垂直外边距。
   4.文本，行内元素，行内块元素是采用环绕的方式排列的，是不会被浮动元素压在下方的，而是会巧妙的避开。
 4.清除浮动所带来的影响
	   元素一旦浮动起来之后，就会对后续的元素带来影响（后续元素要上前补位），如果后续元素不想被影响（不想去补位），那么就可以通过清除浮动的方式来解决。
		 属性：clear
		 取值：
		    1.left 清除当前元素前面元素左浮动所带来的影响。
				2.right 清除当前元素前面元素右浮动所带来的影响。
				3.both 清除当前元素前面任何一种浮动所带来的影响。
				4.none 默认值，不做任何清除浮动操作。
 5.浮动元素对父元素高度带来的影响
	   元素的高度，都是以未浮动元素的高度为准，浮动元素是不占页面空间的，所以一旦子元素都浮动起来，那么父元素高度将为0。
		 解决方案：
		    1.直接设置父元素的高度
				  弊端：不是每次都知道父元素的高度
      2.设置父元素也浮动
				  弊端：不是任何时候父元素都需要浮动，而且浮动会影响后续元素（后续元素会上前补位）
      3.设置父元素的overflow
				  取值：hidden/auto
					弊端：如果有内容要溢出显示的话，也会一同隐藏起来
      4.在父元素中，追加一个空的块级元素，并设置其clear:both;

三.显示
1.显示方式
1.显示方式
决定元素在网页中的表现形式（块级，行内，行内块等）
2.语法
属性：display
取值：
(1)none 不显示元素-隐藏
(2)block 让元素表现的与块级元素一致
特点：从上往下排列，单独占一行，并可以设置尺寸和垂直外边距
(3)inline 让元素表现的与行内元素一致
特点：排方式从左往右在一行中显示，不能修改尺寸（img除外）
(4)inline-block 让元素表现的与行内块一致
特点：排列方式如同行内元素，但是具备块级元素的特征，允许修改尺寸，也可以设置垂直外边距，但会影响整行。
(5)table 让元素表现的如同table
特点：
尺寸以内容为主
每个元素独占一行
允许修改修改尺寸
注意：一般将行内元素显示为块级或行内块，很少将块级元素转换为行内。
2.显示效果
1.显示/隐藏
属性：visibility
取值：
1.visible 可见的，默认值
2.hidden 元素不可见-隐藏
Q：display:none和visibility:hidden的区别？
display:none;会脱离文档流，不占页面空间。
visibility:hidden;不脱离文档流，占据页面空间。

  练习：网页中新建两个div，id分别为d1,d2,设置各自的尺寸和背景颜色。
	   1.先设置第一个div的display:none,查看页面效果。
		 2.注释掉第一步的代码，然后再设置第一个div的visibility：hidden;再查看页面效果。	 
2.透明度
	  属性：opacity
		取值：0-1 值越小越透明
  Q：rgba与opacity的区别？
		opactiy作用于元素，跟元素相关的颜色都会发生透明度的变化。
		rgba:只作用于当前元素的某一个颜色值。
3.垂直对齐方式
	  属性：vertical-align
		使用场合：
		  1.表格中使用
			  取值：top/middle/bottom
    2.图片中使用
			  取值：top/middle/bottom/baseline基线对齐（默认值）
				注意：编写网页时，通常都会将图片的垂直对齐方式更改为除baseline以外的任何一个值。
4.光标
	  1.作用
		  改变鼠标悬停在元素上时鼠标的状态。
  2.语法
		  属性：cursor
			取值：
			  default   箭头
				pointer   小手状态
				crosshair +
				text      I
				wait      等待
				help      帮助

四.列表
1.列表项标识
属性：list-style-type
取值：
none 无标识
disc
circle
square
2.列表项图像
属性：list-style-image
取值：url(图片路径)
3.列表项位置
属性：list-style-position
取值：
outside:默认值，将标识放在li的外面
inside:将标识放在li的里面
4.列表属性简写方式
属性：list-style
取值：type url() position;
常用方式：
list-style:none;

课后作业：
1.复习今天所学内容，重点-浮动定位
2.完成"课后作业.png"中的布局效果（样式参考www.codeboy.com网站首页头部）
3.做个人大项目（参考 http://www.cssmoban.com）