第八章 特殊布局情况——定位布局
8.1定位属性
8.1.1 为什么要使用定位
HTML+CSS布局方式之中,最为常见的有两种布局模式,分别是浮动布局和定位布局。在日常开发中,使用最多的是浮动布局,当在页面中出现多个元素层叠状态时,会考虑定位布局,例如平时的弹窗、黑色半透明蒙版层、返回顶部微博等网站顶部的导航条等等。
8.1.2 定位——position属性
值 | 描 述 |
Absolute | 生成绝对定位的元素,相对于static定位意外的第一个父元素进行定位。元素的位置通过“left”,“top”,“right”以及“bottom”属性进行规定 |
Fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过“left”,“top”,“right”以及“bottom”属性进行规定 |
Relative | 生成相对定位的元素。相对于其正常位置进行定位 |
Static | 默认值。没有定位。元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明) |
Inherit | 规定应该从父元素继承position属性的值 |
8.1.3 定位对文档流的影响
当对一个元素设置了position:absolute和position:fixed时,钙元素会脱离文档流,从而对父级以及兄弟级元素的布局造成影响。
如果元素设置了position:relative,根据W3C官方文档上来说,并不会脱离文档流,也不会有布局上的问题,但是在实际开发中的情况则是:元素不会脱离文档流,但是可以设置top、left等值进行位置的操作。
如果元素设置了position:absolute,第二个div的位置会受到影响,在父级元素中从左上角开始显示,似乎附加元素中压根不存在第一个元素一样,这是第一个div元素已经脱离了文档流。
8.1.4 绝对定位元素针对谁进行定位
如果父级(无限)没有设定position属性,那么当前的absolute则结合top,right,left,bottom属性以;浏览器左上角为原始点进行设定。
如果父级(无限)设定position属性,且属性值为relative、absolute、fixed,那么当前的absolute则结合top、right、left、bottom属性以及父级(最近)的左上角为原始点进行定位。
8.2.1 定位——left等属性
定位提供了四种属性来设置的偏移:left、right、top、bottom
1)这四种属性均可以设置为负值,可以选用绝对单位(如px),也可以选用相对单位(如百分比),当时用这四种属性进行位置设置时,可以理解为设置“与相对定位元素的某方向位置的距离”。
2)绝对定位元素存在固定宽高:当绝对定位元素存在固定的宽(或高)时,在水平方向上,不论书写left值后书写right值。还是先书写right值后书写left值,均按照left的值进行渲染;在垂直方向上,不论先书写top值后书写bottom值,还是先书写bottom值后书写top值。均按照top值进行渲染。
3)绝对定位没有设置固定宽高
当绝对定位元素没有设置固定宽高时,合理的left与right(或top与bottom值都会生效)
元素宽度=父级元素-left值-right值
8.3 层级覆盖关系
8.3.1 定位——z-index属性
在一个网页当中,可能存在着多个定位的元素,当这些袁旭互相重叠时,就设计层叠的关系,因此,CSS当中规定了z-index这个属性,来为定位元素设定“层叠级别”,相对定位、固定定位、绝对定位的元素,均可设置z-index属性。
Z-index默认为0,数字越大级别越高,设置z-index之前的元素都是同级的,针对同级元素来说,后读取的元素的级别要高于先读取的元素级别。Z-index只针对同级的标签有效,子标签的z-index对父标签是无效的。针对两个设置绝对定位的元素进行层级比较时,首先应当比较其父级,再比较子集。
8.4 固定定位
Fixed可定位相对浏览器窗口的指定坐标。这个元素的位置可通过left、right、top、bottom属性来规定。不论窗口是否滚动,元素都会留在指定位置,该定位方法在移动端及其常见,在PC端有时也会适用于头部导航区,无论内容区的高度有多少,滚动条是否滚动,固定定位的元素始终显示在初始位置。
第九章 特殊布局情况——界限控制与伪元素的妙用
9.1 未设置固定宽高元素的界限控制
9.1.1 何处需要考虑界限问题
对于一个元素,如果设置了固定的宽度和高度,其实就意味着为这个元素设置了接线,这种界限不是在这里要考虑的,在这里只考虑“没有设定固定宽高的元素”的界限控制。
如果不为一个块元素设置固定宽度,则钙元素在水平方向上默认占满父级的百分之百。如果不为其设置固定高度,则默认有内容撑开高度。
9.1.2 最小高度
如果设置固定高度,内容少的时候互有大量留白。如果不设置高度,单纯由内容撑开高度,当内容少的时候,这个区域的高度太小,完全无法沾满整个浏览器区域,实在难看啊。故为元素设置最小高度(min-height),最小高度的值需要根据情况而定。
为ul(列表项父级元素)设置最小高度为500px,当元素内容部分的高度小于“最小高度值”时,该元素按照最小高度值撑开渲染;当元素内容部分的高度大于“最小高度值”时,该元素按照实际高度值进行渲染。
9.1.3 最大宽度和最大高度
对打宽度主要应用在移动端,在移动端开发当中,横向同时适用百分比等相对度量单位。加入设计图给出的是750像素的宽度,那么在大于750像素的浏览器中,横向宽度已经超出了设计图宽度,此时,就需要为body设置最大宽度,限制页面的大小。
默认情况下,内容高度由内容撑开,当设置最大高度之后,即使内容超出这个高度,浏览器依旧会按照设置的最大高度来进行计算。
9.2 伪元素
9.2.1 什么是伪元素
伪元素可以理解为“虚假的元素”,他们虽然会砸内容原宿的前后插入额外的元素,但不会在文档中生成,在文档的源代码中并不能够找到他们。
虽然在结构上是“虚假”的元素,但在表现上和“普通”元素没什么区别,能够为他们添加任何样饰,比如改变文字颜色、添加背景、调整字体大小等。
9.2.2 伪元素的种类
伪元素的种类 | 描 述 |
:first-letter | 祥文本的第一个字母添加特殊样式 |
:first-line | 祥文本的首行添加特殊样式 |
:before | 在元素之前添加内容 |
:after | 在元素之后添加内容 |
9.2.3 伪元素的书写格式
最初,伪元素的语法时使用“:”,通过冒号数量来区分伪元素和伪类,伪元素使用两个冒号(::before、::after),伪类选择器使用一个冒号(:hover :active)
使用:before,将会在选中的元素之前“添加”一个元素;使用:after,将会在选中的元素之后“添加”一个元素。在伪元素当中添加内容可以使用content属性。
9.2.4 让伪元素按照块元素特性渲染
如果希望伪元素能够一块元素现实,围棋设置display:block;即可。如果希望他能够设置宽高也能够与当前元素处于同一行,可以使用浮动、定位等。
第十章 表格
10.1 table布局的兴衰
10.2 table各类元素以及用法
标签 | 含义 | 标签 | 含义 |
Table | 定义一个表格 | Col | 定义表格的列区域 |
Caption | 定义表格标题 | Colgroup | 定义表格的数据列组 |
Thead | 定义表格的头部区域 | Tr | 定义一个表格行 |
Tbody | 定义表格的主体区域 | Td | 定义一个表格单元格 |
Tfoot | 定义表格的脚部区域 | Th | 定义一个表格的表头单元格(列标题) |
10.2.1 行列合并控制
Rowspan与colspan
在表格中,有些单元格进行了合并处理,即有些单元格占据了多个单元格的空间。Rowspan表示行合并,colspan表示列合并,两个都是th或td的属性,属性值为数字,表示合并的行数或列数。