CSS2

Day04**********************************************************************************

显示

一、显示方式

    作用：显示方式决定了元素在页面中以什么方式进行显示

属性：display

    取值：1、none：让生成的元素不显示并脱离文档流，隐藏（浏览器不会渲染,不消耗内存,图片仍会加载）

                     可再用当前元素的祖先元素:hover  当前元素{display:block;}  显示，实现鼠标悬停显示效果

                    直接只写当前元素即可，不必写它的父元素等

                   特点：脱离文档流，即不再占据页面空间（常用于弹出菜单）

              2、block：让元素变得和块级元素一样

              3、inline：让元素变得和行内元素一样

              4、inline-block：让元素变得和行内块元素一样

特点：多个行内块元素在一行内显示，可允许修改尺寸（除radio,checkbox）

              5、table：让元素变得与表格一样，独占一行，宽度以内容为准

              6、table-caption：表示元素的display水平表现为表格标题，自动自适应于外部表格容器宽

                                        与caption-side：bottom配合可以设置表格标题在底部

二、显示效果

1、visibility  可见性属性

    作用：控制元素的可见性（显示/隐藏）

    取值：visible      默认值，可见的

            hidden    隐藏元素，但没脱离文档流，依然占据空间（依然会渲染）

             collapse    用在表格元素上，删除一行或一列时，不影响表格整体布局

display：none  和  visibility：hidden的区别

    ① display：none        脱离文档流，所以隐藏后不占据页面空间，子元素无法显示

    ② visibility：hidden    隐藏元素，但不脱离文档流，导致控件依然占据空间，子元素设置visible可显示

2、opacity  透明度属性

    作用：改变元素以及所有东西的透明度（rgba()只改变背景,且IE8不支持）

    取值：0.0（完全透明）~1.0（完全不透明）

    IE6、IE7的解决方法：设置 filter:alpha(opacity=70);        相当于 opacity:70

3、vertical-align 垂直对齐属性（一般用于行内块、img、表格元素上）

    作用：① 作用在表格（table,tr,td,th...）元素上，指定表格内容的垂直对齐方式（默认middle）

② 作用在行内(块)元素上时，指定该元素两端的文本相对于该元素的垂直对齐方式

                 行内(块)元素:inline、inline-block、inline-table

             ③ 作用在图像上时，指定图像两端的文本相对于图像的垂直对齐方式

                vertical-align：bottom;    解决图像多占3px高的问题(用于img元素上,middle可居中)

    取值：①baseline    默认值，基线对齐

                  对于行内块元素，基线在最后一行文本的底部

                  对于图片元素，基线在图片底部向下3px位置处

              ② top          顶边对齐

              ③ bottom    底边对齐

              ④ middle     居中对齐

              ⑤ sub         在基线下方对齐

              ⑥ super      在基线上方对齐

              ⑦ 百分比    向基线上或下移动，移动距离等于line-height的百分比

              ⑧ 长度值    向基线上或下移动指定的距离

              ⑨ text-top  元素的顶边与行盒子的文本盒子的顶边对齐

              ⑩ text-bottom  元素的底边与行盒子的文本盒子的底边对齐

例：当input旁边有字体图标时，作用于input和字体图标上，并设置父元素为vertical-align：top

4、cursor  光标属性

    取值：① default：默认值        ②pointer：小手      ③ crosshair：+

             ④ text：I（输入）        ⑤ wait：等待               ⑥ help：？

             ⑦ move：箭头十字(表示某对象可被移动)          ⑧ not-allowed：不可选

             ⑧ url(https:www.sogou.com/web/index/images/erweima2.png) 53 53, crosshair;

                                                                                  设置为图片，若无图片则设置为+

____________________________________________________________________________________

列表

1、列表项标识

    属性：list-style-type：

    取值：①none 无标记       ② disc 实心圆        ③ circle 空心圆        ④ square 实心方块

              ⑤decimal                       标记是数字

              ⑥ decimal-leading-zero       0开头的数字标记(01, 02, 03,...)

              ⑦ lower-roman                  小写罗马数字(i, ii, iii, iv, v,...)

              ⑧ upper-roman                  大写罗马数字(I, II, III, IV, V,...)

2、列表项图像

    作用：使用自定义图像作为显示的标识

    属性：list-style-image：

    取值：url（图像路径）

3、列表项位置

    列表项默认位置是在列表项内容区域之外，列表的内边距范围内

    属性：list-style-position：

    取值：① outside    默认值，列表项标识位于列表项之外

             ②inside    将标识放在列表项区域之内

列表属性的缩写

    属性：list-style：

    取值：type(标识)    url(图像路径)    position(位置)

常用方式：list-style：none;    清除列表前边的点(加在ul/li上都可以)

列表使用场合

    列表常用于 "纵向排列" 和 "横向排列" 的元素中

li中的元素可能无法占满li的高度，设置li为display: block即可

____________________________________________________________________________________

定位：所谓的定位，实际上就是定义元素框相对于其正常位置，应该出现的位置。简单的说，定位就是改变元素在页面中的默认位置

定位分类

    ① 普通流定位（Flow元素默认定位方式）：position: static;

    ② 浮动定位：float: none / left / right;

    ③ 相对定位：position: relative;

    ④ 绝对定位：position: absolute;

    ⑤ 固定定位：position: fixed;

一、普通流定位

    普通流定位，又称"文档流定位"，是页面元素的默认定位方式

    块级元素：按照从上到下的方式排列，而且每个元素独占一行

    行内或行内块元素：按照从左到右的方式排列，多个元素在一行中显示，当显示不下所有行内/行内块元素时，会自动换行

white-space：nowrap;/* 使文本在元素内不进行换行，直到遇到

标签为止 */

white-space：pre;                        空白会被浏览器保留

word-wrap：break-word;              /*当一行放不下英文单词或数字时，换行*/

word-break：break-all;                 /*不将英文单词或数字视作整体，强制换行*/

二、浮动定位

1、浮动定位概述：如果将元素的定位方式设置为浮动定位，那么将具备以下几个特点：

① 浮动元素被排除在文档流之外,即脱离文档流：元素不再占据页面空间,其他未浮动元素要上前补位

    ② 浮动元素会停靠在父元素的 '左边' 或 '右边' 或 '其他已浮动元素的边缘' 上

    ③ 浮动元素只会在当前行内浮动

④浮动元素依然位于父元素之内

    ⑤ 浮动定位处理的问题：让多个块级元素在一行内显示

2、语法：

属性：float：

    取值：none    默认值，即无浮动定位效果

left      左浮动，让元素停靠在父元素的左边，或停靠在左侧已有浮动元素的边缘上

right    右浮动，让元素停靠在父元素的右边，或停靠在右侧已有浮动元素的边缘上

3、浮动引发的特殊效果

    ① 当父元素显示不下所有的已浮动子元素时，最后一个将换行（有可能会被卡住）

    ② 元素一旦浮动起来之后，那么宽度将变成自适应（在非指定情况下）

③元素一旦浮动起来之后，那么将变成块级元素，尤其对行内元素影响最大

        块级元素：允许修改尺寸

        行内元素：不允许修改尺寸

    ④ 文本、行内元素、行内块元素是采用环绕的方式排列的，不会被浮动元素压在底下，而会巧妙的避开浮动元素，浮动元素会给块级元素让路，但块级元素在下面时会被浮动元素覆盖

4、清除浮动：清除浮动带来的影响

    元素浮动起来之后，除了影响自己的位置之外，还会对后续元素带来位置的影响，如果后续元素不想被前面浮动元素所影响的话，可以使用 "清除浮动" 的效果来解决影响

属性：clear：

    取值：① none   默认值，即不做任何清除操作

②left      清除当前元素的前面元素左浮动带来的影响

                               即当前元素不会上前站位，并且左边不能有浮动元素

             ③ right    清除当前元素的前面元素右浮动带来的影响

                               即当前元素不会上前站位，并且右边不能有浮动元素

④both    清除前面元素左右浮动带来的影响（放在前面元素的最后面，当前元素的前面，2个元素之间）

5、浮动元素对父元素所带来的影响

  由于浮动元素会脱离文档流，所以导致元素不占据父元素的页面空间，会对父元素的高度带来影响

  如果一个元素中所有的子元素全部浮动了，那么该元素的高度为0。父元素的高度以未浮动的元素高度为准

    解决方案：① 直接设置父元素高度

                        弊端：必须要知道父元素的高度

                    ② 设置父元素也浮动

                        弊端：对后续元素会有影响

                    ③ 为父元素设置overflow，取值为hidden或者auto

                        overflow(除了visible)会重新给它里面的元素建立块级格式化，从而起到清除浮动的效果

                         弊端：如果有子级元素内容要溢出显示的话，也一同被隐藏了

                    ④ 在父元素的最后一个子元素处，添加一个空块级元素，并设置其clear为both（影响最小）

____________________________________________________________________________________

1、position  定位属性

    作用：指定元素的定位方式

取值：1、static：     静态，默认值

              2、relative： 相对定位

              3、absolute：绝对定位

              4、fixed：     固定定位

2、偏移属性

作用：对已定位属性实现位置的移动（可移动元素）

    属性：① top（+向下移，-向上移）        ② bottom（+向上移，-向下移）

             ③ left（+向右移，-向左移）        ④ right（+向左移，-向右移）

    取值：偏移距离，以px为单位的数值（向元素内方向移，向属性的反方向移，取值为正）

              以百分比%为单位，设置为absolute，top以父元素border下界为基线，向下延伸

                                                                   bottom以父元素的border上界为基线，向上延伸

3、堆叠顺序

    作用：在元素出现堆叠效果，改变他们的顺序（配合绝对定位）

    属性：z-index

    取值：无单位的数字，值越大越靠上，越小越靠后（尽量不要用连续性数字）

             取负值的话，该元素在页面所有元素内容之下（默认值为0），被覆盖则不显示

    注意：①z-index只能设置已定位（relative/absolute/fixed）元素的堆叠顺序

             ②如果不指定z-index，即默认，则后来者居上

             ③ 父子关系（层级关系）的元素不能通过z-index调整堆叠顺序，永远都是子压在父的上面

    建议：header、footer设为99，遮罩层设为999

____________________________________________________________________________________

三、相对定位：元素会相对它原来的位置偏移某个距离

语法：position：relative;

    作用：1、元素本身配合着偏移属性做位置微调，不脱离文档流

通过  top/bottom/left/right  定位出现的位置

                   相对定位元素 原来的位置 会被保留，不能被其它元素所占据（与margin的区别）

              2、可配合 绝对定位 一起使用

四、绝对定位（大部分弹出菜单会应用）

    1、绝对定位的元素会脱离文档流，不占据页面空间

2、绝对定位的元素会相对它最近的已定位的祖先元素去实现位置的初始化

        如果元素没有已定位的祖先元素，那么元素就会相对于最初的包含框实现位置的初始化(body或html)

已定位元素：设置absolute/relative/fixed的元素，称之为已定位元素

祖先元素：无限父级元素

3、语法：position:absolute;

                  配合着 偏移属性 实现位置的改变：通过 top/bottom/left/right 定位出现的位置

注意：1、绝对定位的元素都将变成块级元素

          2、可以调整堆叠顺序

          3、绝对定位元素依然可以使用margin，正常情况下，auto会失效，其它正常

               非正常情况下：绝对定位元素的 top/bottom/left/right 同时为0时，auto会生效

                                     此时设置margin：auto，可实现对于祖先元素的绝对居中

   用left/top：50%实现居中定位，再用margin-left/top：-边长/2  来补回多偏移的量

五、固定定位

    作用：将元素固定在页面的某个位置处，不会随着滚动条改变而改变

语法：position：fixed;

             配合着 偏移属性 实现定位

    注意：1、固定定位元素脱离文档流

              2、固定定位元素会变块级元素

              3、固定定位元素永远都是相对于 body 实现位置的摆放

各种定位的使用场合

    ① 浮动：多个块级元素想在一行内显示时，使用浮动

    ② 相对定位：元素自身实现位置微调时，用相对定位

    ③ 绝对定位：实现弹出内容时，用绝对定位，配合着父元素做相对定位一起完成

④ 固定定位：顶部，边栏（广告），使用固定定位