Day53--CSS--03
每日测验
"""
今日考题
1.什么是python的垃圾回收机制
2.你所知道的能够实现单例模式的方式有哪些，尝试着手写几个
3.列举python中常用模块及主要功能，越多越好！
4.简述盒子模型
5.什么是浮动，浮动的作用
ps:每日考题一定要自己动手，自己查询出答案，锻炼自己的复习能力，搜商能力
"""
昨日内容回顾
-
分组与嵌套
# 多个选择器可以并列公用一套css样式 div,p,span {} # 不同选择器之间也可以混合使用 .c1,#d1>span {} -
伪类选择器
a:link {} a:hover {} # 需要记忆 a:active {} a:visited {} input:focus {} # input框获取焦点 -
伪元素选择器
p:first-letter {} # 通过css加文本内容 但是无法选中 p:before {} p:after {} # ps:before和after多用于清除浮动带来的负面影响 -
选择器优先级
""" 选择器相同 就近原则 行内 > id > class > 标签 精确度越高说话越硬 """ ps:!important强制让标签采用你的样式 不推荐使用 -
宽和高
width height # 块儿级标签的宽度不修改的情况下默认占浏览器一整行，块儿级标签的高度也是取决于标签内部的文本的高度 但是可以通过css设置 # 行内标签宽度和高度都是有内部文本决定的 行内标签是无法设置长宽的 无效 -
字体属性
# 字体样式 草书 行书 ... font-family # 字体大小 font-size # 字重 font-weight # 文本颜色 1 直接写颜色英文 2 写颜色编号 #4e4e4e 3 写颜色的三基色 rgb(128,128,128) # 范围0-255 4 可以给颜色加透明度 rgba(128,128,128,0.5) # 范围0-1 ps:可以用pycharm 微信 qq等软件快速的获取你想要的颜色 -
文字属性
# 文字对齐
text-align
center
# 文字装饰 记忆 主要就是用来给a标签去掉自带的下划线
text-decoration
none
# 首行缩进
text-indent
-
背景属性
# 背景色 backgroud-color # 背景图片 background:#fff url() no-repeat center center """ ps:当多个属性名前缀都是相同的情况下 一般都支持简写:只写前缀 """ ps:在调样式的时候 可以借助于浏览器快速的微调，然后讲调整好的参数修改到css样式中 # 背景图片实际应用的案例 -
边框
# 任何一个标签都有上下左右四个方向的边框 border-width border-style border-color 简写 border # 画圆 border-radius:50% -
display属性
# 能够让标签具有自身没有的属性和特征 display none 隐藏 并且原来的位置也没了 inline block inline-block ps:visibility:hidden只隐藏 位置还在 -
css盒子模型
# 1 外边距(标签与标签之间的距离) margin # 2 边框 border # 3 内边距/内填充 padding # 4 内容 content """ body标签默认自带8px的margin margin: 10 上下左右 10 20 上下 左右 10 20 30 上 左右 下 10 20 30 40 上 右 下 左 padding: 10 上下左右 10 20 上下 左右 10 20 30 上 左右 下 10 20 30 40 上 右 下 左 """ -
浮动float
""" 只要是前期页面布局 一般都是用浮动来设计页面 能够让标签脱离正常的文档流漂浮到空中(距离用户更近) 浮动的元素没有块儿级和行内一说 标签多大浮动起来之后就占多大 """
今日内容概要
- 解决浮动带来的影响
- 溢出属性
- 定位
- 验证浮动和定位是否脱离文档流
- z-index模态框
- 透明度opacity
- 简单博客园首页搭建
- JavaScript编程语言开头
今日内容详细
解决浮动带来的影响
# 浮动带来的影响
会造成父标签塌陷的问题 （就是浮动起来之后，脱离了正常的文档流，是飘在了上一层，不在原本的父标签之内了，那么父标签的行高就自动减少了）
"""
解决浮动带来的影响 推导步骤
1.自己加一个div，设置高度，或者设置固定父标签的高度
2.自己加一个div，设置clear属性
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/ （这个标签的左边不能用浮动元素，若是有，那么该标签就会一直往下降，直到左边没有浮动元素了，此时下降的高度正好是浮动元素的高度）
}
3.通用的解决浮动带来的影响方法 （常用这个方法）
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
content: '';
display: block;
clear:both;
}
原理：利用伪元素选择器，在该类标签之后，加上一个内容： "空白内容，显示为块（一行),且左右侧都没有浮动" 的
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""
溢出属性
p {
height: 100px;
width: 50px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见 溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
/*overflow: auto; !*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容*!*/
}
溢出应用--圆形头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
background-color: #4e4e4e;
}
#d1 {
height: 120px;
width: 120px;
border-radius: 50%;
border: 5px solid white;
margin: 0 auto; # 上下外边距为0，左右居中
overflow: hidden; # 溢出部分就隐藏
}
#d1>img {
/*max-width: 100%;*/
/*width: 100%;*/ # 内容占该标签 100%比例
}
</style>
</head>
<body>
<div id="d1">
<img src="111.jpg" alt="">
</div>
</body>
</html>
定位
# 静态 ---- static
所有的标签默认都是静态的static，无法改变位置
# 相对定位 (了解) ---- relative
相对于标签原来的位置做移动
即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。
注意：主要用来方便绝对定位元素找到参照物。
# 绝对定位 (常用) ---- absolute
相对于已经定位过的父标签 (就是设置position 属性值 不是static 的 ) 做移动 (如果没有父标签那么就以body为参照)
eg:小米网站购物车--购物车内容
应用场景：当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
# 固定定位 (常用) ---- fixed
相对于浏览器窗口固定在某个位置
eg:右侧小广告、回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
#d1 {
height: 100px;
width: 100px;
background-color: red;
left: 50px; /*从左往右 如果是负数 方向则相反*/ # 距离左边：多少个像素
top: 50px; /*从上往下 如果是负数 方向则相反*/ # 距离上部：多少个像素
right：50px; # 距离右边：多少个像素
bottom:50px # 距离底部：多少个像素
/*position: static; !*默认是static无法修改位置*!*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动 但是你的性质也已经改变了
*/
}
#d2 {
height: 100px;
width: 200px;
background-color: red;
position: relative; /*已经定位过了*/
}
#d3 {
height: 200px;
width: 400px;
background-color: yellowgreen;
position: absolute;
left: 200px;
top: 100px;
}
#d4 {
position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/
bottom: 10px;
right: 20px;
height: 50px;
width: 100px;
background-color: white;
border: 3px solid black;
}
</style>
</head>
<body>
<!-- <div id="d1"></div>-->
<!--<div id="d2">-->
<!-- <div id="d3"></div>-->
<!--</div>-->
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到顶部</div>
</body>
</html>
ps:浏览器是优先展示文本内容的
验证浮动和定位是否脱离文档流(原来的位置是否还保留)
"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
1.相对定位
# 脱离文档流
1.浮动
2.绝对定位
3.固定定位
对象脱离正常文档流，可以使用top，right，bottom，left等属性进行绝对定位
<!--<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: red;"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照于body-->
<!--<div style="height: 100px;width: 200px;background-color: blue;"></div>-->
<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>
z-index模态框
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。
属性值 描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。
# 强调：
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人；定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用
eg:百度登陆页面 其实是三层结构
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=100) 离用户最近
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.modal {
background-color: white;
height: 200px;
width: 400px;
position: fixed;
left: 50%; # 其实以div框的左上角 为起始位置，去对应 距离左侧50% 所以显示整个框感觉并不是在页面的正中心
top: 50%; # 其实以div框的左上角 为起始位置，去对应 距离顶部50%
z-index: 100;
margin-left: -200px; # 所以整体div框调节，再移动本身div框的一半
margin-top: -100px;
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登陆页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button>点我点我~</button>
</div>
</body>
</html>
不透明度opacity
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体 取值范围是0~1，0是完全透明，1是完全不透明。
opacity: 0.5;
实际操作时
"""
当你在设计页面的时候 先用div划分区域，之后填写基本内容，最后再调节样式
在书写html代码的时候 class、id等属性最好都起的见名知意
"""
作业
今日作业
必做题
1.整理今日内容至博客
2.博客园首页搭建(独立完成)
3.预习js内容:https://www.cnblogs.com/Dominic-Ji/p/9111021.html
浙公网安备 33010602011771号