1选择器的优先级
每种选择器都有一个权重值，权重值越大，优先级越高;权重值一样的时候谁后写，谁的优先级高
标签选择器：0001(1)
class选择器：0010(2)
id选择器: 0100(4)
群组选择器: 单独看每个选择器的权重
后代选择器: 每个单独的选择器的权重和
内联样式表的优先级永远最高
2标准流
css主要用来对网页中的内容进行布局和设置样式。
2.1标准流
标准流： 网页中的内容在没有写样式的时候，默认的布局方式，我们就叫标准流
在标准流中不同类型的标签布局方式不一样：
a.如果是块级标签，一个标签占一行(无视宽度)，默认的宽度是父标签的宽度，默认高度是内容的高度，并且设置宽度和高度有效
b.如果是行内标签，一行可以显示多个，默认的宽度和高度都是内容的宽度和高度，设置宽度和高度无效
c.如果是行内块标签，一行可以显示多个，默认的宽度和高度都是内容的宽度和高度，设置宽度和高度有效.
2.2.标签的默认分组
块级标签：h1~h6, p, table, ol, ul , dl, li, div....
行内标签: font, input, img, a, select, textarea, span...
3 display属性
display属性值代表的是标签的类型：
1.block : 块标签
2.inline : 行内
3.inline-block : 行内块
默认情况下，我们的标签只有行内的和块的，没有行内块的。可以通过修改display属性值来修改标签类型
注意：使用行内块的时候，有一个没有办法修复的坑。行内块到其他标签之间有一个间隙，而且这个间隙不能消除。
所以不到万不得已不使用行内块
!--1.块标签变成行内标签-->
<p style="background-color: lightpink; display: inline; width: 200px;">我是段落</p>
<p style="background-color: lightblue; display: inline;">我是段落2</p>
!--2.块标签变成行内块标签-->
<p style="background-color: lightpink; display: inline-block; width: 200px;">我是段落3</p>
<p style="background-color: lightblue; display: inline-block; height: 60px;">我是段落4</p>
!--3.行内转换成块-->
<a href="", style="display: block;background-color: darkcyan;">a1</a>
<a href="">a2</a>
4浮动
4.1浮动（float）
left：左浮动 - 先上再左
right：右浮动 -先上再右
1.浮动会脱标（脱离标准）-之前标准流中的布局方式无效,
脱离标准流布局样式：所有标签都可以一行显示多个，默认大小是内容的大小，设置宽高有效
布局原则，努力的向浏览器的左上角靠，先上再左
利用浮动脱标进行布局
<div style="background-color: green; height: 150px;"></div>
<div style="background-color: orange; float: left;width: 50%;height: 300px;"></div>
<div style="background-color: deeppink;float: right;width: 25%;height: 600px;"></div>
<div style="background-color: blue;float: right;width: 25%;height: 600px;"></div>
<div style="background-color: red;float: left;width: 50%;height: 300px;"></div>
5文字环绕
被文字环绕的标签浮动；文字对应的标签不浮动（环绕的宽度需大于被环绕的宽度）
<div style="width: 200px;height: 100px;float: left;background-color: green;">
被环绕
</div>
<p style="width: 250px;background-color: yellow;">渥太华我让他就和我俄国人沃尔hi哦胳膊上 惹人who提whit oh国防部独守空房公布数据公布舞台然后我i合同委托任务</p>
6清除浮动
6.1.高度塌陷
指的是清除因为浮动而产生的高度塌陷问题 - 父标签不浮动，子标签浮动就会产生高度塌陷问题
6.2清除浮动
a.添加空盒子 - 在高度会塌陷的父标签中的最后添加一个空的div,并且设置这个空的div的样式的clear为both
b.overflow - 选中高度塌陷的标签，设置样式的overflow的值为hidden(父标签中不能设置高度)（经常用到）
c.万能清除法 - #div1:after{display:block;content:"";visibility:hidden;clear:both;height:0;}
#div1{zoom:1} 除了选择器要改变，后面的都一样
<div id="" style="height: 120px;background-color: red;"></div>
<div id="div1" style="background-color: green;overflow: hidden;">
<div style="height: 200px;width: 200px;background-color: deeppink;float: left;"></div>
<div style="height: 100px;width: 150px;background-color: yellow;float: right;"></div>
<!--清除浮动-->
<!--<div style="clear: both;"></div>-->
</div>
<div style="height: 120px;background-color: blue;"></div>
7定位
7.1定位属性
left - 标签的左边到指定位置的距离（左间距）
right- 标签的右边到指定位置的距离（右间距）
top - 标签的顶部到指定位置的距离（上间距）
bottom- 标签的底部到指定位置的距离（下间距）
7.2position属性
position属性--设置标签定位的时候的参考对象（相对谁去定位）
initial/static（默认值）-不相对任何对象定位
absolute(绝对定位) - 相对于第一个非initial/static的父标签进行定位
relative（相对定位）-相对当前标签在标准流中的位置进行定位
(注意：一般把一个标签的position设置为relative是为了让当前标签的子标签可以相对自己定位)
fixed-相对于浏览器进行定位
sticky -当网页中的内容超过一屏（需要滚动），相对浏览器定位，当网页中的内容没有超过一屏（不需要滚动），相对标准流的位置进行定位（注意:一般只针对最后一个标签）
注意：定位也会让标签脱标，不管怎么脱，标签都是按脱流的方式进行布局（一行显示多个，设置宽高有效，默认大小是内容下大小）
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div3{position: absolute;}
#div1{
position:absolute;
right: 10px;
}
span{position: absolute;
left: 10px;}
</style>
</head>
<body>
<!--absolute-->
<div id="div3" style="width: 500px;height: 3500px;background-color: #0000FF;">
<div id="div1" style="width: 100px;height: 100px;background-color: deeppink;">
<span style="width: 100px;height: 100px;background-color: green;">全额付清把握和非</span>
</div>
</div>
<!--relative-->
<style type="text/css">
#div5{position: relative;left: 200px;right: 200px;}
</style>
<div id="div4"style="background-color: black;width: 100px;height: 100px;">
</div>
<div id="div5"style="background-color: palevioletred;width: 200px;height: 200px;">
</div>
<!--fixed-->
<style type="text/css">
#div6{position: fixed;
right: 0px;
bottom: 0px;}
</style>
<div id="div6"style="background-color: black;width: 150px;height: 80px;">
<a href="">回到顶部</a>
</div>
<style type="text/css">
#div10{position: sticky;
bottom: 0px;}
</style>
<div id="div10" style="width: 100%; height: 60px; background-color: darkkhaki">
</div>
</body>
</html>
8盒子模型
html中所有在网页上可见的标签都是盒子关系，有固定的结构：所有可见的标签都是由：内容、padding、border和margin组成，其中内容、padding、border是可见的，margin不可见；
8.1.内容（content） -
a.设置width和height就是在设置内容的大小；
b.标签中添加内容也是添加到content中的
c.设置背景颜色，会作用于内容
8.2.padding-
a.通过padding相关属性设置padding的大小（4个方向）
b.设置背景颜色也会作用于padding
8.3.border -
a.通过border相关属性设置border的大小（四个方向）
b.边框的颜色需要单独设置
8.4.margin -
a.通过margin相关属性设置margin的大小
b.不可见，但是占位
<body>
<style type="text/css">
div{
=====1.设置内容大小======
width: 100px;height: 100px;background-color: darkgoldenrod;
=========2.设置padding大小=====
/*同时给4条边添加padding*/
padding: 20px;
/*分别给不同边设置padding*/
padding-left: 20px;
padding-top: 50px;
=========3.border======================
/*a.同时给四条边添加border
border：宽度 风格 颜色
样式-solid（实现）/dashed（虚线）/dotted(点划线)/bouble(双线)
*/
border: 2px solid red;
/*单独设置不同边的边框*/
border-left: 2px dotted red;
==========4.margin======================
/*a.同时给四条边添加margin*/
margin: 100px;
margin-left: 50px;
}
</style>
<div id="">
python
<a href="">内容</a>
</div>
</body>
网友评论