首页 > html教程 > 正文

零基础学习HTML之CSS篇元素显示模式文档流元素浮动和布局

转载 2019-02-12 0 24

元素显示模式

display : block | none | inline | inline-block

display 属性用来设置元素的显示方式。

block块对象指的是元素显示为一个方块,默认显示状态下,它将占

据整行,其它的元素只能在下一行显示。

inline行间对象与block刚好相反,它允许其它元素在同一行显示。

none隐藏对象

元素的浮动

float : none | left | right

float 属性用来控制元素是否浮动显示。

left向左浮动

right向右浮动

none不浮动

浮动的时候元素的显示属性也变化了 变为 "行内元素"

Css 布局

div 标签:

div 与其它标签一样,也是一个XHTML所支持的标签。

div 是XHTML中指定的,专门用于布局设计的容器标签。

在css布局方式中,div 是这种布局方式的核心对象,我们的页面排版不再依赖于表格,仅从div的使用上说,做一个简单的布局只需要两样东西:div 与 css.因此我们称这种布局方式为 div + css 布局。

盒模型就是指CSS布局中的每一个元素,在浏览器的解释中,都被当作一个盒状物。

对我们来说,只需要理解元素在页面中所占据的位置。

ie6 / ie7 / firefox 的最终宽度 =左边框宽 + 左内边距 + 宽度 + 右内边距 + 右边框宽

文档流

文档流是浏览器解析网页的一个重要概念,对于一个XHTML网页,body 元素下的任意元素,根

据其前后顺序,组成了一个个上下关系,这便是文档流。浏览器根据这些元素的顺序去显示它

们在网页中的位置。

文档流是浏览器的默认显示规则。

深入浮动

浮动的目的

就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利

用float属性。

1.任何申明为 float 的元素自动被设置为一个"块级元素"。

2.在标准浏览器中 浮动元素脱离了文档流 ,所以浮动元素后的元素会占据浮动元素本来应该

所处的位置。

3.如果水平方向上没有足够的空间容纳浮动元素,则转向下一行 。

4.文字内容会围绕在浮动元素周围 。

5.浮动元素只能浮动至左侧或者右侧 。

清除浮动

clear : none | left | right | both

none :默认值。允许两边都可以有浮动对象

left :不允许左边有浮动对象

right: 不允许右边有浮动对象

both :不允许有浮动对象

相关文章


  • 想要成为最好的Web开发人员?十种方式测试你的HTML和CSS编程技能
  • 西安北邮在线靠谱吗?​我放弃画画来北邮在线学HTML!
  • 零基础学习HTML图像热区特殊字符无序列表和有序定义列表表格
  • Web前端工程师培训 DW模板dwt更改后如何更新基于模板的HTML页面
  • 阿里旺铺装修代码的fx.roll滚动特效组件使用详解及HTML代码示例
  • 我们来让视频站启用HTML 5播放器吧,看更优质的视频!
  • 第53期Java面试题:XML和HTML的区别、XML文档定义、java反射机制
  • HTML基本标记常用单词106个,常记忆敲代码不卡壳 拿走不谢!