一.显示模式分类
1.块级标签
- 独占一行显示
- height、width、line-height、font、margin、padding可正常设值
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）
2. 行内元素
- 在同一行上显示
- height、width、line-height、font、margin-top、mragin-bottom、padding-top、padding-bottom不能正常设值，但可用设置margin-left、margin-right、padding-left、padding-right
- 元素的宽度就是它包含的文字或图片的宽度。
3. 行内块元素(img,input等)：
- 在同一行上显示
- 元素的宽度就是它包含的文字或图片的宽度
- height、width、line-height、font、margin、padding可正常设值
- img标签默认宽度是图片的宽度，input宽度也有自己的默认宽度(比较特殊)
二.显示模式转换
1.转换方式
- 行内元素→块级元素(display:block;)
- 行内元素→行内块元素(display:inline-block;)
- 块级元素→行内元素(display:inline;)
- 块级元素→行内块元素(display:inline-block;)
- 行内块元素→行级元素(display:block;)
2. 注意
- 行内块元素XXX 行内元素 (无法转换成功，行内块元素转换为行内元素是没必要的，只需不设置块级特有的属性那么就是行内元素)
三.CSS特性
1.层叠性
-
介绍
- 在权重相同的情况下，在同一个标签中样式发生冲突，后面定义样式会将前面定义的样式给覆盖掉
-
注意
-
只跟定义的顺序有关，与调用的顺序无关
-
如果外部样式引用在内嵌样式
<style>标签后，也会把<style>中冲突的样式覆盖掉(但实际开发中link标签引用外部样式都会在
-
2. 权重
-
比较
- 浏览器默认样式<继承样式<通配符(*)<标签选择器<类选择器|伪类选择器|属性选择器<ID选择器<行内样式<!important
-
注意
- 权重可以叠加(不能越级)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 假如ID选择器为A等级、类选择器为B等级、标签选择器为C等级 */
/* 权重从大到小排序 */
/* 当权重一样时，会发生层叠 */
/* 先比较最高权重A的数量，当A数量一致再比较B数量，如果B数量一致就比较C数量，直接比较出结果为止 */
#container div.box p.content {} /* 1A2B2C */
#container .box p.content {} /* 1A2B1C */
#container div.box .content {} /* 1A2B1C */
#container .box .content {} /* 1A2B */
#container .content {} /* 1A1B */
.container .box .content {} /* 3B */
.container .box p {} /* 2B1C */
</style>
</head>
<body>
<div id="container">
<div class="box">
<p class="content"></p>
</div>
</div>
</body>
</html>
3.继承性-
- 介绍：在默认情况下，如果子元素没有设置样式，那么该子元素会受父元素的样式影响
- 可继承的属性：color、text-系列、font-系列、line-系列、cursor
- 特殊例子（某些可继承的属性在个别标签中无法正常继承）
- h1~h6：自带font-size的em值、font-weight:bold
- a：自带color值
四.伪类
1.L V H A(以a标签为例)
-
a:link
- 设置标签的默认样式
- 建议用a{}代替
-
a:vistited
- 设置标签被访问过后的样式(a标签被点击后)
- 只能设置有关颜色的样式
-
a:hover
- 设置鼠标悬停在标签上时的样式
-
a:active
- 设置标签被激活时的样式(鼠标移到a标签上，按住鼠标左键不放)
2. 注意
- 以上4个伪类必须按照 L V H A 顺序写
- :hover可以单独使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link {
color: black;
text-decoration: none;
font-size: 16px;
}
a:visited {
color: black;
}
a:hover {
color: yellowgreen;
}
a:active {
color: red;
}
</style>
</head>
<body>
<a href="#">超链接</a>
</body>
</html>
3.其他伪类
-
选择器:focus{}
- 当标签获取焦点时设置该标签的样式
-
:empty{}
- 查找内容为空的标签(不能带空格，编辑器中标签不能换行)
-
:not(选择器)
- 排除选择器中的元素
-
选择器:target
*● 当点击某个a标签跳转到选择器所选中的标签时，改变所选中标签的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 当输入获得焦点时，把背景颜色变为灰色 */
input:focus {
background-color: gray;
}
/* 查找没有two类样式并且没有内容的div标签，并设置其样式 */
div:not(.two):empty {
width: 200px;
height: 100px;
background-color: pink;
}
/* 当点击某个a标签跳转到id值为one的元素时，该元素背景颜色变为黄色 */
.one:target {
background-color: yellow;
}
</style>
</head>
<body>
<input>
<br>
<a href="#one">跳转</a>
<div class="one" id="one"></div>
<div></div>
</body>
</html>
五.背景(background)
1.backgrund-color
- 背景颜色,默认值为透明transparent
2. backgrund-image
- 背景图片,使用url(图片路径) 引用图片
3. backgrund-repeat
- 背景图片平铺方式
- repeat 默认值横向和纵向都平铺
- no-repeat 不平铺
- repeat-x 横向平铺
- repeat-y 纵向平铺
4.backgrund-position
- 背景图片相对于容器的位置,默认左上角(值left|right|top|bottom|center)
- 当背景图片位置设置一个值的时候，第二个默认值是center
- 当设置背景图片位置出现具体数字，第一个值代表水平方向，第二个值代表垂直方向
- 当容器大小大于图片时是指定图片在容器中显示的位置
- 当容器小于图片时，可以指定图片哪部分在容器中显示，常用于精灵图裁剪(第3、4点原理一样，可以把容器放大了思考)
5. 精灵图裁剪与logo常用做法例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精灵图裁剪</title>
<style type="text/css">
.logo {
display: block;
width: 87px;
height: 35px;
/* 第一个值负数表示背景图片往左移动，正数往右移动 */
/* 第二个值负数表示背景图片往上移动，正数往下移动 */
background: url(qq.png) no-repeat -349px -110px;
/* logo超链接内容移除,大网站都是用这种方法做logo */
/*原理：正数的缩进，文字会往右移动，即使缩进很多像素也会自动换行在页面中显示，
而负数的缩进就会往左移动，设置超多像素后就会在那一行超出浏览器可视区域，达到隐藏的效果
*/
/* 通过把内容溢出容器(方法好多)，再用overflow:hidden;也可以移除超链接内容,*/
text-indent: -10000px;
}
</style>
</head>
<body>
<a class="logo" href="#">搜索网</a>
</body>
</html>