一、盒子模型
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间的初使状态
