视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
视觉表现理论知识介绍
2020-11-27 15:28:28 责编:小采
文档

终于可以知道视觉表现的实现方式,而不是一个一个的具体实现了,突然感到自己能够把握页面的整体布局了呢,似乎学到了表现背后的东西?

以下是一个突然发现自己见识如此少的女汉子的嘶吼

啊啊啊,刚刚注意到width设置的是内容区的宽度,增加 padding 或 margin 后会增加总体宽度

啊啊啊啊,今天才知道只有内容区和左右外边距可以设置为 auto !!!!

1 相关术语

  • 流 : 所有元素都被放置在流中, 页面在显示时, 元素一个一个的流到屏幕上, 当然也有脱离流的情况。如果一个元素浮动或定位,那么它就会从流里脱离出来

  • 非替换元素 : 如段落,还是用例子比较好

  • 替换元素 : 如图片

  • 块级元素 : 段落、标题、 p 等,流入后会产生一个换行。 使用 display: block; 可以让元素生成块级框

  • 行内元素 : strong 、 span 等, 不会换行。 使用 display : inline; 可以让元素生成一个框

  • 根元素 : html

  • 2 auto

    2.1 横向:只有内容区 width 以及左右外边距可以设为 auto

  • 一个 auto : 会占用所有剩余空间

  • 两个auto : 一般是外边距,则内容区居中

  • 三个auto : margin 为 0, 内容区会尽量占据到最宽

  • 2.2 纵向 : 只有内容区 height 以及上下外边距可以设为 auto

  • 正常流中上下外边距设置为 auto 会自动计算为 0 ,而不是像横向那样居中

  • 3 margin

      在 padding 、 margin 、 border 中只有 margin 可以设为负值,而且要注意,margin 设为负值时要满足 padding + margin + border 的总和为父元素的 width, 这是十分重要的。

      没错,这个我之前也不知道....鬼知道为嘛我会漏了这么多重要的知识点没学....还好现在补起来了,感谢权威指南~~

    4 显示角色转换

  • 想要将列表元素作为一个横条用竖线隔开的导航条

  • display: inline;
  •   再为所有列表元素加上右边框,第一个列表元素加上左边框即可

  • 将几个链接放到 p 中,想要布局为垂直边栏

    display: block;
  •   再增加些样式即可显示为漂亮的竖直导航栏

  • 在一行中想要插入一个块结构

    display: inline-block;
  •   会把外观类似于一个竖直导航条的东西插到行中,如果没有设置这个块的 width ,会自适应为一行

  • run-in

    display: run-in;
  •   当然,使用这个是有的,只有其后的一个元素为块级元素时,才会转换为那个块级元素开始处的行内元素。

    下载本文
    显示全文
    专题