overflow 设置父元素如何处理溢出的子元素
visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出内容将会被裁剪不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条
overflow: hidden;
text-overflow 属性规定当文本溢出包含元素时发生的事情。
- clip 修剪文本。
- ellipsis 显示省略符号来代表被修剪的文本
- string 使用给定的字符串来代表被修剪的文本
text-overflow: ellipsis;
文字常用效果
文字超过父元素大小时自动省略
div{ width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic minima, animi quos suscipit voluptas provident rerum architecto! Impedit ducimus sequi dolor sunt, incidunt, eveniet fuga, quae magnam illo minima vel. </div>
练习
仿京东导航条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../static/css/reset.css"> <link rel="stylesheet" href="http://at.alicdn.com/t/font_1794918_0yneh7evb91.css"> <style> .content { width: 100%; height: 30px; background-color: #e3e4e5; } .bar { width: 990px; margin: 0 auto; background-color: turquoise; } .location{ float: left; line-height: 30px; } .location a { text-decoration: none; } .location:hover .map{ display: block; } .location span { color: #999; } .location i { color: #f10215; } .map{ width: 320px; height: 436px; background-color:#fff; position:absolute; display: none; border: 1px solid #999; } .listp{ float: right; } .list li{ float: left; color: #666; font-size: 14px; line-height: 30px; margin-right: 8px; } .slipt::after{ content: '|'; } </style> </head> <body> <div class="content"> <div class="bar"> <div class="location"> <a href="javascript:;"><i class="iconfont icon-icon-test"></i><span>山东</span></a> <div class="map"></div> </div> <div class="listp"> <ul class="list"> <li>你好，请登录</li> <li>免费注册</li><li class="slipt"></li> <li>我的订单</li><li class="slipt"></li> <li>我的京东</li><li class="slipt"></li> <li>京东会员</li><li class="slipt"></li> <li>企业采购</li><li class="slipt"></li> <li>客户服务</li><li class="slipt"></li> <li>网站导航</li><li class="slipt"></li> <li>手机京东</li> </ul> </div> </div> </div> </body> </html>
背景
background-color 设置背景颜色
颜色值设置参考 Ctrl+单击我
background-color: #bfa;
background-image 设置背景图片
- 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
- 如果背景的图片小于元素，则背景图片会自动在元素中平铺将
- 元素铺满如果背景的图片大于元素，将会一个部分背景无法完全显示
- 如果背景图片和元素一样大，则会直接正常显示
background-image: url("./img/1.png");
background-repeat 设置背景的重复方式
- repeat 默认值 ， 背景会沿着x轴 y轴双方向重复
- repeat-x 沿着x轴方向重复
- repeat-y 沿着y轴方向重复
- no-repeat 背景图片不重复
background-repeat: no-repeat;
background-position 用来设置背景图片的位置
- 通过 top left right bottom center 几个表示方位的词来设置背景图片的位置 使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
- 通过偏移量来指定背景图片的位置：水平方向的偏移量 垂直方向变量
- 原点从内边距开始计算
background-position: center; background-position: -50px 300px;
设置居中
.box2{ height: 200px; width: 200px; background-image: url(../static/img/8bcaa0f267965535.jpg!cc_100x100.webp); border: steelblue 1px solid; background-repeat: no-repeat; background-position: center; } <div class="box2"></div>
雪碧图CSS-Sprite
如果我们的背景图片需要切换（或者是不同的动作切换不同的图片），可以将多个小图片放到一张大图中，通过调整background-position属性来显示不同的位置，这样图片加载到网页中，就可以避免闪烁，也可以节省流量，降低请求数量，这个技术在网页应用中十分广泛，这种图我们称为雪碧图。
使用步骤：
确定要使用的图标
测量图标的大小
根据测量结果创建元素
将雪碧图设置为元素的背景图片
设置background-position属性偏移量以显示正确的图片
.box{ width: 36px; height: 42px; background-image: url(../static/img/23f3ddf914b1b527d0429a3d713cfe3a.png); background-position: 0px -193px; } .box:hover{ background-position: -41px -193px; } .box:active{ background-position: -83px -193px; } <div class="box"></div>
设置背景的范围
background-clip 设置背景的边界
- border-box 默认值，背景会出现在边框的下边
- padding-box 背景不会出现在边框，只出现在内容区和内边距
- content-box 背景只会出现在内容区
background-clip: content-box;
background-origin 背景图片的偏移量计算的原点
- padding-box 默认值，background-position从内边距处开始计算
- content-box 背景图片的偏移量从内容区处计算
- border-box 背景图片的偏移量从边框处开始计算
background-origin: border-box; background-origin: 0,0;
background-size 设置背景图片的大小
第一个值表示宽度
第二个值表示高度
- 如果只写一个，则第cover 图片的比例不变，将元素铺满
- contain 图片比例不变，将图片在元素中完整显示
background-size: contain;
- 二个值默是 aut
background-attachment背景图片是否跟随元素移动
- scroll 默认值 背景图片会跟随元素移动
- fixed 背景会固定在页面中，不会随元素移动
background-attachment: fixed;
渐变
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果 ！！渐变是图片，需要通过 background-image来设置
线性渐变
线性渐变，颜色沿着一条直线发生变化
linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域
线性渐变的开头，可以指定一个渐变的方向
to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈
渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况
repeating-linear-gradient() 可以平铺的线性渐变
效果1
background-image: linear-gradient(red,yellow,#bfa,orange);
效果2
background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px);
效果3
background-image: repeating-linear-gradient(to right ,red, yellow 50px);
径向渐变
radial-gradient() 径向渐变(放射性的效果)
默认情况下径向渐变的形状根据元素的形状来计算的
正方形 --> 圆形
长方形 --> 椭圆形
我们也可以手动指定径向渐变的大小
也可以指定渐变的位置
语法：radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)
circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
- 位置：
- top right left center bottom
background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)
练习
雪碧图
电影卡片练习
表格
在现实生活中，我们经常需要使用表格来表示一些格式化数据：
课程表、人名单、成绩单…
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格
在table中使用tr表示表格中的一行，有几个tr就有几行
在tr中使用td表示一个单元格，有几个td就有几个单元格
rowspan 纵向的合并单元格
colspan 横向的合并单元格
<table border="1" width='50%' align="center"> <tr> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> <td rowspan="2">D2</td> </tr> <tr> <td>A3</td> <td>B3</td> <td>C3</td> </tr> <tr> <td>A4</td> <td>B4</td> <td colspan="2">C4</td> </tr> </table>
语义化表格
可以将一个表格分成三个部分：
* 头部 thead * 主体 tbody * 底部 tfoot th 表示头部的单元格 <table border="1" width='50%' align="center"> <thead> <tr> <th>日期</th> <th>收入</th> <th>支出</th> <th>合计</th> </tr> </thead> <tbody> <tr> <td>2000.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> <tr> <td>2000.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> <tr> <td>2000.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> <tr> <td>2000.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td>合计</td> <td>300</td> </tr> </tfoot> </table>
表格的样式
- border-spacing: 指定边框之间的距离
- border-collapse: collapse; 设置边框的合并
默认情况下元素在td中是垂直居中的 可以通过 vertical-align 来修改
vertical-align:middle; text-align: center;
如果表格中没有使用tbody而是直接使用tr，
那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
tr不是table的子元素
