css进阶----盒子模型，Reset CSS，css浮动，css定位，z-index属性
盒子模型
把页面上的每一个元素当成一个盒子
由内容，内边距，边框，外边距组成
盒子模型举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background: yellowgreen;
border: 5px solid red;
padding: 50px; 内边距
margin: 50px; 外边距
}
/*
盒子大小=样式宽 + 内边距 + 边框
盒子宽度=左border+右border+width+左padding+右padding
盒子高度=上border+下border+height+上padding+下padding
*/
</style>
</head>
<body>
<div> </div>
</body>
</html>
padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
padding 内边距，边框与内容之间的距离
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下 右左
三个值的时候： 上 右左 下
四个值的时候： 上 右 下 左
*/
div{
width: 200px;
height: 200px;
background: yellow;
border: 1px solid red;
padding: 50px 20px; 上下50px，左右20px
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
盒子模型
盒子是由内容(content)、内边距(padding)、外边距(margin)、边框(border)组成的
*/ /*
border:边框 类型 颜色;
border:width style color;复合样式
border-width
border-style solid实线 dashed虚线 dotted点线 double双边框
border-color
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下 右左
三个值的时候： 上 右左 下
四个值的时候： 上 右 下 左 border-width 边框大小
border-top-width 上边框大小
border-right-width 右边框大小
border-bottom-width 下边框大小
border-left-width 左边框大小
border-top-width:0 border-style 边框样式
border-top-style 顶部边框类型
border-right-style 右边边框类型
border-bottom-style 底部边框类型
border-left-style 左边边框类型 border-color 边框颜色
border-top-color 顶部边框颜色
border-right-color 右边边框颜色
border-bottom-color 底部边框颜色
border-left-color 左边边框颜色 #### border-top/right/bottom/left会增加宽度/高度,可以用box-sizing: border-box; 让边框放在布局的里面排布 ####
*/
div{
width: 200px;
height: 200px;
/*background: skyblue;*/
border: 10px dotted red;
}
p{
width: 200px;
height: 200px;
border-width: 10px 5px;
border-style: dotted solid dashed;
border-color: red blue yellowgreen black;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
/*
margin 外边距 元素与其他元素的距离（边框以外的距离）
一个值的时候： 代表四个方向值一样 上右下左（顺时针）
二个值的时候： 上下 右左
三个值的时候： 上 右左 下
四个值的时候： 上 右 下 左
margin: auto; 快速左右居中
垂直方向： margin-bottom,margin-top 取两者之间的较大值
水平方向： margin-left,margin-right 取两者的和
overflow:hidden; 解决内边距重叠问题
border
*/
/*div{*/
/*width: 100px;*/
/*height: 100px;*/
/*background: yellow;*/
/*!*margin: 50px auto;*!*/
/*!*margin-left: auto;*!*/
/*!*margin-right: auto;*!*/
/*display: inline-block;*/
/*margin: 0 50px;*/
/*}*/
.box1{
/*margin-top: 100px;*/
} .wrap{
width: 500px;
height: 500px;
background: yellowgreen;
/*border: 1px solid red;*/
overflow: hidden;
}
.box{
width: 50px;
height: 50px;
background: red;
margin: 100px;
}
</style>
</head>
<body>
<!--<div></div><div class="box1"></div>--> <div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
Reset CSS
重置css
浏览器在解析某些标签的时候，本身就自带了一些样式，导致写样式的时候就会效果不一致
浮动
B，C上移 B，C上移，B被覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
/*
浮动的定义：使元素脱离文档流，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停下来。
文档流:是文档中可显示对象在排列时所占用的位置/空间（在页面中占位置）
脱离文档流 ：在页面中不占位置
清除浮动
1.给父级增加高度（不推荐使用）
2.给父级加overflow:hidden;
3.给父级加一个类
.clearfix::after{
content: "";
display: block;
clear: both;
}
浮动的特点
如果只给前面的元素浮动，后面的要占据他的位置
造成高度坍塌
*/
li{
list-style: none;
} ul{
width: 300px;
/*height: 50px;*/
border: 1px solid blue;
}
li{
width: 50px;
/*display: inline-block;*/
float: left;
height: 50px;
background: red;
margin: 0 5px;
border-radius: 50%;
}
.box{
width: 100px;
height: 100px;
background: yellow;
float: left;
}
.wrap{
width: 200px;
height: 200px;
background: skyblue;
}
.box1{
width: 500px;
border: 1px solid red;
/*height: 50px; 清除浮动1*/
/*overflow: hidden; 清除浮动2*/
}
.box1 li{
width: 100px;
height: 50px;
background: aqua;
}
li.left{
float: left;
}
li.right{
float: right;
}
.clearfix::after{
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="box"></div>
<div class="wrap"></div> <!--<ul class="box1 clearfix">-->
<!--<li class="left"></li>-->
<!--<li class="right"></li>-->
<!--</ul>-->
<!--<p style="width: 200px;height: 200px;background: red"></p>-->
</body>
</html>
定位
定位一定要找好参照物
1，静态定位static，默认值不会发生任何变化
2，相对定位relative不会脱离文档流，以自身元素为参考，可以给top,rigth,bottem,left
3，绝对定位absolute，脱离文档流，默认以整个文档为参考，有定位父级，则父级为参考，可以给top,rigth,bottem,left
4，固定定位fixed，相对于浏览器窗口进行定位，窗口滚动，依然不会变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
/*
position 定位
static 静态定位（没有定位），默认
relative 相对定位，相对于正常位置(原来没定位之前的位置)进行定位，还要占据位置
absolute 绝对定位，没有占据位置，使元素完全脱离文档流
没有定位父级，则相对于整个文档发生偏移
参考最近非static定位的父级进行定位
fixed 固定定位，相对于浏览器窗口进行定位
方向词
left
right
top
bottom
z-index 规定定位的层级（默认0）
值：number 值越大层级越高 */
.box{
width: 200px;
height: 200px;
background: yellowgreen;
/*position: relative;*/
/*margin: auto;*/
/*top: 50px;*/
/*left: 100px;*/
position: absolute;
/*margin: 50px;*/
bottom: 100px;
}
.wrap{
width: 300px;
background: red;
height: 300px;
}
.fix{
width: 200px;
height: 200px;
background: skyblue;
position: fixed;
bottom: 100px;
left: 300px;
}
</style>
</head>
<body style="height: 2000px;">
<div class="box"></div>
<div class="wrap"></div>
<div class="fix"></div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
background: red;
margin: auto;
position: relative;
}
.fix{
width: 400px;
height: 300px;
background: yellow;
position: fixed;
top: 50px;
}
.wrap{
width: 100px;
height: 100px;
background: yellowgreen;
position: absolute;
left: 300px;
top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="fix">
<div class="wrap"></div>
</div>
</div>
</body>
</html>
定位涉及到z-index属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
position: relative;
}
li{
list-style: none;
width: 50px;
height: 50px;
border: 1px solid red;
position: absolute;
}
.box1{
background: yellowgreen;
/*z-index: 10;*/
}
.box2{
background: red;
/*z-index: 1;*/
}
.box3{
background: black;
z-index: -2;
}
</style>
</head>
<body>
<ul>
<li class="box1"></li>
<li class="box2"></li>
<li class="box3"></li>
</ul>
</body>
</html>
css进阶----盒子模型，Reset CSS，css浮动，css定位，z-index属性的更多相关文章
- CSS 盒子模型、RestCSS、浮动、定位
盒子模型 边框:border 左边框:border-left 右边框:border-right 上边框:border-top 下边框:border-bottom 复合样式:border 边框颜色:bo ...
- 深入理解CSS系列（一）：理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- CSS 弹性盒子模型
CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
- CSS之盒子模型及常见布局
盒子模型的综合应用 CSS提高1 Div ul li 的综合应用很多的网页布局现在都用到这种模式 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...
- CSS之盒子模型
CSS核心内容 源文件目录: D:\Users\ylf\Workspaces\MyEclipse 10 标准流 盒子模型 浮动 定位 标准流/非标准流: 标准流:就是普通的 非标准流:实际工作中要打破 ...
随机推荐
- vs2010 下使用C#开发activeX控件
1.创建一个类库 2.项目属性-应用程序-程序集信息-"使程序集COM可见"勾上; 3.项目属性-生成-"为COM互操作注册"勾上.(这个折腾一天,否则注册事件 ...
- 禁用backspace网页回退功能
<script language="JavaScript">document.onkeydown = check;function check(e) { var cod ...
- poj Code(组合数)
Code Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 9918 Accepted: 4749 Description ...
- Java高质量20问
问题一:在多线程环境中使用HashMap会有什么问题?在什么情况下使用get()方法会产生无限循环? HashMap本身没有什么问题,有没有问题取决于你是如何使用它的.比如,你在一个线程里初始化了一个 ...
- CSS-类和ID选择器的区别
学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1.ID选择器只能在文档中使用一 ...
- vmware workstation 14 黑屏处理方法
从12升级到14以后,所有老的虚拟系统全部黑屏.进行了一波操作,例如:虚拟机-管理-更改硬件兼容性,选择14.黑屏将加速3D图形勾选去掉:启动,关闭,再勾选上,启动.黑屏将显示器选择为指定监视器,黑屏 ...
- Linux下查看CPU和内存（很详细）
在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会 ...
- MySQL索引----数据结构及算法原理
摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BT ...
- [ SHOI 2012 ] 随机树
\(\\\) \(Description\) 开始有一棵只有一个根节点的树.每次随机选择一个叶子节点,为他添上左右子节点,求: 生成一棵有\(N\)个叶节点的树,所有叶节点平均高度的期望. 生成一棵有 ...
- SAS学习笔记之《SAS编程与数据挖掘商业案例》（2）数据获取与数据集操作
SAS学习笔记之<SAS编程与数据挖掘商业案例>(2)数据获取与数据集操作 1. SET/SET效率高,建立的主表和建表索引的查询表一般不排序, 2. BY语句,DATA步中,BY语句规定 ...