视觉表现理论知识
2018-06-24 01:54:39来源:未知 阅读 ()
本文地址:http://www.cnblogs.com/veinyin/p/7606714.html
终于可以知道视觉表现的实现方式,而不是一个一个的具体实现了,突然感到自己能够把握页面的整体布局了呢,似乎学到了表现背后的东西?
以下是一个突然发现自己见识如此少的女汉子的嘶吼
啊啊啊,刚刚注意到width设置的是内容区的宽度,增加 padding 或 margin 后会增加总体宽度
啊啊啊啊,今天才知道只有内容区和左右外边距可以设置为 auto !!!!
1 相关术语
-
流 : 所有元素都被放置在流中, 页面在显示时, 元素一个一个的流到屏幕上, 当然也有脱离流的情况。如果一个元素浮动或定位,那么它就会从流里脱离出来
-
非替换元素 : 如段落,还是用例子比较好
-
替换元素 : 如图片
-
块级元素 : 段落、标题、 div 等,流入后会产生一个换行。 使用 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;
再为所有列表元素加上右边框,第一个列表元素加上左边框即可
-
将几个链接放到 div 中,想要布局为垂直边栏
display: block;
再增加些样式即可显示为漂亮的竖直导航栏
-
在一行中想要插入一个块结构
display: inline-block;
会把外观类似于一个竖直导航条的东西插到行中,如果没有设置这个块的 width ,会自适应为一行
-
run-in
display: run-in;
当然,使用这个是有限制的,只有其后的一个元素为块级元素时,才会转换为那个块级元素开始处的行内元素。
似乎不太支持,我测试的时候只有 IE 和 Safari 成功了,chrome、 Opera、Firefox 均不支持
END~~~≥ω≤
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 利用css 实现 视觉差效果 2020-04-09
- 网页简单布局之结构与表现原则案例 2020-03-19
- 1+x证书Web 前端开发初级——理论考试(试卷1) 2019-12-29
- 初始前端 2019-12-25
- JS基础理论相关知识 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash