Day6:html和css
Day6:
html
和css
复习
margin: 0;
padding: 0;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
// 父元素
.father {
border: 1px solid red;
width: 300px;
}
// 添加浮动会导致父元素不被撑开
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
// 所以要进行清除浮动
清除浮动: overflow
: hidden
添加在需要清除浮动的地方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.father {
border: 1px solid red;
width: 300px;
overflow: hidden; // 添加在需要清除的地方
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 180px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
// 清除浮动的效果会导致父元素撑开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 200px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
.clear {
clear: both;
// 额外标签法
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
<div class="clear"></div>
// 在最后的标签,添加清除浮动
</div>
<div class="footer"></div>
</body>
</html>
// clear: both;
// after伪元素进行清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.clearfix:after {
// 父元素添加类
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
// 在父类添加元素类,清除浮动
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
// 双伪元素进行清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
// 在父元素添加类 clearfix
// 双伪元素
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
定位position
background-position 背景定位
定位属性
边偏移
属性 | 说明 |
---|---|
top | 顶端偏移量 |
bottom | 底部偏移量 |
left | 左侧偏移量 |
right | 右侧偏移量 |
定位模式:
选择器{position: 属性值}
position
属性的常用值
值 | 说明 |
---|---|
static | 自动定位 |
relative | 相对定位,相对于其原文档流的位置进行定位 |
absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 |
fixed | 固定定位 |
position: static;
相对定位: a->a
不变
绝对定位absolute
绝对定位是如果某个部分会滚动,那么滚动完,它还在那个位置上而已.
子绝父相
子级是绝对定位的话, 父级要用相对定位。
叠放次序(z-index
)
四种定位总结
静态static 不脱标,正常模式
相对定位relative 脱标,占有位置
绝对定位absolute 完全脱标,不占有位置
固定定位fixed 完全脱标,不占有位置
元素的显示与隐藏
display visibility 和 overflow
display 显示 display : none display:block 隐藏之后,不再保留位置
visibility 可见性 visible 对象可视 hidden对象隐藏 隐藏之后,继续保留原有位置
overflow 溢出
visible
auto
hidden
scroll
相对定位
// 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div {
width: 200px;
height: 200px;
}
.top {
background-color: pink;
/*position: relative; */
top: 100px;
left: 100px;
}
.bottom {
background-color: purple;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div {
width: 200px;
height: 200px;
}
.top {
background-color: pink;
position: relative;
top: 100px;
left: 100px;
}
.bottom {
background-color: purple;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
// 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
body {
height: 1000px;
}
div {
width: 100px;
height: 100px;
background-color: pink;
}
.top {
position: absolute;
right: 0;
bottom: 0;
}
.bottom {
background-color: purple;
width: 110px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
// 父元素没有定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
margin: 50px;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
// 没有定位跟着浏览器
// 注意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.top {
float: left;
}
.bottom {
background-color: purple;
}
</style>
</head>
<body>
<div class="top">123</div>
<div class="bottom">dashucoding</div>
</body>
</html>
// 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div {
width: 250px;
height: 400px;
border: 1px solid #ccc;
float: left;
margin-left: -1px;
position: relative;
}
div:hover {
border: 1px solid #f40;
z-index: 1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
// 居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
推荐
如果看了觉得不错
点赞!转发!
达叔小生:往后余生,唯独有你
You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞
Day6:html和css的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- 十六、IDEA创建一个maven工程
1.点击Create new Project 2.选择maven,使用的jdk,点击next; 3.填写GroupId和工程名,点击next; 4.默认不做其他修改,点击Finish; 5.创建成功
- spark 线性回归算法(scala)
构建Maven项目,托管jar包 数据格式 //0.fp_nid,1.nsr_id,2.gf_id,2.hydm,3.djzclx_dm,4.kydjrq,5.xgrq,6.je,7.se,8.jsh ...
- docker-3 Apache
docker 安装 Apache 环境 docker pull httpd 文件创建连接(这样就可以不用发布了,两个文件夹会自动同步文件) ln -s /root/jenkins_home/works ...
- lombok的简单介绍
##lombok的使用 一直在使用lombok的set和get,对其他的功能用的比较少,蓦然发现这个库好用的功能不要太多啊 有必要深入理解一番. ###lombok安装 1 需要IDE支持,不然开发的 ...
- Quartz一次配置
1. 配置执行器的线程池 public ThreadPoolTaskExecutor defaultThreadPool() { ThreadPoolTaskExecutor executor = n ...
- 项目管理 - PM、 SRS、SOW简介及范例
PM在一个IT项目中的主要管理任务 http://blog.csdn.net/eaglezhang/article/details/1717171 计算机软件需求说明编制指南 http://blog. ...
- C++ STL库的总结以及实现原理
STL的容器可以分为以下几个大类:一:序列容器, 有vector, list, deque, string. 二 : 关联容器, 有set, multiset, map, mulmap has ...
- K/3 Cloud移动BOS开发技巧 -- K/3 Cloud多数据中心时如何支持发布到云之家.
我们知道K/3 Cloud和云之家进行集成,在管理中心里面有个设置,移动账套启用,只能支持一个账套启用那么能不能支持两个账套部署到云之家中呢?其实移动BOS平台默认是支持,答案就在发布到云之家的菜单中 ...
- 利用jsonp调用外部ip地址池
<html lang="en"> <head> <meta charset="UTF-8"> <title>Do ...
- Java项目下的classpath路径包括哪里
https://my.oschina.net/zjllovecode/blog/916927 classpath指的是.classpath下kind="src" 的路径