###简写属性
background 属性值分别为:背景颜色 背景图片 背景重复 背景位置；
background: red url(1.png) no-repeat center;
###背景的尺寸属性
1.使用像素
background-size: 200px;
2.使用contain 使用contain会自动将图片放到盒子里，多余部分会有留白
background-size: contain;
3.cover 使用可以让图片始终充满整个屏幕
background-size: cover;
###导航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 初始属性 */
a {
text-decoration: none;
/* a标签的字体颜色要直接对a标签进行设置 */
color: #666;
}
.nav a {
width: 150px;
height: 50px;
/* border: 1px solid red; */
/* 由于a标签是行内元素,所以设置宽和高无效 */
display: inline-block;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 50px;
}
/* 当鼠标悬停时显示图片和更换字体颜色 */
.nav a:hover {
background: url(1.png) no-repeat center;
color: white;
}
</style>
</head>
<body>
<div class="nav">
<a href="">首页</a>
<a href="">业务展示</a>
<a href="">人才招聘</a>
<a href="">关于我们</a>
<a href="">联系我们</a>
</div>
</body>
</html>
###字体图像
在www.iconfont.cn网站中，可以下载想要的图像文字。
font-clss 引入
使用方法：`第一步：引入项目下面生成的 fontclass 代码：
###CSS 三大特性
- CSS层叠性
·所谓层叠性是指多种css样式的叠加,就是css处理冲突的能力。-般情况下，如果出现样式冲突，则会按照cSS书写的顺序，以最后的样式为准。当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖(层叠)。
可以这样理解权重:这个选择器对于这个元素的重要性,
2.CSS继承性
所谓继承性是指写css样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的所谓继承性是指书写css样式表时，属性，只需将它应用于父元素即可.
注意:
1.所以对于字体、文本属性等网页中通用的群式可以使用继承。例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。
2.并不是所有的css属性都可以继承，例如，下面的属性就不具有继承性:边框、外边距、内边距、背景、定位、元素高属性。
3.CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题,即考虑权重的问题。!important>行内样式表>1D选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式在考虑权重时，初学者还需要注意一些特殊的情况，具体如下:
·继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
·行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，css遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
标签 0,0,0,1
div ul li 0,0,0,3
类 0,0,1,0
.main 0,0,1,0
id 0,1,0,0
.main ul li span 0,0,1,3
#con 0,1,0,0
行内 1,0,0,0
##盒子模型
概念
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
外边距（margin），边框（border），内边距（padding），和实际内容（content）
- Margin(外边距) - 清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右）
- Border(边框) - 围绕在内边距和内容外的边框
- Padding(内边距) - 清除内容周围的区域（两个值：第一个值上下，第二个值左右）
- Content(内容) - 盒子的内容，显示文本和图像
如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离
<div></div>
div{
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid red;
margin: 10px;
background: green;
}
###边框
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
语法:
border :border-width border-style border-color
边框样式(border-style)，常用属性值如下:
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最为常用的)
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线
####圆角边框
从此以后，我们的世界不只有矩形。radius 半径(距离)
允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
语法格式:
border-radius:左上角右上角右下角左下角:
###内边距(padding)
padding属性用于设置内边距。是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
属性值设置
温馨提示: 后面跟几个数值表示的意思是不一样的。
值的
个数
1个值：padding:上下左右边距比如padding: 3px;表示上下左右都是3像素
2个值：padding: 上下边距 左右边距 比如 padding: 3px 5px;表示 上下3像素 左右 5像素
3个值：padding:上边距 左右边距 下边距 比如 padding: 3px 5px 10px;表示上是3像素左右是5像素 下是10像素
###外边距(margin)
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距下外边距 左外边
取值顺序跟内边距相同。
###外边距塌陷
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案:
1.可以为父元素定义1像素的上边框或上内边距
2.可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情)。
850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
