web前端学习第三周

续上周 CSS选择器

3.标签选择器（tag选择器）
css:div{}
html:<div>

#text{background:red;}
<p id="text"><p>

使用场景：

去掉某些标签默认样式时
复杂的选择器中，如层次选择器
(较麻烦）
4.群组选择器(分组选择器）
css:div,p,span{}

div,#text,title{background:red;}

（可通过都好的方式，给多个不同的选择器添加CSS样式添加统一样式，来达到代码的复用,方便了很多)
5.通配选择器
*{ } - - > div, ul ,il, p, h1,h2…{ }

*{border:1px red solid;}

注:慎用，网页会给所有标签添加样式
使用场景：
去掉所有标签的默认样式时
6.层次选择器

后代 M N { }包含关系

 <style>ul li {border: grey solid;}</style>

夫子 M>N{ } 上下级包含关系

 <style>#list>li {border: grey solid;}</style>

兄弟 M~N{ } 同级关系，当前M下面的使用兄弟N标签，有顺序要求先M后N

<style>div ~ h2{background-color: lightskyblue;}</style>

相邻 M+N{ } 当前m相邻的N标签，也有顺序要求，M和M下方唯一一个N

 <style>div + h2{background-color: lightskyblue;}</style>
<div>块</div><h2>二级标题</h2><p>段落</p>

7.属性选择器

= : 完全匹配与*=: 部分匹配的区别：

<!DOCTYPE html>
<html lang="en"><style>div[class=search]{background:red;}/*指定div标签中有class=search属性的背景变红*/</style>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>aaaa</div><div class="box">bbb</div><div class="search">cc</div><div class="search-bottom">d</div>
</body>
</html>

但是如果在”=“之前加上一个”*“就不需要完全符合条件，只要含有search就符合条件

 div[class*=search]{background:red;}

^= : 起始匹配与$= : 结束匹配的区别：

 <div class="search-bottom">d</div><div class="bottom-buttom">e</div>

[ ][ ][ ]:组合匹配

8.伪类选择器
M:伪类{ }
:link（访问前的样式）a:link{color:aqua} <a href="#">这是一个链接</a>
:visited（访问后的样式）a:link{color:blue} <a href="#">这是一个链接</a>
:hover（鼠标移入时的样式） div:hover{background: blue;} <div> </div>
:active（鼠标按下时的样式） div:active{background: blue;} <div> </div>
例：

<!DOCTYPE html>
<html lang="en"><style>div{width:100px;height:100px;background:purple;}div:hover{background: blue;}</style>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div></div>
</body>
</html>

效果：
原始样貌

鼠标移入后

link visited只能给a标签加，hover和active都可以
如果伪类都生效，则顺序为：L V H A
一般网站都只设置:a{} a:hover{}
shift+delete清除记录

:after、:before（文本内容的排序通过伪类的方式给元素添加一段文本内容，使用content属性方便分开执行任务）

div:after{content:"world"}
<div>hellow</div>

(会显示：hellow world)

:checked、:disabled、:focus（都是针对表单元素的)

 :checked{width: 80px;height: 80;}<input type="checkbox"><input type="checkbox"><input type="checkbox">

效果图：
点击前
点击后

结构性伪类选择器
nth-of-type()
nth-child()
角标是从1开始的，1表示第一项，2表示第二项 | n值表示从0到无穷大

<!DOCTYPE html>
<html lang="en"><style>
li:nth-of-type(n){background: yellow;}</style>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li></li><li></li><li></li><li></li><li></li></ul>
</html>

效果：

（所有行(n行）变黄了）
如果：

li:nth-of-type(2n){background: yellow;}
li:nth-of-type(2n-1){background: yellowgreen;}

则会：

first-of-type（行首变化）
last-of-type（行末变化）
only-of-type（只在存在一行时生效）

CSS文字样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承

CSS优先级

1.相同样式优先级
后面优先级较高，但不建议出现重复设置样式的情况

例：
div{color:red;}div{color:blue;}
结果为：蓝色

2.内部样式与外部样式
内部样式与外部样式优先级相同，如果设置了相同样式，那么后写的引入方式优先级较高（同上）
3.单一样式优先级（权重：等级）

style行间>id>class>tag>*>继承

注：

style行间权重1000

id 权重100

class权重 10

tag 权重 1

4.!improtant
提升样式优先级(非规范方式 ，慎用，且不能针对继承的属性进行优先级提升）
5.标签+类与单类
标签+类>单类
6.群组优先级
群组选择器与单一选择器优先级相同，后写优先级较高
7.层次优先级
1.权重比较
ul il.box p input{}---->1+1+10+1+1(无论多少个1加在一起等级都小于10）
2.约分比较
ul il .box p input{}
与hello span #elem{}比较，同等级约去---->li p input{}与#elem{}比较

CSS盒子模型

组成：content（物品）–>padding（填充物）–>border（包装盒）–>margin（盒子与盒子的间距)

content:内容区域，width和height组成

   <style>#box{width: 200px;height: 200px;background: yellow;border: 20px yellowgreen solid;}</style>
</head>
<body><div id="box">这是一个盒子</div>
</body>

效果：

padding：内边距（内填充）

 padding: 30px;

(字与盒子之间就会有空隙）

padding：内边距（内填充）

只写一个值：30px（上下左右）
写两个值：30px 40px(上下、左右）
写四个值：30px 40px 50px
60px（上、右、下、左）

单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom

margin：外边距（外填充）

只写一个值：30px（上下左右）
写两个值：30px 40px(上下、左右）
写四个值：30px 40px 50px
60px（上、右、下、左）

单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom

注：

1.背景色填充到margin以内的区域（背包客margin区域）
2.文字在content区域添加
3.padding不能为负数，而margin可以为负数

box-sizing:
盒子尺寸，可以改变盒子模型的展示形态
默认值：
content-box:width、height–>content
border-box:width、height–>content padding border

box-sizing:border-box;

使用的场景：

不用再去计算大小（自动分配）
解决一些100%的问题

盒子模型的一些问题：
1.margin叠加问题
出现在上下margin同时存在的时候（左右没有该问题）–>会去上下中值较大的作为叠加的值
解决方案：

BFC规范
只给一个元素添加间距

2.margin传递问题
只出现在嵌套的结构中，只针对margin-top的问题
解决方案：

BFC规范
給父容器加边框
margin换成padding
扩展：
1.margin自适应居中，margin左右自适应是可以的，但是上下自适应的不行的
2.width、height不设置的时候，盒子模型会自动计算其大小，节省代码

盒子模型嵌套联系

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>boxe</title><style>#box1{width: 350px;height: 350px;border: 1px black dashed;padding: 27px;}#box2{border: 5px #d7effe solid;padding: 20px;}#box3{background: #ffa0df;padding: 41px;}#box4{border: 1px white dashed;padding: 3px;}#box5{border: 1px white dashed;padding: 49px;}#box6{width: 100px;height: 100px;background: #96ff38;border: #fcff00 5px solid;}</style>
</head>
<body><div id="box1"><div id="box2"><div id="box3"><div id="box4"><div id="box5"><div id="box6"></div></div></div></div></div></div></body>
</html>

效果展示：

标签分类

按类型

block:div,p,ul,li,h1…
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占的区域不一定是矩形
inline:span,a,em,strong,img…
1.挨在一起
2.有些样式不支持，例如：width,height,margin,padding
3.不写宽的时候，宽度由内容决定
4.所占的区域不一定是矩形
5.内嵌标签之间会有空隙（换行时所产生）
inline-block:input,select…
1.挨在一起，但支持宽高
注;布局一般用块标签，修饰文本一般用内嵌标签
按内容

按显示
替换元素：浏览器根据元素的标签和属性，来决定元素的具体内容
img,input…
非替换元素：将内容之间告诉浏览器，将其显示出来
div,h1,p…

display显示框类型

display: block inline inline-box none…
区别：
display: none 不占空间的隐藏
visibility: hidden 占空间的隐藏

标签嵌套规范

1。块标签可以嵌套内联标签

<div>
<span></span>
</div>

2.块标签不一定能嵌套块标签

<div>
<div></div>
</div>

但是！下面为错误写法：

<p>
<div></div>
</p>

3.内联标签不能嵌套块标签（a标签为例外）

<span>
<div> </div>
</span>

特殊：

<a href="#">
<div></div>
</a>

溢出隐藏

overfollow:

visible：默认
hidden
scroll
auto
x轴，y轴（overfollow-x、overfollw-y，针对两个值分别设置）

透明度与手势

opacity：0（透明）~1（不透明）
注：可以让指定的样式透明，而不影响其他样式

cursor:手势
defauit：默认监听

要实现自定义手势：

准备图片： ,cur .ico
cursor： url(./img/cursor.ico），auto；

最大、最小宽高

强化了对百分比单位的理解

min-width,min-height
max-width,max-height

%单位：换上->己父容器的大小进行换算
如何让一个容器适应屏幕的高：
容器加height:100%;body:100%;html:100%;
html,body{height:1005；}
.contrainer{height:100%;}

CSS默认样式

没有默认样式的：div,span
有默认样式的：

body->margin:8px
h1->margin:上下21.440px
h1-> font-weight:boid
p->margin:上下16px
ul->maegin:上下16px
padding:左 40px

默认点：

list-style:disc
a->text-decoration:underline;

CSS reset:

*{ margin:0; padding:0; }

优点：不用考虑哪些标签有默认的maigin和padding
缺点：稍微影响性能

ul{ list-style:none; }

a{ text-decoration:none; color:#666; } img{ display:block; }

img{display:block}

问题的现象：图片跟容器底部有些空隙，
内联元素的对齐方式的按照文字基线对齐的，而不是文字底线
vertical-align:baseline;（基线对齐方式，默认值）
img(vertical-align:bottom;}(解决方式是推荐的）

flot浮动

脱离文档流，延迟父容器靠左或靠右进行排列
left,right,none

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{border: 1px gray solid;}#box1{width: 100px;height: 100px;background-color: yellow;float: left;} #box2{width: 200px;height: 200px;background-color:yellowgreen;}       </style>
</head>
<body><div id="box1"></div><div id="box2"></div>
</body>
</html>

效果展示:左浮动（黄色方块覆盖了绿块)：

若body内都采用浮动：

 #box1{width: 100px;height: 100px;background-color: yellow;float: left;} #box2{width: 200px;height: 200px;background-color:yellowgreen;float:left}

注：

只影响后面的元素
内容默认值提升半层
默认值由内容决定
换行排列
主要给块元素添加，但也可以给内嵌元素添加

利用clear属性清除float浮动

（clear属性之后操作块标签，对内联标签不起作用）

上下排列：clear属性，表示清除浮动的，left,right,both
嵌套排列
固定宽高：无法固定宽高
父元素浮动：会影响后面元素
overflow:hidden（BFC规范）如果有子元素想要溢出，则会受影响
display:inline-block（BFC规范）父容器会影响后面的元素
设置空标签：会添加多一个标签
以上方法都不推荐使用
after伪类：空标签的加强版（推荐）

float制作页面小练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}ul{ list-style: none;}img{display: block;}a{text-decoration:none ;color: gray;}h1,h2,h3{font-size: 16px;}.l{float: left;}.r{float: right;}.clear{content:"";display: block;clear:both;}#main{width: 466px;margin: 20px auto;}#main .title{height: 23px;line-height: 23px;font-size: 23px;font-weight: bold;padding-left: 5px;color: rgb(253, 138, 205);}#main ul{overflow: hidden;margin-top:13px r}#main li{margin-bottom:22px ;}#main .pic{width: 150px;border: 2px solid pink;}#main .pic img{width: 150px;margin: 2px;float: left;}#main .content{width: 300px;font-size: 14px;line-height: 25px;border: 2px solid pink;padding: 4px;}</style>
</head>
<body><div id="main"><h2 class="title">忍野忍</h2><ul><li class="clear"><div class="l pic"><a href="#"><img src="r.png"alt=""></a></div><div class="r content"><p>忍野忍是西尾维新创作的轻小说《物语系列》及其衍生的动画、漫画等作品的登场角色。作为吸血鬼的本名姬丝秀忒·雅赛劳拉莉昂·刃下心（日语：キスショット・アセロラオリオン・ハートアンダーブレード；Heartunderblade刃下心。<a href="#">[详细]</a></p></div></li></ul></div>
</body>
</html>

效果展示