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
版权声明:新建了专注于语义分割的QQ群704803384,欢迎交流!!!

前端设计之CSS布局:上中下三栏自适应高度CSS布局

网页代码: CSS布局:上中下三栏自适应高度CSS布局 *{margin:0;padding:0;} body, html { margin: 0; padding:0 !import...
  • sinat_26342009
  • sinat_26342009
  • 2015年08月14日 16:09
  • 1406

CSS实现三栏布局和垂直居中

网上找的方法,自己整理一下~(这些面试也会考) #三栏 绝对布局 我是左边 我是右边 我是中间 html,body{ margin: 0px; width: 100%; } ...
  • liuzijiang1123
  • liuzijiang1123
  • 2017年06月01日 10:37
  • 369

CSS实现经典三栏布局(两侧定宽,中间自适应)

html代码: css代码: #left{ float: left; width:100px; height: 100px; ...
  • u013853928
  • u013853928
  • 2016年10月31日 23:58
  • 374

CSS圣杯布局(三栏布局)

圣杯布局是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染。三栏全部float:left浮动,并配合left和right属性。 原理(1.浮动2.负边距): 负边距  m...
  • LadyZhong
  • LadyZhong
  • 2017年08月10日 15:53
  • 186

CSS布局模型(一)——流动模型

css布局模型 CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。 在网页中,元素有三种布局模型: 1、流动模型(Flow) 2、浮动模型 (Flo...
  • u010486124
  • u010486124
  • 2015年02月07日 17:07
  • 1116

CSS布局与定位,flow流,float

块元素的位置:从上向下流,元素之间自动换行 内联元素的位置:水平方向上排列,总体上会从左上方流向右下方...
  • chq11106004389
  • chq11106004389
  • 2016年01月02日 12:36
  • 1169

【CSS布局】三栏式布局,左右定宽,中间内容区域自适应

实现三栏式布局的经典方法有:双飞翼布局、圣杯布局,两者都是利用了父margin来达到想要的效果,同时也是遵循重要的内容优先加载的原则(先加载center),只是在实现上稍微有些不同,同时利用CSS3的...
  • heshan1992
  • heshan1992
  • 2017年08月19日 10:48
  • 381

三栏式布局

通常来说,三栏式最基本要解决的是 左右两侧固定宽度,中间列自适应宽度,另外根据浏览器从上至下的渲染原理,通常中间栏才是最主要的内容,最好能在DOM结构上 将中间栏放在更前面...
  • u012273376
  • u012273376
  • 2016年07月08日 18:14
  • 986

CSS:两栏布局,三栏布局

两栏布局方法一:浮动布局 div{ height:500px; } #aside{ width:300px; background-color:yellow; float:lef...
  • crystal6918
  • crystal6918
  • 2017年02月15日 23:34
  • 538

CSS三栏布局(两边固定中间自适应宽度)的方法

-   在讲这种布局之前,我还想和大家一起回想一下三列布局中的另一种,就是左右两列固定、中间自适应宽度。这种布局方法,网上问问G爸和度娘一定会有一大堆,但我还是要重复说说,方便自己今后查...
  • jinchun20100615
  • jinchun20100615
  • 2013年10月31日 10:47
  • 2002
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css(三)布局模型
举报原因:
原因补充:

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