1. background
（1)背景位置（background-position）
background-position属性设置背景图像的起始位置
语法：
/*取值有left、right、top、bottom、center，如果仅指定一个关键字，其他值将会是"center"*/ background-position: center; background-position: 30% 20%; background-position: 50px 100px;
/* 1.背景位置-固定值px 第一个值表示水平位置-图像往右移动 第二个值表示垂直位置-值增大图片往下 */
/* 这两个值可以是负值 */
background-position: 20px 20px;
/* 2.背景位置-百分比 第一个值表示水平位置-图像往右移动 第二个值表示垂直位置-值增大图片往下 */
background-position: 10% 20%;
/* 背景位置百分比-图像左上角位置 （盒子宽度-图片宽度）*百分比，（盒子高度-图片高度）*百分比 */
/* 3.背景位置-关键词 水平取值：left center right 垂直取值 top center bottom 这种方式设置可以交换位置
如果省略一个值，就默认另外一个值为center*/（2）背景附着（background-attachment）
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
/* 默认 滚动 默认值 背景图相对于盒子固定*/
background-attachment: scroll;
/* 固定 背景图相对于浏览器的窗口固定 */
background-attachment: fixed;
（3）多背景（CSS3）
以逗号分隔可以设置多背景，可用于自适应布局。
不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。
background-image:url(图片路径), url(图片路径); /*使用多张图片*/ background-position: left top, right bottom; background-repeat: no-repeat, repeat;
示例：
<div>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>汗滴禾下土</p>
<p>谁知盘中餐</p>
<p>粒粒皆辛苦</p>
</div>
效果图 ：
（4）精灵图（雪碧图）
为了节省网络资源，通常网页上小图标和图片都合成在一张图片上，到使用的时候再切图
查到目标图标大小，设置宽高，通过position调整位置，找到目标图标
假如我们的组件的宽高分别为16px，图片宽高为200px，我们发现如果将图片作为组件的背景图片，将会从图片0,0左边点开始显示，只能显示图片的16px，因为组件只有这么大，多余的图片就被舍弃了。如下图片当图片原点和组件原点重叠的时候，组件只能显示图片的16px大小
（5）凹凸文字
2. 盒子模型（CSS重点）
其实，CSS就三大模块：盒子模型、浮动、定位。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成
（1）看透网页布局的本质
网页布局中，我们是如何把里面的文字、图片按照美工给我们的效果图排列的整齐有序呢？
看透网页布局的本质：把网页元素比如文字、图片等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
（2）盒子模型（Box Model）
所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box），它描述了一个文档元素在网页布局中所占的位置大小。因此，每个盒子除了有自己的大小和位置外，还会影响其他盒子的大小和位置。
（3）盒子边框（border）
边框就是元素最外层的包装。CSS边框属性允许你指定一个元素边框的样式和颜色。
语法：
border： border-width border-style border-color
-
border-width：用于指定边框的粗细。
-
border-style：用于定义边框的样式。
-
border-color：用于设置边框的颜色。
盒子边框总结表
| 设置内容 | 样式属性 | 常用属性值 |
|---|---|---|
| 上边框 | border-top-style: 样式; border-top-width: 宽度; border-top-color: 颜色; border-top: 宽度 样式 颜色; | |
| 右边框 | border-right-style: 样式; border-right-width: 宽度; border-right-color: 颜色; border-right: 宽度 样式 颜色; | |
| 下边框 | border-bottom-style: 样式; border-bottom-width: 宽度; border-bottom-color: 颜色; border-bottom: 宽度 样式 颜色; | |
| 左边框 | border-left-style: 样式; border-left-width: 宽度; border-left-color: 颜色; border-left: 宽度 样式 颜色; | |
| 样式综合设置 | border-style：上边 [右边 下边 左边] | none无（默认）、solid（单实线） dashed（虚线）、dotted（点线）、 double（双实线） |
| 宽度综合设置 | border-width：上边 [右边 下边 左边] | 像素值 使用关键字thick、medium（默认值）、 thin |
| 颜色综合设置 | border-color：上边 [右边 下边 左边] | 颜色名称、#十六进制、rgb(r,g,b)、 rgb(r%,g%,b%) |
| 边框综合设置 | border: 四边宽度 四边样式 四边颜色 |
还可以设置边框的颜色为"transparent"。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
border-style属性可以有1-4个值：
-
border-style:dotted solid double dashed;
-
上边框是 dotted
-
右边框是 solid
-
下边框是 double
-
左边框是 dashed
-
-
border-style:dotted solid double;
-
上边框是 dotted
-
左、右边框是 solid
-
下边框是 double
-
-
border-style:dotted solid;
-
上、下边框是 dotted
-
右、左边框是 solid
-
-
border-style:dotted;
-
四面边框是 dotted
-
示例：
<p>设置盒子四个边框的颜色</p>p { border-style:solid; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); }
表格的细线边框：
以前学过的HTML表格的边框很粗，这里只需要CSS一句话就可以美观起来。
table {
border-collapse: collapse; /*表示边框合并在一起*/
}
示例：
用盒子边框写三角形
<style>
div{
width: 0;
border: 100px solid blue;
border-color: aqua pink burlywood blueviolet;
}
</style>
</head>
<body>
<div></div>
</body>效果图：
圆角边框（CSS3）：
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。radius 半径（距离）
语法格式：
border-radius： 左上角 右上角 右下角 左下角; /*4个值*/ border-radius： 左上角 右上/左下 右下角; /*3个值*/ border-radius： 左上/右下 右上/左下; /*2个值*/ border-radius： 四个圆角值相同; /*1个值*/
示例：
#rcorners {
border-radius: 5px 50px;
设置左上右下5px 右上左下50px
background: #8AC007;
width: 200px;
height: 150px;
} （4）内边距（padding）
padding属性用于设置内边距。是指边框与内容之间的距离。
padding-top: 上内边距
padding-right: 右内边距
padding-bottom: 下内边距
padding-left: 左内边距
padding: 上右下左内边距
注意：属性后面的数值可变，表示不同的含义。
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding: 四周内边距 |
| 2个值 | padding: 上下、左右内边距 |
| 3个值 | padding: 上、左右、下内边距 |
| 4个值 | padding: 上、下、左、右内边距 |
（5）外边距（margin）
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。
margin-top: 上外边距
margin-right: 右外边距
margin-bottom: 下外边距
margin-left: 左外边距
margin: 上 右 下 左
注意：行内元素可以设置水平方向的内外边距，但不能设置垂直方向的内外边距。
外边距实现盒子居中：
可以让一个盒子实现水平居中，需要满足两个条件：
1、必须是块级元素。
2、盒子必须指定了宽度。
只需要给左右的外边距都设置为auto，就可以使块级元素水平居中。
实际工作中常用这种方式来进行网页布局，示例如下：
.header {
width: 960px;
margin: 0 auto; /*表示上下外边距为0，左右水平居中*/
}
清除元素的默认内外边距：
为了更方便地控制网页中的元素，制作网页时，可以使用如下代码清除元素默认的内外边距：
* {
padding: 0; /*清除内边距*/
margin: 0; /*清除外边距*/
}
需要注意的是：行内元素只有左右内外边距，是没有上下内外边距的。
文字水平居中和盒子水平居中：
-
盒子居中使用margin，给定左右边距为auto即可。
-
文字居中使用：text-align: center;
-
文字垂直居中：单行文本 line-height， 多行文本padding
示例：
（6）外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直距离不是margin-bottom与margin-top之和，而是取两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称为外边距塌陷）。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及上边框，则父元素的上外边距会与子元素的上外边距合并，合并后的外边距为两者中的较大者。即使父元素的上外边距为0，也会发生合并。
解决方案：
1.可以为父元素定义1像素的上边框border或上内边距padding
2.可以为父元素添加overflow: hidden;
（7）盒子模型布局的稳定性
开始学习盒子模型，最大的问题就是分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？
建议如下：
优先使用宽度（width），其次使用内边距（padding），最后使用外边距（margin）
width > padding > margin
原因：
1.margin会有外边距合并，还有在ie6下margin容易出bug。
2.padding会影响盒子大小，需要进行加减计算。box-sizing:border-box;
3.width没有问题。我们经常用宽度剩余法 、 高度剩余法来做
补充：
input 去除已有边框
<style>
input {
width: 200px;
height: 40px;
background-color: red;
/* 去除input已有边框 */
border: none;
/* 去除input已有外扩线 */
outline: none;
border: 5px solid blueviolet;
border-radius: 10px;
}
</style>
</head>
<body>
<input type="text" >
</body>效果图：
未完...
扫一扫
763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
