day 49-css补充(终结)[浮动和定位]
老师的笔记:
前情回顾:
day49
混乱即阶梯.
1. 前情回顾
HTML
HTTP和HTML
文档机构
<!Doctype html>
HTML
head
<meta>
<title>
<link> icon
<style> 直接写CSS样式
<link> CSS文件
<script> JS文件
body
常用标签:
div
span
h1~h6
a
p
img
form
input
text
password
number
email
radio
checkbox
sumbit
button
reset
select
textarea
label
ul
ol
dl
table
标签属性
id
class
style
input
name
value
type
form
上传文件的话
都记不住,但是都能想起来的那个(课后自己补上)
select
mutiple 多选
selected 默认选中
optgroup 分组显示(label属性=分组名)
checkbox
checked 默认选中
hidden 隐藏
input
disabled
input type=text/password
readonly --> 只读
placeholder --> 提示信息
CSS:
找到标签 修改样式
选择器(找标签):
基本选择器
标签选择器
#ID选择器
.class选择器
*(大包大揽)选择器
层级选择器
后代选择器(空格)
子选择器(>)
毗邻选择器(+)/(label+input)
弟弟选择器(~)
组合选择器(,)
属性选择器
标签可以自定义属性
[egon]
[egon=""]/input[type="button"]
伪类选择器
a:hover(浏览器怎么看)
选择器的优先级:
1.!important 不讲道理
2.内联(直接在标签上写style属性) 1000
3.ID选择器 100
4.class选择器 10
5.标签选择器 1
6.继承的
CSS属性:
color 文本颜色
background 背景
background-color
background-img
background-position(具体数值)
font 字体
font-family
font-size
font-weight
line-height (垂直居中)
text-aligin (水平居中)
border 边框
border-color
border-style
borfer-width
border: 1px solid red;
border-radius
CSS盒子模型:
content (内容)
padding (内填充)
border (边框)
magin (外边距)
margin:0 auto; (块标签的居中)
a
text-decoration=none (去掉下划线)
今日内容:
float(浮动)和position(定位)
overflow-把溢出的东西归纳到边框里面,
直接写作
style="overflow-x:auto"
style="overflow-y:auto"
style="overflow:auto"
{比如我们写一段文字,要把它归到边框里面,然后会有进度条,可以滑动的,就能够阅读全文}
div
{
width:150px;
height:150px;
overflow:scroll;
} for example:
<div style="width:150px;height:130px;
overflow:auto;">
世情薄,
人情恶,
雨送黄昏花易落,
晓风干
泪痕残,
欲笺心事,
独语斜阑,
难,难,难.
人成各,今非昨,
病魂常似秋千锁,
角声寒,夜阑珊,
怕人询问,咽泪装欢,
瞒,瞒,瞒.
</div>
float(浮动)
left
right
none 浮动规则:
浮动只控制自己
如果前面的标签也是浮动的,就挨着放
如果前面的标签不是浮动的,在下一行开始摆放 清除浮动:
clear:
left
right
both
none .clearfix:after {
content: "";
display: block;
clear: "both";
} :after和:before display:
块级标签特点: 独占一行, 可以设置长和宽
内联标签特点: 可以放在一行,不可以设置长和宽,根据内容自适应长和宽 none --> 不显示 block --> 块级 inline --> 内联 inline-block --> 既在一行显示,又能设置长和宽 定位:
relative (相对定位) 根据自己原来的位置来做定位 () absolute (绝对定位)
根据 往上找已经相对定位的元素的左上角 来做定位
(通常配合相对定位使用) fixed (固定定位) z-index 模态弹出框 z-index: 999
z-index: 1000
模态框语法:
z-index:
.cover{
top:0;
right:0;
bottom:0;
left:0;
position:fixed;
background-color:rgba(0,0,0,0.3);
z-index:99;
}
.modal{
width:800px;
height:400px;
position:"fixed";
/*定位在屏幕中间*/
top:50%;
left:50%;
/*我们在这里调整弹出框的位置,要让框居中于屏幕,要考虑到框本身的宽度和高度*/
margin-top:-200px;
marin-left:-400px;
z-index:100;
}
如图所示:
我们之所以需要使用浮动,是因为程序的加载是从上到下依次加载的,我们需要在一行里面显示更多的内容,同时又需要满足解耦的需求.
我们可以在一行里面尽可能多写入内容,因为是一行的,所以在设置的时候是同时被设置的,就像物理电路的串联,在同一条线上,我们的很多时候的需求是要它们在同一行显示出来,但是要有不同的显示效果,这里就需要分别进行设置,那么就不能让他们彼此是关联的状态,需要拆解出来,彼此区分,也就是我们常说的功能解耦,这个时候就需要使用到浮动了,我们把彼此各成一行的标签,通过浮动的功能让他们彼此看起来是在同一行里面显示出来了,但是实际上他们是彼此区分开的,所以我们可以在设置的的时候分别设置他们,这样就可以满足我们前面的需求了.
下面我们来掌握float的一些基本规则和用法.
浮动方向,left,right,none(默认值不浮动)
如果我们给一些标签设置了浮动后,需要取消掉他们的浮动那么我们接下来直接用clear
clear:
left(不允许左边有浮动)
right(不允许右边有浮动)
both(有的时候我们的代码写得多了会忘记哪些设置了浮动,需要把固定的浮动内容取消掉就会使用到这里的both,确保无论哪一边都会取消掉浮动的现象)
我们之所以会使用clear是因为,我们的float被取消之后它相邻的标签会因为它而改变位置,为了防止出现这样的情况我们就需要使用clear
我们在取消浮动现象的时候,只能取消掉我们所找到的标签的浮动,并不能改变其他的标签.
{这里具体举例就是我们在给abc三个标签都设置为浮动的时候,如果给b标签clear浮动的话,那么c标签的浮动位置就会跟着有变化,,看起来好像是因为b的取消浮动改变了c的位置,但是实际上并不是的,对于b的取消浮动仅仅是对于b自己生效罢了,不要被表象迷惑了}
再具体一点就是沙漏的例子,我们的沙漏倒置的时候,它会自动不断下落,直至全部漏完为止,这里就类似于浮动的效果,一粒沙漏下去之后其他的沙粒会自动填补那个空洞接着漏下去,不懂填补那个漏下去的沙粒的空缺,对,就是空缺这个词,一个图标浮动后它原本的位置就出出现了空缺,其他的图标就会自动去填补那个空缺,我们的clear,就是在沙粒漏下去的时候取消掉浮动的效果,也就是说使用了clear这个功能之后
我们那一粒被设置为float的沙粒,漏下去之后,不想其他的沙粒来填补那个空洞,那么就启动clear功能,其他的沙粒就不会接着填补那个空出来的洞,都被固定在自己原本的位置,相当于一股无形的力量支撑着所有的沙粒一样,这里就是clear达到的效果.让float空缺出来的位置,不被占用,就那么空着.
这里还需要引用一个父标签塌陷的问题,那么我们的父标签塌陷就是沙漏的塌陷,
position定位{position在定位的时候需要连带两个属性,从top,bottom,left,right里面,通过左右,上下来进行选择,让标签能知道自己在什么位置,根据一个参照物来定位自己的所处位置}:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.c1 {
height: 200px;
width: 200px;
background-color: red;
}
.c2 {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
left: 200px;
top: 200px;
}
.c3 {
height: 200px;
width: 200px;
background-color: blue;
} .c {
height: 200px;
width: 200px;
background-color: black;
position: relative;
top: 600px;
left: 600px;
}
.returnTop {
width: 100px;
height: 50px;
background-color: darkgrey;
text-align: center;
line-height: 50px;
position: fixed;
right: 10px;
bottom: 15px;
}
</style>
</head>
<body> <div class="c1"></div>
<div class="c">
<div class="c2"></div>
</div>
<div class="c3"></div> <div class="returnTop">返回顶部</div>
</body>
</html>
relative相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物
absolute绝对定位是根据相对定位来的
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed固定文档,我们在浏览网页的时候会见到返回顶部的图标,那个图标就是通过fixed来完成的
z-index模态弹出框
大框会覆盖住小框(z-index:999会被z-index:1000所覆盖)
是覆盖的意思,就是我们在注册网页的时候,会有一个小框然后它背后的那些网页的透明度会有变化,且被隔了一层膜,无法进行操作,那个功能就是通过z-index来实现的.
模态框:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>z-index 模态框示例</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0; background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.modal {
height: 400px;
width: 600px;
position: fixed;
top: 50%;
left: 50%;
background-color: white;
margin-left: -300px;
margin-top: -200px;
z-index: 1000; /*确保我的模态框一定在cover上层*/
}
</style>
</head>
<body> <div class="cover"></div>
<div class="modal"></div> </body>
</html>
display:{显示,仅仅是视觉效果而已,看起来是这样,}
块级标签特点:独占一行,可以设置长和宽,
内联标签特点:都放在一行,没有长宽属性可供设置,根据内容自适应长和宽.
而我们的display可以同时拥有内联标签和块级标签的特点
display:none [隐藏,不显示内容]
display:block [块级]
display:inline-block [既在一行显示,又能设置长和宽,同时拥有块级和内联两者的特点]
display:inline [内联]
display示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>display示例</title>
<style>
span.c1 {
height: 1000px;
width: 1000px;
background-color: red;
padding: 100px;
display: none;
}
div.c1 {
height: 1000px;
width: 600px;
background-color: green;
display: none;
} div.c2>div {
display: inline-block;
width: 50px;
border: 1px solid black;
} body {
background: url("https://res.wx.qq.com/a/wx_fed/webwx/res/static/img/2zrdI1g.jpg") no-repeat 50%;
background-size: cover;
}
</style>
</head>
<body>
<div class="c1">div</div>
<span class="c1">spanssssssssssssssssssssssssssssssssssssssssssssss</span> <div class="c2">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
背景效果:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>磨砂背景</title>
<style>
body {
background: url("beijing.png") no-repeat 50%;
background-size: cover;
height: 720px;
/*background-color: black;*/
/*background-color: rgba(0, 0, 0, 0.3);*/
/*opacity: 0.1;*/
}
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0, 0.5);
}
</style>
</head>
<body> <div class="cover"></div> </body>
</html>
befor/after:
标签名before:{
在该标签前面插入内容
}
标签名after:{
在该标签后面插入内容
}
一般我们重要的内容不会放在这里写,修改的时候,不方便,一般会放在标签里面写
day 49-css补充(终结)[浮动和定位]的更多相关文章
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
- CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
- css最终章之浮动、定位、溢出属性处理、z-index属性、透明度
上期内容回顾 CSS简介 # 主要就是给HTML标签添加样式 # 固定语法结构 选择器 {属性名1:属性值;属性名2:属性值} 三种引用方式 1.link标签引入外部css文件(最正规) 2.HTML ...
- 前端开发—CSS 盒子、浮动、定位
盒子模型 margin padding border content margin: 用于控制元素与元素之间的距离:body自带 8 像素的margin 需要手动去除.(快递盒之 ...
- CSS区块、浮动、定位、溢出、滚动条
CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 CSS中溢出的使用 CSS中滚动条的使用 17.1 CSS中区块的使用 属性名称 属性值 ...
- 17 ， CSS 区块、浮动、定位、溢出、滚动条
1.CSS 中区块的使用 2.CSS 中浮动的使用 3.CSS 中定位的使用 4.CSS 中溢出的使用 5.CSS 中滚动条的使用 17.1 CSS 中区块的使用 属性名称 属性值 说明 width ...
- CSS权威指南 - 浮动和定位 1
定位 定位的想法很简单元素框相对于正常位置出现在哪里. 定位:static,相对, 绝对, fixed, 继承 static就是默认的位置 相对就是相对于默认位置的偏移.原来的static定位位置依然 ...
- CSS权威指南 - 浮动和定位 2
定位 定位的想法很简单元素框相对于正常位置出现在哪里. 定位:static,相对, 绝对, fixed, 继承 static就是默认的位置 相对就是相对于默认位置的偏移.原来的static定位位置依然 ...
随机推荐
- Spring Cloud源码分析（四）Zuul：核心过滤器
通过之前发布的<Spring Cloud构建微服务架构(五)服务网关>一文,相信大家对于Spring Cloud Zuul已经有了一个基础的认识.通过前文的介绍,我们对于Zuul的第一印象 ...
- hive学习05 参数设置
001参数设置 hive执行命令的本质是mapreduce,当然也可以作为关系型数据库进行查询 --设置一个job有多少个reducer处理,依据多少的是文件的大小,默认1G set hive.exe ...
- 分页插件pagination.js
项目中有分页功能,之前都是自己写,样式不好看,功能也简单,就找了这个插件pagination.js 页面导入pagination.js html代码 <div class="list_ ...
- Confluence 6 确定一个生产系统备份方案
Atlassian 推荐创建一个可选的数据库备份方案: 使用你数据库提供的备份和恢复工具 为了避免数据不完整和备份中断,我们推荐你在备份和恢复 Confluence 数据库的时候关闭 Confluen ...
- Socket网络编程（二）
udp协议发送消息案例 1.创建UdpServer(udp服务器端) package com.cppdy.udp; import java.net.DatagramPacket; import jav ...
- MySQL多表查询 三表查询 连接查询的套路
多表查询 * 当我们的一条记录 分散不同的表中时,就需要进行多表查询 例如 一对一 一对多 多对多 1.笛卡尔积查询 意思是将两个表中的所有数据 全部关联在一起 例如 a表 有2条 b表有3条 ...
- Pandas模块：表计算与数据分析
目录 Pandas之Series Pandas之DataFrame 一.pandas简单介绍 1.pandas是一个强大的Python数据分析的工具包.2.pandas是基于NumPy构建的. 3.p ...
- ActiveMQ消息的消费原理
消费端消费消息: 在 初识ActiveMQ 中我提到过,两种方法可以接收消息,一种是使用同步阻塞的ActiveMQMessageConsumer#receive方法.另一种是使用消息监听器Messag ...
- thymleaf模板截取日期的年月日，去掉时分秒
简单描述:浏览同事提交的代码,发现他的日期回显中有一行代码,只截取到了年月日,记录一下 代码: //HTML代码 <span th:text="${#strings.substring ...
- Laravel5.7 跨域解决
先检查app/Http/Middleware/ 下是否有EnableCrossRequestMiddleware.php 这个文件,没有此文件使用此命令创建 php artisan make:midd ...