css盒子模型

边框（border）

边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style

border-width 默认值为3px

可以用来指定四个方向的宽度

值得情况

四个值：上、右、下、左
三个值：上、左右、下
两个值：上下、左右
一个值：上下左右

border-xxx-width

xxx可以是top right bottom left

用来单独指定某一个边的宽度

color style同样

border-style

soild 实线

dotted 点状虚线

dashed 虚线

double 双线

简写 border 1px soild red设置1像素红色边框为实线

内边距（padding）

- 内容区和边框之间的距离是内边距

- 也是四个方向

top、right、bottom、left

- 内边距的设置会影响到盒子的大小

- 背景颜色会延伸到内边距

盒子的可见框的大小，由内容区、内边距和边框共同决定

所以在计算盒子大小时，需要将这三个区域加到一起计算

外边距（margin）

外边距会影响盒子的位置

margin-top 元素向下移动

margin-left 元素向右移动

margin-bottom 其下边的元素会向下移动

元素在页面中是按照自左向右的顺序排列

一个元素在其父元素中，水平布局要满足一下的等式

margin-left+border-left+padding+width+padding-right+border-right+margin-right = 其父元素内容的宽度（必须满足）

以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整

调整情况：

- 如果7个值没有为 auto 的情况，则浏览器会自动调整margin-right值使等式成立

- 这七个值中有三个值可设置为auto

width

margin-left

margin-right

- 如果某个值为auto，则会自动调整为auto的那个值以使等式成立

- 宽度和外边距为auto，宽度会调整最大，设置为auto的外边距会变成0

- 如果两个外边距设置为auto 宽度固定值，则会将外边距设置为相同的支持

所以我们经常利用这一点来使一个元素在其父元素中水平居中

示例：

width：xxxpx;

margin: 0 auto;

子元素是在父元素的内容区中排列

如果子元素的大小超过了父元素，则子元素会在父元素中溢出

使用 overflow 属性来设置父元素如何处理溢出的子元素

可选值：

visible：默认值子元素会从父元素中溢出，在父元素的外部的位置显示出来

hidden：溢出内容将会会裁剪不会显示

scroll：生成两个滚动条，通过滚动条来查看完整的内容

auto：根据需要生成滚动条

overflow-x

overflow-y

垂直外边距的重叠（折叠）

相邻的垂直方向外边距会发生重叠现象

兄弟元素

-兄弟元素间的相邻垂直外边距会取两者之间的较大者（两者都是正值）

-特殊情况：

-如果相邻的外边距一正一负，则取两者的和

-如果相邻的外边距都是负值，则取两者绝对值较大的

-兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理

父子元素

- 父子元素相邻外边距，子元素会传递给父元素（上外边距）

- 父子外边距的折叠会影响到页面的布局，必须进行处理

默认样式：

- 通常情况，浏览器都会为元素设置一些默认样式

- 默认样式的存在会影响到页面的布局

- 通常情况下编写网页时必须要去除浏览器的默认样式（pc端的页面）

练习

网易新闻列表代码

<!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">
    <link rel="stylesheet" href="../02_css/reset.css">
    <title>Document</title>
    <style>
        a{
            /* 去除下所有超链接划线 */
            text-decoration: none;
        }
        /* 设置容器的样式 */
        .news-wrapper{
            width: 300px;
            height: 350px;
            margin: 50px auto;
            background-color: rgb(247, 245, 245);
            border-top: 1px solid #ddd;
        }
        .news-title{
            /* 为了边框和文字宽度一致，需要将h2转换为行内快元素 */
            display: inline-block;
            /* 设置边框  */
            border-top: 1px solid red;
            height: 40px;
            /* 通过margin-top将h2上移，盖上上边块 */
            margin-top: -1px;
        }
        .news-title a{
            color: #40406b;
            /* 设置文字的加粗效果 */
            font-weight: bold;
            margin-top: 10px;
            /* 设置为块元素 使得下移 行内元素不能设置 */
            display: block;
            margin-top: 10px;
        }
        .news-img{
            height: 150px;
        }
        /* 设置图片的文字效果 */
        .news-img .img-title{
            /* 文字向上移动 */
            margin-top: -30px;
            color: white;
            /* 文字加粗 */
            font-weight: bold;
            /* 设置padding */
            padding-left: 30px;
        }
        .news-img img{
            /* 设置图片大小 */
            width: 300px;
            height: 150px;
        }
        .news-list{
            margin-top: 20px;
            /* 设置内边距 */
            padding-left: 1px;
        }
        .news-list li{
            /* 设置外边距 */
            margin-bottom: 17px;
        }
        .news-list a{
            list-style:disc;
            /* 设置字体颜色和字体大小 */
            color: #666; 
            font-size: 14px;
        }
        .news-list a::before{
            content: '□';
            color: rgb(218, 218, 218);
            font-size: 12;
            margin-right: 6px;
        }
        .news-list a:hover{
            /* 设置光标在超链接上 字体颜色发生改变 */
            color: red;
        }
    </style>
</head>
<body>
    <!-- 创建新闻列表的外侧的容器 -->
    <div class="news-wrapper">
        <!-- 创建一个标题标签 -->
        <h2 class="news-title">
            <a href="javascript:;" class="a_1">爬山</a>
        </h2>
        <!-- 创建一个图片的容器-->
        <div class="news-img">
            <a href="javascript:;">
            <img src="img/1.jpg" alt="日出">
            <h3 class="img-title">
                来自于江西武功山的日出
            </h3>
        </a>
        </div>
        <!-- 创建新闻列表 -->
        <ul class="news-list">
            <li><a href="javascript:;">最美不过的就是日出了</a></li>
            <li><a href="javascript:;">此时太阳从云朵中探出头来</a></li>
            <li><a href="javascript:;">阳光洒在云海上，十分壮观</a></li>
            <li><a href="javascript:;">大雨过后，天气转晴，再遇上云海</a></li>
        </ul>
        </div>
    </div>
</body>
</html>

京东导航条代码

<!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">
    <link rel="stylesheet" href="../02_css/reset.css">
    <title>Document</title>
    <style>
        body{
            /* 
            设置背景颜色，单纯观看效果
            */
            background-color: bisque;
        }
        .box01{
            width: 200px;
            height: 460px;
            font-family:宋体;
            font-size: 15px;
            background-color: white;
            /* 
            设置居中，好演示效果
            */
            margin: 100px auto;    
        }
        .nav li{
            position: relative;
            top: 5px;
            padding: 5px 0px 5px 10px;
            
        }
        .sn{
            margin: 0px 0px 0px 1px;
        }
        .nav li:hover{
            /* 
            设置移动到超链接产生背景颜色
            */
            background-color:#d9d9d9;
        }
        a{
            /* 
            去除超链接下划线
            */
            text-decoration: none;
            color: black;
        }
        a:hover{
            /* 
            设置移动到超链接文字颜色变红色
            */
            color: red;
        }
    </style>
</head>
<body>
    <div class="box01">
        <ul class="nav">
            <li><a href="javascript:;">家用电器</a></li>
            <li><a href="javascript:;">手机</a><span class="sn">/</span><a href="javascript:;">运营商</a><span class="sn">/</span><a href="javascript:;">数码</a></li>
            <li><a href="javascript:;">电脑</a><span class="sn">/</span><a href="javascript:;">办公</a></li>
            <li><a href="javascript:;">家居</a><span class="sn">/</span><a href="javascript:;">家具</a><span class="sn">/</span><a href="javascript:;">家装</a><span class="sn">/</span><a href="javascript:;">厨具</a></li>
            <li><a href="javascript:;">男装</a><span class="sn">/</span><a href="javascript:;">女装</a><span class="sn">/</span><a href="javascript:;">童装</a><span class="sn">/</span><a href="javascript:;"></a>内衣</li>
            <li><a href="javascript:;">美妆</a><span class="sn">/</span><a href="javascript:;">个护清洁</a><span class="sn">/</span><a href="javascript:;">宠物</a></li>
            <li><a href="javascript:;">女鞋</a><span class="sn">/</span><a href="javascript:;">箱包</a><span class="sn">/</span><a href="javascript:;">钟表</a><span class="sn">/</span><a href="javascript:;"></a>珠宝</li>
            <li><a href="javascript:;">男鞋</a><span class="sn">/</span><a href="javascript:;">运动</a><span class="sn">/</span><a href="javascript:;">户外</a></li>
            <li><a href="javascript:;">房产</a><span class="sn">/</span><a href="javascript:;">汽车</a><span class="sn">/</span><a href="javascript:;">汽车用品</a></li>
            <li><a href="javascript:;">母婴</a><span class="sn">/</span><a href="javascript:;">玩具乐器</a></li>
            <li><a href="javascript:;">食品</a><span class="sn">/</span><a href="javascript:;">酒类</a><span class="sn">/</span><a href="javascript:;">生鲜</a><span class="sn">/</span><a href="javascript:;"></a>特产</li>
            <li><a href="javascript:;">艺术</a><span class="sn">/</span><a href="javascript:;">礼品鲜花</a><span class="sn">/</span><a href="javascript:;">农资绿植</a></li>
            <li><a href="javascript:;">医药保健</a><span class="sn">/</span><a href="javascript:;">计生情趣</a></li>
            <li><a href="javascript:;">图书</a><span class="sn">/</span><a href="javascript:;">文娱</a><span class="sn">/</span><a href="javascript:;">教育</a><span class="sn">/</span><a href="javascript:;">电子书</a></li>
            <li><a href="javascript:;">机票</a><span class="sn">/</span><a href="javascript:;">酒店</a><span class="sn">/</span><a href="javascript:;">旅游</a><span class="sn">/</span><a href="javascript:;">生活</a></li>
            <li><a href="javascript:;">理财</a><span class="sn">/</span><a href="javascript:;">众筹</a><span class="sn">/</span><a href="javascript:;">白条</a><span class="sn">/</span><a href="javascript:;">保险</a></li>
            <li><a href="javascript:;">安装</a><span class="sn">/</span><a href="javascript:;">维修</a><span class="sn">/</span><a href="javascript:;">清洗</a><span class="sn">/</span><a href="javascript:;">二手</a></li>
            <li><a href="javascript:;">工业品</a></li>

        </ul>
        
    </div>
</body>
</html>