Day3 CSS样式进一步学习笔记

<div> 是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。当多个<div> 需要在同一行时(一个母块装多个子块)，各子块加上float: left;属性，同时为避免float带来的错误，最好给母块加上 overflow:hidden以防止溢出带来的错误。

横向排序可以用float:left实现，flex属性也可

注：

1遇到“Bug"：子元素作为父元素的第一个元素，给其设置margin-top有问题，父元素会整体偏移"解决办法：给父类div设置 overflow:hidden属性，其作用为"溢出隐藏"。当一个div中的文字溢出时，overflow还有其它一些属性如：auto会出现一个滑块；scroll横竖方向都会出现一个滑块； visiable溢出的部分也显示。

2父元素嵌套子元素时，一般父元素不需要设置高度，而是用子元素撑开。而在子元素进行浮动时（float：使元素向左或向右移动，其周围的元素也会重新排列）父元素会出现消失，我们理解为父元素坍塌。父元素坍塌的原因设计了一个概念“文档流”，div元素从上往下依次去做排布，就是正常的文档流，即一个简单队列，浮动--即漂浮，脱离了正常的文档流。两个流（一个正常的文档流，一个单独的浮动流）。为了解决浮动带来的父元素坍塌及其它问题，我们的解决方案是给父元素加上overflow:hidden
3html标签与body标签

有时仅仅只对body标签进行设置，达不到满意结果，还需要对html标签也进行设置。其原因暂不做探究。

        html, body{
            /* 重要 */
            height: 100%;
            background: #333 url("img/mac.jpg") no-repeat center;
            background-size: 100%;
        }

4倍数选择器，当需要对某一整数倍数的元素进行设置，其他元素不变时，可以使用:nth-child(4n+4)的形式，例子如下(只对4的整数倍操作)：

/* 选择器 4的倍数则不加宽度 */
.item:nth-child(4n+4){
    margin-right: 0;
}

5导航栏中的logo怎么添加？

html

<div class="nav">
        <div class="nav-left">
            <ul>
                <li class="logo"><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>
        <div class="nav-right">
            <a href="#">登录</a>
        </div>
    </div>

css

.nav {
  width: 1000px;
  line-height: 70px;
  background-color: #3333335f; 
  overflow: hidden;
  margin-left: auto;  /*居中对齐*/
  margin-right: auto; /*居中对齐*/
}
.nav-left {
  float: left;  /*向左浮动*/
}
.nav-left li {
  float: left;
  margin-right: 10px;
  width: 60px;
  text-align: center;
}
.nav-right {
  float: right;  /*向右浮动*/
}
li {
  list-style: none; /*小圆点不显示*/
}
body {
  font-size: 14px;
}
a {
  text-decoration: none;
  color: #333;
}
.nav-left .logo {
  height: 70px;
  width: 120px;
  background: #fff url("../images/logo.png") no-repeat center;
  background-size: 100px;
}