十一月六日课堂笔记-DIV+CSS布局

DIV+CSS布局
2.2盒子模型内外边距和边框介绍
当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。
1.边框
用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。
样式包括：
你也可以通过设置样式为 none 或 hidden 来明确地移除边框。
如果一次只指定某一个方向的边框，就用属性：border-top，border-right， border-bottom，border-left。
下面的规则设置了一个标题元素的背景色和顶部边框：
3

 css{
border-top: 4px solid #7c7; /* 中绿 */
background-color: #efe; /* 浅绿 */
color: #050; /* 深绿 */
}

结果如下：
2.外边距和内边距
使用外边距和内边距调整元素的位置，并在其周围创建空间。用margin属性或者 padding 属性分别设置外边距和内边距的宽度。
如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。
如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。
你也可以按照顺序指定四个宽度： 上、右、下、左。
下面的规则通过给元素四周设置红色边框，标记出了类名为 remark 的段落元素。

p.remark {
border: 2px solid red;
padding: 4px;
margin-left: 24px;
}

结果如下：
注意：
外边距margin可以为负，内边距不可以为负。
行内元素设置上下边距不影响行高。
边框是可见的，边距是不可见的，只能看到对其他元素的影响。
3.简写属性：
我们可以根据规定顺序，简写属性：
设置两个属性值，那么第一个值表示上下边框的属性，第二个值表示左右边框的属性。
设置三个属性值，第一个值表示上边框属性，第二个值表示左右边框属性，第三个值表示下边框属性。
设置四个值，一次表示上右下左边框的属性。
例如：

h1{margin:10px 0px 15px 5px}

4.行内元素的盒子模型
行内元素的盒子模型只能得到一行高度的空间，行高由line-height属性决定，没有设置该属性则为内容默认高度。
如果设置上下边框或者边距，会导致盒子高度超过行高，盒子上下部分将会与其他元素重叠。这就是行内元素不可设置上下边距的原因。
综上所述，不推荐对行内元素设置盒子属性，一般先用display属性设置内联元素为块级元素显示，再设置盒子属性。
5.元素盒子属性的默认值
大多HTML元素的盒子属性默认值都为0。
少部分HTML元素盒子属性存在默认值，如：body,p,ul,li,form标签等，因此我们在需要的时候可以先初始化他们的属性为0。
2.3 display属性和实例
1.元素的显示和隐藏
使用display:none将元素隐藏起来，此时元素不占用页面空间。
使用visibility:hidden也可以隐藏元素，此时元素占用空间。
2.通过display改变内联元素或块级元素
(1)display:block就是将元素显示为块级元素.
block元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度默认是它的容器的100%，除非设定一个宽度

<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

(2)display:inline就是将元素显示为行内元素.

inline元素的特点是：

和其他元素都在一行上；

高，行高及顶和底外边距不可改变；

宽度就是它的文字或图片的宽度，不可改变。

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

3.display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

3.案例
我们现在有一个竖直导航栏，代码如下：

3.relative 相对定位
不脱离标准流，在页面中占位置 。
相对于自己原来的位置来进行定位 。

.box-wrapper { border: 5px solid red; }
.box-wrapper .box { float: left; width: 100px; height: 100px; margin: 20px; background-color: green; }
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

结果如下，浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。

很明显，这样的效果并不符合我们的预期，所以我们需要想办法解决这个问题。现在，我们需要清除浮动！

2.如何清除浮动
清除浮动
清除浮动的底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。
要注意了，我们是通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。
还是接着上面的例子，我们简单修改一下HTML代码：

<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div style="clear:both;"></div>
</div>

哈哈，好像问题解决了！但是要注意的是，我们是在原来的页面中添加了一个空的div元素，并且增加样式clear:both，不可以在已经浮动的元素中增加清除浮动的样式，这样只会让其不去进行位置浮动，但是仍然是脱离文档流的，依然不能撑开高度。如下图：

清除浮动的最佳实践

.clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

1)display:block使生成的元素以块级元素显示,占满剩余空间。
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互。
4）通过content:”.”生成内容作为最后一个元素，至于content里面是点还是其他都是可以的。
5）zoom：1触发IE hasLayout。
通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容。
触发BFC

BFC全称是块状格式化上下文，它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。

BFC的主要特征

✦ BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
✦ BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。
其中，BFC清除浮动就是用的“包含浮动”这条特性。
那么，怎样才能触发BFC呢？
BFC的触发方式

我们可以给父元素添加以下属性来触发BFC：
✦ float 为 left | right
✦ overflow 为 hidden | auto | scorll
✦ display 为 table-cell | table-caption | inline-block | flex | inline-flex
✦ position 为 absolute | fixed

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断，比较局限。所以以上的BFC触发方法都可以用来解决浮动问题，但是要选择合适的使用场景。
3.总结
有很多方法可以进行清除浮动这样的操作，归根到底，从原理上讲其实分为两种。

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性。（after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素）；

其二，使父元素触发BFC。（通过设置父元素 overflow 或者display：table 属性来闭合浮动）

2.5 CSS position属性
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
我们已经学习了普通流和浮动的相关内容，本节我们介绍定位相关内容。
position属性设置元素定位类型，可以通过top,bottom,right,left属性，控制元素的定位位置。
position属性值有static，relative，absolute，fixed四个值。
1.static静态定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top,bottom,right,left属性的影响。
2.fixed固定定位
脱离标准流，在页面中不占位置 。
不管页面有多大，永远相对于浏览器的边框来定位 。

    margin: 0;
    padding: 0;
}
.c1{
    width: 100px;
    height: 100px;
    background-color: brown;
}

.c2{
    width: 100px;
    height: 100px;
    background-color: blue;
}

.c3{
    width: 100px;
    height: 100px;
    background-color: black;
    position: fixed;```/*固定定位，不占位置，永远相对于浏览器来定位，不管窗口上下拉动，都不会消失（如广告位）*/
    left:20px;
    top:20px;
}

…

3.relative 相对定位
不脱离标准流，在页面中占位置 。
相对于自己原来的位置来进行定位 。

{
    margin: 0;
    padding: 0;
}
.c1{
    width: 100px;
    height: 100px;
    background-color: brown;
    }
.c2{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;/*相对定位，占位置，相对于自己原来的位置定位*/
    left: 20px;
    top:20px;
}

.c2{
    width: 50px;
    height: 50px;
    background-color:blue;
    position: absolute;
    z-index: 0;
}

专题：居中和对齐
我们在学习中经常会遇到需要水平居中、垂直居中、对齐元素的场景，而居中和对齐又有很多方法和前提条件，本节我们来整理一下。

1.margin设置区块元素水平居中
margin:0 auto;设置左右外边距的大小，控制元素的水平居中。

<style>
            .center{
                margin: 20px auto;
                width: 600px;
                border: 3px solid green;
                text-align: center;
            }
        </style>
    <body>
        <div class="center">
        <p>使用margin进行元素的居中</p>
        </div>
    </body>
    ```
注：width不能设置为100%，是没有效果的。

2.position属性设置元素的左右对齐

<style>
    .right{
        position: absolute;
        right: 0;
        width: 300px;
        border: 3px solid pink;
        padding: 10px;
        z-index: 0;
    }
<style>
<body>
    <div class="right">
    <p>我是右对齐的区块</p>
    </div>
</body>

3.float属性设置左右对齐

.right1{
float: right;
width: 300px;
border: 3px solid purple;
padding: 10px;
}

我是浮动右对齐的区块

4.padding属性设置水平垂直居中

<style>
       .padCenter{
            padding: 70px 0;
            border: 3px dotted yellow;
            text-align: center;
        }
</style>
<body>
    <div class="padCenter">
    <p>我是用padding垂直居中的元素</p>
    </div>
</body>

5.line-height属性设置水平垂直居中

.lineCenter{
line-height:300px;
border: 3px solid #33ff33 ;
height: 300px;
}

我是利用行高进行水平居中的元素

6.绝对定位和transform属性设置水平垂直居中

<style>
   .poCenter{
        border: 3px solid #ff88c2;
        height: 200px;
        position: relative;
    }
    .poCenter p{
        position: absolute;
        top: 50%;
        left: 50%;
        /*对水平垂直居中进行修正*/
        transform:translate(-50%,-50%);
    }
</style>
<body>
    <div class="poCenter">
    <p>我是利用绝对定位进行水平垂直居中的元素</p>
    </div>
</body>

“`