• HTML+CSS学习笔记(九)


    不管怎么说,写博客这件事算是坚持下来了,也的确从写作的这个过程中领悟到很多,以前看书时没有注意到的细节,没有领悟的技巧,在用语言重构的过程中变得慢慢的清晰。挺好!

    这一次,我们要说的,是CSS中的重头戏,我以为这是CSS中最重要,概念也是最复杂的一部分,那就是关于CSS的布局。这种布局很宏观,也很微观,一个网站漂不漂亮,绝大程度上都基于此。

    一 、开始布局的注意事项

    1. 内容与显示分离

      这是构建网页的根本,前面也一再提到,作为最佳实践,应始终保持内容(HTML)与显示(CSS)分离,如果对所有的页面都这样做,就可以共享相同的布局和整体样式,而只在具体页面设置差异即可

    2. 布局方法

      网站设计主要有两大类型:固定宽度响应式。

      固定宽度,顾名思义,就是整个页面和每一栏的宽度都用一个具体的像素值固定下来,无论是使用PC还是智能手机或者iPad之类的设备,所看到的效果都是一样的。这种布局方式最为常见,也是比较容易掌握的一种方式,这一次我们说的就是固定宽度。

      但是,伴随着智能终端概念的深化,响应式应运而生,响应式又称流式,使用百分数定义宽度,页面会随着显示环境的变化而发生相应的放大或者缩小,这样以来,不同分辨率,不同尺寸的设备所看到的效果就会有所差异,如果设置合理的话,在每一台设备上都能取得最佳的效果,这些我们下一次才会接触到。

    3. 浏览器注意事项

      用户使用的系统和浏览器会有所不同,所以在将网站放在服务器之前,有必要在不同的浏览器上对它们进行测试,推荐在开发的过程中就对它们定期测试,这样在最后的全面测试的时候问题就会少一些。

       

    二 、构建页面

    CSS让页面内容富有活力,开发人员的设计技巧大部分都是靠它来呈现,但首先我们应该知道,高效网页核心结构良好语义化HTML

    1. 恰当的使用main、article、aside、nav、section、header、footer和div等元素将页面划分成不同的逻辑区块。根据需要对它们应用ARIA地标角色。

      header常用作报头,包括标识,社交媒体网站链接和主导航。

      section元素可以将main划分为多个条目。

      aside作为附注栏,提供关于博客作者或者其他页面的链接。

      footer作为页脚,常包含版权信息等内容。

      div的使用较为灵活,可以包裹其他任意元素,并为之添加样式。

    2. 按照一定的顺序放置内容,确保页面在不使用CSS的情况下也是合理的,例如,首先是报头,接着是主体内容,接着是一个多多个附注栏,最后是页面级的页脚。将最重要的内容放在前面,不仅方便用户的获取,也便于搜索引擎的索引。
    3. 以一致的方式使用标题元素(h1~h6),从而明确的标识页面上这些区块的信息,并对它们按优先级排序。
    4. 使用合适的语义标记剩下的内容,如段落、图、表等。
    5. 如果有必要,使用注释来标识页面上不同的区域及内容。如 <!-- ===========开始报头============ -->

      注意:不一定一定要等到所有的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属性可以方便的修改鼠标的形状。

     

    总结:这一章讲的,的确是难,写的时候都相当费劲,花了三个下午才写完,概念大致都清楚了,但是要说具体到使用中,可能说还是没有很充分的把握。这些只能是在今后的实践中一步步深化理解,光靠书是很难理解的特别透彻的。总而言之,多查,多看,多记,保持谦逊!

    却道,此心安处是吾乡
  • 相关阅读:
    ASP.NET2.0中GridView加入CheckBox实现全选!
    恢复误删数据(SQL Server 2000)--Log Explorer
    url传递中文的解决方案总结
    JavaScript : Tip提示框。
    合并GridView中某列相同信息的行
    ASP.NET 2.0服务器控件与form runat=server标记 !!
    实现天气预报类···························
    正则抓取SINA天气预报数据!!!
    ASP.NET 2.0中将 GridView 导出到 Excel 文件中
    GridView控件修改、删除示例(修改含有DropDownList控件)
  • 原文地址:https://www.cnblogs.com/lucifer25/p/6043819.html
Copyright © 2020-2023  润新知