个人学习第一阶段——关于html和css的技巧及问题总结（二）

最新推荐文章于 2024-07-25 16:45:46 发布

念及她名

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量408

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u014244487/article/details/44174513

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

（一）height：100%和height：auto的区别

问题：最近在写前端页面时用了 height:100%;overflow:hidden; 但在每个浏览器中都会出现不同问题，但换成height:auto就可以了。百度了一下，发现他们区别如下：

height:auto，是指根据块内内容自动调节高度。
height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。

（二） CSS中span和div的区别

SPAN和DIV的区别在于，SPAN是行内元素，SPAN的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

1. DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN是行内元素，SPAN的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。

2. 还有一个标识符具有类似的功能，DIV也被用来在HTML文件中建立逻辑部分。但与SPAN不同，工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

（三）网页中如何让三个div同时并列

答案不唯一，但是我推荐一种比较方便的方法，将div1和div2都设置为向左浮动。div3可以设置为左浮动或右浮动，也可以不定义。最好三个div都设置为左浮动。然后再div3后添加一个div清除浮动 clear:both;

(四)CSS文档间相互引用

@import url("/css/global.css");

链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式链接全局样式，这样就使代码达到很好的重用性。

（五）对于float属性需要注意的地方

在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素，且要指明一个宽度，否则它会尽可能窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

（六）标签的默认格式

大多数标签都有自己的默认样式，比如body默认外边距，ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地把全局的样式给统一起来。另外页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点，这些都是需要去掉的。

body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }

ul { list-style: none; }

img { border-style: none; }

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

（七）相对定位和绝对定位

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）