进入python的世界_day44_前端——CSS的学习（边框、定位、浮动、溢出解决、堆叠等）
一、CSS之调整边框
1.边框
# 左
border-left-width: 30px;
border-left-style: solid;
border-left-color: coral;
# 上
border-top-color: coral ;
border-top-width: 30px;
border-top-style: solid;
# 右
border-right-color: coral ;
border-right-width: 30px;
border-right-style: solid;
# 底
border-bottom-color: coral ;
border-bottom-width: 30px;
border-bottom-style: solid;
——————————————————————————————————
# 可以连写
# 如果上下左右都想一致，可以缩写
border: 30px solid coral
2.画圆
border-radius: 50%;
二、CSS之调整展示——DISPLAY
display:none # 不展示，也让出位置，但是文档结构中还能看到
display:inline # 让块儿标签设置为一行展示
display:block # 让标签设置为块儿标签的特点——可调长宽
display:inline-block # 结合2.3，能让标签行内展示也能设置长宽
————————————————————————————————————————
ps:调整页面布局一般不用display
visibility：hidden # 单纯的隐藏，位置还在
三、补充小知识快捷使用
1.创建多个标签（单级、同名）
标签名*个数 然后按TAB确认即可生成
2.创建某标签，并且每个该标签内还有包着标签
标签名*个数>标签名*个数 然后按TAB确认即可生成 #大于号就是父子级别的关系，可以无限包
3.更加精准的创建标签，属性、值都可以打上
标签名*个数>标签名*个数>a.ci#d666{值} 然后按TAB确认即可生成
！！！这样就给a标签封好了class 还有id 还有数据值，ID因为是唯一记得手动改下哈
四、CSS之页面布局——float
主要用来左页面布局
如何理解：
我们至前面写的前端代码，都是躺在一个水平平面上的，如果添加了浮动，被装饰的元素会浮在空中，浮起来的元素没有块级儿一说，本身多大就只能占多大。
案例：
未浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 100px;
background-color: green;
/*float: left;*/
}
.c2{
width: 100px;
height: 100px;
background-color:bisque;
/*float: right;*/
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
添加浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.c2{
width: 100px;
height: 100px;
background-color:bisque;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
塌陷问题
浮动的标签,浮起来了,原本框他们的标签框没东西框,就塌陷了
解决方法:
1.再写一个标签,设置高度占位
2.再写一个标签,封 clear : 禁止左边或者右边(地面或者空中)不能有浮动的元素
标签名 {
clear :left
}
3.通用方法
编写一个类,封一个处理浮动带来影响的CSS代码,一旦谁塌陷,就给谁加上这个类,现在的前端工程师基本都是这样提前准备好
.clearfix:after/befor {
content:'';
disaplay:block;
clear:both
}
五、盒子模型
上图也可以在网页检查视图中查看到某标签的样式中查看
1.margin
注意,浏览器的会自带8px的margin,一般情况下我们在写网页的时候,先去把body的margin给消掉
# 全改
body {
margin: 0;
}
# 上下
body {
margin: 10px,20px;
}
# 上,左右,下
body {
margin: 10px,20px,30px;
}
# 上,右,下,左
body {
margin: 10px,20px,30px,40px;
}
!!!注意,两个标签之间,设置margin,以长的为标准,不叠加
标签内嵌调整:
标签名 {
margin: 0 auto
}
# 注意,这样调只能调水平的移动
2.padding
调整标签内的文字和标签框上下左右的相对距离
参数的规律和margin一样
六、溢出解决
数据长度超出了标签框的大小,就是溢出现象
overflow:visible # 超出部分还是显示
overflow:hidden # 超出部分直接隐藏
overflow:auto # 加上滚动条,左右都有
overflow: scroll # 上下滚动条
解决头像问题
overflow:hidden
+
某标签 img {
max-width:100%
}
七、定位
可以参考小米官网,发现有的标签鼠标悬浮上去会显现出其他的子标签,子标签位置以父标签为准,并且整个网页的右部中间有几个固定着的标签按钮,如何实现这些功能?(JS动态还没学,先弄清楚CSS的原理)
关键字:
position : 定位词
所有标签默认都是静态，static
relative相对定位
absolute绝对定位 需要已经定位过的父标签，子标签改这个属性就是跟着父标签,注意定要父标签有定位过!不能是默认的静态!
fixed固定定位,是以浏览器为参照,固定在浏览器的某个位置,不随上下轮动缩放改变位置
八、z-indexd 堆叠设置
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。某种意义上的网页弹小窗
注意:
要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。
这个值,自己设置,但是哪个图层的数字大,就在谁的上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.cover {
background-color: rgba(0,0,0,0.31);
position: fixed;
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: 100;
opacity: 50%;
}
.modal {
height: 200px;
width: 400px;
background-color: lightpink;
border: 3px solid palegreen;
z-index: 101;
position: fixed;
left: 38%; /*这里设置是以该块儿框的左上角顶点为准*/
bottom: 40%;
}
.modal_in{
position: absolute;
left: 18%;
bottom: 30%;
}
.dibu {
position: relative;
left: 80px;
}
</style>
</head>
<body>
<div>我是主页面</div>
<div class="cover">
<p>我是遮罩</p>
</div>
<div class="modal">
<form class="modal_in" action="">
<p>
账号：
<input type="text">
</p>
<p>密码：
<input type="password">
</p>
<p class="dibu">
<input type="submit" value="登录">
<input type="reset" value="重置">
<a href="http://www.baidu.com" target="_blank">注册</a>
</p>
</form>
</div>
</body>
</html>
效果:
九、opacity 透明度调整
这个关键字,啥的透明度都可以调整,比如文字,块,图片,都可以!
代码:
opacity: 百分比数值
浙公网安备 33010602011771号