zoukankan      html  css  js  c++  java
  • 从零开始学习前端开发 — 6、CSS布局模型

    一、css布局模型

    1.流动模型(Flow)

    元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示

    2.浮动模型(Float)

    使用float属性来进行网页布局,给元素设置float后会脱离正常的文档流

    3.层模型(Layer)

    使用position属性对元素进行定位设置


     

    二、定位

    语法:position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位);

    1.绝对定位语法: position:absolute;

    绝对定位的参照物必须满足两个条件,缺一不可:

    a)参照物和绝对定位的元素必须是包含与被包含的关系

    b) 参照物必须是具有定位属性的元素

    如果找不到满足以上两个条件的父包含块,那么将相对于浏览器窗口进行定位

    注:绝对定位元素的位置通过left,right,bottom,top四个属性来确定

    设置了绝对定位的元素将会脱离正常的文档流

    2.相对定位语法:position:relative;

    相对定位的参照物:相对于元素偏移前的位置进行定位

    注:给元素设置了相对定位后,原来的位置会被保留,不会脱离文档流

    3.透明度的设置语法: opacity:数值;(取值范围:0-1,0为透明,1为不透明)

    注:当给元素设置了opacity属性后,容器中的文本,图片都会跟随透明

    IE浏览器不识别opacity属性,兼容写法如下:

    filter:alpha(opacity=数值); (取值范围1-100)

    eg: .box{
    opacity:0.6;
    filter:alpha(opacity=60);
    }

    4.定位层叠属性语法: z-index:auto(默认值)|数值;

    注:a)z-index一般设置整数值,可以为负值

      b) 没有设置z-index时,最后写的对象优先显示在上层,设置后,数值越大,层越靠上;

    5.固定定位语法: position:fixed;

    固定定位参照物:浏览器窗口(屏幕窗口)

    注:给元素设置了固定定位后会脱离正常的文档流,原来的位置会被其他元素占据

    注:当元素设置绝对定位和固定定位参照物都是屏幕窗口时,设置绝对定位元素会跟随滚动条滚动,设置固定定位元素不会跟随滚动条滚动,

    固定在屏幕窗口的某个位置


     

    三、锚点链接

    1.命名锚记名语法: <标记 id="锚记名"></标记>

    2.连接锚记名语法: <a href="#锚记名"></a>

    eg: <h1 id="pageone">第一章html基础</h1>

    <a href="#pageone">第一章 html基础</a>

    注:a)锚点链接是在本页面不同位置的跳转


     

    扩展一:如何在网页中插入flash

    语法: <object width="1000" height="500">
          <param name="movie" value="1.swf"/>
          <embed width="1000" height="500" src="1.swf"></embed>
       </object>

    扩展二:滚动字幕

    语法:<marquee behavior="scroll(滚动)|alternate(晃动)" direction="left|right|up|down" width="value" height="value"scrollamount="数值">滚动的内容</marquee>

    注:scrollamount 用来设置滚动的速度,值越大速度越快

    Get busy living or get busy dying
  • 相关阅读:
    [usaco]Cow Pedigrees
    组合数取模
    [usaco]Controlling Companies
    ubuntu g++ 升级
    膜拜
    Node.js权威指南 (2)
    Vue.js 开发环境的搭建
    src路径问题:./ 与 ../
    vscode vue代码提示错误
    H5 localStorage sessionStorage
  • 原文地址:https://www.cnblogs.com/witkeydu/p/8179169.html
Copyright © 2011-2022 走看看