文章目录
背景样式
背景颜色
| 属性名 | background-color |
|---|---|
| 属性值 | 合法的颜色的名，比如：red；十六进制值，比如：#ff0000；RGB 值，比如：rgb(255,0,0) |
| 默认值 | transparent |
| 描述 | 设置背景颜色。 |
示例如下：
.box {
/* 下面 3 种写法是等价的 */
background-color: red;
background-color: rgb(255, 0, 0);
background-color: #ff0000;
}
背景图片
| 属性名 | background-image |
|---|---|
| 属性值 | 图片所在路径 |
| 默认值 | none |
| 描述 | 设置背景图片。 |
示例如下：
.box {
background-image: url("./cat.jpg");
}
图片重复方式
| 属性名 | background-repeat |
|---|---|
| 属性值 | repeat | repeat-x | repeat-y | no-repeat |
| 默认值 | repeat |
| 描述 | 设置背景图片。 |
示例如下：
.box {
/* repeat 默认值，默认情况下，在水平和垂直方向上都重复*/
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
}
图片位置
| 属性名 | background-position |
|---|---|
| 属性值 | 长度 | 百分比 | 表示方位的单词 |
| 默认值 | 0% 0% |
| 描述 | 背景图片的位置 |
示例如下：
/*
水平：left center right
垂直：top center bottom
*/
.box {
background-position: 40px 40px;
background-position: 20% 20%;
background-position: right bottom;
}
图片附着
| 属性名 | background-attachment |
|---|---|
| 属性值 | scroll | fixed |
| 默认值 | scroll |
| 描述 | 设置背景图片是否随内容滚动 |
示例如下：
.box {
/* 背景图随着页面内容滚动 */
background-attachment: scroll;
/* 背景图不会随着页面内容滚动 */
background-attachment: fixed;
}
简写属性
| 属性名 | background |
|---|---|
| 属性值 | color image position repeat attachment |
| 默认值 | 每个属性的默认值 |
| 描述 | 设置背景图片是否随内容滚动 |
示例如下：
.box {
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
伪类选择器
:link：选择未被点击过的链接。:visited：选择被点击过之后的链接。:hover：选择鼠标悬停在其上的元素。:active：选择正在被点击的元素（点着不放）。
高级选择器
后代选择器
后代选择器用于指定目标选择器必须处于某个选择器对应的元素内部。其语法格式如下：
<!—使用后代选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器测试</title>
<style>
div{
width:300px;
height:60px;
background-color:#ddd;
}
div .a{
background-color: green;
border:1px solid red;
}
</style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div>
<div class=”a”>处于div之内，且class属性为a的元素</div>
</div>
<div class=”a”>没有处于div之内，且class属性为a的元素</div>
</body>
</html>
代码中的div .a选择器定义的CSS样式，应该对处于
直接后代选择器
子选择器用于指定目标选择器必须是某个选择器对应的元素的子元素。自选择器的语法格式如下：
子选择器与后代选择器有点相似，它们之间存在如下区别：对于后代选择器，只要目标选择器位于外部选择器对应的元素内部，即使是其“孙子元素”也可；对于子选择器，要求目标选择器必须是外部选择器对应的元素的直接子元素才行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器测试</title>
<style>
div{
width:300px;
height:60px;
background-color:#ddd;
}
div .a{
background-color: green;
border:1px solid red;
}
</style>
</head>
<body>
<div>
<a href=”http://www.baidu.com”>百度一下</a>
<p class=”a”> div 直接子元素</p>
<p>
<a class=”a”>，且class属性为a的元素</a>
</p>
</div>
</body>
</html>
并列选择器
有些时候，我们需要让一份CSS样式对多个选择器起作用，那就可以利用并列选择器来实现了。并列选择器的语法格式如下：
对于并列选择器而言，｛｝中定义的CSS样式将会对前面列出的所有选择器匹配的元素起作用。例如下面的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并列选择器</title>
<style>
div,.a,#abc{
width:200px;
height:40px;
background-color: #888;
border:2px dotted green;
}
</style>
</head>
<body>
<div>没有任何属性的div元素</div>
<p class=”a”> class属性为a的元素</p>
<h3 id=”abc”> id为abc的元素</h3>
</body>
</html>
上面定义的样式对div元素、class属性为a的元素、id为abc的元素都起作用。
相邻兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并列选择器</title>
<style>
.a + .b{
width:200px;
height:40px;
background-color: #888;
border:2px dotted green;
}
</style>
</head>
<body>
<div class="a">a不会改变</div>
<div class="b">b会改变</div>
</body>
</html>
盒子模型
元素盒子有两部分是可见的：内容和边框。内边距是内容和边框之间的空间，外边距是边框和页面上其他元素之间的空间。
边框
| 属性名 | 描述 |
|---|---|
| border-width | 设置边框的宽度 |
| border-style | 设置边框的类型 |
| border-color | 设置边框的颜色 |
| border | 属性简写 |
border-style属性的值：
none没有边框dashed短线式边框dotted圆点线式边框double双线式边框groove槽线式边框inset有内嵌效果的边框outset有外凸效果的边框ridge脊线边框solid实线边框
div {
width: 250px;
height: 50px;
background-color: #dbdbdb;
margin-bottom: 10px;
color: red;
line-height: 50px;
text-align: center;
font-weight: bold;
}
.none {
border: none;
}
.dashed {
border: 10px dashed gray;
}
.dotted {
border: 10px dotted gray;
}
.double {
border: 10px double gray;
}
.groove {
border: 10px groove gray;
}
.inset {
border: 10px inset gray;
}
.outset {
border: 10px outset gray;
}
.ridge {
border: 10px ridge gray;
}
.solid {
border: 10px solid gray;
}
<div class="none">none没有边框</div>
<div class="dashed">dashed短线式边框</div>
<div class="dotted">dotted圆点线式边框</div>
<div class="double">double双线式边框</div>
<div class="groove">groove槽线式边框</div>
<div class="inset">inset有内嵌效果的边框</div>
<div class="outset">outset有外凸效果的边框</div>
<div class="ridge">ridge脊线边框</div>
<div class="solid">solid实线边框</div>
内边距
内边距会在元素内容和边框之间添加空白。我们可以为元素的每个边界单独设置内边距，也可以使用padding简写属性，在一条声明中设置所有的值。
| 属性 | 说明 | 值 |
|---|---|---|
padding-top | 设置顶部的内边距 | 长度值或百分数 |
padding-right | 设置右边的内边距 | 长度值或百分数 |
padding-bottom | 设置底部的内边距 | 长度值或百分数 |
padding-left | 设置左边的内边距 | 长度值或百分数 |
padding | 简写属性 | 同上，顺序为：top right bottom left |
外边距
外边距是元素边框和页面上围绕在它周围的所有东西之间的空白区域。围绕在它周围的东西包括其他元素和它的父元素。
| 属性 | 说明 | 值 |
|---|---|---|
margin-top | 设置顶部的外边距 | 长度值或百分数 |
margin-right | 设置右边的外边距 | 长度值或百分数 |
margin-bottom | 设置底部的外边距 | 长度值或百分数 |
margin-left | 设置左边的外边距 | 长度值或百分数 |
margin | 简写属性 |
跟内边距属性相似，使用百分数值设置外边距时，百分数总是跟包含块的宽度相关。
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
下面三种基本情形会出现外边距合并：
- 相邻兄弟元素
相邻的两个兄弟元素的之间的外边距会合并。如：
<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>
<p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>
可以发现这两个段落中间的距离，不是“上面段落的下边距”与“下面段落的上边距”的和 ，而是两者中的较大者（在此示例中为30px）。
+块级父元素与其第一个或最后一个子元素
此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
- 空块元素
如果存在一个空的块级元素，其 border、padding、content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例如：
<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。
如两个兄弟元素，上面的元素的下边距为 20px ，下面的元素的上边距为 -20px ，那么发生外边距合并后，这两个元素的实际距离将变成 0px 。
处理溢出的内容
如果放置内容的元素尺寸太小的话，浏览器默认的处理方式是内容溢出，溢出的内容会被显示。如下例所示：
<!-- 创建一个无法完全显示其中内容的小尺寸元素 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<style>
p{
border:1px solid blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p>悟空和唐僧一起上某卫视非诚勿扰,悟空上台,24盏灯全灭。理由:1.没房没车只有一根破棍. 2.保镖职业危险.3.动不动打妖精,对女生不温柔. 4.坐过牢,曾被压五指山下500年。唐僧上台，哗!灯全亮。 理由:1.公务员； 2.皇上兄弟，后台最硬 3.精通梵文等外语 4.长得帅 5.最关键一点：有宝马！</p>
</body>
</html>
我们可以使用overflow属性改变这种行为，下表列出了相关的overflow属性及值。
属性名：
overflow-x设置水平方向的溢出方式overflow-y设置垂直方向的溢出方式overflow简写属性，只能设置一个属性，当水平方向和垂直方向上设置的值相同时，可以使用该属性。
属性值：
visible：默认值。内容不会被修剪，会呈现在元素框之外。hidden：内容会被修剪，溢出部分是不可见的scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto：由浏览器决定如何显示。如果内容太多就显示滚动条，否则就不显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制内容溢出</title>
<style>
p{
border:1px solid blue;
width: 100px;
height: 100px;
}
#first{
overflow:hidden;
}
#second{
overflow:scroll;
}
</style>
</head>
<body>
<p id=”first”>小明过生日，妈妈对小明说：儿子吹蜡烛，许个愿吧！吹完蜡烛后，妈妈问小明：许的什么愿啊？小明特无奈的说：我希望下个生日，蜡烛下面能有个蛋糕。</p>
<p id=”second”>小明过生日，妈妈对小明说：儿子吹蜡烛，许个愿吧！吹完蜡烛后，妈妈问小明：许的什么愿啊？小明特无奈的说：我希望下个生日，蜡烛下面能有个蛋糕。</p>
</body>
</html>
改变元素的盒类型
display属性提供了一种改变元素盒类型的方式，给元素应用display属性后会改变元素在页面上的显示方式。下表列出了一些display属性常用的属性值。
| 值 | 说明 |
|---|---|
inline | 元素会被显示成行内元素 |
block | 此元素将显示成块级元素 |
inline-block | 元素会被显示成行内的块级元素 |
none | 元素既不显示，也不占据文档空间 |
-
块级元素
将display属性设置为block值会创建一个块级元素。块级元素独占一行，不允许其他元素与其同在一行。常见的块级元素有div、p等。
-
行内元素
将display属性设置为inline使会创建一个行内元素，行内元素会显示在同一行，不会独占一行。常见的行内元素有a、span等。
使用inline值的时候，浏览器会忽略某些属性，比如：
width、height、margin。 -
行内块级元素
将display属性设置为inline-block就会创建一个同时具有行内和块级元素特征的元素。盒子整体上作为行内元素显示，也就是说会跟其他行内元素显示在同一行，但盒子内部作为块级元素显示，这样，
width、height和margin属性都会应用到盒子上。 -
隐藏元素
将
display属性设置为none值就是告诉浏览器不要为元素创建任何类型的盒子，这时元素在页面中不显示，也不占据任何空间。
浮动
使用float属性可以创建浮动的盒子，浮动盒会将元素的左边界或者右边界移动到包含块或另一个浮动盒的边界。
属性名：
float 设置元素的浮动样式
属性值：
left 移动元素，使其左边界挨着包含块的左边界或另一个浮动元素的右边界
right 移动元素，使其右边界挨着包含块的右边界或另一个浮动元素的左边界
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
清除浮动
如果设置了多个浮动元素，默认情况下，它们会一个挨着一个地堆叠在一起。使用clear属性可以阻止出现这种情况。clear属性可以阻止出现这种情况。clear属性可以指定浮动元素的一个边界或者两个边界不能挨着另一个浮动元素。
属性名：
clear 设置元素的左边界、右边界或左右两个边界不允许出现浮动元素
属性值：
left 元素的左边界不能挨着另一个浮动元素
right 元素的右边界不能挨着另一个浮动元素
both 元素的左右边界都不能挨着浮动元素
none 默认值。允许浮动元素出现在两侧
扫一扫
4103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
