详解CSS（五）

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、的博客

🛺系列专栏：CSS专栏

🚲给大家推荐一个网站😉很实用😚我一直在上面刷题：点击跳转进入网站注册登录即可刷题

浮动案例2：(代码过长，不愿看的直接略过即可)

HTML：

CSS：

清除网页默认样式：

body标签有一个默认的外边距，导致我们设置一个块盒时，不能紧贴着浏览器，ul标签也有一个默认的内填充，导致我们在块盒书写内容没有紧贴着块盒边距，这些默认的内外边距会影响我们在网页上的布局。

<!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>
    <style>
        .box{
            width: 100%;
            height: 40px;
            background-color: #f00;
        }
        ul{
            border: 1px solid #f00;
        }
        ul li{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

为了消除一些标签的默认样式，我们通常会这样做。

清除之后，就不会影响到我们的排版布局。

浮动案例1：

<!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>
    <style>
        /* 在CSS代码的第一步：都是清除HTML标签的默认的内填充与外边距 */
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            background-image: url('bg.png');
        }
        .nav{
            width: 960px;
            height: 40px;
            margin-right: auto;
            margin-left: auto;
            margin-top: 50px;
        }
        .nav ul{
            /* 将列表前面的项目符号去除 */
            list-style-type: none;
        }

        .nav ul li{
            /* 把每一个li标签进行向左浮动,li标签本身就是块级元素，浮动之后就可以让每一个li排成一行 */
            float: left;
            /* 给每一个li标签设置一个宽度 */
            width: 120px;
            /* 文本进行居中 */
            text-align: center;
            background-image: url(./10.jpg);
            height: 40px;
            line-height: 40px;
        }
        a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
    </div>
</body>
</html>

清除浮动：

只要有浮动，那么必须清除浮动。

为什么要清除浮动：

因为经过浮动的元素，会影响到它下面的元素的排版布局，还有浮动元素的父元素没有将浮动元素包裹住。

清除浮动的三种方法：

给浮动元素的父元素设置一个固定的高度

使用清除浮动的样式属性 clear

使用overflow:hidden 这个属性来清除浮动

清除浮动案例：

<!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>
    <style>
        .box{
            width: 600px;
            border: 1px solid #000;
            margin-left: auto;
            margin-right: auto;
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /* 向左浮动 */
            float: left;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: #0f0;
            /* 向左浮动 */
            float: left;
        }
        .div3{
            width: 100px;
            height: 100px;
            background-color: #00f;
            /* 向右浮动 */
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
    <h2>浮动与清除浮动</h2>
</body>
</html>

本来 h2 的内容应该在div下面，因为div的浮动导致影响了浮动下面的布局，如上图所示。

给浮动元素的父元素设置一个固定的高度：

这个方法不建议使用，因为一个元素的高度一般情况下不是手动设置的，它应该是由其自身内容撑高的！手动设置的高度可能会造成空间的浪费，如下图所示。

使用清除浮动的样式属性 clear：

clear这个属性是专门用来清除浮动的，这个属性有三个值：clear:left; 清除左浮动、clear:right; 清除右浮动、clear:both; 两者都清除。

这个属性一般是用在最后，一个浮动元素的下面，在最后一个浮动元素的下面新建一个空白的div 这个div什么都不要放，它只做只做一件事情就是清除浮动。

使用overflow:hidden 这个属性来清除浮动：

overflow:hidden 它原意是用来将溢出的部分进行隐藏，但是它还可以用于清除浮动的。一般主要是用来给列表的浮动清除。

<!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>
    <style>
        ul{
            list-style-type: none;
        }
        ul li{
            float: left;
            border: 1px solid #f00;
            
        }
    </style>
</head>
<body>
    <ul>
        <li>栏目管理1</li>
        <li>栏目管理2</li>
        <li>栏目管理3</li>
        <li>栏目管理4</li>
        <li>栏目管理5</li>
        <li>栏目管理6</li>
        <li>栏目管理7</li>
        <li>栏目管理8</li>
        <li>栏目管理9</li>
        <li>栏目管理10</li>
    </ul>
</body>
</html>

浮动过后是没有高度的，为了清除浮动我们使用 overflow:hidden 注意，这是是不能使用div来清除浮动的，因为ul下面是不允许使用div标签的。

浮动案例2：(代码过长，不愿看的直接略过即可)

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">
  <title>正在热映--猫眼电影</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/movie.css">
</head>
<body>
  <div class="main">
    <!-- 菜单 -->
    <nav class="nav">
      <a href="" class="select">正在热映</a>
      <a href="">即将上映</a>
      <a href="">经典影片</a>
    </nav>

    <div class="container">
      <div class="choose-area">
        <div class="choose-item clearfix">
          <div class="left">类型：</div>
          <div class="right">
            <ul class="clearfix">
              <li class="select">Lorem.</li>
              <li>Voluptatem!</li>
              <li>Ipsa?</li>
              <li>Id?</li>
              <li>Architecto?</li>
              <li>Quis?</li>
              <li>Obcaecati.</li>
              <li>Molestiae?</li>
              <li>Exercitationem.</li>
              <li>Tenetur!</li>
              <li>Quod.</li>
              <li>Pariatur.</li>
              <li>Ipsum!</li>
              <li>Laudantium.</li>
              <li>Est!</li>
              <li>Repudiandae.</li>
              <li>Iure.</li>
              <li>Repellat!</li>
              <li>Voluptate.</li>
              <li>Incidunt.</li>
            </ul>
          </div>
        </div>
        <div class="choose-item clearfix">
          <div class="left">地区：</div>
          <div class="right">
            <ul class="clearfix">
              <li>Lorem.</li>
              <li>Voluptatem!</li>
              <li>Ipsa?</li>
              <li>Id?</li>
              <li>Architecto?</li>
              <li>Quis?</li>
              <li>Obcaecati.</li>
              <li>Molestiae?</li>
              <li>Exercitationem.</li>
              <li>Tenetur!</li>
              <li>Quod.</li>
              <li>Pariatur.</li>
              <li>Ipsum!</li>
              <li>Laudantium.</li>
              <li>Est!</li>
              <li>Repudiandae.</li>
              <li>Iure.</li>
              <li>Repellat!</li>
              <li>Voluptate.</li>
              <li>Incidunt.</li>
            </ul>
          </div>
        </div>
        <div class="choose-item clearfix no-line">
          <div class="left">年代：</div>
          <div class="right">
            <ul class="clearfix">
              <li>Lorem.</li>
              <li>Voluptatem!</li>
              <li>Ipsa?</li>
              <li>Id?</li>
              <li>Architecto?</li>
              <li>Quis?</li>
              <li>Obcaecati.</li>
              <li>Molestiae?</li>
              <li>Exercitationem.</li>
              <li>Tenetur!</li>
              <li>Quod.</li>
              <li>Pariatur.</li>
              <li>Ipsum!</li>
              <li>Laudantium.</li>
              <li>Est!</li>
              <li>Repudiandae.</li>
              <li>Iure.</li>
              <li>Repellat!</li>
              <li>Voluptate.</li>
              <li>Incidunt.</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="movies clearfix">
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
        <div class="movie-item">
          <div class="poster">
            <a href="">
              <img src="./img/1.jpg" alt="">
            </a>
          </div>
          <div class="name">
            <a href="">
              可不可以你也刚好喜欢我
            </a>
          </div>
          <div class="score">
            9.4
          </div>
        </div>
      </div>

      <div class="pager">
        <a href="">上一页</a>
        <a href="">1</a>
        <a href="">2</a>
        <a href="" class="select">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>
        <a href="">10</a>
        <a href="">下一页</a>
      </div>
    </div>
  </div>
</body>
</html>

CSS：

common.css

/* 多页面的通用样式 */


/* 分页 */
.pager{
  margin: 2em 0;
  text-align: center;
}

.pager a{
  border: 1px solid #d8d8d8;
  padding: 5px 10px;
  margin: 0 3px;
}

.pager a:hover{
  border-color: red;
}

.pager a.select{
  background: #ef4238;
  color: #fff;
  border: none;
}

reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	text-decoration: none;
	color:inherit;
}

movie.css

body{
  color: #333;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

.main{
  line-height: 1.5;
}

.main .nav{
  height: 60px;
  background: #47464a;
  color: #999;
  font-size: 16px;
  text-align: center;
  line-height: 60px;
}

.main .nav a{
  margin: 0 38px;

}

.main .nav a:hover{
  color: #fff;
}

.main .nav a.select{
  color: #ef4238;
}

.main .container{
  width: 1120px;
  margin: 0 auto;
}

.main .container .choose-area{
  border: 1px solid #e5e5e5;
  margin: 40px 0;
  font-size: 14px;
  line-height: 30px;
}

.main .container .choose-area .choose-item{
  margin: 1em;
  border-bottom: 1px dotted #e5e5e5;
}

.main .container .choose-area .choose-item.no-line{
  border: none;
}

.main .container .choose-area .choose-item .left{
  float: left;
  /* width: 60px;
  text-align: right; */
  color: #999;
}
.main .container .choose-area .choose-item .right{
  float: left;

  width: 1010px;
}

.main .container .choose-area .choose-item .right li{
  float: left;
  margin: 0 9px;
  padding: 0 4px;
}

.main .container .choose-area .choose-item .right li:hover{
  color: #ef4238;
}

.main .container .choose-area .choose-item .right li.select{
  background: #ef4238;
  color: #fff;
  /* CSS3 圆角边框 */
  border-radius: 15px;
}

.main .container .movies .movie-item{
  float: left;
  width: 160px;
  margin: 10px 32px 10px 0;
}

.main .container .movies .movie-item:nth-child(6n){
  margin-right: 0;
}

.main .container .movies .movie-item .poster img{
  width: 160px;
  height: 220;
}

.main .container .movies .movie-item .name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
  text-align: center;
}

.main .container .movies .movie-item .score{
  color: #ffb400;
  text-align: center;
  line-height: 2.5;
  font-style: italic;
}

/* ::first-letter 元素选择器，选中元素的第一个字母 */
.main .container .movies .movie-item .score::first-letter{  
  font-size: 1.5em;
}

img: