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>
效果展示
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
