第三十九节 便签群组通配等选择器
标签选择器（TAG选择器）
CSS:div{} HTML： <div></div>
使用的场景：去掉某些标签的默认样式 复杂的选择器中，如层次选择器
群组选择器（分组选择器）:可以通过逗号的方式,给多个不同的选择器添加统一的CSS样式,来达到代码的复用.
CSS：div，p，span{}
通配选择器:*{ } -→div,ul,li,p,h1,h2…{ } (注意:尽量避免使用通配选择器,因为会给所有的标签添加标签,慎用)(使用场景:去掉所有标签的默认样式时)
第四十节 层次选择器
后代 M N {}
父子 M＞N {}
兄弟 M~N {} 当前M下面的所有N标签
相邻 M+N {} 当前M下面相邻的N标签
第四十一节 属性选择器
| 选择器 | 说明 |
|---|---|
| M[attr] | M元素选择指定为attr属性的集合 |
| M[attr=value] | M元素选择指定为attr属性和value值的集合 |
| M[attr*=value] | M元素选择指定为attr属性并且包含值为value的集合 |
| M[attr^=value] | M元素选择指定为attr属性并且起始值为value的集合 |
| M[attr$=value] | M元素选择指定为attr属性并且结束值为value的集合 |
| M[attr1] [attr2] | M元素选择满足多个属性的集合 |
M[]{}
=:完全匹配
*=:部分匹配
^=:起始匹配
$=:结束匹配
[][][]可以用来组合
第四十二节 伪类选择器
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
M:伪类
link ：访问前的样式（只能添加给a标签）
visited ：访问后的样式（只能添加给a标签）
hover ： 鼠标移入时的样式 （可以添加给所有标签）
active ：鼠标按下时的样式 （可以添加给所有标签）
link visited只能给a标签加，hover和active可以给所有的标签加。
如果四个伪类都生效，一定要注意顺序:LVHA。
一般网站只这样去设置:a{} a:hover{}。
网站删除缓存快捷键：ctrl+shift+delete
after、:before 通过伪类的方式给元素添加一段文本内容，使用content属性
checked、:disabled、:focus 都是针对表单元素的
<!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>
a:link{color: gold;}
a:visited{color: blanchedalmond;}
a:hover{color: yellow;}
a:active{color: green;}
:disabled{width: 100px;height: 100px;}
:focus{color: blue;}
:checked{width: 100px;height: 100px;}
</style>
</head>
<body>
<a href="#" >这是一个Demo</a>
<input type="checkbox" disabled>
<input type="checkbox" checked>
<input type="text" focus>
</body>
</html>
结构性伪类选择器
nth-of-type()、:nth-child()
角标是从1开始的，1 表示第1项，2表示第2项|n值 表示从0到无穷大
nth-of-type、first-of-type、last-of-type、 only-of-type、
child去掉of与type相同
第四十三节 CSS样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性 inherit值）
<!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>
div{ width: 60px;height: 60px; border: 2px red solid;}
p{border:inherit;}
</style>
</head>
<body>
<div>
<p>这是一个Demo</p>
</div>
</body>
</html>
第四十四节 单一样式的优先级
相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
单一样式优先级
style行间 > id > class > tag > * > 继承
| 样式 | 权重 |
|---|---|
| style行间 | 1000 |
| id | 100 |
| class | 10 |
| tag | 1 |
第四十五节 import群组等优先级
!important
提升样式优先级，非规范方式，不建议使用
不能针对继承的属性进行优先级的提升
标签+类与单类
标签+类 > 单类
群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高
第四十六节 层次的优先级
层次优先级
权重比较
ul li .box p input { } 权重：1+1+10+1+1
.hello span #elem{ } 权重：10+1+100
约分比较 （约去相同优先级的标签）
ul li .box p input { } → li p input{ }
.hello span #elem{ } → #elem{ }
第四十七节 CSS盒子模型
组成：content→padding→border→margin
物品 填充物 包装盒 盒子与盒子之间的间距
centent：内容区域 width和height组成的
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
背景颜色会填充到margin以内的区域（不包括margin区域）。
文字会在content区域。
padding不会出现负值，margin是可以出现负值的。
第四十八节 box—sizing改变盒模型
盒尺寸，可以改变盒子模型的展示形态。
默认值： content-box：width、height → content
border-box：width、weight → content padding border
使用场景：不用计算一些值 解决一些百分比的问题
第四十九节 盒模型之margin叠加问题
margin叠加问题
出现在上下margin同时存在的时候。会取上下中较大的作为叠加的值。
解决方案：BFC规范 只给一个元素添加间距
### 第五十节 盒模型之margin传递问题
margin传递问题
margin的传递问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
解决方案：BFC规范 给父容器加边框 margin换成padding
第五十一节 CSS盒子模型之扩展
盒子模型的一些问题
margin左右自适应是可以的，但是上下自适应是不行的。（实现上下自适应，在第二大部分）
width、height不设置的时候 ，对盒子模型的影响，会自动去计算容器的大小，节省代码。
扩展
margin左右自适应是可以的，但是上下自适应是不行的。（实现上下自适应，在第二大部分）
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>Document</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-color: #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……
独占一行
支持所有样式
不写宽的时候，跟父元素的宽相同
所占区域是一个矩形
inline: span、a、em、strong、img……
挨在一起的（不独占一行）
有些样式不支持，例如：width、height、margin、padding
不写宽的时候，宽度由内容决定
所占的区域不一定是矩形
内联标签之间会有空隙，原因：换行产生的
inline-block: input、select……
挨在一起，但是支持宽高
注：布局一般用块标签，修饰文本一般用内联标签
第五十四节 按内容划分标签
按内容
flow：流内容
metadata：元数据
sectioning：分区
heading：标签
phrasing：措辞
enbedded：嵌入的
interactive： 互动的
第五十五节 按显示划分标签
按显示
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容（img、input…）
非替换元素：将内容直接告诉浏览器，将其显示出来（div、h1、p…）
第五十六节 display显示框类型
display : block inline inline-block none…
区别：display:none 不占空间的隐藏 visibility:hidden 占空间的隐藏
第五十七节 标签嵌套规范
块标签可以嵌套内联标签
块标签不一定能嵌套块标签
内联标签不能嵌套块标签（a标签是个例外）
需要按照规范组合的标签：ul、li、dl、dt、 dd、table、tr、 td…
块能够嵌套内联
< div >
< span >< /span >
< a href=“#” >< /a >
< /div >
块嵌套块
< div >
< div >< /div >
< /div >
特殊:
错误的写法:
< p >
< div >< /div >
< /p >
内联是不能嵌套块
错误的写法:
< span >
< div>< /div >
< /span >
特殊:
正确的写法:
< a href=“#” >
< div >< /div >
< /a >
第五十八节 overflow溢出隐藏
overflow :visible（默认），hidden，scroll，auto
x轴、y轴
overflow-x、overflow-y针对两个轴分别设置
第五十九节 透明度与手势
该部分主要介绍如何调节透明度与手势
1.调节不透明度： opacity：0（透明）~1（不透明）
注：占空间，所有的子内容也会透明
rgba（）：0~1
注：可以让指定的样式透明，而不影响其它样式
2.手势： cursor：手 default：默认箭头
自定义手势： 图片： .cur .ico（格式）
cursor ：url（#），auto；
第六十节 最大最小宽高
min-width、max-width
min-height、max-height
百分比单位：换算→以父容器的大小进行换算的
一个容器怎么适应容器的高：容器加height：100%；body:100%；html:100%;
html,body{height:100%;}
.contrainer{height:100%;}
第六十一节 CSS默认样式
没有默认样式的:div、span
有默认样式的:
body->marign : 8px
h1 -> margin : 上下 21.440px font-weight : bold
p->margin :上下16px
ul ->margin :上下16px padding :左40px 默认点:list-style : disc
a->text-decoration: underline;
第六十二节 CSS重制样式
*{margin:0; padding:0;}
优点:不用考虑哪些标签有默认的margin和padding
缺点:稍微的影响性能
body,p,h1,ul{ margin:0; padding:o;}
ul{ list-style : none;}
a{ text-decoration: none; color:#999;}
img{dispaly:block}
问题的现象:图片跟容器底部有一些空隙。内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-align: baseline;基线对齐方式,默认值
img{ vertical-align:bottom;}解决方式是推荐的
写具体页面的时候或一个布局效果的时候：写结构 CSS重置样式 写具体样式
第六十三节 float浮动概念及原理
文档流
文档流是文档中可显示对象在排列时所占用的位置。
float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列left、right、none（默认）
第六十四节 float注意点
注会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给块元素添加，但也可以给内联元素添加
第六十五节 清除float浮动
上下排列:clear属性,表示清除浮动的,left、right、both
嵌套排列:
固定宽高:不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素。
overflow : hidden (BFC规范),如果有子元素想溢出，那么会受到影响。
display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签:不推荐,会多添加一个标签。
after伪类:推荐，是空标签的加强版，目前各大公司的做法。
（cleaar属性只会操作块标签，对内联标签不起作用）
第六十六节 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: #666;}
h1,h2,h3{font-size: 16px;}
.l{ float: left;}
.r{ float: right;}
.clear:after{ content:"";display: block;clear: both;}
#main{width: 400px;margin: 30px auto;}
#main .h22{font-size:10px ;height: 25px;line-height:25px ;font: 700;padding-left: 30px;background: url(../素材图片/背景色.webp)repeat-x;}
#mian ul{overflow: hidden; margin-top: 9px;}
#main li{margin-bottom: 5px;}
#main .div1{border: 1px grey solid;width: 100px;height: 100px;padding-left: 20px;}
#mian .div1 img{margin: 2px;}
#main .div2{width:200px;margin-left: 14x;}
#main .div2 h2{line-height: 30px;}
#main .div2 p{line-height:30px ;}
</style>
</head>
<body>
<div id="main">
<h2 class="h22">电影热门</h2>
<ul>
<li class="clear">
<div class="l div1">
<a href="">
<img src="https://gitee.com/YHX2016/blogimage/raw/master/img/p2879787106.webp" alt=""width="100px" height="100px"></a>
</div>
<div class="l div2">
<h2>西线无战事 Im Westen nichts Neues</h2>
<p> 该片改编自埃里希·玛利亚·雷马克撰写的同名经典小说，讲述在第一次世界大战期间，保罗·鲍曼和同学莱尔、米勒参加了德国国民志愿兵，被派往前线与法军作战。在战场上，他们目睹到了残酷的饥饿、血腥和死亡，战争的荒谬无情让保罗从迷恋战争到心灰意冷。 <a href="https://movie.douban.com/subject/3042261/?tag=%E7%83%AD%E9%97%A8&from=gaia">[详细]</a>
</p>
</div>
</li>
<li class="clear">
<div class="l div1">
<a href="">
<img src="https://gitee.com/YHX2016/blogimage/raw/master/img/p2881661637.webp" alt=""width="100px" height="200px">
</a>
</div>
<div class="l div2">
<h2>地狱尖兵</h2>
<p> 在一名呼啸山庄战士的带领下，冲锋队面临着一项艰巨的任务:控制市中心的高楼大厦。坦克和装甲运兵车本应让任务变得轻松，但被大型迫击炮和无人机所掩盖的激烈抵抗却削弱了攻击的优势。战斗水平不断上升，远程炮兵发出了强有力的声音，任务一步一步地解决了。除了越来越少的人在靶场，当敌人决定摧毁高楼大厦时，任务似乎根本不可能完成。<a href="https://movie.douban.com/subject/36118263/">[详细]</a>
</p>
</div>
</li>
<li class="clear">
<div class="l div1">
<a href="">
<img src="https://gitee.com/YHX2016/blogimage/raw/master/img/p480747492.webp" alt=""width="100px" height="100px">
</a>
</div>
<div class="l div2" >
<h2>肖申克的救赎 The Shawshank Redemption</h2>
<p>一场谋杀案使银行家安迪（蒂姆•罗宾斯 Tim Robbins 饰）蒙冤入狱，谋杀妻子及其情人的指控将囚禁他终生。在肖申克监狱的首次现身就让监狱“大哥”瑞德（摩根•弗里曼 Morgan Freeman 饰）对他另眼相看。瑞德帮助他搞到一把石锤和一幅女明星海报，两人渐成患难 之交。很快，安迪在监狱里大显其才，担当监狱图书管理员，并利用自己的金融知识帮助监狱官避税，引起了典狱长的注意，被招致麾下帮助典狱长洗黑钱。偶然一次，他得知一名新入狱的小偷能够作证帮他洗脱谋杀罪。燃起一丝希望的安迪找到了典狱长，希望他能帮自己翻案。阴险伪善的狱长假装答应安迪，背后却派人杀死小偷，让他唯一能合法出狱的希望泯灭。沮丧的安迪并没有绝望，在一个电闪雷鸣的风雨夜，一场暗藏几十年的越狱计划让他自我救赎，重获自由！老朋友瑞德在他的鼓舞和帮助下，也勇敢地奔向自由。<a href="https://movie.douban.com/subject/1292052/">[详细]</a>
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
加油吧!少年!
扫一扫
2198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
