html与css

目录

1、标签target属性：在何处打开链接（在新窗口打开页面）

2、padding和border是否计算在div的宽度和高度内

3、a、img、href、css中url的路径：相对路径和绝对路径

 

1、<a>标签target属性：在何处打开链接（在新窗口打开页面）

<a href="http://www.runoob.com" target="_blank"></a>

相当于js：

window.open("http://www.runoob.com"); 

<a>标签target属性默认值是"_self"，相当于 window.location.href。target属性规定在何处打开链接文档。

 

 

2、padding和border是否计算在div的宽度和高度内

box-sizing: content-box|border-box|inherit;

content-box：这是由 CSS2.1 规定的宽度高度行为，宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

 

 

3、a、img、href、css中url的路径：相对路径和绝对路径

• ".." 代表上一层目录，相对路径。如:<a href="../abc">
• "/" 代表根目录,绝对路径。 如：<a href="/abc">文本</a>，慎用
• background: url(image.jpg)：图像文件和css 文件位于相同的目录
• <link rel="stylesheet" type="text/css" href="css/theme0.css" /> 同级目录\下级目录\文件名

"." 代表当前所在目录，相对路径。如:<a href="./abc">

4、css定位

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

具体例子可以查看http://www.barelyfitz.com/screencast/html-training/css/positioning/

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

 

• relative

相对定位，如果你给某个元素指定了postion的值为“relative”，那么你就可以通过“T-R-B-L”(也就是top,right,bottom,left)来设置元素的定位值。

1. 元素设置了relative时，是相对于元素本身位置进行定位；
2. 元素设置了relative后，可以通过“T-R-B-L”改变元素当前所在的位置，但元素移位后，同样点有当初的物理空间位；
3. 元素设置了relative后，如果没有进行任何的“T-R-B-L”设置，元素不会进行任何位置改变

• absolute

你给元素指定了absolute，整个元素就会漂出文档流，而且元素自身的物理空间也同时消失了。不像“relative”还具有原先的物理空间。

• relative和absolute的结合

如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止

• float

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

 

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像：

• clear

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

clear 属性定义了元素的哪边上不允许出现浮动元素。