第三周学习笔记
一，标签群组通配等选择器
1.标签选择器
也可以叫TAG选择器
div{}
.......
<div>...</div>
注： 我们一般在使用标签选择器的时候，会做一些通用设置
[1]使用的场景
（1）去掉某些标签的默认行为
（2）复杂的选择器中，如层次选择器
层次选择器
ul ....li{}
ol ....li{}
2.群组选择器
使用比较多，不仅可以针对标签选择器，还可以针对其他多种选择器
css:div,p,span{}
代码样例
div,#text,title{background:red}
</style>
<body>
<div>这是一个块</div>
<p id="text">这是一个段落</p>
<h2 class="tittle">这是一个标题</h2>
</body>
</html>
效果
可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用
3.通配选择器(包含所有标签，慎用！)
通配两字就是所有标签的意思
*{}----div,ul,li,p,h1,h2...{}
[1]使用的场景：
（1）去掉所有标签的默认样式时
二，层次选择器
1.基本关系
后代：M N(通过空格隔开) { }
父子：M > N { }
兄弟：M~N { } ：
当前M下面的所有兄弟的N标签
相邻：M + N { } ：
当前M下面的相邻的这一个N标签
三，属性选择器
M[attr] {....}
M代表元素
中括号内是属性
代码样例
div[class]{background:red;}
</style>
</head>
<body>
<div>aaaa</div>
<div class="box">bbbb</div>
<div class="search">cccc</div>
</body>
</html>
注：样式只对body中带有class的语句起作用
___________________
div[class*=search]{background:red}
***在等号前加星号表示部分匹配，只要语句中出现属性关键词即可生效，反之则需要一一对应才可以生效。***
*=部分匹配
=完全匹配
^=起始匹配
$=结束匹配
search-button起始位置
button-search结束位置
可以多属性组合【】【】【】【】…
四，伪类选择器
CSS伪类用于向某些元素添加特殊的效果。
一般用于初始样式添加不上的时候，用伪类来添加。
M:伪类{}
:link
访问前的样子（只能添加给a标签）
：visited
访问后的样式（只能添加给a标签）
：hover
鼠标移入时的样式（能添加给所有标签）
：active
鼠标按下时的样式（能添加给所有标签）
注：
1.如果四个伪类都生效，一定要注意顺序：L V H A
2.一般网站只这样去设置：a{} a:hover{}
:after / :before
通过伪类方式给元素添加一段文本内容并且对它进行一些样式的设置（后/前），使用content内容。
: checked /: disabled(针对表单元素)
:focus（针对表单元素）
获取光标时可以显示的样式
五，结构性伪类选择器
补充
1.：nth-of-type（）：选择性的对某一行添加样式
2.：first-of-type：对第一行添加样式
3.：last-of-type：对最后一行添加样式
4.：only-of-type：只有对应元素在主体中独一无二时才会生效
————————————
1.nth-of-type与nth-of-child的区别
父亲与孩子
六， CSS样式继承
文字相关的样式可以被继承，布局相关的样式不能被继承
div{width:300px,height:300px;border:1px red solid;color:red;font-size:30px;}
p{border:inherit;}
</style>
<body>
<div>
<p>这是一个段落</p>
</div>
</body>
</html>
** [从以上代码可以看出，div后的属性作用与主体中的div,其中只有关于文字的样式可以作用于div中的p标签，这个现象我们叫做样式的继承]**
布局样式默认是不能被继承的，但是可以设置继承属性inherit值
六，CSS优先级
1.相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
2.內部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方
式优先级高。
3.单一样式优先级
style行间>id>class>tag>*>继承
七，优先级【2】
1， ！important
提升样式优先级，非规范方式，不建议使用。(提到无限高)
不能针对继承属性进行优先级的提升
#elem{color:red !important;}
2，标签＋类与单类
标签加类：div.box{color:blue;}
单类:.box{color:red;}
标签加类大于单类优先级
3，群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高。
4，层次优先级
1.权重比较(权重累加比胜负)
仅在自己的等级类累加，等级高的永远高
2，约分比较（相同等级的约掉）
尽量三层以内
八， CSS盒子模型
1. 组成
content(物品)->padding（填充物）->border（包装盒）->margin（盒子与盒子之间的间距）
蓝黄之间为“padding”
盒子模型示意图
——————————
1.content
内容区域
width和heigt组成的
2.padding
内边距（内填充）
number：30px
单一样式只能写一个值
padding-left
padding-right
padding-top
padding-bottom
可单独设置，复合写法有先后顺序
只写一个值 30px（上下左右）
写两个值 30px 40px（上下，左右）
写四个值30px 40px 50px 60px（上右下左）
3.margin：外边距（外填充）
只写一个值 30px（上下左右）
写两个值 30px 40px（上下，左右）
写四个值30px 40px 50px 60px（上右下左）
单一样式只能写一个值
margin-left
margin-right
margin-top
margin-bottom
拓展
背景颜色会填充到margin以内的区域，（不包括margin区域）
————
文字会在content区域。
————
padding不能出现负值，margin是可以出现负值。
九，box-sizing(盒尺寸)
可以改变盒子模型的展示形态
box-sizing box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为 content-box (默认值) | border-box。
content-box：width，height->content（一人独享）
border-box:width,height->content， padding ，border(三者分)
1， 使用的场景
1，不用再去计算一些值
2，解决一些问题(百分比)
input{width:100%;padding:30px;box-sizing:border-box;}
2. 问题
【1】margin叠加问题
出现在上下margin同时存在的时候
会取上下中值较大的作为叠加的值
<style>
#box1{width:200px;height:200px;background:red;margin-bottom:30px;}
#box2{width:200px;height:200px;background:blue;margin-bottom:40px;}
</style>
----------------
解决方案
1，BFC规范
2，想办法只给一个元素添加间距
【2】margin传递问题
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
解决方案：
1.BFC规范
2.给父容器加边框
3.margin换成padding
3.盒模型拓展
[1]margin自适应居中
#box{width:400px;heoght:100px;background:red;margin-left:auto;}（靠右）
-----------
auto:自适应
margin自适应是可以的，但是上下自适应是不行的。
解决方案：
需要在第二大部分学习
[2]不设置content的现象
可以帮助我们节省很多代码资源
width,height不设置对盒子模型的影响
会自动去计算容器的大小，节省代码。
十，标签分类
【1】按类型
（1）block：块
div,p,ul,li,h1…
1.块独占一行
2.支持所有样式
3.不写款的时候和父容器相同
4.所占区域是一个矩形区域
（2） inline：内联
span,a,em,strong,img…
1.挨在一起的
2.有些样式不支持，例如：width,height，margin，padding（某些方向）
3，不写宽的时候宽度由内容决定
4.所占的区域不一定是矩形
5，内联标签之间会有空隙，这是由与代码换行产生的，大部分情况下不需要解决问题，布局一般用块标签，内联一般用于修饰文本。 （给父容器加font-size=0，）
（3） inline-block:内联块
input,select…
1.挨在一起，但是支持宽高
2.保持矩形结构
可以通过控制台查看类型
【2】按内容
可分为：
可以对照理解
www.3.org
【3】按显示
替换元素
浏览器根据元素的标签和属性，来决定元素的具体显示内容。
img,input…
<img src="./img.jpg'' alt="">
<input type="text">
非替换元素
将内容直接告诉浏览器，将其显示出来。
div,h1,p…
十一，显示框类型
div{width:100px；height:100px;background:red;display;inline;}
自行修改显示框类型
display
1. block
2. inline
3. inline-block
4. none(隐藏)
display：none不占空间，visibility:hidden占空间的隐藏
十二，标签嵌套规范
1.块标签可以嵌套内联标签
<div>
<span></span>
<a herf="#"></a>
</div>
2.块标签不一定能嵌套块标签，比如
<p>只能嵌套内联
3.内联是不能嵌套块的，除了
<a href="#">
<div></div>
</a>
------------
a不能嵌套
4.按照规范的标签
ul.li
dl,dt,dd
table,tr,td
十三，溢出隐藏（overflow）
scroll:滚动条
auto：内容多显示滚动条
十四，透明度与手势
opacity：0（透明）~1（不透明）/0.5（半透明）
即使透明也占空间，透明对所有子内容起作用，包括文字
可以对指定内容进行操作，而不影响其他内容
rgba (255,0.0.1)
1就是透明度
cursor:手势
default：默认箭头
鼠标样式
自定义(cur,ico)
cursor:url(./img...ico)
十五，最大最小宽高
%单位换算：换算->以父容器的大小进行换算的
一个容器怎么适应屏幕的高：
容器加height：100%；body：100%；HTML：100%
html,body{height:100%;}
.contrainer{height:100%;}
十五，CSS默认样式
通过控制台可以查看
十七， CSS reset
1.用通配可以不用考虑哪些标签有默认的margin和padding，但是会可能稍微的影响性能
2.图片和容器底部有一些空隙，内联元素的对齐方式是按照文字基线对齐的，而不是文字底线。
img{vertical-align:baseline;}基线对齐方式
baseline/bottomline
十八，float浮动
脱离文档流
1.脱离文档流不会占有原来的空间
2.脱离文档流会离开body
3.浮动元素排不下了会换行排列
十九，清除浮动属性
如何清除浮动？
1.上下排列
用到clear属性，表示清除浮动，有三类（left,right,both）
#box1{width:100px;height:100px;background:red;float:left;}
#box2{width:200px;height:200px;background:blue:clear:left;}
both不用考虑左右问题，比较好
2.嵌套排列
解决方案
clear属性只会操作块标签，不会操作内联标签
clear:after[{content:""；clear；both；display：block;}
扫一扫
811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
