文档流

处在网页的最底层,表示的是一个页面中的位置。

创建的元素,默认都处于文档流中。

元素在文档流中的特点

  • 块元素

    • 在文档流中独占一行。
    • 自上而下排列。
    • 宽度默认占父元素的 100%,width="auto"。。。当元素的 width 和 height 设置为默认auto,此时指定内边距不会影响可见框大小,而是会修改 width 来自适应内边距。
    • 高度将被内容撑开。
  • 内联元素
    • 不会独占一行,只占自身大小。
    • 默认从左往右排列,满了就另起一行。
    • 会出现一个元素,上一行一部分,下一行一部分。

元素脱离文档流以后:

  • 块元素

width 和 height 会被内容撑开。

  • 内联元素

会变成块元素,可以设置 width 和 height。

width 和 height会被内容撑开。

__x__(26)0907第四天__文档流_网页最底层的更多相关文章

  1. __x__(27)0907第四天__ float 浮动

     float 浮动 块元素脱离文档流,水平排列. 浮动元素 会尽量往左上(left),或者右上(right)浮动,直到遇到 块元素 或者 其他浮动元素. 可选值: none;   默认值,不脱离文档流 ...

  2. __x__(23)0907第四天__浏览器默认样式

    浏览器默认样式:         为了美观,浏览器为了在页面没有样式时,也可以有一个较好的显示效果,默认设置若干 margin,padding. 作为开发人员,在CSS编写最初,一般都会清除默认样式, ...

  3. __x__(19)0907第四天__ HTML5 文本标签 及 样式

    strong 表语义上的强调, em 表示语气上的强调: <strong>警告:离僵尸远点!</strong> 世界末日了,因为僵尸是<em>有毒的</em& ...

  4. __x__(20)0907第四天__列表ul,ol,dl

    列表分为: 有序列表 ul: <ul type="disc"> <li>张三</li> <li>李四</li> < ...

  5. __x__(21)0907第四天__ css 盒模型 (框模型)

    CSS 处理元素,把每个元素都包含在一个盒子里. 对网页的布局,其实就是对盒子的摆放及设置.  边框border,会使盒子变大: .box{ border: 10px 20px 30px 40px r ...

  6. __x__(22)0907第四天__ 垂直外边距重叠

    外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...

  7. __x__(25)0907第四天__ overflow 父元素对溢出内容的处理

    overflow    父元素对于溢出内容的处理 visible;    默认值,对于溢出内容,在父元素之外显示. hidden;    对于溢出内容,进行隐藏,不显示. scroll;    对于溢 ...

  8. __x__(28)0907第四天__固定布局

    布局 固定布局,需要计算单位 自适应响应布局  固定布局 html代码 <!doctype html> <html> <head> <meta charset ...

  9. __x__(24)0907第四天__ display 和 visibility

    <a>百度</a>    也是内联元素,无法设置width和height <img>可以设置width和height,但是不会占用一行,所以是典型的行内块元素inl ...

随机推荐

  1. SpringCloud笔记三:Eureka服务注册与发现

    目录 什么是Eureka? Eureka注册的三大步 第一步,引用Maven 第二步,配置yml 第三步,开启Eureka注解 新建Eureka子项目 把provider子项目变成服务端 Eureka ...

  2. nnet3的并行化训练

    num_epochs=1 num_archives=64 args.num_jobs_initial=3 args.num_jobs_final=8 num_iters=2*num_epochs*nu ...

  3. Python-Django-Djangorestframwork

    1 CBV源码分析(cbv和fbv) 1 在views中写一个类,继承View,里面写get方法,post方法 2 在路由中配置: url(r'^test/', views.Test.as_view( ...

  4. js在数组arr中随机获取count数量的元素

    // 在数组arr中随机获取count数量的元素; const getRandomArrayElements = (arr, num) => { // 新建一个数组,将传入的数组复制过来,用于运 ...

  5. Java的家庭记账本程序(L)

    日期:2019.3.13 博客期:044 星期三 整理了两天,我终于也是把微信小程序平台的记账本软件完全开发出来了,并将我的微信账号与GitHub账号完成了绑定,那么我就先展示一部分作品,还有一部分代 ...

  6. zoj4027 线性dp!好题

    非常好的dp,可是我太菜做不出来.. /* 第i个左括号不可能越过第i+1个左括号 如果第i个左括号到位置j,前提是第i+1个左括号就必须到位置j+1即以后 用dp[i][j]表示把第i个左括号转移到 ...

  7. day13-迭代器及生成器

    iterable:可迭代的:iterator:迭代器: print(dir([ ]))  #打印出列表所拥有的所有方法: 可迭代协议:只要含有__iter__方法的都是可迭代的. 迭代器协议:含有__ ...

  8. nl命令

    nl (Number of Lines) 将指定的文件添加行号标注后写到标准输出.如果不指定文件或指定文件为"-" ,程序将从标准输入读取数据. 选项: -b, --body-nu ...

  9. Java项目使用SQLite数据库后无法启动的问题

    背景: Java > maven 的 jar 项目 功能是记录用户的每天的按键次数 使用 jar2exe 工具将 jar 转为 exe 可执行文件 原本项目中使用的Mysql数据库,使用Myba ...

  10. main函数中System.exit()的作用

    main()主函数再熟悉不过,了解java的人也都知道System.exit()方法是停止虚拟机运行.那这里为什么还要单独写一篇博客,都是源于朋友发的一张最近刚买的T恤照片,就是上面这张图.这是一个经 ...