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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- ORA-15137: cluster in rolling patch
oracle 12.1.0.2,给diskgroup加盘的时候报错ORA-15137: cluster in rolling patch 确认两节点补丁相同 crsctl query crs soft ...
- python实现bt种子 torrent转magnet
Python实现bt转磁链 参考前人资料主要两种方式 1,利用python的bencode模块 2,安装libtorrent模块 尝试过两种方法特记录 环境:Windows系统 python 3 ...
- PHP 使用数字作为SESSION的Key，一刷新页面session丢失，Session消失，无法存储
PHP 使用数字作为SESSION的Key,一刷新页面session丢失,Session消失,无法存储 项目中有用到md5截取做session key值的,有些md5截取出来的部分是纯数字的,导致部分 ...
- spring jar包解读（转）
作者:http://www.cnblogs.com/leehongee/archive/2012/10/01/2709541.html spring.jar 是包含有完整发布模块的单个jar 包.但是 ...
- Difference between Load / Stress / Performance Testing
Load and stress testing are subsets of performance testing. Performance testing means how best somet ...
- Linux常用的工具软件安装
一. linux简单介绍 linux的优势 可靠的安全性,良好的稳定性,完善的网络功能 跨平台的硬件支持,丰富的软件支持,多用户多任务 Linux的发行版本 Redhat 红帽子,最大稳定 CentO ...
- 小白的CTF学习之路8——节约内存的编程方式
今天第二更,废话不说上干货 上一章我们学习了内存和cpu间的互动方式,了解到内存的空间非常有限,所以这样就需要我们在编程的时候尽可能的节省内存空间,用最少的空间发挥最大的效果,以下是几种节约内存的方法 ...
- 2019.03.26 bzoj4447: [Scoi2015]小凸解密码（线段树）
传送门 题意简述:咕咕咕 思路:考虑预处理出bbb数组,然后每次改动aaa都只会对第iii和i+1i+1i+1这两个位置产生影响,于是可以用线段树来维护bbb数组. 现在求答案的方法是断环为链,倍增整 ...
- oracle执行计划走偏处理步骤
-- sql执行时间select a.EXECUTIONS,a.ELAPSED_TIME,a.ELAPSED_TIME/a.EXECUTIONS/1000/1000 as 秒,a.SQL_ID,a.H ...
- 整理CSS中display flex（布局利器）
关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的. display:flex的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...