<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 去除默认样式 */
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
/* 写盒子最外层div */
#wrap{
width: 260px;
height: 250px;
line-height: 2.5;
/* background-color: pink; */
}
h2{
line-height: 3;
}
h2>a{
font-size: 16px;
color: #A2A2A2;
font-weight: normal;
/* 设置外边距 */
margin-left: 100px;
}
/* 省略号的设置 */
ul>li{
width: 260px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
li span:first-child{
color: #DB6D62;
background-color: #FBF0EE;
/*第一种设置
width: 48px;
height: 32px;
display: inline-block;
text-align: center; */
padding: 5px 10px;
}
li span:nth-child(2){
color: #6D6D6D;
}
</style>
<body>
<div id="wrap">
<h2>京东快报
<a href="#">更多></a>
</h2>
<ul>
<li>
<a href="#">
<span>推荐</span>
<span>范览什而己丹慧也区车未得帅，才属起事无。</span>
</a>
</li>
<li>
<a href="#">
<span>推荐</span>
<span>范览什而己丹慧也区车未得帅，才属起事无。</span>
</a>
</li>
<li>
<a href="#">
<span>推荐</span>
<span>范览什而己丹慧也区车未得帅，才属起事无。</span>
</a>
</li>
<li>
<a href="#">
<span>推荐</span>
<span>范览什而己丹慧也区车未得帅，才属起事无。</span>
</a>
</li>
</ul>
</div>
</body>
</html>01.盒子模型
怎么理解盒子模型:把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里
所以我们把所有的元素都想成盒子，矩形
买一个冰箱 收到一个大的快递
冰箱 内容区（content）
纸箱子 边框（border）
泡沫 内边距（padding）
冰箱离你的距离 外边距（margin）
影响盒子大小的元素：内容区，边框，内边距 ，外边距不影响盒子的大小
盒子模型的结构:
1:内容区(content) 元素中所有的子元素和文本内容都在内容区中排列
width 设置内容区的宽度
2:边框（border）元素设置边框
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式 分别是颜色，大小，样式
border-color: ; 设置边框的颜色
（1）、有默认值，默认颜色是黑色
（2）、可以写多个颜色 以空格隔开
4个 上 右 下 左
3个 上 左右 下
2个 上下 左右
1个 上下左右
(3)、border-xxx-color 特指top right bottom left某一边颜色
border-width: ; 设置边框的大小
（1）、默认值 默认值大概1-3px
（2）、也可以跟多个值 以空格隔开
4个 上 右 下 左
3个 上 左右 下
2个 上下 左右
1个 上下左右
（3）、border-xxx-width 特指top right bottom left某一边宽度
border-style: ; 设置边框的样式
(1)、默认值 none
（2）、solid 实线
dashed 虚线
dotted 点状虚线
double 双线
border简写
border:颜色，大小，样式;
border-top:颜色，大小，样式;
border-right:颜色，大小，样式;
border-bottom:颜色，大小，样式;
border-left:颜色，大小，样式;
height 设置内容区的高度
3:内边距（padding）指的是内容区和边框之间的距离
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
padding:xxx; 简写
可以跟多个值
4个 3个 2个 1个
规则跟border-width一样