盒模型
2016-11-23 本文已影响0人
爱新觉罗狗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style>
/*标签名先择器*/
/*div{
width: 100px;
height: 100px;
background: yellow;
}*/
/*id 选择器*/
#q{
width: 100px;
height: 100px;
background: green;
}
/*class 选择器*/
.w{
width: 200px;
height: 200px;
background: blue;
}
/*群组选择器*/
#laba, .xiao{
width: 200px;
height: 200px;
background: yellow;
}
/*后代选择器,包括子级以及再子级*/
.father div{
width: 200px;
height: 100px;
background: red;
}
/*组合选择器*/
/*既是p标签同时class又为div1，两个条件都满足*/
p.div1{
width: 100px;
height: 100px;
background: pink;
}
/* 选择器的优先级 id选择器 > class选择器 > 标签名选择器 */
/* display：显示 */
/* inline：行标签。强行将所定义的标签改为行标签。*/
/* block：块标签。 强行将所定义的标签改为块标签。*/
/* inline-block：在一行显示，默认是内容撑开宽高的，但是可以设置宽高*/
/* 原理是BFC */
/* BFC 是一个单独布局的小单位 */
/* 如何把元素变为BFC，display:inline-block; */
/* 把容器变成BFC */
overflow: hidden;
-margin , padding , border 的讲解
-行标签不能设置总的margin (border,padding都可以)
-用border画一个三角形
</style>
</head>
<body>
<!-- 相对路径 -->
<img src="img/woman.png" alt="">
<!-- 绝对路径 -->
<img src="http://ossweb-img.qq.com/upload/adw/image/201607/1467668438201324627new.jpg" alt="">
<div>1</div>
<div>2</div>
<div>3</div>
<!-- id选择器在当前页面中，只存在唯一一个id值。 -->
<div id="q">4</div>
<hr>
<div class="w">4</div>
<div class="w">3</div>
<div>2</div>
<div>1</div>
<hr>
<div id="laba">吹喇叭</div>
<div>吹呀吹呀吹喇叭</div>
<div class="xiao">吹箫</div>
<div class="xiao">吹粗粗的萧</div>
<hr>
<div class="father">
<div>左右手</div>
<span>慢动作</span>
</div>
<div>
<div class="div1">1</div>
<p class="div1">2</p>
</div>
</body>
</html>
