css-day7-个人学习笔记

css-day7-个人学习笔记

一、浮动定位

1、清除浮动——清除当前元素前面的元素浮动所带来的影响

clear：none（默认值，无清除效果）/ left（清除当前元素前面元素左浮动带来的影响）/ right（清除当前元素前面元素右浮动带来的影响）/ both（清除当前元素前面元素任何一种浮动方向所带来的影响）
2、浮动元素为父元素高度带来的影响——父元素的高度是以未浮动的子元素高度为准，如果一个元素中所有的子元素全部都是浮动的，那么该父元素的高度为 0。
解决父元素的高度问题方案：

a、直接设置父元素高度，弊端：必须知道父元素的高度；

b、让父元素也浮动，弊端：对后续元素会产生影响；

c、为父元素增加溢出处理属性（overflow：hidden 或 auto），弊端：要溢出显示的内容，也一同被隐藏；

d、在父元素中，增加空子元素到最后一个位置处,并且设置其clear属性为both，弊端：多一个子元素在页面上。

二、显示

1、显示方式——display：none（让指定的元素不显示并且不占据页面空间）/ block（将指定的元素显示为块级）/ inline（将指定的元素显示为行内）/ inline-block（将指定的元素显示为行内块，多个元素能够在一行内显示）/ table（将指定的元素显示为 table）

2、显示效果

a、visibility属性 ：visible（默认值，元素可见）/ hidden（元素不可见，但是占据页面空间）/ collapse（用在表格元素上，删除一行或一列时，不影响表格整体布局。（display:none） 和 （visibility:hidden） 区别：（display:none）脱离文档流，所以不占据页面空间；（visibility:hidden）只是改变可见性，并不脱离文档流，空间依然占据。

b、opacity 属性：改变元素的透明度，取值为从0.0(完全透明) ~ 1.0(完全不透明) 之间的数字。

c、vertical-align 属性：在 td 中，设置文本的垂直对齐方式 / 设置行内块元素两边文本的垂直对齐方式 / 设置图片两端文本垂直对齐方式。vertical-align：top / middle / bottom / baseline（基线对齐）

3、光标——改变鼠标在页面(元素)中的状态，cursor：default（默认）/ pointer（小手）/ crosshair（+）/ text （文本状态 I）/ wait（等待）/ help（帮助）

 
三、列表

1、列表项标识——list-style-type：none （去点）/ disc （实心圆）

2、列表项图像——list-style-image：url()

3、列表项标识位置——list-style-position：outside（默认值）/ inside（将列表项标识的位置改为内容区域之内）

4、列表属性——list-style：type url position；常用方式：list-style：none。

四、定位(相对，绝对，固定)

1、定位属性

a、定位属性——position：static（静态的，默认值）/ relative（相对的）/ absolute（绝对的）/ fixed（固定定位）。注意：relative，absolute，fixed被称之为 "已定位元素"

b、偏移属性——改变元素在页面中的位置，top / bottom / left / right：px(偏移距离)

c、堆叠顺序——在已定位元素中调整堆叠顺序，z-index：无单位的数字

2、定位 - 相对定位——元素会相对于它原来的位置偏移某个距离，元素原来所占的空间会被保留。position：relative；配合 top / right / bottom / left 偏移属性实现位置的微调

3、定位 - 绝对定位——绝对定位的元素会脱离文档流即不占据页面空间，会相对于离它最近的已定位的祖先元素去实现定位，如果没有已定位的祖先元素，那么就会相对于最初的包含块去实现定位比如body或html。position：absolute；配合着 top / right / bottom / left 实现位置定位。特点：绝对定位元素会变成块级元素，绝对定位元素的margin可以使用，默认情况下，auto会失效

4、堆叠顺序——z-index：无单位的数值（数值越大，越靠前，默认是0，可以取负值，当前元素在页面所有内容之下）

注意：只有已定位元素才能设置z-index；默认的堆叠顺序是 后来者居上；父子元素中，永远都是子压在父上,是不受z-index影响的。