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的子元素

重学JavaWeb第二天（五）