页面布局

1 页面组成

2 布局相关的标签

<div></div> 定义文档中的分区或节
<span></span> 这是一个行内元素，没有任何意义
<header></header> HTML5新增定义 section 或 page 的页眉
<footer></footer> HTML5新增定义 section 或 page 的页脚
<main></main> HTML5新增标签规定文档的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。IE都不识别
<nav></nav> HTML5新增表示链接导航部分如果文档中有“前后”按钮，则应该把它放到元素中
<section></section> HTML5新增定义文档中的节通常不推荐那些没有标题的内容使用section
<article></article> HTML5新增定义文章论坛帖子报纸文章博客条目用户评论
<aside></aside> HTML5新增相关内容，相关辅助信息，如侧边栏

3 盒子模型

3.1 什么是盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) 清除边框外的区域，外边距是透明的。
Border(边框) 围绕在内边距和内容外的边框。
Padding(内边距) 清除内容周围的区域，内边距是透明的。
Content(内容) 盒子的内容，显示文本和图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            padding: 20px;  /*div中的内容距离边框的距离*/
            border: 5px solid orange;   /*设置边框的宽度、虚实线、颜色*/

            /*外边距*/
            margin: 20px;  /*清除边框外的区域，外边距是透明的*/     

            background: pink; /*将边框内的背景颜色为粉红色*/
        }
    </style>
</head>
<body>
    <h1>盒子模型</h1>
    <hr>

    <div id="box">
        Lorem ipsum dolor sit amet.
    </div>
</body>
</html>

盒子模型

3.2 块级元素和内联元素(行内元素)

块级元素

总是在新行上开始，占据一整行；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
它可以容纳内联元素和其他块元素。

内联元素

和其他元素都在一行上；
高，行高及外边距和内边距部分可改变；
宽度只与内容有关；
行内元素只能容纳文本或者其他行内元素。
外边界只能对左右起作用，内边距都起作用

块级元素和内联元素的转换

display: block | inline | inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块状元素和内联元素</title>
    <!--搞明白什么是块状元素什么是内联元素，独占一行的就是块状元素，否则就是内联元素-->
    <style>
        h1 {width: 300px;}
        body {
            width: 200px;
        }

        strong {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 1px solid red;
        }
        
        div {
            border: 1px solid red;
            padding: 50px;
        }


    </style>
</head>
<!--强调只要独占一行就是块状元素-->
<body>
    <h1>块状元素和内联元素</h1>       <!--独占一行也是块状元素，块状元素设置宽和高是有效的-->
    同志你好  
    <hr>  

    <div>     <!--独占一行-->
        Lorem ipsum dolor sit amet.
    </div>

    <a href="#">同志</a>   <!--没有独占一行，超链接是内联元素-->
    你好

    <hr>

    <strong>我很状</strong>   <!--独占一行-->

    
</body>
</html>

块状元素与内联元素

3.2 盒子模型之间的关系

document树

父元素子元素后代元素祖先元素兄弟元素

标准文档流

行内元素不占据单独的空间，依附于块级元素，行内元素没有自己的区域。它同样是DOM树中的一个节点，在这一点上行内元素和块级元素是没有区别的。
块级元素总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。

盒子在标准流中的定位原则

行内元素之间的水平margin
块级元素之间的竖直margin (margin的塌陷)
嵌套盒子之间的margin, (子元素父元素margin合并)
将margin设置为负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型关系</title>
    <!--通过对元素设置宽和高看所这只的宽和高是否有效来判断是块状元素还是内联元素，设置宽和高有效的一般是块状元素，当然块状元素和内联元素可以通过某种机制进行相互转化-->
    <style>
        /*对块状元素进行设置宽高有效，默认宽度是父元素的宽，高度是自动（被内容撑开）*/
       /*给父及元素设置外边框和内边距*/
        #box01 {
            border:1px solid red;
            padding: 10px;
        }

        /*给父元素内的所有子元素设置边框和背景颜色，子元素嵌套在父元素内，当然我们还可以针对父元素内的某一个子元素设置css样式*/
        .item {
            width: 100px;
            height: 100px;
            background: pink;
            border: 1px dashed orange;
        }


        /*给父元素中的第一个子元素设置上、左、下三个外边距，我们可以通过控制元素框的四个边的外边距来控制该框在大盒子中的位置*/
        .item01 {
            margin-top: 10px;
            margin-left: 10px;
            margin-bottom: 30px;
        }

        /*给父元素内的第二个子元素设置上外边距，第一个子元素和第二个子元素是亲兄弟，而且上下相邻，但是第一个子元素的下外边距和第二个子元素的上外边距并不是一种叠加的效果，而是取其中较大的外边距为两者的距离*/
        .item02 {
            margin-top:40px;
        }

    /*----------------------------------------------------------------------------------------------------------------------------------*/
        /*大部分内联元素设置宽高无效，默认宽度是自动(被内容撑开)，高度也是自动，设置内边距有效但是影响其他元素，CSS的文本属性 会对内联元素生效*/

        /*给父内联元素整体设置边框和背景颜色*/
        #box02 span {
            border:1px solid pink;
            background: #ccc;
        }
        
        /*给父内联元素加上边框，会覆盖前面的，但是不会覆盖背景颜色，因为这个也没有设置背景颜色，不存在覆盖这么一说*/
        #box02 {
            border: 1px solid red;
        }
        /*给内蓝元素设置外边距，发现是设置不了的，但是左、右外边距是可以设置的*/
        .span01 {
            margin-top: 20px;
            margin-left: 20px;
            margin-right:20px;
        }
        .span02 {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <h1>盒子模型关系</h1>
    <hr>

    <div id="box01">
        <div class="item item01">1</div>
        <div class="item item02">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

    <hr>

    <div id="box02">
        <!--内联元素-->
        <!--12和34之间有空格是由于换行引起的-->
        <span class="span01">1</span><span class="span02">2</span><span>3</span><span>4</span>
    </div>

</body>
</html>

盒子模型位置关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>塌陷问题</title>
    <style>
        /*只有块状元素的垂直方向才存在塌陷问题，内联元素是不存在塌陷问题的，因为内联元素是水平方向的*/
        #box {
            width:200px;
            height:200px;
            background: #ccc;
            /*解决塌陷的两种方式：一是给父元素设置边框，（给子元素设置边框任然会塌陷），二是设置overflow:hidden;*/
            /*border: 1px solid red;*/
            overflow: hidden;
        }

        #inner {
            margin-left:50px;
            margin-top: 50px;
            width: 100px;
            height: 100px;
            background: orange;
        }
    </style>
</head>
<body>
    <h1>盒子模型关系</h1>
    <hr>
    <!--父元素和其内的子元素塌陷问题-->
    <div id="box">
        <div id="inner"></div>
    </div>

</body>
</html>

塌陷问题

3.3 盒子模型相关CSS属性

布局属性

display


| 值           | 描述                                                 |
| ------------ | ---------------------------------------------------- |
| none         | 此元素不会被显示。                                   |
| block        | 此元素将显示为块级元素，此元素前后会带有换行符。     |
| inline       | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值）                      |

float

| 值      | 描述                                                 |
| ------- | ---------------------------------------------------- |
| left    | 元素向左浮动。                                       |
| right   | 元素向右浮动。                                       |
| none    | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。                |

clear


| 值      | 描述                                  |
| ------- | ------------------------------------- |
| left    | 在左侧不允许浮动元素。                |
| right   | 在右侧不允许浮动元素。                |
| both    | 在左右两侧均不允许浮动元素。          |
| none    | 默认值。允许浮动元素出现在两侧。      |
| inherit | 规定应该从父元素继承 clear 属性的值。 |

visibility


| 值       | 描述                                                         |
| -------- | ------------------------------------------------------------ |
| visible  | 默认值。元素是可见的。                                       |
| hidden   | 元素是不可见的。                                             |
| collapse | 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 |
| inherit  | 规定应该从父元素继承 visibility 属性的值。                   |

overflow


| 值      | 描述                                                     |
| ------- | -------------------------------------------------------- |
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。             |
| hidden  | 内容会被修剪，并且其余内容是不可见的。                   |
| scroll  | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto    | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。                 |

overflow-x
overflow-y

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>    </title>
    <style>    
        div {
            display: inline-block;  /*将div设置为行内块元素*/

            /*max- 300px; 对块状有用*/
            min-width: 300px;  /*对inline-block 有用-------无论内容多小，框的宽度最小不会小于300px,当内容大于300px时，框的宽度会随内容的变长而被撑开*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>    
            Lorem ipsum dolor sit amet.

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

文本属性之块状元素和内联元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        /*设置选择器box内的每一个子元素的框的宽和高以及背景颜色*/
        .item {
            width:100px;
            height:100px;
            background:#ccc;
            border:1px solid pink;

            /*通过display:inline;------把块->内联*/
            display: inline;
        }

        /*将box02内的所有选择器为a的元素设置边框以及背景颜色,但是通过html内的元素直到其实内联元素并不能设置宽高，所以我们通过display:block;将其转换成块状元素，这样就可以设置框的宽高，并且可以点击跳转到指定的超链接*/
        #box02 a{
            width:100px;
            height:100px;
            background:#f5f5f5;
            border:1px solid red;

            /*通过display:block;------把内联 块*/
            display: block;
        }

        /*将父元素即一个内联元素设置为一个块元素，然后设置宽、内边距、和框*/
        .product-box {
            display: block;
            padding: 10px;
            width: 150px;
            border:1px solid #ccc;
        }

        /*设置图片的宽和父元素的宽保持一致，高一般不设置*/
        .product-box img{
            width:150px;
        }


        /*将列表变为*/
        .list {
            list-style: none;
            text-align: center; /*将文本内容进行居中*/
            font-size:0px;  /*这样设置方框之间的间距就变为零了*/
        }

        /**/
        .list li {
            width: 100px;
            height: 100px;
            border:1px solid pink;
            background: #ccc;
            padding:10px;
            /*margin:20px;*/

            /*设置为 inline-block*/
            display:inline-block;

            font-size:16px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

    <hr>

    <div id="box02">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>

    <a href="1.html" class="product-box">
        <div class="product">
            <img src="../../dist/images_one/10.jpg" alt=""> <!--内联-->
            <h3>商品</h3>
            <p>
                Lorem ipsum dolor sit amet,
            </p>
        </div>
        
    </a>

    <hr>


    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <img src="../../dist/images_one/10.jpg" alt="">
    <img src="../../dist/images_one/10.jpg" alt="" style="display: none">
</body>
</html>

布局相关的CSS属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相关属性</title>
    <style>
        #box {
            width:100px;
            height:100px;
            background: red;

            visibility: hidden;  /*此元素的内容以及设置的css样式会被隐藏，虽然被隐藏了但是占据的空间(位置)依然存在*/
            display: none;      /*此元素以及设置的css样式将不会显示*/
        }

        .box {
            width: 200px;
            height: 200px;
            border: 2px solid red;

            /*控制子元素的显示*/
            /*overflow: hidden; /*隐藏溢出的部分*/
            /*overflow: scroll;  出现滚动条，会出现右和下两个滚动条*/
             /*overflow: auto; 出现滚动条*/

             overflow-y:hidden;
        }

        .box ul {
            width:500px;
        }
    </style>
</head>
<body>
    <h1>相关属性</h1>
    <hr>

    <div id="box">
        asdfasdfsadfasdf
    </div>

    <p>Lorem ipsum dolor sit amet.</p>

    <hr>

    <div class="box">
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus modi repellat, laudantium asperiores dolor aliquid quae vitae quaerat delectus debitis magni nihil dolore voluptates facilis labore aut iure sit sint!</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus modi repellat, laudantium asperiores dolor aliquid quae vitae quaerat delectus debitis magni nihil dolore voluptates facilis labore aut iure sit sint!</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus modi repellat, laudantium asperiores dolor aliquid quae vitae quaerat delectus debitis magni nihil dolore voluptates facilis labore aut iure sit sint!</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus modi repellat, laudantium asperiores dolor aliquid quae vitae quaerat delectus debitis magni nihil dolore voluptates facilis labore aut iure sit sint!</li>
        </ul>
    </div>

</body>
</html>

布局相关属性

尺寸

width / max-width / min-width
height / max-height / min-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>    </title>
    <style>    
        div {
            display: inline-block;  /*将div设置为行内块元素*/

            /*max- 300px; 对块状有用*/
            min-width: 300px;  /*对inline-block 有用-------无论内容多小，框的宽度最小不会小于300px,当内容大于300px时，框的宽度会随内容的变长而被撑开*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>    
            Lorem ipsum dolor sit amet.

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

最大宽和最小宽

内补白

padding / padding-left / padding-right / padding-top / padding-bottom

外边距

margin
margin-left
margin-right
margin-top
margin-bottom

4 浮动

4.1 什么是浮动

CSS的Float(浮动)，元素可以围绕其他元素向左或向右被推动
设置浮动，脱离普通文档流
浮动元素都会变为块级元素
如果不设置宽度，会尽可能的窄
浮动元素之后的元素将围绕它浮动元素之前的元素将不会受到影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid red;
            /*将元素设置为浮动，之前没有设置框的宽度，那么宽度就是auto 的，即被内容撑开，但是如果没有设置为浮动元素，那么宽就是父元素的宽*/
            float: left;     
        }
    </style>
</head>
<body>
    <h1>浮动的特点</h1>
    <hr>

    <div class="box">
        Lorem ipsum dolor
    </div>
</body>
</html>

浮动的特点

4.2 设置浮动

.item {
    float:left
}
.item {
    float:right
}
/*float 属性的默认值是 none  表示没有浮动*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同志浮动</title>
    <style>
        /*给所有的box类选择器添加上内边距、虚线边框和下外边距*/
        .box {
            padding: 20px;
            width: 1000px;
            border: 5px dashed red;
            margin-bottom: 10px;    /*下外边距设置盒子之间的距离*/
        }
         
        /*将所欲的item类选择器设置边框为实线、红线，背景颜色设置为灰色*/
        .item {
            /*100px;*/
            height:100px;
            background:#ccc;        /*后面设置背景颜色会覆盖掉其背景颜色*/
            border:2px solid red;
    
        }
        
        /*将所有的item02类选择器设置官渡和背景颜色，也就是每一个虚框内的第一个框的背景颜色*/
        .item02 {
            /*设置浮动*/
            /*float:left;*/ 
            width:50px;
            /*如果设置了浮动，没有设置该宽度，那么浮动元素的宽就是默认被内容撑开的，如果没有设置浮动，也没有设置该宽，则默认的宽是父元素的宽去掉内边距*/        
            background:#ccc;    /*灰色*/
        }

        /*将所有的item03类选择器设置官渡和背景颜色，也就是每一个虚框内的第二个框的背景颜色*/
        .item03 {
            width:80px;
            background:#369;   /*蓝色*/
        }
        
        /*将所有的item04类选择器设置官渡和背景颜色，也就是每一个虚框内的第三个框的背景颜色*/
        .item04 {
            width:100px;
            background:#f90;   /*屎黄色*/

        }
/*-----------------------------------------------------------------------------------------------------*/
        
        /*
        1、元素向左或向有浮动不会调出父类的宽
        2、元素浮动会调出文档流（对后面的元素产生影响）
        3、元素一旦浮动会转换成块元素
        4、浮动的元素并不会独占一行(但是并不会独占一行)，因为脱离文档流
        5、浮动的元素宽度是默认的auto，默认是被内容撑开
        6、多个元素浮动，会排成一排，宽度超过父元素的宽度会自动换行
        7、浮动框不占据空间
        */

        /*第一个浮动*/
        .box02 .item02 { 
            float:left;      
        }


        /*第二个浮动*/
        .box03 .item03 {
            float: left;
        }

        /*第三个元素浮动*/
        .box04 .item04 {
            float: left;
        }

        /*第三个元素 向右浮动*/
        /*向右浮动碰到包含框就是停下，但是已经脱离文档流，也就不受包含框的控制了*/
        .box05 .item04 {
            float: right;
        }

        /*第二个元素向右浮动*/  
        /*第二个向右浮动，碰到右边包含框停下，浮动后不占据空间，那么此时框3就会向上占据之前浮动框的位置，此时包含框的高度就是被没有浮动的1和3框撑开的*/
        .box06 .item03 {
            float: right;
        }
        

        /*整体向左浮动*/   
        /*浮动元素不占据空间*/
        /*
        如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框
        包含框没有设置高度，会被没有浮动的子元素的框撑开，如果子元素的框都浮动，那么此时的包含框的高就是内边距的高
        */
        .box07 .item {    
            float: left;
        }
        .box07 .item02 {
            height: 150px;
        }
    </style>
</head>
<body>
    <h1>浮动</h1>
    <hr>

    <div class="box box01">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>

    <h2>第一元素浮动</h2>
    <div class="box box02">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>


    <h2>第二元素浮动</h2>
    <div class="box box03">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>

    <h2>第三元素浮动</h2>
    <div class="box box04">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>

    <div style="clear:both"></div>

    <h2>第三元素向右浮动</h2>
    <div class="box box05">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>
    
    <div style="clear:both"></div>

    <h2>第二元素向右浮动</h2>
    <div class="box box06">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>


    <h2>全部向左浮动</h2>
    <div class="box box07">
        <div class="item item02">1</div>
        <div class="item item03">2</div>
        <div class="item item04">3</div>
    </div>

</body>
</html>

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首字符环绕</title>
    <style>
        /*设置字段的内容框的宽、内边距和颜色*/
        p {
            width: 800px;
            padding: 10px;
            border: 1px solid #ccc;
        }

        /*将强调的首字母设置为浮动类型，浮动类型的元素就变成快元素，所以我们为浮动的快元素设置宽，以及将强调的字体大小设置为默认字体大小的三倍*/
        p strong {
            font-size:3em;   /*将首字母的字体大小设置为默认字体大小的三倍*/
            width: 40px;    /*为了让内容不紧挨着浮动元素，我们给浮动元素设置了宽，这样看起来就会更好看一点，首字母浮动后面的文本内容没有钻到浮动元素的下面，这是浏览器设置的，这样我们就能看到完整的文本内容了*/
            /*浮动*/
            float: left;
        }
    </style>
</head>
<!------------------------------------------------------------------------------------------------------->
<body>
    <h1>同志环绕</h1>
    <hr>

    <p>
        <strong>L</strong>orem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid rerum temporibus, harum quia consequatur suscipit at facilis minima eveniet! Consectetur suscipit veniam doloremque, eligendi, porro soluta cupiditate voluptates eos? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laborum ipsum adipisci recusandae dicta dignissimos repellat rerum similique dolores quod molestiae voluptatum sed, animi sequi, mollitia asperiores voluptates, quasi quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius vel nam assumenda, rerum ullam officiis molestiae veniam, quos tempora necessitatibus illum minima reprehenderit explicabo dignissimos! Quas consequuntur, doloribus qui, sequi eum tenetur quia. Laborum quisquam, sunt iusto ipsa provident quos amet commodi officiis consequatur eveniet? Sunt ipsum molestias aperiam esse saepe, dolorum corporis nostrum tempora rerum laboriosam mollitia culpa doloribus fuga temporibus assumenda natus? Incidunt a, numquam quisquam aspernatur. Placeat, nihil, excepturi! Consequatur illum accusamus eveniet praesentium dolores doloribus, suscipit assumenda veniam, laudantium aspernatur quas. Nemo quo debitis, sint cupiditate natus, id, facere, soluta a tenetur dolores magnam recusandae! Itaque!
    </p>
</body>
</html>

应用1：首字母环绕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字环绕图片</title>
    <style>
        /*给图片和文本内容整体设置一个框和内边距，然后在进行文字环绕图片的操作，我们没有设置高，包含框的高会被内容撑开*/
        article {
            width: 600px;
            padding: 10px;  
            border: 2px solid #ccc;
        }
        
        /*将图片设置为浮动的，此时就变为了块状元素，为了不让图片显示的太大，我们设置了图片的宽度*/
        article img {
            width:200px;   /*设置显示图片的合适大小*/
            float: left;
            margin-right:10px;  /*设置块状元素的右外边框，使得文字环绕图片不是那么的紧凑，这样看起来会更好看*/
        }
    </style>
</head>
<body>
    <h1>同志新闻</h1>
    <hr>
    
    <article>
        <img src="../../dist/images_one/10.jpg" alt="">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta sit eos magni alias, nesciunt veniam at reiciendis eius. Labore inventore, sunt nulla ullam! Voluptate iste, libero unde tempora corporis autem voluptatum similique repellat perspiciatis ducimus, vero natus aperiam aliquam, ut reiciendis nesciunt. Quod cum, enim. Voluptatum quae eum repellendus quo voluptatem dolorem earum ut modi inventore sint reiciendis culpa recusandae ea neque harum nesciunt alias, totam, omnis nemo! Tempore, sunt expedita nemo minus nihil recusandae temporibus maiores quia numquam dolores voluptatibus eaque voluptatem debitis eos, nisi, quod quas. Corporis laudantium dolore, ipsam hic commodi, ullam illum necessitatibus nesciunt repudiandae!
        </p>
    </article>
</body>
</html>

应用2：文字环绕图片

4.3 清除浮动

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

因此，创建浮动框可以使文本围绕图像：

行框围绕浮动框

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

clear: both
clear: left
clear: right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>浮动影响</title>
    <!-- 选择器的作用就是选择要修饰的名字 -->
        <style>

        /*
        ### 1.2 浮动的影响
        * 对后面元素影响。   后面元素会整体向前
        * 对父元素有影响 （父元素的高不能被撑开）

        ### 1.3 消除浮动影响
        * 消除元素对后面元素的影响，  在后面的元素设置 `clear:both/left/right`
        * 消除子元素浮动对父元素的影响 。 给元素浮动  或者 设置 `overflow`
        */
        header {
            /*居中 左右是auto*/
            margin: 0 auto;         /*上下设置为多少无所谓，将左右外边距设置为自动，这样就可以是块元素居中*/

            width: 800px;        /*设置表头内容的宽度*/
            /*height: 100px;    设置页头的框的高度，一般不进行让其成为一个固定值，而是随文本内容而被撑开*/
            
            color: #000;         /*设置表头中文本字体的颜色为黑色*/
            text-align: center;  /*将页头内的文本内容相对每一个框进行居中*/
 
            border: 2px solid red;   /*设置边框，表头的总宽度是内容加上边框的宽度，可以通过审查元素进行查看*/

            /*消除子元素浮动 对老子的影响*/
            /*
            1.3 消除浮动影响的两种方法：
            消除元素对后面元素的影响，  在后面的元素设置 `clear:both/left/right`，一般值设置为both即可
            消除子元素浮动对父元素的影响 。 给元素浮动或者设置 `overflow`-----溢出的意思
            */

            /*float: left;*/   /*将元素设置为向左浮动*/
            overflow: auto; /*消除子元素浮动对父元素的影响*/
        }
        
        /*对页头的logo进行设置，将期设置向左浮动，并为其设置宽度和背景颜色，由于页头没有设置高，会被内容撑开*/
        /*line-height是行高的意思，height则是定义元素自身的高度*/
        .logo {
            float: left;   /*将logo设置为向左浮动*/
            width: 200px;  

            /*行高100px， 对.logo里面的文字*/
            line-height: 100px;  /*设置的是行高*/
            background: #f90;
            height: 150px;    /*设置元素的高*/
        }
        .logo h1 {
            /*h1的行高，继承了父元素的行高 对h1里面的文字进行设置*/
            margin: 0;
        }
        .banner {
            float: right;
            width: 580px;
            line-height: 100px;
            background: #369;      /*将背景颜色设置为蓝色*/
        }


        /*导航*/
        nav {

            /*清楚前面的浮动对老子的影响*/
        /*    clear: both;
            clear: left;
            clear: right;
        */
            clear: right;
            clear: left;
            clear: both;

            margin:10px auto;
            width:800px;
            text-align: center;
            background:pink;
            padding:10px 0px;
        }
        nav ul {
            list-style:none;
            margin:0;
            padding:0;
        }
        nav li {
            display: inline-block;
        }

        
    </style>

</head>



<!-- 设置网页的思想，先设置html元素，该网页需要分成两行，分别是页头和导航，然后在根据哪些元素需要设置为浮动元素，以及需要什么样的样式在style中通过选择器对指定的文本内容进行设置 -->
<body>
    <!--页头-->
    <header>
        <!-- 将页头又分为两部分，分为左边的logo和右边的banner -->
        <div class="logo">
            <h1>同志交友</h1>    <!--可以通过设置换行来看行高和高的区别-->
        </div>
        <div class="banner">
            Lorem ipsum dolor sit amet,
        </div>
    </header>

    <!--导航-->
    <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>
        </ul>
    </nav>
</body>
</html>

浮动的影响和解决影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        /*设置父元素的宽，*/
        .list {
            border: 2px solid red;
            width: 600px;
            list-style: none;
            padding: 0;
        }

        .list li {
            width:100px;
            height: 100px;
            background:#ccc;
            border:1px solid green;

            float: left;  /*将所有的li属性设置为向左浮动，大家都变为横向的，但是浮动的元素超过包含元素的框就会换行*/
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

多个元素超过父元素的宽

4.4 浮动实验

实现以下实现

设置第一浮动的div
设置第2个浮动div
设置第3个浮动div
改变第三个浮动方向
改变第二个浮动方向
全部向左浮动,增加第一个的高度
使用clear属性清楚浮动的影响
扩展盒子的高度 (元素高度和浮动的元素)
段落首字母浮动
图片浮动
简单浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局实例</title>
    <style>
        body {
            margin: 0px;
        }
        /*容器*/
        .container {
            margin: 0 auto;  /*让整个元素水平居中，一般网页的内筒也都是水平居中的*/
            width: 1000px;
        }

        /*页头*/
        .page-header {
            overflow: hidden;/*消除子元素对父元素的影响*/
            background: #999;  /*h1自带margin,背景的高度被内容撑开*/
            color: #fff;
            /*font-size: 2em;*/
        }
        
        /*页面主体*/
        .page-main {

        }
        
        /*页面侧边栏*/
        .aside {
            float: left;
            width:300px;
            height: 400px;
            border-right: 1px solid #999;
        }
        
        /*页面内容-------需要设置左右浮动*/
        .content {
            float: right;
            width:680px;
            height:400px;
        }
        
        /*页脚*/
        .page-footer {
            /*border:1px solid red;*/
            clear: both;   /*清除元素对后面元素的影响，如果不设置也页脚元素就会上去，因为页面元素已经变味浮动，不在占位置*/
            overflow: hidden; /*消除子元素浮动对父元素的影响*/
            color: #fff;
            background:#999;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>西红柿首富</h1>
        </div>
        <div class="page-main">
            <div class="aside">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut obcaecati a illum optio soluta expedita aperiam numquam, laudantium illo impedit natus dolore ducimus pariatur nostrum necessitatibus itaque nihil eligendi. Officiis.
                </p>
            </div>
            <div class="content">
                <h2>西红柿首富影评</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum doloremque non, perspiciatis modi sunt illo eveniet! Culpa quibusdam voluptatem laborum vel, nemo quidem ducimus impedit ad, perferendis rerum ab nostrum.
                </p>
            </div>
        </div>
        <div class="page-footer">
            <h2>西红柿首富很棒</h2>
        </div>
    </div>
</body>
</html>

布局实例1

4.5 浮动相关CSS属性总结

float 值: none(默认) /left /right
clear 值: none(默认) /both /left /right

4.6 浮动布局小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局实例</title>
    <style>
        /*通用的设置*/
        /*把一些元素自带外边距和内边距去掉*/
        * {
            margin: 0;
            padding: 0;
        }
        /*设置所有的字体大小和字体的类型，并将文本内容进行居中，需要设置其他字体的大小可以以该字体的倍数进行设置*/
        body {
            font:12px 'Microsoft YaHei',sans-serif;
            text-align: center;
        }
        
        /*设置整体的宽度，并让其居中，这样其内部所有的元素就可以显示在其宽度内*/
        .container {
            width: 1000px;
            margin: 0 auto;
        }
        
        /*设置左或右浮动，需要设置浮动的元素直接通过选择器进行引用即可*/
        .left {
            float: left;
        }
        .right {
            float: right;
        }

        /*将背景颜色设置为灰色，需要将背景颜色设置为灰色的直接通过选择器进行引用即可*/
        .bg {
            background: #ccc;
        }

        /*消除元素对后面元素的影响，需要设置的直接通过选择器进行应用即可*/
        .clearfix {
            height: 10px;
            clear: both;
        }
        /*设置边框，需要用的直接应用即可*/
        .border {
            border: 1px solid #ccc;
        }

        /*end 通用设置*/

        /*page-header 页头*/
        /*通过margin设置块状元素之间的距离*/
        .logo {
            width: 200px;
            height: 100px;
            margin-right: 10px;
        }

        .banner1 {
            width: 580px;
            height: 100px;
            margin-right: 10px;
        }
        .banner2 {
            width: 200px;
            height: 100px;
        }

        /*end page-header*/

        /*page-nav 导航*/
        .page-nav {
            height: 40px;
        }
        /*end page-nav*/

        /*page-main*/
        
            /*page-content*/
        .page-content {
            width: 790px;
        }
        .page-aside {
            width: 200px;
        }
        .item01 {
            width: 388px;
            height: 198px;
        }
        .item02 {
            width:188px;
            height: 198px;
            margin-right:10px;
        }
        .item02-last {
            margin-right: 0px;
        }
            /*endpage-content*/
            
            /*page-aside 侧边栏*/
        .item03 {
            height:128px;
        }
            /*endpage-aside*/
        


        /*end page-main*/

            
        /*page-footer 页脚*/
        .page-footer {
            height: 60px;
        }
        /*end page-footer*/


    </style>
</head>
<body>
    
    <div class="container">
        <!--页头-->
        <div class="page-header">
            <div class="left bg logo">LOGO</div>
            <div class="left bg banner1">BANNER01</div>    
            <div class="left bg banner2">BANNER02</div>    
        </div>
        <!--end 页头-->
            
        <div class="clearfix"></div>
        
        <!--页面导航-->
        <div class="bg page-nav">
            导航    
        </div>
        <!--end 页面导航-->

        <div class="clearfix"></div>
        
        <!--页面主体，里面分为 左边的主要内容和右边的侧边栏-->
        <div class="page-main">
            <!--主要内容-->
            <div class="left page-content">
                <div class="row">
                    <div class="left border item01">栏目一</div>
                    <div class="right border item01">栏目二</div>
                </div>

                <div class="clearfix"></div>

                <div class="row">
                    <div class="left border item02">栏目三</div>    
                    <div class="left border item02">栏目四</div>    
                    <div class="left border item02">栏目五</div>    
                    <div class="left border item02 item02-last">栏目六</div>    
                </div>

            </div>

            <!--侧边栏-->
            <div class="right page-aside">
                <div class="border item03">栏目七</div>
                <div class="clearfix"></div>
                <div class="border item03">栏目八</div>
                <div class="clearfix"></div>
                <div class="border item03">栏目就</div>
            </div>
        </div>
        <!--end 页面主体结束-->

        <div class="clearfix"></div>
            
        <!--页脚-->
        <div class="bg page-footer">页脚</div>
        <!--end 页脚-->
    </div>
</body>
</html>

布局实例2

5 定位

5.1 相对定位

使用相对定位的盒子,会相对于它原来的位置,通过偏移指定的距离,到达新的位置
使用相对定位的盒子,仍在标准流中,它对父块好兄弟盒子没有任何影响

.box {
    position: relative;
    top: 10px;
    left: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .box {
            width:150px;
            height: 150px;
            border:2px solid red;
            background: #ccc;

            /*设置为相对定位的元素*/
            position: relative;
            /*left:100px;
            top:100px;*/
            /*right:20px;*/
            /*bottom: 100px;*/
            left:100px; /*优先级高*/
            /*right:100px;*/
        }
    </style>
</head>
<body>
    <h1>相对定位</h1>
    <hr>

    <div class="box"></div>

    <hr>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facere vel exercitationem, sit saepe ut consectetur molestiae temporibus quasi earum praesentium. Molestiae autem, atque tempore. Veritatis odit ratione autem ipsam.</p>
</body>
</html>

相对定位

5.2 绝对定位

使用绝对定位的盒子以它"最近"的一个"已经定位"的"祖先元素"为基准进行偏移. 如果没有已经定位的"祖先元素", 那么会以浏览器窗口为基准进行定位
绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样

.box {
    position: absolute;
    top: 10px;
    left: 20px
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        #box {
            width: 800px;
            padding: 20px;
            border: 2px solid red;

            /*设置相对定位*/
            position: relative;
            /*position: absolute;*/
        }
        p {
            border:1px solid #ccc;
            padding: 20px;
        }

        #inner {
            width: 100px;
            height:100px;
            background: #f90;
            
            /*绝对定位*/
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
    <h1>绝对定位</h1>
    <hr>

    <div id="box">
        
        <div id="inner">绝对定位</div>
        
        <hr>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, vitae veritatis porro perferendis harum sed minima eos exercitationem, praesentium id corporis deserunt eligendi laboriosam aliquid eius nesciunt temporibus a incidunt.
        </p>
    </div>
</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现元素 在页面中 水平和垂直都居中</title>
    <style>
        .box {
            width: 400px;
            height: 300px;
            background: pink;
        
            /*水平居中 */
            /*margin:100px auto;*/
            
            /*绝对定位*/
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left:-200px; /*负 元素宽度的一半*/
            margin-top:-150px; /*负 元素高度的一半*/
        }
    </style>
</head>
<body>
    

    <div class="box">
        是的发生发的
    </div>
</body>
</html>

元素水平垂直居中

5.3 固定定位

以浏览器窗口为基准窗口滚动时,依然保持位置不变

.box {
    position: fixed;
    top: 10px;
    left: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同志</title>
    <style>
        #nav {
            width:100px;
            height: 200px;
            background: pink;

            /*设置固定定位 脱硫文档流*/
            position: fixed;
            /*position: absolute;*/
            /*left:20px;
            top:50px;*/
            right:20px;
            bottom:30px;
        }
    </style>
</head>
<body>
    <h1>固定定位</h1>
    <hr>


    <div id="nav"></div>

    <hr>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam similique ex omnis excepturi voluptas deserunt ea nihil fugiat veritatis sapiente hic inventore, harum possimus vitae, ipsam explicabo aut architecto ipsum.
    </p>

    <div style="height:2000px"></div>
</body>
</html>

固定定位

5.4 空间位置

使用css属性 z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index 仅能在定位元素上奏效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空间位置</title>
    <style>
        .box01 {
            position: relative;
            width: 200px;
            height: 200px;
            background: pink;

            /*设置z-index*/
            z-index:100;
        }

        .box02 {
            position: absolute;
            width: 300px;
            height: 100px;
            background: red;
            left: 10px;
            top: 20px;

            /*不服*/
            z-index: 1000;
        }
    </style>
</head>
<body>
    
    <div class="box01">box01 相对定位 老子就想在上面</div>
    <div class="box02">box02 绝对定位</div>
</body>
</html>

元素的空间位置

5.5 定位相关CSS属性总结

position static(默认值) /relative /position /fixed
top
left
right
bottom
z-index auto(默认值)/数字

6 浏览器兼容性

6.1 浏览器分类

主流浏览器(原生浏览器)

拥有独立内核的浏览器被称为主流浏览器

chrome 内核 blink 早期的chrome使用apple的开源内核 webkit. 我们依然习惯上称呼chrome的内核为webkit
safari 内核 webkit
IE 内核 Trident
Firfox 内核 Gecko
Opera v12.17以前采用 Presto 内核。后来紧跟chrome的步伐，使用chrome的内核成为了壳浏览器

壳浏览器

在某浏览器内核之上增加相应的辅助功能，并改变其名称与外观的浏览器

opera、360安全、360极速、UC、搜狗、猎豹、QQ浏览器、2345浏览器、淘宝浏览器等

6.2 浏览器对HTML5和CSS3的兼容性情况

HTML5需要 IE9以及以上版本的IE浏览器支持
CSS3不同的模块对浏览器的兼容程度各不相同。对于IE浏览器，肯定需要IE9以及以上的浏览器支持
chrome、firefox浏览器一般都会自动更新，所以兼容性特别棒！
手机浏览器，大多使用webkit内核，兼容性较好。关键是手机上没有IE！
目前的国产浏览器，多采用双内核，使用chrome内核的时候兼容性较好

6.3 兼容技巧

设置IE使用最新的渲染引擎

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

让双核浏览器默认使用webkit内核

<meta name="renderer" content="webkit">

让IE8识别HTML5新增标签

<!--[if lt IE 9]>
    <script src="/html5shiv/dist/html5shiv.js"></script>
<![endif]-->