视觉表现理论知识

本文地址: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~~~≥ω≤

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369084.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java jnlp_java – 调试JNLP启动应用程序

解决方案#1 – 启用Java控制台,并查找异常.您可以通过Java控制面板完成.切换到“高级”选项卡,然后在Java控制台中确保选中“显示控制台”.然后,运行您的应用程序并监视控制台以查找异常.修复异常.解决方案#2 – 调试正在运行的应用程序(正确).像这样启动Web Start应用程序(适用…

201621123055《JAVA程序设计》第三周学习总结

1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词。 答:类、对象、关键字等。1.2 用思维导图或者Onenote或其他工具将这些关键词组织起来。(注:首次使用,不太会用软件) 2. 书面作业 1.以面向对象方式改造数据结构…

通过运行示例从WSO2 ESB开始

我最近加入了一个新任务,在该任务中,我们必须基于WSO2工具栈实施ESB解决方案。 尽管我熟悉ESB的大多数概念以及其他一些实现(例如Mule ESB ),但这是我第一次必须使用WSO2 ESB 。 幸运的是,可以找到很多文档…

爬虫(十二):scrapy中spiders的用法

Spider类定义了如何爬去某个网站,包括爬取的动作以及如何从网页内容中提取结构化的数据,总的来说spider就是定义爬取的动作以及分析某个网页 工作流程分析 以初始的URL初始化Request,并设置回调函数,当该request下载完毕并返回时&…

position:fixed 兼容浏览器低版本

项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代码了。 项目中用到position: fixed;z-index: xxx;的时候,…

一些关于博主的xibusana

博主就是OI强省GD内偏远小渔村的咸鱼一条,雄性 高一开始入OI坑,从此走上了爆零和%大佬的不归路。 由于我的ID略多,所以你在网上可能找不到我哦v 2018/9/17 博主现在是一条走高考路的高三狗啊qvq 博客比较少上了,现在的目标还是考上…

监控java_Java应用程序监控JavaMelody

JavaMelody是运行在Java Web容器中,用来监控Java内存和J服务器CPU使用情况,用户Session数量,JDBC连接数,和http请求、sql请求等的执行数量,平均执行时间,错误百分比等。图表可以按天,周&#xf…

Heroku和Java –从新手到初学者,第1部分

最近,我听说Heroku允许在Cedar堆栈中部署Java应用程序。 由于没有真正的软件构想,我决定尝试一下,仅将SOMETHING配置为可在Heroku上运行。 我对ReST有一些迷恋(我仍然想学习并练习),所以我决定我的第一个应…

【谈谈IO】BIO、NIO和AIO

BIO: BIO是阻塞IO,体现在一个线程调用IO的时候,会挂起等待,然后Thread会进入blocked状态;这样线程资源就会被闲置,造成资源浪费,通常一个系统线程数是有限的,而且,Thread进入内核态也…

css动画-模拟正余弦曲线

今天就写一个css3抛物线的动画吧 从左到右的抛物线动画,我们就暂且把动作分为匀速向右运动和变速的上下运动。 水平匀速运动我们可以利用 translateX(x):定义 2D 转换,沿着 X 轴移动元素;以及linear:动画从头到尾的速…

UVA-11549 Calculator Conundrum

InputThe first line of the input contains an integer t (1 ≤ t ≤ 200), the number of test cases. Each test casecontains two integers n (1 ≤ n ≤ 9) and k (0 ≤ k < 10 n ) where n is the number of digits this calculatorcan display k is the starting num…

java 当前类_Java获取当前类名的两种方法

适用于非静态方法&#xff1a;this.getClass().getName()适用于静态方法&#xff1a;Thread.currentThread().getStackTrace()[1].getClassName()获取类名&#xff1a;1、在类的实例中可使用this.getClass().getName();但在static method中不能使用该方法&#xff1b;2、在stat…

具有内部类构造函数参数的Java Reflection奇数

关于Java内部类 Java允许成员类&#xff08;在其他类内定义的类&#xff09;&#xff0c;局部类&#xff08;在语句块内定义的类&#xff09;和匿名类&#xff08;无名称的类&#xff09;&#xff1a; class Outer {Object anonymous new Object(){}; // this is an anonymou…

HDOJ 1012-1020

最近感冒了&#xff0c;有点小咳嗽&#xff0c;做题速度比较慢&#xff0c;本以为这周会做的比较少&#xff0c;没想到全是水题。。。我做的也蛮开心的....对自己无语HDOJ 1012这个题目蛮简单&#xff0c;就是输出格式比较烦&#xff0c;处理好格式基本就没问题了HDOJ 1013这个…

静态页面如何实现 include 引入公用代码

一直以来&#xff0c;我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的&#xff0c;就像下面这样&#xff1a; <!-- index.php --><!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"&…

java list 循环赋值_Java List集合的坑(add方法报空指针,循环赋值时list已保存的值会改变)...

先看空指针异常&#xff1a;ListmovieInfos null;这样创建时&#xff0c;list指向为空&#xff0c;修改方法&#xff1a;ListmovieInfos new ArrayList();再看list循环赋值的问题&#xff1a;问题描述&#xff1a;for (i0;i<10;i){movieInfoSum.movieId (int)recommendatio…

ros使用时的注意事项技巧

1.rosrun package-name executable-name 比如 rosrun turtlesim turtlesim_node 2.一旦启动roscore后,便可以运行ROS程序了。ROS程序的运行实例被称为节点(node)&#xff0c;roscore叫做节点管理器 3.查看节点列表rosnode list 4.需要注意节点名并不一定与对应可执行文件名称相…

分享几道经典的javascript面试题

这几道题目还是有一点意思的&#xff0c;大家可以研究一番&#xff0c;对自己的技能提升绝对有帮助。 1、调用过程中输出的内容是什么 function fun(n, o) {console.log(o);return {fun : function(m) {return fun(m, n);}} }var a fun(0);a.fun(1);a.fun(2);a.fun(3);var…

Rete之外的生活– RIP Rete 2013 :)

我只是对我的新算法进行最后的修改。 它合并了Leaps &#xff0c; 面向集合的Match和Left / Right取消链接的概念 &#xff0c;以及我自己的一些想法。 该代码已提交&#xff0c;但我正在积累工作并编写更多测试。 我将在一周左右的时间内写一个完整的博客&#xff0c;详细介绍…

Ubuntu+vscode打不开

前沿: vscode链接参考链接 问题: 之前在Ubuntu上安装chrome, 结果chrome没装成功, 还把vscode给qiu坏了, 貌似是当时安装chrome时提示要升级一个包. 后来发现当时是修改了libnss这个包的版本: 解决方法: # 将libnss给downgrade一下就OK了. sudo apt install libnss32:3.21-1ubu…