01、02.行内、块级元素、浮动

块级元素与行内元素:

行内元素:

  • 行内元素不能显示的设置宽高,(span,strong等),垂直的内边距、边框、外边距不影响行内元素的高度,唯独:水平内边距、边框、外边距可以调整他们之间的水平间距。因此,修改行内元素的方法是修改行高、水平边框、水平内边距、水平外边距。
  • 将行内元素的 display 设置为 block,可以让行内元素表现的像块元素一样。同时也能显示的设置宽高、以及垂直外边距和内边距。

块级元素:

  • 块级元素能够显示的设置宽高。(p、div、h1)。
  • 将块级元素的 display 设置为 inline-block,可以让块级元素像行内元素一样水平的依次排列。但是,其余行为不变,比如仍然能够显示的设置宽高、垂直外边距和内边距。(如果设置为 inline,则完全等同于行内元素)

定位

  • static:无特殊定位,对象遵循HTML规则。
  • absolute:将对象从文档流中拖出,使用:left、right、top、bottom进行绝对定位,通过 z-index 定义层叠属性,不具有边距,但仍有补白和边框。绝对定位的元素的相对定位的父元素和它本身应该具有固定的尺寸。
  • relative:对象不可以层叠,将依据left、right、top、bottom等属性在正常的文档流中进行偏移。
  • fixed:固定定位是绝对定位的一种,固定定位的元素在滚动时一直出现在屏幕的固定位置,比如博客评论表单的设计。(<=IE6不支持)

浮动

  • 浮动的框可以左右移动,直到它的边缘碰到包含框或者另一个浮动框的边缘。
  • 阻止行框围绕浮动元素:给这些行框应用 clear 属性:left,right,both,none
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 1,246评论 0 6
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,094评论 0 1
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,868评论 0 6
  • 我们大多数人都不是那种只看一眼就惊为天人的男孩或者女孩。因此就只能靠慢慢的接触才能了解一个人,喜欢上一个人。但...
    桔子味的怡宝阅读 245评论 0 0