CSS核心属性
1.选择器优先级
-
每种选择器都有一个权重值，权重值越大，优先级越高
标签选择器：0001（1）
class选择器：0010（2）
id选择器：0100（4）
群组选择器：单独看每个选择器的权重值
后代选择器：每个单独的选择器的权重值的和 -
内联样式表的优先级永远是最高的
2.标准流
- css主要用来对网页内容进行布局和设置样式
2.1.标准流：网页中的内容在没有写样式的时候，默认的布局方式叫标准流
在标准流中，不同类型的标签，布局方式不一样：
如果是块级标签：一个标签占一行（无视宽度），默认的宽度是父标签的宽度，默认高度是内容的高度，并且设置宽度和高度有效
如果是行内标签：一行可以显示多个，默认的宽度和高度都是内容的宽度和高度，设置宽高无效
如果是行内块标签：一行可以显示多个，默认宽度和高度是内容的宽度和高度，设置宽度和高度有效
2.2.标签的默认分组
块级：h1-h6 ；p；table,ol,ul,dl,li
行内标签:font,a,input,img,...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我是标题</h1>
<p style="background-color: red;">我是段落</p>
<font style="background-color: green;">我是font1</font>
<!--练习：使用<br/>的情况下，完成在网页上显示6个a标签，分两行显示，一行3个-->
<div id="">
<a href="">百度</a>
<a>百度</a>
<a>百度</a>
</div>
<div id="">
<a href="">百度</a>
<a>百度</a>
<a>百度</a>
</div>
</body>
</html>
显示如下
image.png
3.display属性
-
display属性的值代表的是标签的类型
1.block - 块标签
2.inline - 行内
3.inline-block - 行内块
默认情况下标签只有块级和行内的，没有行内块的,可以通过修改display属性的值修改标签类型 -
注意：使用行内块的时候没有一个没有办法修复的坑，行内块到其他标签之间有间隙，而且这个间隙不能被修复
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--块标签变成行内标签-->
<p style="background-color: pink; display: inline;">我是段落</p>
<p style="background-color: pink; display: inline;">我是段落</p>
<!--块级标签变成行内块-->
<p style="background-color: pink; display: inline-block; width: 50px;">我是段落</p>
<p style="background-color: pink; display: inline-block; height: 50px;">我是段落</p>
<!--行内转换成块级-->
<a href="" style="display: block; width: 80px; background-color: gold;">百度</a>
<a href="" style="display: block; height: 80px; background-color: gold;">百度</a>
<!--行内转换成行内块-->
<a href="" style="display: inline-block; width: 50px; background-color: gray;">百度</a>
<a href="" style="display: inline-block; height: 50px; background-color: gray;">百度</a>
<div id="" style="background-color: red; height: 30px; width: 100%; ">
</div>
<a style="background-color: yellow; height: 50px; width: 50%; float: left;"></a>
<a style="background-color: blue; float: right; width: 25%; height: 100px;"></a>
<a style="background-color: green;width: 25%; height: 100px; float: right;"></a>
<a style="background-color: pink; width: 50%; height: 50px;float: right;"></a>
</body>
</html>
显示如下
image.png
4.浮动（float）
left：左浮动 - 先上再左
right：右浮动 - 先上再右
4.1.浮动会脱离标准流 - 之前标准流的布局方式无效,
脱离标准流布局方式：所有标签都可以一行显示多个，默认大小是内容大小，设置宽高有效
4.2浮动
<div style="background-color: red; width: 200px; height: 100px;float: left;"></div>
<div style="background-color: green; width: 300px; height: 120px;"></div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
float: left;
width: 50px;
height: 50px;
}
/*a{
float: right;
}*/
.sticky{
position: sticky;
right: 0px;
top: 0px;
background-color: red;
}
</style>
</head>
<body>
<!--1.脱标-->
<!--<p style="background-color: red;">我是段落</p>
<a style="background-color: gold;">我是连接</a>-->
<!--2.浮动-->
<div style="background-color: red; width: 200px; height: 100px;float: left;"></div>
<div style="background-color: green; width: 300px; height: 120px;"></div>
<div class="sticky">我是导航栏!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>
5.文字环绕
- 被文字环绕的标签浮动，文字对应的标签不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="" style="width: 200px; height: 100px; background-color: rgba(0,255,0,0.5); float: left; ">被环绕
</div>
<p style="width: 500px;">大师傅收到货手动阀函数的尽快发货德生科技韩服就收到货科技收到货会计师对话框加速度快解放速度快解放山东矿机反馈圣诞节空间受到可视对讲 回复三等奖很快圣诞节可视对讲就开始说的卡时间段看空间短时间回复</p>
</body>
</html>
显示如下
image.png
6.清除浮动
1.高度塌陷
指的是清除因为浮动而产生的高度塌陷问题 - 父标签不浮动，子标签浮动就会产生高度塌陷问题
2.清除浮动
添加空盒子
a.在高度会出现塌陷的父标签中的最后添加一个空的div <div style="clear: both;"></div>
b.在会出现高度塌陷的父标签中设置样式overflow: hidden;
c.万能清除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除浮动2*/
/*#div1{
overflow: hidden;
}
*/
/*万能清除法*/
#div1:after{
display: block;
clear: "";
visibility: hidden;
clear: both;
height: 0;
}
#div1{
zoom:1;
}
</style>
</head>
<body>
<div id="div1" style="height: 150px;background-color: red;"></div>
<div style="background-color: blue; overflow: hidden;">
<div id="" style="height: 200px; width: 100px; background-color:gold; float: left;"></div>
<div id="" style="height: 100px; width: 100px; background-color:gold; float: right;"></div>
<!--添加空盒子-->
<!--<div style="clear: both;"></div>-->
</div>
<div style="height: 150px;background-color: pink;"></div>
</body>
</html>
显示如下
image.png
7.定位
7.1.定位属性
left - 标签左边到指定位置的距离（左间距）
right - 标签右边到指定位置的距离（右间距）
top - 标签上边到指定位置的距离（上间距）
bottom - 标签下边到指定位置的距离（下间距）
7.2.position属性 - 设置标签定位的时候参考对象（相对谁去定位）
inherit/static（默认值） - 没有定位
absolute - 相对于第一个非inherit/static的父标签进行定位
relative - 相对于当前标签在标准流中的位置定位
(注意：一般把一个标签的position设置为relative是为了让当前标签的子标签可以相对自己定位)
fixed - 相对于浏览器窗口位置
sticky - 当网页中的内容超过一屏（需要滚动），相对浏览器定位，
当网页中的内容没有超过一屏（不需要滚动），相对于标准流位置进行定位（注意：一般针对最后）
注意：定位也会让标签脱标（脱流）\
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a{
position: fixed;
left: 800px;
top: 50px;
}
#q{
width: 100px;
height: 100px;
background-color: green;
position: fixed;
animation: q 5s infinite;
animation-direction: alternate;
}
/*@keyframes q{
0%{background-color: green; top: 0px;}
25%{background-color: brown; top: 100px;}
50%{background-color:red; top: 250px; }
75%{background-color: blue;top: 500px; }
100%{background-color: black; top: 750px;}
}*/
@keyframes q{
from{background-color:green; top: 0px;}
to{background-color:red; top: 500px;}
}
</style>
</head>
<body>
<div style="width: 500px;height: 100px; background-color: gold;"></div>
<div id="a" style="width: 100px; height: 100px; background-color: red;"></div>
<div id="q"></div>
</body>
</html>
8.盒子模型
- html中所有在网页上可见的标签都是盒子模型，有固定的结构
所有可见的标签都是由内容，padding，border，margin组成
其中内容，padding，border可见，margin不可见。
1.content：内容 - a.设置width和height就是在设置内容大小；
b.标签中添加内容也是添加到content中
c.设置背景颜色会作用于content
2.padding - a.通过padding相关属性设置padding大小
b.设置背景颜色，作用于padding
3.border（边框） - a.通过border相关属性设置border大小
b.边框的颜色需要单独设置
4.margin - a.通过margin相关属性设置margin大小
b.不可见但是占位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
/*实线*/
border-style: 3px solid blue;
/*虚线*/
border-style: dashed;
/*点线*/
border-style: dotted;
margin-bottom: 5px;
margin-top: 100px;
}
</style>
</head>
<body>
<div style="width: 100px; height: 100px; background-color: red;
padding: 20px 50px 100px 60px;
">嘿嘿</div>
</body>
</html>
显示如下
image.png
