CSS布局模型详解.pdfVIP

精品课程 千锋教育 全程面授 CSS 布局模型详解 CSS是一门计算机语言 ，它是网页的外衣 ，页面好不好看全凭 CSS样式 ，而布 局模型和定位技术是 CSS 中比较重要的部分 ，是页面布局的核心技术 ，不论是 常见的 PC端页面 ，还是移动端页面都离不开我们的布局模型和定位技术。 CSS包含 3种基本的布局模型 1、流动模型 （Flow ）； 2、浮动模型 (Float) ； 3、层模型 （Layer ）； 一、流动模型 （flow ） 流动模型 （Flow ）是默认的网页布局模式 ，也就是网页在默认状态下 HTML 网 页元素都是根据流动模型来分布网页内容的。 流动布局模型有两个比较典型的特点 第一点 ：在默认状态下块状元素都会自上而下的分布 ，独占一行 ，块状元素的宽 度都为 100% ，两个相邻的块元素会在不同行显示 ，常见的块状元素有 ： div,p,ul,ol,li,h1- h6 ，table等。如下代码是流动模型下多个块元素的代码。 千锋教育-中国IT职业教育领先品牌 精品课程 千锋教育 全程面授 效果图 ： 第二点 在流动模型下 ，内联元素都会从左到右水平分布显示,常见的内联元素有 ： a,span,b,strong,i,em,del,img,input,textarea等。如下代码是流动模型下多个 内联元素的代码结构。 千锋教育-中国IT职业教育领先品牌 精品课程 千锋教育 全程面授 效果图 二、浮动模型 （float ） 浮动模型是完全不同于流动模型的另一种布局模型 ，它遵循浮动规则 ，同样流动 模型仍对它有潜在影响。为什么会有浮动模型呢 ？ 块状元素独占一行 ，如果在我们的页面布局里想让两个或两个以上的块状元素并 排显示 ，怎么办呢 ？设置元素浮动就可以实现这一效果。任何元素在默认情况下 是不能浮动的 ，但可以通过 CSS定义为浮动 ，如 div、h1、P、table等元素都 可以被定义浮动。如下代码可以实现两个 div 元素在同一行显示的效果。 千锋教育-中国IT职业教育领先品牌 精品课程 千锋教育 全程面授 效果图 ： 同样我们也可以同时设置两个元素右浮动来实现多个元素一行显示的效果 ； 千锋教育-中国IT职业教育领先品牌 精品课程 千锋教育