知识点总结

css复习

1.4.4 ID选择器:网页标签ID与ID选择器同名，会适用此样式。ID要唯 一

1.4.4.1 元素编号

在HTML页面上每个元素都应该有一个唯一的编号，浏览器可以通过这个编号来管理该元素。 这个编号就是 元素编号，也称作 元素标识符

<div class="wrapper" id="first">
    <input type="text" name="wd" id="wd" >
    <input type="submit" value="百度一下" id="button-baidu" >
</div>

1.4.5 伪类：网页元素的各种状态

a:link{
    color: #555555;
    text-decoration: none;
}
a:visited{
    color: #555555;
}
a:hover{
    color: orange;
    text-decoration: underline;
}
a:active{
    color: red;
}
a:link:未访问状态
a:visited:访问过后状态
a:hover：鼠标悬停状态
a:active：激活选定状态
注：定义顺序必须是此顺序
/* :first-child 第一个子元素 */
    p:first-child{
        color: red;
    }
/* :last-child最后一个子元素 */
    p:last-child{
        color: red;
    }

1.4.6 后代选择器又称为包含选择器:空格即代表是后代

#div1 a{
    font-size: 30px;
}
/*后代与伪类结合*/
li a:hover{
    color: red;
}

1.4.7 子元素选择器：直接子标签适用此样式

<style type="text/css">
    h1 > strong {color:red;}
</style>

2 常用CSS属性

2.2.6 圆角边框

div
{
    border:2px solid;
    border-radius:25px;
}

2.3 外边距

margin 属性设置元素的外边距 外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以 为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分 后额外添加

2.4 内边距(填充)

padding 属性设置元素的填充 内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是0或正的 值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框

2.6 display

display 属性规定元素应该生成的框的类型。

display属性的值：

• block:元素呈现块元素特征，此元素前后会带有换行符

• inline:元素呈现行内元素特征，元素前后没有换行符

• inline-block：元素呈现行内并保持宽和高的属性，行内块元素

• none:元素不做呈现，不占网页空间。与visibility：hidden不同，visibility不显示但占用网页空间。

2.6.1 使用display: inline-block

display: inline-block 是一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况 非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠

2.7 背景样式

2.7.1 背景颜色

background-color 属性定义了CSS中任何元素的背景颜色。属性接受任何有效的 值 。背景色 扩展到元素的内容和内边距的下面。

2.7.2 背景图片

background-image 属性允许在元素的背景中显示图像.

2.7.2.1 控制背景平铺

background-repeat 属性用于控制图像的平铺行为。

• 可用的值是: no-repeat — 不重复。
• repeat-x —水平重复。
• repeat-y —垂直重复。
• repeat — 在两个方向重复。

2.7.2.2 调整背景图像的大小

background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景

• cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况 下，有些图像可能会跳出盒子外
• contain — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽 比不同，则可能在图像的任何一边或顶部和底部出现间隙。

2.7.2.3 背景图像定位

background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位

2.7.6 background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下 面。

2.9 溢出的内容

2.9.1 overflow属性

overflow 属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。 overflow 的默认值 为 visible ，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因

心得体会

今天是对css系统的复习，在复习的过程中，除了以前学过的，还有一些是没有接触过的知识点，比如溢出。对这些知识再进行一个系统的复习总结，有利于以后的实践。其中对背景图像的定位终于掌握。明天加油！