css权威指南-基本视觉格式化（水平与垂直）_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css权威指南-基本视觉格式化（水平与垂直）_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3695字，纯文字阅读大概需要6分钟。
内容图文
1.基本概念 (1)正常流：是指西方语言文本从左向右，从上向下显示。如果要让一个元素不在正常流中国，唯一的办法
就是使之成为浮动或定位元素。
(2)非替换元素：如果元素的内容包含在文档中，则称之为非替换元素。
(3)替换元素：指用作为其他内容占位符的一个元素。例子：img中的图像
(4)块级元素：在正常流中，会在其框之前和之后生成“换行”
所以出于正常流中的块级元素会垂直摆放。
(5)行内元素：不会再之前或之后生成行分隔符，它们是块级元素的后台。
(6)根元素：位于文档树顶端的元素。在HTML中，就是元素HTML。
2.水平格式化
通常我们指的元素的宽度，指的是其内容的宽度，不包括内补，外补，边。
传送门：JavaScript权威设计--CSS(简要学习笔记十六)
水平格式化的七大属性：margin-left,border-left,padding-left,width,padding-right,border-right,margin-left这七个水平属性的总和要等于父元素的width。
这里面只有width,margin-left,margin-left这三个可以设置为：auto
其他都必须设为特定的值或者默认宽度为0.
下面就以这三个auto的组合来展现问题：auto会自动补齐宽度（屏幕总宽度1366）
设置margin-left为auto:
水平格式化
设置margin-right为auto:
水平格式化
设置width为auto:
水平格式化
设置margin-left和margin-right为auto:
水平格式化
设置margin-left和margin-right和width都为auto:
水平格式化
设置margin-left和margin-right和width都不为auto:
水平格式化
下面会遇到一种复杂特殊奇怪的现象：那就是外边距可以是负值
zqzqzq
可以看出来宽度是440（width;auto这里440是实时计算的值，而不是显示的指定的值，
其实这里涉及到一个问题：有些是实时计算的值，有些DOM可以获取实时计算的值。），比父400还要宽！说好的不能比父元素宽呢？
但是这个计算没有错误：
10+0+0+440+0+0-50=400
最终还是等于400。
前面说的都是费替换元素的水平格式化，下面来说替换元素的水平格式化。（ 典型的替换元素就是img）
示例图片：w:200px,h:300px.
当我们改变她的宽度的时候，高度也同比例改变。
200x300
300x450
3.垂直格式化
一个元素的默认高度由其内容决定。
高度还会受到内容宽度的影响。
段落越窄，相应的就会越高，以便容纳其中所有的内联内容。
对应于水平格式化，它也有7个属性：
margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom.
同样这七个值必须等于包含元素块的高。
这七个值中只有三个值可以设为auto:height,margin-top,margin-bottom,其他四个必须设为特定的值或默认为0.
当高度小于显示内容的高度：浏览器会处理为有个滚动条(overflow)，以容纳下内联元素。
垂直格式化的另一个重要的是合并垂直外边距（重叠垂直外边距）
- 大师兄
- 师傅
- 被妖怪
- 抓走啦
- 俺老孙来也
相邻列表之间的距离是15px,不是25px。
因为相邻的外边距沿着垂直方向合并了，大边距覆盖小边距。
内容总结
以上是互联网集市为您收集整理的css权威指南-基本视觉格式化（水平与垂直）_html/css_WEB-ITnose全部内容，希望文章能够帮你解决css权威指南-基本视觉格式化（水平与垂直）_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。