#前端学习笔记#day5_1 行内元素盒模型 实练

垂直方向布局

如果子元素从父元素中溢出使用overflower

       overflow:scroll； 生成滚动条

       overflow:auto; 自动的滚动条

       overflow-x:

       overflow-y:

外边距的折叠

垂直外边距的折叠

       相邻的垂直方向外边距，会发生重叠现象（兄弟元素：box1和box2如果是垂直方向相邻，box1的margin-bottom和box2的margin-top是会重叠的）

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

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

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

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

                     父子外边距的折叠会影响页面的布局，必须要进行处理（padding或者boder-top:1px red solid把外边距隔开了，但是盒子高度变高了，可以从height中减去1）

行内元素间盒模型

行内元素不支持设置宽度和高度（span）

行内元素可以设置padding，但是垂直方向的padding不会影响页面布局

行内元素可以设置border，但是垂直方向的border不会影响布局

行内元素可以设置margin，但是垂直方向不会影响布局  

因为a也是行内元素，所以没法设置宽和高

display用来设置元素显示的类型（在style里面设置）

       可选值：inline将元素设置成行内元素

                     block将元素设置成块元素

                     inline-block行内块元素，宽和高都可以变，不会独占一行

display:none 可以隐藏一个元素（隐藏了，且位置也不存在了）

visibility：

       可选值：

       visible，默认值，在页面中正常显示

       hidden，元素在我们页面中隐藏（虽然隐藏了，但是位置依然存在）

浏览器的默认样式

可以将其去掉

        p{

            margin: 0;

        }

exercise

图片列表

 .img li:not(:last-child){

            width: 100%;

            margin-bottom: 9px;

        }

最后一个元素不设置

创建外部容器 nav div

        . item:hover{

            background-color: red;

        }

鼠标移入后的状态显示                                 

       padding-left: 18px;

设置右边距是为了将文字向内移动

        .item a{

          color: black;

        }

注意，这边的a前面没有.

          text-decoration: none;

去除文本下划线

            font-weight: bold;

设置文本加粗效果

html>

lang="en">

    charset="UTF-8" />

    http-equiv="X-UA-Compatible" content="IE=edge" />

    name="viewport" content="width=device-width, initial-scale=1.0" />

   

    rel="stylesheet" href="./css/reset.css" />