<!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>
盒模型
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- IE盒模型： 添加 <!doctype html> 使用标准盒模型 box-sizing:border-box：通...
