十四、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间的初使状态

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,166评论 1 91
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,095评论 0 6
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 2,525评论 1 41
  • 2017年7月17 周一 雨天 起床:6:30分,睡觉:11:00 早起打卡152天。 2017年度目标及关键节点...
    熊猫姐阅读 55评论 0 0
  • 最近“时间只负责流动,不负责与你成长”这条长句时常出现在对话人的签名里,刚开始看,觉得他们都在装BB,随着聊天次数...
    有理想的小蝎子阅读 976评论 0 1