不管怎么说,写博客这件事算是坚持下来了,也的确从写作的这个过程中领悟到很多,以前看书时没有注意到的细节,没有领悟的技巧,在用语言重构的过程中变得慢慢的清晰。挺好!
这一次,我们要说的,是CSS中的重头戏,我以为这是CSS中最重要,概念也是最复杂的一部分,那就是关于CSS的布局。这种布局很宏观,也很微观,一个网站漂不漂亮,绝大程度上都基于此。
一 、开始布局的注意事项
- 内容与显示分离
这是构建网页的根本,前面也一再提到,作为最佳实践,应始终保持内容(HTML)与显示(CSS)分离,如果对所有的页面都这样做,就可以共享相同的布局和整体样式,而只在具体页面设置差异即可
- 布局方法
网站设计主要有两大类型:固定宽度和响应式。
固定宽度,顾名思义,就是整个页面和每一栏的宽度都用一个具体的像素值固定下来,无论是使用PC还是智能手机或者iPad之类的设备,所看到的效果都是一样的。这种布局方式最为常见,也是比较容易掌握的一种方式,这一次我们说的就是固定宽度。
但是,伴随着智能终端概念的深化,响应式应运而生,响应式又称流式,使用百分数定义宽度,页面会随着显示环境的变化而发生相应的放大或者缩小,这样以来,不同分辨率,不同尺寸的设备所看到的效果就会有所差异,如果设置合理的话,在每一台设备上都能取得最佳的效果,这些我们下一次才会接触到。
- 浏览器注意事项
用户使用的系统和浏览器会有所不同,所以在将网站放在服务器之前,有必要在不同的浏览器上对它们进行测试,推荐在开发的过程中就对它们定期测试,这样在最后的全面测试的时候问题就会少一些。
二 、构建页面
CSS让页面内容富有活力,开发人员的设计技巧大部分都是靠它来呈现,但首先我们应该知道,高效网页的核心是结构良好、语义化的HTML。
- 恰当的使用main、article、aside、nav、section、header、footer和div等元素将页面划分成不同的逻辑区块。根据需要对它们应用ARIA地标角色。
header常用作报头,包括标识,社交媒体网站链接和主导航。
section元素可以将main划分为多个条目。
aside作为附注栏,提供关于博客作者或者其他页面的链接。
footer作为页脚,常包含版权信息等内容。
div的使用较为灵活,可以包裹其他任意元素,并为之添加样式。
- 按照一定的顺序放置内容,确保页面在不使用CSS的情况下也是合理的,例如,首先是报头,接着是主体内容,接着是一个多多个附注栏,最后是页面级的页脚。将最重要的内容放在前面,不仅方便用户的获取,也便于搜索引擎的索引。
- 以一致的方式使用标题元素(h1~h6),从而明确的标识页面上这些区块的信息,并对它们按优先级排序。
- 使用合适的语义标记剩下的内容,如段落、图、表等。
- 如果有必要,使用注释来标识页面上不同的区域及内容。如 <!-- ===========开始报头============ -->
注意:不一定一定要等到所有的HTML都标记好才开始应用CSS,在HTML的主体部分写完后,CSS就可以介入,然后一边标记页面,一边写CSS。这是一种迭代的思想!
三 、盒模型
这是CSS最核心的思想。CSS在处理网页时,认为每个元素都是包含在一个不可见的盒子里,这里的盒子由内容区域、内容区域周围的空间(内边距,padding)、内边距的外边缘(边框,border)和边框外面将元素与相邻元素隔开的不可见区域(外边距,margin)构成。使用CSS可以确定盒子的外观和位置,并由此控制网页的布局。
这里尤为要提到的一点,是关于width的。CSS里的width属性,是关于内容宽度的,默认的处理方式中,元素的显示宽度=内容宽度+左右内边距+左右边框,但是我们可以通过设置box-sizing:border-box;来让显示宽度与width的值相同,这时候,内容宽度自然就不是width了。
四 、控制元素的显示类型和可见性
显示类型:每个元素在默认情况下要么显示在单独的行(如h1~h6,p等),要么显示在行内(如em,strong,cite等),前一种元素称为块级元素,后一种称为行内元素。造成这种情况的本质是它们的display属性,块级元素被设置为display:block,而行内元素被设置为display:inline。这样的情况,完全可以由CSS修改,例如,把行内元素改为display:block,这样它们就拥有了块级元素的特性,还有一种混合的形式,inline-block,让元素与其他内容显示在一行,同时具有块级元素的属性,之所以会有这样的设置,是因为设置为inline的元素,对于width,padding,margin等属性是完全忽略的。如果将display设置为none,该元素就不会显示,不仅如此,紧跟在其后的文字会占据它原有的位置,看起来就跟该元素不存在一样。
默认情况下,元素会按照在HTML中自上而下出现的顺序显示,这称为文档流。
可见性:visibility属性控制元素是否可见,visibility:hidden的话,元素不可见,但仍在文档流中占据位置,原来元素的区域现在变成空白,这与display:none有所差异。输入visible的话,元素就显示出来了。
五 、设置元素的高度和宽度
可以为块级元素设置高度和宽度,对于行内元素,如果想设置的话,须将display属性修改为block或inline-block。
div{ 500px/80%/.8em/auto; height:200px/95%/.95em/auto; } |
width和height的值,可以是固定的,如用像素表示,常用于固定宽度格局,也可以是相对的,如百分数,em,多用于响应式,默认情况是auto。百分数和em均是相对于父元素的,而不是关于自身的,这点切记!
还有min-width,max-width,min-height,max-height,顾名思义,即设置最大最小高度宽度,max-width是为响应式布局设置宽度的绝佳工具,下一次我们会接触到。height的值很少设为固定的,因为你往往不能确定内容会有多少,如果一定要设置一个固定高度的话,那也应该是用min-height,它在需要时候,会弹性的自动增高,这样更灵活,不是吗?
这里的宽度和高度,都仅仅是关于内容区域的,并非显示的宽度,当然你也可以box-sizing:border-box来改变这一切。
六 、在元素周围添加内边距
内边距,顾名思义就是元素内容周围、边框以内的空间,如果不设置内边距,内容就会贴到边界,显得很拥挤,设置内边距后就会留有一些空白,看起来更为舒适。添加内边距,使用的是padding属性。
div{ padding:.3125em .625em .3125em .625em; } |
单位可以是像素,百分数或者em。
如果为padding设置四个值,则分别表示上、右、下、左,顺时针方向。
如果为padding设置一个值,则会应用于四个方向。
如果为padding设置两个值,前一个会应用于上下两边,后一个会应用于左右两边。
如果为padding设置三个值,第一个会应用于上边,第二个会应用于左右两边,第三个会应用于下边。
也可以单独为四个方向设置padding,如padding-top:2px,padding-right:.5em,这样都是可以的。
七 、设置边框
可以在元素周围创建边框,并指定它的厚度、风格和颜色。
img{ border: 5px solid #bebebe; } |
定义边框宽度:border-n,单位可以是像素或者em。
定义边框风格:border-type,其中的type可以是none、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(槽线)、ridge(脊线)、inset(凹边)、outset(凸边)。
设置边框颜色:border-color:color,这里的color可以是颜色名称、十六进制或RGB、HSL、RGBA、HSLA。
当然最方便的还是简记法,即如上面示例的那样。甚至你还可以单独设置某一条边的属性,就像padding一样,border-top/left/right/bottom都是可以的。
注意:简记法的顺序一定要是border-width border-style border-color,另外还需要注意的是,上述三者都可以分别填充四个值,就像padding的四个值一样。
八 、设置元素周围的外边框
外边距是元素与相邻元素之间的透明空间,属性为margin,具体的用法与padding类似,此外,margin还有自己的一些独特的东西,如auto,和width有很大关系,如果左右值设置为auto的话,元素就会居中显示。
注意:如果元素位于另一个元素的上面,对于相互接触的两个margin,仅使用其中较大那一个,另一个会被叠加。
这个时候要总结一下了:padding、border、margin都是都不是继承的而且它们的em表示的也不是相对于父元素的,而是相对与自身字体的大小。在这三个属性中,border的单位常常是像素表示,而另外两个则最好用相对单位em来表示,这样的布局会使网页更加的富有弹性,而且在响应式布局中总是被用到。
九 、使元素浮动
可以通过float属性使元素浮动在文本或其他元素上。可以使用这种技术让文本环绕在图像或者其他元素周围,也可以使用这种技术创建多栏布局等。
浮动只能是关于指定了width的元素。
main{ 500px; float:left; } |
float的属性值可以是left、right或者是none。
注意:你选择的是方向是关于需要浮动元素的,而不是应用于环绕它的元素,使用float:left时,页面的其他部分围绕在右边。
flaot元素不是继承的,这很好理解。
十 、控制元素浮动的位置
我们可以控制浮动的停止,需要先理解一点,浮动的元素是不在文档流里的,但它本身是占据了一定的位置的,所以文档流会避开它继续流到空白的位置,有的时候你想要让元素回到原来文档流的位置,就要清除浮动,这在CSS中很简单:clear:left/right/both,如果原先的浮动是左的话就清除左,反之则是右。一旦清除浮动后,后面的元素就正常归位了。
由于浮动的元素不占据文档流的位置,所以其所在容器的高度就很难预测,所以你想为容器添加背景色,这个时候就需要容器自身有自清除的能力,有两种方式,一种是为容器元素添加clearfix类,关于clearfix,网上的方案有很多,比如说:
.clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{clear:both;} .clearfix{ *zoom:1;/*IE/7/6*/ } |
至于为什么这么写比较复杂,我目前也不是很懂,直接拿来用即可,另一种方法是用overflow属性,hidden或者auto属性值,就具体情况而定。
十一 、对元素进行相对定位
每个元素在文档流中都有一个自然位置,相对于这个原始位置进行移动就称为相对定位。
span{ positive:relative; top:35px; left:2em; } |
既要指明定位(positive)的方式,如这里的相对定位,也要指出偏移量,偏移量有四种,top、left、bottom、right,单位可以是px,em,数字可以是负数。
所谓相对定位,是相当于元素原来文档流的位置,其他的元素不受影响,所以有可能产生重叠,这时候要用z-index来解决,这个下面会说到。
如果对元素设置positive:static,元素就会回到原来的位置,static是元素的默认值。
十二 、对元素进行绝对定位
网页中的元素会按照它们各自在HTML中的出现的次序进行排列。对元素进行绝对定位,即制定他们相对于body或最近的已定位祖先元素的精确位置,可以让元素脱离正常的文档流,这与相对定位不同,原先的位置会被之后的元素占据,与浮动也不同,之后的元素不会围绕它,事实上,其他元素根本不知道它的存在,它也不知道其他元素的存在。
div{ positive:absolute; } span{ positive:absolute; top:35px; left:2em; } |
通常我们想绝对定位的时候,需要先为它的祖先元素定位,如果没有的话,是默认以body进行定位,这也许不是你想要的。
还有一种定位叫做固定定位,即positive:fixed,滚动浏览器窗口时元素不动,很多时候都会造成效果不佳,因此也很少使用。
十三 、在栈中定位元素
在相对定位和绝对定位中,有时会出现元素互相重叠,这时候就要选择哪些元素在顶层,这里用到的是z-index属性,该属性的属性值是一个任意的数字,数值大的排在顶层,但是这个属性仅仅对相对定位、绝对定位和固定定位才有效。
十四 、处理溢出
元素并不总是在自己的盒子里,有的时候盒子被设置的太小,或者内容出乎意料的多,无论什么情况,都可以用overflow属性来解决。
overflow有这么几个属性:
visible:让盒子中的所有元素可见,这是默认选项。
hidden:隐藏盒子容纳不了的内容
scroll:无论元素是否需要,都在元素上添加滚动条
auto:让滚动条仅在访问者访问溢出时出现(这个看起来是我们想要的!)
在清除float的时候,也是这个属性!
十五 、垂直对其元素
这里我们针对的是行内元素,行内元素默认在竖直方向上与文本的基线对齐,我们可以用vertical-align方便的改变这一切。
vertical-align有这么几个属性:
baseline:使元素的基准线对齐父元素的基准线
middle:使元素位于父元素中央
sub:使元素成为父元素的下标
super:使元素成为父元素的上标
text-top:使元素的顶部对齐父元素的顶部
text-bottom:使元素的底部对齐父元素的底部
top:使元素的顶部对齐当前行里最高元素的顶部
bottom:使元素的底部对齐当前行里最低元素的底部
或者输入某个值,正负皆可,单位为像素或者em,分别按照特定的值上下移动。
注意:vertical-align仅适用行内元素,对于块级元素不起作用。
十六 、修改鼠标指针
在CSS中,用cursor属性可以方便的修改鼠标的形状。
总结:这一章讲的,的确是难,写的时候都相当费劲,花了三个下午才写完,概念大致都清楚了,但是要说具体到使用中,可能说还是没有很充分的把握。这些只能是在今后的实践中一步步深化理解,光靠书是很难理解的特别透彻的。总而言之,多查,多看,多记,保持谦逊!