首页 > 代码库 > 【CSS】易错

【CSS】易错

2024-09-10 17:18:31   218人阅读

1.外边距默认是透明的，因此不会遮挡其后的任何元素。
2.背景应用于由内容和内边距、边框组成的区域。
3.外边距可以是负值，而且在很多情况下都要使用负值的外边距。
4.不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。(由于IE5.X 和 6 在怪异模式中使用自己的非标准模型。)
5.那么如果把 border-style 设置为 none 会出现什么情况：尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了。
6.h1 {border-width: 20px;} 由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。所有 h1 元素都不会有任何边框，更不用说 20 像素宽了。
7.请始终把 border-style 属性声明到 border-color 属性之前。
8.如果边框没有样式，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。
CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。 border-color: transparent;
9.块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
10.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
11.只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
12.把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
13.CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
14.CSS position 属性
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。---变为块，脱离文档流
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中

15.clip 属性剪裁绝对定位元素。 shape 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) 。
16.如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
17.top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
18.z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效。
19.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
20.浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
21.clear 属性定义了元素的哪边上不允许出现浮动元素。
clear:left;是不是有点换行的味道
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。

22.<p class="important warning">This paragraph is a very important warning.</p>

如果写成 p[class="important"]，那么这个规则不能匹配示例标记，必须完全匹配。

23.

[attribute~=value] 用于选取属性值中包含指定词汇的元素。 词汇
[attribute*=value] 匹配属性值中包含指定值的每个元素。包含字串
:first-child 伪类向元素的第一个子元素添加样式。

24.

匹配第一个 <p> 元素

<html>
<head>
<style type="text/css">
p:first-child {
  color: red;
  } 
</style>
</head>

<body>
<p>some text</p>
<p>some text</p>
</body>
</html>

　　

 匹配所有 <p> 元素中的第一个 <i> 元素

<html>
<head>
<style type="text/css">
p > i:first-child {
  font-weight:bold;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

　

 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

<html>
<head>
<style type="text/css">
p:first-child i {
  color:blue;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素，但事实上并非如此，如果要选择段落的第一个子元素，应当写为 p > *:first-child。

25.

height --元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。
line-height 属性设置行间的距离（行高）。不允许使用负值。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部

26.

替换元素：

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。

非替换元素：

(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

比如<p>wanmei.com</p>
浏览器将把这段内容直接显示出来。

 

【CSS】易错


联系
我们