在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层

边框 border

            border-top: 5px solid black;            /*上边框 实线*/
border-right: 3px double yellow; /*右边框 双线*/
border-bottom: 8px dotted red; /*下边框 点点*/
border-left: 7px dashed green; /*左边框 虚线*/

  

内边距 padding

  内容和框音响的距离

  在实际操作使用中,一般不对内边距调,这样会影响整个盒子的大小,从而影响整个页面布局

    <style>
div{
height: 200px;
width: 100px;
border: 3px solid red;
padding-top: 20px; /*上内边距*/
padding-right: 10px; /*右内边距*/
padding-bottom: 10px; /*下内边距*/
padding-left: 10px; /*左内边距*/
}
</style>
</head>
<body>
<div>
博客园是面向开发者的知识分享社区,
</div>

padding: 10px 20px 30px 40px;  /*复合样式 ,上右下左,按顺序,哪个值缺少,就取对面的值,*/

外边距 margin

  盒子间的距离

            background: #525d68;
margin-top: 30px; /*上边距*/
margin-right: 100px; /*右边距*/
margin-bottom: 100px; /*下边距*/
margin-left: 100px; /*左边距*/
margin10px 20px 30px 40px;  /*复合样式 ,上右下左,按顺序,哪个值缺少,就取对面的值,*/

css 重置

    <style>
*{
margin: 0;
padding: 0;
}
</style>

  

浮动

  列变行用  float: left;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
height: 20px;
width: 20px;
background: green;
float: left; /*列变行*/
margin-left: 20px;
border-radius: 50px; /*圆角*/
}
ul{
list-style: none; /*把点去掉*/
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

浮动问题:

  高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
border: 20px solid red;
/*overflow: hidden; !*防高度塌陷 方法1*!*/
}
.box div{
height: 100px;
width: 100px;
}
.left{
float: left;
background: green;
}
.ri{
float: right;
background: skyblue;
} .clearfix::after{ /**防高度塌陷 方法3/
display: block; /*保证为块级元素*/
clear: both;
content: '';
}
</style>
</head>
<body>
<div class="box clearfix" > <!--/*防高度塌陷 方法3 加共同样式 clearfix-->
<div class="left"></div>
<div class="ri"></div>
<!--<div></div> /*防高度塌陷 方法2*/-->
</div>
</body>
</html>

 清除浮动带来的影响

    设置共同样式,

        .clearfix::after{
display: block;
clear: both;
content: '';
      }

在父级 div 中添加共同样式  clearfix 之后进行相关设置

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background: #525d68;
position: fixed; /*指明固定定位*/
right: 20px; /*指定偏移*/
bottom: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

  不论浏览器怎么动,该 box 始终在这个偏移位置中

相对定位

  相对自身而言,的位置偏移 ,不脱离文档流

  在这个例子中,其父元素是浏览器,所以他的偏移是以浏览器为参照物,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
}
.text{
background: #e7dede;
position: relative; /*相对定位*/
left: 200px;
}
.box{
background: blue;
}
</style>
</head>
<body>
<div class="text"></div>
<div class="box">参照</div>
</body>
</html>

  

绝对定位     position: absolute;             /*绝对定位*/

  脱离文档流,偏移反,位置将让出来,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
}
.text{
background: #e7dede;
position: absolute; /*绝对定位*/
left: 200px;
}
.box{
background: blue;
}
</style>
</head>
<body>
<div class="text"></div>
<div class="box">参照</div>
</body>
</html>

  

父相子绝,(在绝对定位的 box 上设个父元素)

  这个应用比较我,保证其不脱离文档流,不影响整个页面布局,子 box 实现随心所欲的放置,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.par{ /*父元素*/
height: 300px;
width: 500px;
background: #3e3d32;
position: relative; /*相对定位*/
}
.chi{ /*子元素*/
height: 100px;
width: 100px;
background: maroon;
position: absolute; /*绝对 定位*/
/*居中操作*/
left: 50%;
margin-left:-50px;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="par">父 box
<div class="chi">子 box </div>
</div>
</body>
</html>

  

z index

style="z-index: -1"  里边的数值越大戛越在上层,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin-left: 0;
padding: 0;
}
ul{
list-style: none; /*去掉列表的带的小点*/
}
div{
height: 200px;
width: 800px;
background:black;
margin: 20px auto;
position: relative; /*相对定位*/
}
img{
height: 200px;
width: 800px;
position: absolute; /*绝对定位*/
}
</style>
</head>
<body>
<div>
<ul class="pic">
<li><img style="z-index: 0" src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg"></li>
<li><img style="z-index: 1" src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg"></li>
<li><img style="z-index: -2" src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg"></li>
<li><img style="z-index: -1" src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg"></li> </ul>
</div>
</body>
</html>

  

作业

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style: none; /*去掉列表的带的小点*/
}
img{
height: 200px;
width: 800px;
position: absolute; /*绝对定位*/
}
div{
height: 200px;
width: 800px;
background:yellow;
margin: 40px auto;
position: relative; /*相对定位*/
}
.btn{
height: 200px; /*高度=行高,..*/
line-height: 200px; /*行高,便于居中*/
font-size: 50px; /*字体大小*/
color: white; /*字体颜色*/
font-weight: bold;
display: none; /*不显示 */
}
.btn .left{
position: absolute;
left: 20px;
}
.btn .right{
position: absolute;
right: 20px;
}
div:hover .btn{
display: block;
}
.dian{
position: absolute;
left: 50%;
margin-left: -30px;
top: 150px;
}
.dian li{
width: 10px;
height: 10px;
border: 2px solid red;
border-radius: 50%;
float: left;
margin-left: 20px;
}
.dian li:hover{
background: #ffffff;
}
</style>
</head>
<body>
<div>
<ul class="pic">
<li><img src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg"></li>
<li><img src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg"></li>
<li><img src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg"></li>
<li><img src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg"></li>
</ul> <ul class="btn" >
<li class="left"><</li>
<li class="right">></li>
</ul> <ul class="dian">
<li ></li>
<li ></li>
<li ></li>
<li ></li>
</ul>
</div>
</body>
</html>

  

潭州课堂25班:Ph201805201 WEB 之 CSS 第三课 (课堂笔记)的更多相关文章

  1. 潭州课堂25班:Ph201805201 WEB 之 页面编写 第二课 (课堂笔记)

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. 潭州课堂25班:Ph201805201 WEB 之 页面编写 第一课 (课堂笔记)

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. 潭州课堂25班:Ph201805201 WEB 之 Ajax第八课 (课堂笔记)

    js <——>jq <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. 潭州课堂25班:Ph201805201 WEB 之 jQuery 第七课 (课堂笔记)

    jq 的导入 <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">< ...

  5. 潭州课堂25班:Ph201805201 WEB 之 JS 第六课 (课堂笔记)

    上节补充方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. 潭州课堂25班:Ph201805201 WEB 之 JS 第五课 (课堂笔记)

    算数运算符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. 潭州课堂25班:Ph201805201 WEB 之 JS 第四课 (课堂笔记)

    JS 引入方式 在 HTML 中写入 写在 的标签里 <script> </script>推荐 放在 </body> 结束之前 <!DOCTYPE html& ...

  8. 潭州课堂25班:Ph201805201 WEB 之 页面编写 第四课 登录注册 (课堂笔记)

    index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. 潭州课堂25班:Ph201805201 WEB 之 页面编写 第三课 (课堂笔记)

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. 生成ansible-playbook的yaml文件的代码(字典排序问题无法解决)

    import yaml import collections def add_task(): return None def add_vars(): return None def add_handl ...

  2. tomcat jetty

    背景 其实这个比较毫无意义.只是当时突然知道了jetty,所以记下来,对于开发人员来说选择哪个一般意义不大. 转载 从架构上来看 Tomcat 在处理少数非常繁忙的连接上更有优势,也就是说连接的生命周 ...

  3. centos中进程管理工具

    进程管理:  二进制的格式为ELF,是CPU指令集中的指令  程序=指令+数据,  进程是程序的副本,可以有多个  内核是一个资源调度监视器  Linux是抢占式多任务  内存被事先划分成多个相同大小 ...

  4. sklearn.model_selection模块

    后续补代码 sklearn.model_selection模块的几个方法参数

  5. java :: Java中的双冒号操作符

    java中的双冒号操作符 定义 双冒号运算操作符是类方法的句柄,lambda表达式的一种简写,这种简写的学名叫eta-conversion或者叫η-conversion. 通常的情况下: 把 x -& ...

  6. 线程使用中常见的错误-“System.InvalidOperationException”线程间操作无效: 从不是创建控件“ ”的线程访问它。

    “System.InvalidOperationException”类型的未经处理的异常在 System.Windows.Forms.dll 中发生 其他信息: 线程间操作无效: 从不是创建控件“la ...

  7. Oracle11g 创建数据库中问题处理(必须运行Netca以配置监听程序)

    这两天学习<OCP/OCA认证考试指南>,要创建新的数据库,因为此前我的电脑上已经被折腾了好久的Mysql 和oracle10g ,所以可能导致很多环境都变了,创建数据库的过程中出现了一些 ...

  8. H 模拟水题

    n个人 小明编号为m 从编号为a的人开始数 起始数字为b 遇到素数duang 并反相 求小明应该说什么 Sample Input 310 2 //n m3 4 //a b3 32 64 13 8 Sa ...

  9. python算法双指针问题:两个有序数组的合并

    最近在看<你也能看得懂的python算法书>, 自己来实现一下里面的算法吧. 有书里的有所不同. 比如这个题目,我的实现如下: from django.test import TestCa ...

  10. thinkphp实现附件上传

    先需要制定图片上传的目录 然后用uploadOne方法保存 有的时候需要缩略图,比如文章的封面图片 $config=array( 'rootPath' => './Application/Pub ...