十四、css定位与DIV布局-盒子模型

一、盒子模型

http://www.runoob.com/css/css-boxmodel.html
margin 外边距
padding 内边距
border 边框
content 内容

二、知识点补充

群组选择器

选择器继承包含

p标签不能嵌套

上课代码

<!DOCTYPE html>
<html>
<head>
    <title>组合选择器介绍</title>
    <meta charset="utf-8">
    <style type="text/css">
        /*包含选择器写法  后代选择器*/
        /*div ul li a{   
            text-decoration: none;
        }*/
        .mydiv1 a{  /*指div 里面的所有a标签*/
            text-decoration: none;
        }
        h1,h2,h3,h4,h5,h6,ul,p{   /*群组选择器*/
            margin: 0px;
            padding: 0px;
        }
        .myclass>a{  /*子元素选择器  直接指定  myclass下面直接的a标签*，不是里面包含了就是*/
            text-decoration: none;
            font-size: 20px;
            color: red;
        }

        /*选择相邻兄弟  只有h1 跟p之间才会有 此效果*/
        h1 + p {margin-top:100px;}
        
    </style>
</head>
<body>

    <div class="mydiv1">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品介绍</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系客服</a></li>
        </ul>
        <a href="#">我是外面的a</a>
    </div>


    <div>
        <h1>我是h1</h1>
        <h2>我是h1</h2>
        <h3>我是h1</h3>
        <h4>我是h1</h4>
        <h5>我是h1</h5>
        <h6>我是h1</h6>

        <ul>
            <li>aaaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
        <p>我是p我是p1我是2</p>
    </div>


    <p>我是p1</p>
    <p>我是p2<p>我是p3</p></p>

    <div class="myclass">
        <a href="#">我是>外面的</a>
        <div><a href="#">我是>div里面的a</a></div>
    </div>

    <h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<h1>我是h1111</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

</body>
</html>

二、元素定位

定位相关属性
1.行级标签块级标签详细说明
2.属性: display
3.属性: position

属性值说明：

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

属性说明图

display更多属性请看:http://www.runoob.com/cssref/pr-class-display.html

float

1.文档流说明
2.脱离文档流
3.清除浮动
overflow说明:
1.2.3.4.5.6.7.8

position

三、常用html css间的初使状态