码迷,mamicode.com
首页 > 其他好文 > 详细

111

时间:2017-01-18 08:48:44      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:css布局   head   先来   垂直   样式   lang   包含   英文   顺序   

css布局模型 清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。  CSS包含3种基本的布局模型,用英文概括为:Flow、2、浮动模型 (Float)和 3、层模型(Layer)

流动模型(一) 

先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征:

第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。

流动模型(二)

第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

 

 

111

标签:css布局   head   先来   垂直   样式   lang   包含   英文   顺序   

原文地址:http://www.cnblogs.com/yyn120804/p/6295436.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!