css(三)布局模型

原创 2015年11月17日 19:43:38
  1. 流动模型 (Flow)
    特征:(1)块状模型水平分布,占据整行,自上而下(2)内敛元素自左而右
  2. 浮动模型(Float)
    div{
    float:left;
    }

    可以设置块状元素在同一行显示,上述语句是靠左
  3. 层模型(Layer)
    1. 绝对定位(position: absolute) //相对父块
    2. 相对定位(position: relative)//生成一个新的元素,相对于以前的进行移动,块内的子元素不动
    3. 固定定位(position: fixed)//相对于视图(即窗口位置)固定
    4. relative中的absolute
  4. 颜色值的表示
    (1)p{color:red;}(2)p{color:rgb(133,45,200);}或p{color:rgb(20%,33%,25%);}(3)p{color:#00ffff;}
    注:#off表示#ooffff
  5. 长度值
    (1)px,即pixel像素(2)em表示字体(3)%
  6. 设置文本等居中
    水平居中:text-align:center
    垂直居中:
    height:100px;
    line-height:100px;
    水平和垂直居中都可以利用table,具体参见相关教程
  7. 隐性改变display类型
    position : absolute
    float : left 或 float:right
    自动改为:display:inline-block
版权声明:如果文中有任何问题或者值得讨论的地方,都可以在下方留言或者QQ526664687,欢迎交流!!!

相关文章推荐

css学习笔记(三)——布局模型

布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是...

CSS布局模型(三)——层模型

什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到...

CSS盒模型和两栏布局、三栏布局

CSS盒模型

css盒子模型创建网页布局

盒子模型 CSS在描述HTML元素时,会形成一个矩形框,可以将矩形框形象的看成一个盒子。每个HTML元素,都具有盒子模型。 使用盒子模型创建网页布局index.html + out.cssind...
  • guguant
  • guguant
  • 2017年01月16日 16:52
  • 983

CSS基础之盒子模型及浮动布局

盒模型      谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content)、填充(padding)、边框(border)、边界(margin); 这些属性我们可以把它转移到我们日常...

Web开发之CSS布局模型

本文根据慕课网整理:http://www.imooc.com/code/2057简介布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 C...

css基础-布局模型

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。 2、在流动模型下,内联元素都会在所处的包含元素内从...

深入理解 CSS3 弹性盒布局模型

弹性盒布局模型(Flexible Box Layout)是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目...

css布局之盒模型

在CSS中, 我们常叫的盒子模型专业名叫Box Model,他规定了元素的内容(element content)、内边距(padding)、边框(border) 和 外边距(margin) 之间...

CSS-布局模型

一.流动模型:Flow1.首先它是网页默认的布局方式,有两个基本的特征: I.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css(三)布局模型
举报原因:
原因补充:

(最多只允许输入30个字)