Web前端从入门到放弃 第三周学习笔记
声明：本学习内容来自于 千锋教育_Web前端最全教程从入门到精通（HTML+CSS全套） ！
三十、CSS选择器
标签选择器（TGA选择器）
CSS：div{}
html：<div>
div{} <div> 形成映射
<head>
<style>
div{background-color: red;}
</style>
</head>
<body>
<div>这是一个块</div>
</body>
群组选择器
可以通过逗号的方式，给不同的选择器添加统一的CSS样式，来达到代码的复用
<head>
<style>
div,#text,.box{background-color: red;}
</style>
</head>
<body>
<div>这是一个块</div>
<h2 class="box">这又是一个块</h2>
<p id="text">这是一个段落</p>
</body>
通配选择器
*{ } → div , ul , li , p , h1 , h2 . . . { }
** 注：尽量避免使用，因为会给所有标签添加样式。
使用场景：去掉所有标签的默认样式时**
<head>
<style>
*{background-color: red;}
</style>
</head>
<body>
<div>这是一个块</div>
<h2 class="box">这又是一个块</h2>
<p id="text">这是一个段落</p>
</body>
层次选择器
- 后代：M N { } （在M中筛选N）
<head>
<style>
ul li{border: 1px red solid;}
</style>
</head>
<body>
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
</ol>
</body>
- 父子：M > N { }
<head>
<style>
#list > li{border: 1px red solid;}
</style>
</head>
<body>
<ul id="list">
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
</ol>
</body>
- 兄弟：M ~ N { } (筛选当前M下的所有兄弟N标签)
<head>
<style>
div ~ h2 {background-color: red;}
</style>
</head>
<body>
<h2>这是还是一个标题</h2>
<div>这是一个块</div>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<h2>这又是一个标题</h2>
</body>
- 相邻：M + N { } （筛选当前 M 下相邻 的N的标签）
<head>
<style>
div + h2 {background-color: red;}
</style>
</head>
<body>
<h2>这还是一个标题</h2>
<div>这是一个块</div>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<h2>这又是一个标题</h2>
</body>
属性选择器
M[ 属性 ]{ } 找所有标签中对应属性的元素
=：完全匹配
*=：部分匹配（只要含有该标签的就会被筛选：如box1、box-1）
^=：起始匹配（拥有部分匹配的功能，且从该标签开始至该标签结束的上一个标签筛选）
$=：结束匹配（拥有部分匹配的功能，仅筛选该该标签的最后一个）
[ ] [ ] [ ] = ：组合匹配（div [ ] [ ]选择多个标签）
属性表
div[class=box]{background-color: red;}
<div>aaa</div>
<div class="box">bbb</div>
<div class="box-1">ccc</div>
伪类选择器
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
M:伪类 { }
: link 访问前的样式（只能给a标签）
:visited 访问后的样式（只能给标签）
: hover 鼠标移入时的样式
:active 鼠标按下时的样式
注：
1.link visited只能给a标签加，hover和active可以给所有的标签加。
2.如果四个伪类都生效，一定要注意顺序:L V H A 。
3.一般网站只这样去设置: a { } :hover { } 。
div:hover{background-color: red;}
a:active{background-color: green;}
...
<a href="">链接</a>
<div>aaa</div>
:after 、:before 给元素添加一些文本内容，使用content属性（可实现部分字词的单一样式）
: check 、 :disabled、:focus 都是针对表单元素的
结构性伪类选择器
: nth-of-type（数字或n值） nth-child（数字或n值）
数字从1开始，表示第n项 | 而n值 则表示从0到无穷大
: first-of-type（第一项） :nth-child
: last-of-type（最后一项） :nth-child
: only-of-type（标签仅一个的时候生效） :nth-child
type和child的区别：若某一块中的其一标签与所筛选标签不同，用child则无法选中该不同标签，只能选中所筛选的标签
三十一、CSS样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承（默认不能，但可以设置继承属性 inherit ）
布局不能继承：（边框）
div{width: 300px;border: 1px red solid;}
<div>
<p>这是一个段落</p>
</div>
文字样式可以继承:（红色的文字）
div{width: 300px;border: 1px red solid;color: red;}
<div>
<p>这是一个段落</p>
</div>
设置inherit属性后布局的继承：
div{width: 300px;border: 1px red solid;color: red;}
p{border:inherit;}
<div>
<p>这是一个段落</p>
</div>
三十二、CSS优先级
-
相同样式优先级：
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。 -
内部样式与外部样式：
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。 -
!important
提升样式优先级，非规范方式，不建议使用（不能对继承属性提升优先级） -
单一样式优先级
style行间 > id > class > tag(标签) > *(通配) > 继承
注:style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
-
标签 + 类 ＞ 类 的优先级
-
群组选择器（同一等级下）
群组选择器与优先选择器的优先级相同，靠后的优先级高 -
层次优先级
- 权重比较(权重累加比较，权重累加是等级关系，不是进制关系，不能通过权重累加使得11个权重1大于权重10)
ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100 - 约分比较（约掉相同的，再进行权重比较）
注：尽量写三层以内的，避免过于繁杂
- 权重比较(权重累加比较，权重累加是等级关系，不是进制关系，不能通过权重累加使得11个权重1大于权重10)
三十三、CSS盒子模型
组成：content（物品） → padding（填充物） → border（包装盒） → margin（盒间距）
-
content：内容区域 由width和height组成
-
padding：内边距（内填充）
一个值：30px（上下左右）
两个值：30px 40px（上下、左右）
四个值：30px 40px 50px 60px（上、右、下、左）
单一样式只能写一个值：
padding：left
padding：right
padding：top
padding：bottom -
margin：外边距（外填充）
-
注︰
1.背景颜色会填充到margin以内的区域。
2.文字会在content区域。
3.padding不能出现负值，margin是可以出现负值。 -
box-sizing
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box (默认值) | border-box。盒尺寸，可以改变展示形态
默认值:content-box : width、 height ->content
border-box : width height -> content padding border
使用的场景：
1，不用再去计算一些值
2．解决一些100%的问题 -
盒子模型的一下问题：
-
margin的叠加：
当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有（取其中最大值作为叠加值），左右是没有这个叠加问题的。解决方案：
1.BFC规范
2.想办法只给一个元素添加间距。 -
margin的传递
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。解决方案:
1.BFC规范
2.给父容器加边框。
3.margin换成padding.
-
-
盒模型扩展
-
- narein左右白适应是可以的，但是上下白店应是不行的。（如果想实现上下自适应的话，需要在第二大部分来进行学习）
-
- 不设置content的现象，width、height不设置 的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。
-
-
盒子嵌套练习
<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>
三十四、标签分类
- 按类型
-
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
具有 block 和 inline 的特点
-
注:布局般用块标签，修饰文本-般用内联标签
- 按内容
- Flow :流内容
- Metadata :元数据
- Sectioning :分区
- Heading :标题
- Phrasing :措辞
- Embedded :嵌入的
- Interactive :互动的
内容标签关系图
W3C的参考网站：https://www.w3.org/TR/html5/dom.html
-
按显示
- 替换元素:浏览器根据元素的标签和属住，来决定元素的具体显示内容。
如 img、 input . . .
注意：img属于 inline（不可改变宽高），其又是替换元素，含有某些特性可以使它能改变宽高
- 非替换元素:将内容直接告诉浏览器，将其显示出来。
div、h1、p . . .
- 替换元素:浏览器根据元素的标签和属住，来决定元素的具体显示内容。
-
显示框类型
display: block inline inline- block none …
display:none 作用是隐藏display：none 和 visibility：hidden 的区别:
display: none 不占空间的隐藏
visibility: hidden 占空间的隐藏
div{width: 100px;height: 100px;background: red;display: inline;}
span{width: 100px;height: 100px;background: red;display: block;}
. . .
<div>块1</div>
<div>块2</div>
<span>内联1</span>
<span>内联2</span>
-
标签嵌套规范
- ul 、li
- dl 、 dt 、dd
- table 、 tr 、 td
- 块标签可以嵌套内联标签
<div> <span></span> </div>- 块标签不一定能嵌套块标签
正确： 错误： <div> <p> <div></div> <div></div> </div> </p>- 内联标签不能嵌套块标签
a标签是一个例外
错误： 特殊： <span> <a href=“#”> <div></div> <div></div> </span> </a> -
溢出隐藏
overflow :
visible :默认
hidden
scroll
auto
（x轴、y轴：overflow-x、overflow-y针对两个轴分别设置）
三十五、透明度与手势
- opacity : 0(透明) ~ 1(不透明)
0.5(半透明)
注:占空间、所有的子内容也会透明 - rgba():0~1
注:可以让指定的样式透明，而不影响其他样式 - cursor :手势
default :默认箭头
要实现自定义手势:
准备图片: 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: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 reset
- *{ margin:0; padding:0; }
优点:不用考虑哪些标签有默认的margin和padding
缺点:稍微的影响性能
一个个提取进行重置的方法：body,p,h1,ul{ margin:0; padding:0;} - ul{ list-style : none;} （把前面的点去掉）
- a{ text-decoration: none; color ;#999;} （改变链接的颜色）
- img{ dispaly:block} （解决方法①：把内联变成块）
问题的现象：图片跟容器底部有一些空隙。
原因：内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
解决方法②：vertical-align: baseline; （基线对齐方式，默认值）
img{ vertical- align:bottom;}该解决方式是推荐的 - 写具体页面的时候或一个布局效果的时候:
1.写结构
2.css重置样式
3.写具体样式
关于CSS reset 的链接 https://blog.csdn.net/brain_bo/article/details/81560444
三十九、float浮动
文档流：
文档流是文档中可显示对象在排列时所 占用的位置。
float特性：
加浮动的元素,会脱离文档流,会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素,会挨着浮动的元索进行排列。
-
float（先脱离，再排列）
- left
- right
- none（默认）
-
float注意点
只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列。
主要给块元素添加，但也可以給内联元素添加。 -
利用clear属性清除float浮动
- 固定宽高：不推荐,不能把高度固定死,不适合做自适应的效果。
- 父元素浮动：不推荐,因为父容器浮动也会影响到后面的元素。
- overflow：hidden (BFC规范)，如果有子元素想溢出，那么会受到影响。
- display：inline-block (BFC规范) ,不推荐.父容器会影响到后面的元素。
- 设置空标签：不推荐,会多添加一个标签。
- after伪类：推荐,是空标签的加强版,目前各大公司的做法。（after添进去的内容默认是 内联的 ，而clear属性只会操作快标签，对内联标签不起作用，所以要用display 转成块属性）
floatl练习
<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:366px; margin:20px auto;}
#main .title{ height:23px; line-height: 23px; font-size:12px; font-weight: bold; padding-left:30px;
background:url(./img2/bg_title.png) no-repeat 6px 4px , url(./img2/bg_line.png) repeat-x;
}
#main ul{ overflow: hidden; margin-top:13px;}
#main li{ margin-bottom:22px;}
#main .pic{ width:99px; border:1px solid #c8c4d3; margin-left:5px;}
#main .pic img{ margin:2px;}
#main .content{ width:240px; margin-left:13px;}
#main .content h2{ font-size:12px; line-height: 24px;}
#main .content p{ font-size:12px; line-height: 20px;}
</style>
</head>
<body>
<div id="main">
<h2 class="title">外媒评论精选</h2>
<ul>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="./img2/img.png" alt="">
</a>
</div>
<div class="l content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落...
<a href="#">[详细]</a>
</p>
</div>
</li>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="./img2/img.png" alt="">
</a>
</div>
<div class="l content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落...
<a href="#">[详细]</a>
</p>
</div>
</li>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="./img2/img.png" alt="">
</a>
</div>
<div class="l content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落...
<a href="#">[详细]</a>
</p>
</div>
</li>
</ul>
</div>
</body>
扫一扫
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
