前端学习第三周
一.CSS选择器
1.ID选择器
#elem{ } id=“elem”
<!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>
#div1{background: red;}
#div2{background: blue;}
</style>
</head>
<body>
<div id="div1">这是一个块</div>
<div id="div2">这是另一个块</div>
</body>
</html>
1.在一个页面中,ID值是唯一的。
2.命名规范,字母 ,下划线,中划线,数字(命名的第一位不能是数字)
3.命名方式驼峰写法:searchButton(小驼峰) SearchButton(大驼峰) searchSmallButton
短线写法:search-small-button
下划线写法:search_small_button
<div id="searchButton"></div>
2.CLASS选择器
.elem{ } class=“elem”
<!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>
.box{background: red;}
</style>
</head>
<body>
<div class="box">这是一个块</div>
</body>
</html>
- 1.class选择器可以复用的(一条样式可以作用许多内容)
- 2可以添加多个class样式(用空格来添加)
<style>
.box{background: red;}
.content{font-size: 30px;}
</style>
</head>
<body>
<div class="box content">这是一个块</div>
</body>
</html>
- 3.多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序(先识别CSS中的后一个)
- 4.标签+类的写法:在样式前添加标签,则作用< body>中相同的一类
例子:
<!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>
p.box{background: red;}
</style>
</head>
<body>
<div class="box content">这是一个块</div>
<div class="box content">这又一个块</div>
<p class="box content">这还一个段落</p>
</body>
</html>
则该代码运行结果为段落那一层!
3.标签选择器(TAG选择器)
- css: div{}
- html:< div >
- 使用的场景:
1.去掉某些标签的默认样式时
2.复杂的选择器中,如 层次选择器
4.群组选择器
- css:div,p,span{}
- 可以通过逗号的方式,给多个不同的选择器添加统一的css样式,来达到代码的复用
- 例子:
<!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,#text,.title{background: red;}
</style>
</head>
<body>
<p id="text">这是一个段落</p>
<div>这是一个块</div>
<h2 class="title">标题</h2>
</body>
</html>
5.通配选择器
- #{ } → div,ul,li,p,h1,h2…{ }
- 注:尽量避免使用通配选择器,因为会给所有的标签添加样式,慎用。
使用场景:1.去掉所有标签的默认样式
6.层次选择器
- 后代M N{ }
M,N之间用空格隔开。使得选择M下的N做出样式,可以有作用嵌套内容。
<!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>
#list li{border:1px red solid}
</style>
</head>
<body>
<ul id="list">
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
- 父子 M>N { }
无法嵌套
- 兄弟M~N { }
当前M下面的所有兄弟N标签
- 相邻M+N { }
当前M下面的相邻的N标签
7.属性选择器
- M[attr]{ }
attr为属性
- = :完全匹配
- *=:部分匹配
- ^=: 起始匹配
- $=: 结束匹配
- [ ] [ ] [ ]:组合匹配
<!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[class][id]{background: red;}
</style>
<body>
<div>aaaa</div>
<div class="box" id="elem">bbbb</div>
<div class="search">cccc</div>
<div class="search-button">dddd</div>
<div class="button-search">eeee</div>
</body>
</html>
8.伪类选择器
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
M:伪类{ }
- :link 访问前的样式(只能添加给a标签)
- :visited 访问后的样式 (只能添加给a标签)
- :hover 鼠标移入时的样式 (可以添加给所有标签)
- :active 鼠标按下时的样式(可以添加给所有标签)
如果四个伪类都生效,一定要注意顺序:LVHA
一般网站只这样去设置:a{ } →(用于link visited active)和 a:hover{ }
效果如下:
<style>
a{color: blue;}
a:hover{color: red;}
</style>
</head>
<body>
<a href="1">这是一个链接</a>
</body>
9.after等伪类选择器
- :after, :before 通过伪类的方式给元素添加一段文本内容,使用content属性
after是添加在元素最后边;before是添加在元素的最前面
例:
<style>
div:after{content: "world"; color: red;}
</style>
</head>
<body>
<div>hello </div>
</body>
- :checked, :disabled, :focus 都是针对表单元素的
<style>
:checked{width: 100px; height: 100px;}
:disabled{width: 100px; height: 100px;}
:focus{background: red;}
</style>
</head>
<body>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox" disabled>
<input type="text">
</body>
10.结构伪类选择器
- nth-of-type()
角标是从1开始的,1表示第一项,2表示第二项| n值 表示从0到无穷大
所定义项的第n个
<style>
li:nth-of-type(2n+1){background: red;}
li:nth-of-type(2n){background: blue;}
li:nth-of-type(2){background:green;}
</style>
</head>
<body>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</body>
- nth-child
所有项的第n个
二.CSS继承
- 文字相关的样式可以被继承(颜色,字体大小)
- 布局相关的样式不能被继承(宽高,边框;默认是不能继承的,但是可以设置继承属性inherit值,使得布局样式也可被继承)
继承就是如下:p标签继承div的样式
<style>
div{width: 300px; height: 300px; border: 1px red solid; color: red; font-size:30px ;}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
</div>
</body>
通过设置继承属性改变继承
<style>
div{width: 300px; height: 300px; border: 1px red solid; color: red; font-size:30px ;}
p{border: inherit;}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
</div>
</body>
三.CSS优先级
1.一般样式优先级
- 相同样式优先级:当设置相同样式是,后面的优先级较高,但不建议出现重复设置样式的情况
- 内部样式与外部样式:内部样式与外部样式优先级相同,如果都设置了相同样式,那么后写的引入式优先级高
2.单一样式优先级
style行间 > id > class >tag > * > 继承
style行间 权重 1000
id 权重100
class 权重1 0
tag 权重 1
3.!important选择器
- !important 提升样式优先级,非规范方式,不建议使用。(不能针对继承的属性进行优先级的提升)
如下例子:使得本该运行style的样式变为id
<style>
#elem{color: red !important;}
</style>
</head>
<body>
<div id="elem" style="color:blue ;">这是一个块</div>
</body>
4.标签+类与单类
标签+类 > 单类 (优先级)
例子:块运行div .box样式
<style>
div .box{color: blue;}
.box{color: red;}
</style>
</head>
<body>
<div class="box">这是一个块</div>
</body>
5.群组优先级
群组选择器与单一选择器的优先级相同(相同的选择器),靠后写的优先级高。
6.层次优先级
- 权重比较(比较级别,不看数量)
ul li .box p input{ } 1+1+10+1+1
.hello span #elem{ } 10+1+100
数字相同的级别,类别相同
- 约分比较
ul li .box p input{ } 1+1+10+1+1
.hello span #elem{ } 10+1+100
将相同的类型进行约分,剩下:
li p input{ }
#elem{ }
则#elem{ }层次高
四.CSS盒子模型
1.基本结构
组成:content→padding→border→margin
类比快递(物品→填充物→包装盒→盒子与盒子之间的间距 )
- content:内容区域,width和height组成的
- padding:内边距(内填充)
只写一个值:30px(上下左右)
写两个值:30px 40ps (上下,左右)
写四个值:30px,40px,50px,60px(上,右,下,左)
单一样式只能写一个值:
padding-left
padding-right
padding-top
padding-bottom - margin:外边栏(外填充,填的值代表上下左右空出多px)
用法与padding相同
- 注意:
1.背景颜色会填充到margin以内的区域。
2.文字会在content区域
3.padding不能出现负值,margin是可以出现负值
2.box-sizing改变盒模型
允许你以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值)| border-box
- 盒尺寸:可以改变盒子模型的展示形态/
content-box(默认值): width,height→content(width和height仅由content来分配)
border-box: width,height→content,padding,border(width和height的值由这三个分配)
- 使用场景:
1.不用再去计算一些值
2解决一些百分比的问题
3.盒模型之margin叠加问题
- margin叠加问题:
出现在上下margin同时存在的时候,会取上下中值较大的作为叠加的值。
例子:
其中取30px作为值
<style>
#box1{width: 200px;height: 200px;background: blue;margin-bottom: 30px;}
#box2{width: 200px;height: 200px;background: red;margin-top: 20px;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
- 解决方法
1.BFC规范
2.想办法只给一个元素添加间距(如下所示,使得间距为50px)
<style>
#box1{width: 200px;height: 200px;background: blue;margin-bottom: 0px;}
#box2{width: 200px;height: 200px;background: red;margin-top: 50px;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
4.margin传递
- margin传递问题:
出现在嵌套结构中,只是针对margin-top的问题 - 解决方案:
1.BFC规范
2.给父容器加边框
3.margin换成padding(padding-top添加在父容器内使得容器上部填充,再缩减height的值)
5.CSS盒子模型之扩展
- margin左右自适应是可以的,但是上下自适应是不行的。(如果想实现上下自适应的话,需要后面学习)
例子:
添加margin-left:100px则盒子左边外边距就变成100px
添加margin-left:auto则盒子就会自适应使得左边变为空白
如下代码,使得盒子左右都自适应则盒子自适应居中
<style>
#box{width: 200px;height: 200px;background:red;margin-left: auto;margin-right:auto ;}
</style>
</head>
<body>
<div id="box"></div>
</body>
- width,height不设置的时候,对盒子模型的影响→会自动去计算容器的大小,节省代码 。
五.标签分类
1.按类型
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,挨在一起,但是支持宽高
注:布局一般用块标签,修饰文本一般用内联标签
2.按内容
Flow:流内容
Metadata:元数据
Sectioning:分区
Heading:标题
Phrasing:措辞
Embedded:嵌入的
Interactive:互动的
具体内容:W3C
3.按显示
替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容
img ,input…
<input type="text">
<img src="" alt="">
非替换元素:将内容直接告诉浏览器,将其显示出来
div, h1,p…
<h1>标题</h1>
六.显示框类型
- display属性→主要用来控制元素的布局,通过 display 属性您可以设置元素是否显示以及如何显示。
block
inline
inline-block
none→表示隐藏,指定的标签在页面上不显示
<style>
div{width: 100px;height: 100px;background: red;display:inline-block;}
span{width: 200px;height: 200px;background: red;display: inline-block;}
</style>
</head>
<body>
<div>块1</div>
<div>块2</div>
<span>内联1</span>
<span>内联2</span>
</body>
- display:none与visibility:hidden区别
1.display:none不占空间的隐藏
2.visibility:hidden占空间的隐藏(类似透明效果)
七.标签嵌套规范
ul,li
dl,dt,dd
table,tr,td
- 块能够嵌套内联
<div>
<span></span>
<a href=""></a>
</div>
- 块嵌套块
<div>
<div></div>
</div>
特殊:p标签里面不能写div标签
- 内联是不能嵌套块
错误的写法:
<span>
<div></div>
</span>
正确的写法:
<a href="">
<div></div>
</a>
特殊:a标签里面可以嵌套块
八.overflow溢出隐藏
visible:默认
hidden:截取
scroll:x、y轴滚动条
auto:自动感知 内容多就会出现滚动条
x轴、y轴:overflow-x、overflow-y针对两个轴分别设置
九.透明度与手势
1.opacity
opacity:0(透明)~1(不透明)
0.5(半透明)
<style>
div{width: 100px;height: 100px;background: red;opacity: 0;}
</style>
</head>
<body>
<div>这是一个块</div>
<p>这是一个段落</p>
</body>
注意:占空间,所有子内容也会透明
2.rgba
0~1
可以让指定的样式透明,而不影响其他样式
3.手势
cursor:手势
default:默认 鼠标的样式
要实现自定义手势 ,需要准备图片: .cur、.ico 格式
cursor : url(./img/cursor.ico),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,…
- 有的:
1.body→margin(边距):8px
2.h1→margin:上下 21.440px
font-weight:bold(加粗)
3.p→margin: 上下 16px
padding(内填充):左40px
4.默认点:list-style:disc
5.a→text-decoration:underline
十二.float浮动
1.float浮动概念及原理
- 1.文档流
文档流是文档中可显示对象在排列时所占用的位置 - 2.float特性
加浮动的元素,会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列 - 3.float取值
left
right
none(默认)
<style>
body{border:1px black solid;}
#box1{width: 100px;height: 100px;background: yellow ;float: right;}
#box2{width: 200px;height: 200px;background: red;float: left;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
2.float注意点
- 只会影响后面的元素
如下面所示,只有float下面的blue方块受到影响
<style>
body{border:1px black solid;}
#box1{width: 100px;height: 100px;background: yellow ;}
#box2{width: 200px;height: 200px;background: red;float: left;}
#box3{width: 300px;height: 300px;background: blue;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
- 内容默认提升半层
输入文字在块中
<div id="box3">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
输出结果:
- 默认宽根据内容决定
内容多长,宽就多长
- 换行排列
浮动元素放不下了就换行
<!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>
ul{margin: 0px;padding: 0px;list-style: none;width: 300px;height: 300px;border: 1px solid black;}
li{width: 100px;height: 100px;background: red ;border: yellow 1px solid;box-sizing: border-box;float: left;}
li:nth-of-type(1){height:120px;}
li:nth-of-type(2){height:80px;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
- 主要给块元素添加,但也可以给内元素添加
<!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: 0px;padding: 0px;}
#a2{float: right;}
</style>
</head>
<body>
<ul>
<span id="a1">111</span>
<span id="a2">222</span>
</ul>
</body>
</html>
很少将浮动用于内联
3.清除float浮动
- 上下排列:clear属性→表示清除浮动的,left,right,both(不论浮动是左还是右都清除浮动)
clear属性要与float相同
<style>
#box1{width: 100px;height: 100px;background: red; float: right;}
#box2{width: 200px;height: 200px;background: blue;clear :both;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
- 嵌套排列: