标准文档流(Normal flow)

特点:

  从上到下,从左到右,输出文档内容

  由块级元素和行级元素组成

  块级元素:

    从左到右撑满页面,独占一行

    触碰到页面边缘时,会自动换行

  块级标签:

    div、ul、li、dl、dt、p......

  行级元素:

    能在同一行内显示

    不会改变HTML文档结构

   行级标签:

    span、strong、img、input......

块级元素和行级元素都是盒子模型。

盒子模型=网页布局的基石,由四部分组成:

边框(border)、外边距(margin)、内边距(padding)、盒子中的内容(content)

设置顺序是顺时针:上、右、下、左。

三个值(上、左右、下)

两个值(上下、左右)

一个值(上下左右)

盒子的层次模型(由上到下)

边框(border)、盒子中的内容(content)+内边距(padding)、背景图像(background-image)、背景颜色(background-color)、外边距((margin)

盒子模型的尺寸=边框(border)+外边距(margin)+内边距(padding)+盒子中的内容(content)

浮动(Floats)

绝对定位(Absolute possitioning)

1.CSS中的定位机制的更多相关文章

  1. CSS中的定位机制

    CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position) 普通文档流 就是CSS中默认的文本文档 普通流中,元素位置由文档顺序和元素性质决定,块级元 ...

  2. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  3. 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  4. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  5. 对css中的定位属性postion刨根解牛

    定位的基本思想很简单: 它允许你定义元素框相对于其正常位置应该出现的位置(relative),或者相对于父元素(absolute).另一个元素甚至浏览器窗口本身的位置(fixed).显然,这个功能非常 ...

  6. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  7. CSS三种定位机制

    标准文档流 块级元素撑满整个页面div,ul,li,dl,dt,p 行级元素可以一行显示多个span,strong,img,input大部分 一般不设置盒子的高度,另其自动调整 margin属性的au ...

  8. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  9. css中元素定位

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...

随机推荐

  1. 使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务 | Publishing and Calling WMTS, Vector Tile Service Using GeoServer + OpenLayers

    Web GIS系列: 1.搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 2.使用GeoServer+QGIS发布WMTS服务 3.使 ...

  2. 20160214 2016-2017-2 实验二《Java面向对象》实验报告

    实验二 面向对象程序设计 (一)单元测试 写一段关于分数标准的代码,如下: public class MyUtil{ public static String percentage2fivegrade ...

  3. route -A inet6 增加下一跳 提示错误 SIOCADDRT: No route to host

    1.增加前路由表: 2. route -A inet6 增加下一跳 提示错误 SIOCADDRT: No route to host 3.删除已有的下一条路由表项: 4.再次尝试 route -A i ...

  4. 用JAVA实现无等待数据库连接池

    我们都知道数据库连接是一种有限和非常昂贵的应用资源,怎样对这些资源进行高效的管理,能有效的改善整个系统的性能和健壮性.数据库连接池正是针对这个问题而提出来的. 数据库连接负责分配.释放和管理数据库连接 ...

  5. Android-ListView-ArrayAdapter

    我在上一篇博客中Android-动态添加控件到ScrollView,写到可以用Java动态添加控件到Scrollview的孩子LinearLayout里面去,这种方式是不合理的,因为这种方式是一次性把 ...

  6. Mathcad操作tips:算式输入、变量定义与计算

    算式输入 1. 数字与符号相乘,输入时不必手动输入乘号(“*”). 2. 以下有助于算式的可视化:a. 使用Math工具栏输入,并合理使用tab键:b. 合理使用空格键. 3. 输入开根号时,可用快捷 ...

  7. MySQL不带where条件的UPDATE和DELETE 限制操作说明

    本文来自 网易云社区 . 数据安全是业务的基石,但是DBA 总会遇到救火情况,业务误删除全表或者误更新错全表业务数据,导致服务不可用 sql_safe_updates参数可以限制不带where条件的u ...

  8. “全栈2019”Java第六十一章:如何实现接口?

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. 二,PHP缓存机制详解

    一,PHP缓存机制详解 我们可以使用PHP自带的缓存机制来完成页面静态化,但是仅靠PHP自身的缓存机制并不能完美的解决页面静态化,往往需要和其他静态化技术(通常是伪静态技术)结合使用. output ...

  10. JMeter—断言

    断言用来对服务器的响应数据做验证,常用的断言是响应断言,支持正则表达式. 一.BeanShell Assertion 用来访问JMeter的属性: log对象,可以利用此对象写日志 SampleRes ...