5.2background-image
设置元素的背景图像
元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分
<div class="box"></div> .box{ width: 600px; height: 600px; background-image: url("images/img1.jpg"); }
5.3background-repeat
该属性设置如何平铺背景图像
| 值 | 说明 |
| repeat | 默认值 |
| repeat-x | 只向水平方向平铺 |
| repeat-y | 只向垂直方向平铺 |
| no-repeat | 不平铺 |
.box{ width: 600px; height: 600px; background-color: #fcc; background-image: url("images/img1.jpg"); background-repeat: no-repeat; }
5.4background-size
该属性设置背景图像的大小
| 值 | 说明 |
| length | 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
| percentage | 计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
| cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
| contain | 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 |
.box{ width: 600px; height: 600px; background-image: url("images/img1.jpg"); background-repeat: no-repeat; background-size: 100% 100%; }
5.5background-position
| 值 | 说明 |
| left top | 左上角 |
| left center | 左 中 |
| left bottom | 左 下 |
| right top | 右上角 |
| right center | 右 中 |
| right bottom | 右 下 |
| center top | 中 上 |
| center center | 中 中 |
| center bottom | 中 下 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0% |
| xpos ypos | 单位是像素 |
.box{ width: 600px; height: 600px; background-color: #fcc; background-image: url("images/img1.jpg"); background-repeat: no-repeat; background-position: center; }
六、文本属性
6.1text-align
指定元素文本的水平对齐方式
| 值 | 描述 |
| left | 文本居左排列，默认值 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
h1 {text-align:center} h2 {text-align:left} h3 {text-align:right}
6.2text-decoration
text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等
| 值 | 描述 |
| underline | 定义下划线 |
| overline | 定义上划线 |
| line-through | 定义删除线 |
h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline}
6.3text-transform
text-transform 属性控制文本的大小写
| 值 | 描述 |
| captialize | 定义每个单词开头大写 |
| uppercase | 定义全部大写字母 |
| lowercase | 定义全部小写字母 |
h1 {text-transform:uppercase;} h2 {text-transform:capitalize;} p {text-transform:lowercase;}
6.4text-indent
text-indent 属性规定文本块中首行文本的缩进
p{ text-indent:50px; }
温馨提示
负值是允许的。如果值是负数，将第一行左缩进
七、表格属性
使用 CSS 可以使 HTML 表格更美观
7.1border
指定CSS表格边框，使用border属性
table, td { border: 1px solid black; }
7.2border-collapse
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。实际上就是将双边框变为单边框。
table { border-collapse:collapse; } table,td { border: 1px solid black; }
7.3width、height
width和height属性定义表格的宽度和高度
table { width:100%; } td { height:50px; }
7.4text-align
表格中的文本对齐和垂直对齐属性
text-align属性设置水平对齐方式，向左，右，或中心
td { text-align:right; }
7.5padding
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性。就是文字和上下左右边框之间的间隙大小。
td { padding:15px; }
7.6color、background-color
table, td, th { border:1px solid green; } td { background-color:green; color:white; }
八、盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
外边距（margin），边框（border），内边距（padding），和实际内容（content）
- Margin(外边距) - 两个元素之间的距离，外边距是透明的（两个值：第一个值上下，第二个值左右）
- Border(边框) - 围绕在内边距和内容外的边框
- Padding(内边距) - 设置内容和边框之间的距离（两个值：第一个值上下，第二个值左右）
- Content(内容) - 盒子的内容，显示文本和图像
如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离
div{ width: 100px; height: 100px; padding: 10px; border: 2px solid red; margin: 10px; background: green; } <div></div>
九、弹性盒子模型
弹性盒子是 CSS3 的一种新的布局模式
CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
弹性容器通过设置 display属性的值为 flex将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素
温馨提示
弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
<div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div> <style> .flex-container { display: flex; //设置容器为弹性布局 width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } </style>
温馨提示
默认弹性盒里内容横向摆放
9.1父元素上的属性
9.1.1display 属性
display:flex;开启弹性盒
display:flex;属性设置后子元素默认水平排列
9.1.2flex-direction属性
flex-direction 属性指定了弹性子元素在父容器中的位置
flex-direction: row | row-reverse | column | column-reverse
- row：横向从左到右排列（左对齐），默认的排列方式
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
- column：纵向排列
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
.flex-container { display: flex; flex-direction: column; width: 400px; height: 250px; background-color: lightgrey; }
9.1.3justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
justify-content: flex-start | flex-end | center
flex-start弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放flex-end弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放center弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）
.flex-container { display: flex; justify-content: center; width: 400px; height: 250px; background-color: lightgrey; }
