zoukankan      html  css  js  c++  java
  • 2014年辛星解读css第六节

     这一节我们就要讲到布局了,事实上布局本身特别简单。可是要合理的布好局就不那么简单了,就像我们写文章一样。写一篇文章非常easy,可是要写一篇名著就非常难了,这须要我们扎实的功底和对文学的理解,可是。千里之行。始于足下,我们開始吧。

    ************显示方式*************

    1.有时候我们会设置一个元素的显示方式。比方我们在做导航条的时候,就会使用display:inline来使它们成为内联的样式。

    2.以下先不说这个display,先说一下visibility属性把,它能够设置为hidden,即不显示。那么该块区域就显示一片空白。

    有一个类似的方法就是使用display:none,它也是设置不显示,可是它的作用却是让该元素消失,后面的元素会自己主动占领它的空间。

    3.我们能够使用display:block使得它的显示成为一个块级元素。能够理解为强制性的换行,而display:inline则是强制性的使其不换行,向右排列。

    4.变更元素的显示类型看该元素怎样显示,看它是什么样的元素,比方一个内联元素设置为display:block是不同意有它的内部嵌套块元素的。

     

    *************大小***************

    1.对于一个HTML元素。我们能够通过设置它的width属性和height属性来设置其大小,也就是其宽度和高度。

    2.另一些其它设置大小的属性,感觉不是非经常常使用,即没列举。

    ************定位*****************

    1.第一种定位方式就是默认的方式。它是自上而下,从左到右的一个模式。也是最简单的一种模式。

    2.另外一种就是固定定位。它的位置相对于浏览器的窗体位置是固定的,即使窗体滚动,它也不会动。这样的能够用来做那种广告条之类的,我们以下做一个演示样例。首先是HTML文件里书写代码例如以下:

    复制代码
    <html>
    <head>
        <title>2014年辛星CSS教学夏季版</title>
        <link rel="stylesheet" type="text/css" href="my.css">
    </head>
    <body>
        <p>博客园辛星,无限温情</p>
    </body>
    </html>
    复制代码

    然后就书写my.css文件,这里我们为了看出随着滚动栏的滚动。该段文字的位置不变的特性,我们须要给浏览器窗体一定的大小:

    body{width:400px;
    height: 900px;}
    p{position: fixed;
    top:30px;
    left: 50px;}

    3.上面这样的方式对浏览器的兼容不好。在IE8下面须要描写叙述!DOCTYPE 才干够。这里的top指的是它的上面到浏览器的顶部的距离,left是指它的右端到浏览器的右端的距离。

    4.相对定位:这里须要清楚相对“谁”的定位。这里的相对定位是相对于第一种方式的定位,即默认方式的定位,它会在默认方式的基础上进行一些改动,能够设置left等属性,假设设置left为-20px,则表示它相对于原始位置向左移动二十个像素,它也须要在postion属性中赋值为relative。

    5.绝对定位:它须要指定position为absolute。也能够设置left和top或right等属性,假设该元素没有父元素,则它的位置是相对整个浏览器窗体来说的。

    ***************小结****************

    1.本小节解说了显示方式和定位方式,为后面的布局打下一定的基础。

    2.我们下一小节将会解说布局方面的问题。

  • 相关阅读:
    032 Gradle 下载的依赖jar包在哪?
    031 can't rename root module,Android Studio修改项目名称
    030 Cannot resolve symbol'R' 问题解决汇总大全
    029 Android Studio层级显示目录文件
    028 You are about to commit CRLF line separators to the Git repository.It is recommended to set the core. autocrlf Git attribute to true to avoid line separator issues If you choose Fix and Comit ,
    027 【Android基础知识】Android Studio 编译慢及 Adb connection Error:远程主机强迫关闭了一个现有的连接
    026 Android Studio 和Gradle版版本对应关系
    025 Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierIm
    024 Android Studio上传项目到Github 最全记录
    023 解决AndroidStudio下载gradle慢的问题
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/6884608.html
Copyright © 2011-2022 走看看