web前端学习（三）css学习笔记部分（2）-- css定位+盒子操作
3.CSS定位
3.1定位
1.CSS定位：
改变元素在页面上的位置
2.CSS定位机制
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局
| 属性 | 描述 |
| position | 把元素放在一个静态的、相对的、绝对的或固定的位置中 |
| top | 元素向上的偏移量（从上往下加数） |
| left | 元素向左的偏移量（从左往右加数） |
| right | 元素向右的偏移量（从右往左加数） |
| bottom | 元素向下的偏移量（从下往上加数） |
| overflow | 设置元素溢出其区域发生的事情 |
| clip | 设置元素显示的形状 |
| vertical-align | 设置元素垂直对齐方式 |
| z-index | 设置元素的堆叠顺序 |
3.CSS定位属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>outline</title>
<style>
#position1{
width:100px;
height:100px;
background-color: blue;
/*position:relative;*/
/*相对位置和绝对位置都是只更改自己相对于本来应该在的位置，
只对自己的子元素起作用，不会对同级元素产生影响。*/
position:absolute;
/*absolute定位相当于把自己从页面中抠出来，
其他的同级元素按只有他们自己的方式排列*/
/*position: fixed;*/
/*fixed布局是指该元素相对于当前页面位置不懂，下拉都不会动的那种*/
/*position:static;*/
/*设置静态的时候偏移量是对该元素不起作用的。*/
left:10px;
top:10px; }
#position2{
width:100px;
height:100px;
background-color: aqua;
position:absolute;
left:20px;
top:20px;
z-index: 2;
}
#position3{
width:100px;
height:100px;
background-color: red;
position:absolute;
left:30px;
top:30px;
z-index: 1;
/*z-index只对写这句话的元素起作用，1就是最先放置的，越大越往后放置，
一般不写的情况下就是按顺序摆放*/
}
</style> </head>
<body>
<div id="position1"></div>
<div id="position2"></div>
<div id="position3"></div>
<script>
for(var i=0; i<50; i++){
document.write(i+"<br/>");
/*这个script在哪写的他就在哪生成文件；*/
}
</script>
</body>
</html>
3.2浮动
3.2.1 浮动
float属性可用的值：
left：元素向左浮动
right
none：元素不浮动
inherit：从父级继承浮动属性
3.2.2 clear属性
去掉浮动属性（包括继承来的属性）
clear属性值：
left、right：去掉元素向左、向右浮动
both：左右两侧均去掉浮动
inherit：从父级元素继承来clear的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
#div1,#div2,#div3{
height:50px;
width:50px;
float:left;
}
#div1{
background-color: aqua;
float:left;
}
#div2{
background-color: fuchsia;
float:left;
}
#div25{
height:80px;
width:80px;
background-color: sienna;
float:right;
}
#div3{
background-color: purple;
clear:right;
}
#div4{
background-color: deeppink;
clear:both;
}
#div5{
height:150px;
width:150px;
background-color: sienna; }
/*清除浮动的意思就是在与他水平的位置那一侧不能有浮动元素，
要相应下移使之位置错开。*/
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div5">div5</div>
<!--不浮动的元素放在浮动的元素后面之后会按照原来的位置排列-->
<div id="div25">div2.5向右浮动</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<!--每一个如果都是向左浮动的话那么他们都在同一行排列-->
</body>
</html>
浮动例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
#div1,#div2,#div3{
float:left;
}
#div1{
width:30px;
height:50px;
background-color: aqua;
}
#div2{
width:30px;
height:20px;
background-color: fuchsia;
}
#div3{
width:30px;
height:60px;
background-color: red;
}
#container{
width:80px;
height:300px;
background-color: darkgrey;
}
#text{
/*clear: both;*/
clear:right;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="text">hi lin</div>
<!--第四个文本容器也继承了浮动的属性，如果想要去除这个特点就在text的id-->
<!--中添加一句clear:both(两侧不能有浮动的功能);-->
</div>
<!--浮动只要有位置就会放下，超过容器宽度就会换一行，但是换行又不是
平常所说的换行，是找位置-->
</body>
</html>
3.3浮动的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**{*/
/*margin:0px;*/
/*padding:0px;*/
/*}*/
ul{
float:left; } li{
float:left;
list-style: none;
/*liststyle在li中写，不是在ul中写*/
}
/*ul中float:left就是实现瀑布流，
在li中写float:left就是实现列表横向排列*/
</style>
</head>
<body>
<div>
<ul>
<li>ul1.1</li>
<li>ul1.2</li>
<li>ul1.3</li>
</ul>
<ul>
<li>ul2.1</li>
<li>ul2.2</li>
<li>ul2.3</li>
</ul>
<ul>
<li>ul3.1</li>
<li>ul3.2</li>
<li>ul3.3</li>
</ul>
</div>
</body>
</html>
4. CSS盒子模型
4.1概述
4.2内边距
4.3边框
1.CSS边框可以应用于任何元素
2.边框的样式
border-style：定义了十个不同的非继承样式，包括none
3.边框的单边样式：
border-top-style
border-left-style
border-right-style
border-bottom-style
4.设置单边的宽度
border-top-width
border-left-width
5.CSS3边框
border-radius：圆角边框（半径）
box-shadow：边框阴影
（边框阴影和文字阴影差不多
编写方式都是box-shadow:10px 10px 5px #FFCCFF;）
(向右，向下，阴影透明度，阴影颜色)
border-image：边框图片
4.4外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
#test{
height:30px;
width:30px;
margin:10px 20px 30px;
background-color: fuchsia;
}
/*
margin标记可以带一个、二个、三个、四个参数，各有不同的含义。
margin: 20px;（上、下、左、右各20px。）
margin: 20px 40px;（上、下20px；左、右40px。）
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）
*/
</style>
</head>
<body bgcolor="gray">
<div id="test"></div>
</body>
</html>
4.5外边距合并
4.1 外边距合并：
外边距合并就是一个叠加的概念（上面盒子的下外边距和下面盒子的上外边距合并之后只剩一个边距了）
这个外边距合并是自动就形成了，哪个大就是按哪个算的。
4.6盒子模型应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型应用</title>
<style>
*{
margin:0px;
padding:0px;
}
.top{
width:100%;
height:50px;
background-color: black;
}
.top_content{
width:75%;
height:50px;
/*让盒子处于某一个div上下中间的话需要直接设置好
高度和padding、margin等内容，auto好像不管用*/
margin:auto auto;
background-color: blue;
}
.body{
margin:20px auto;
width:75%;
height:1500px;
background-color: blanchedalmond;
}
.body_img{
width:100%;
height:400px;
background-color: darkred;
}
.body_content{
width:100%;
height:1100px;
background-color: deeppink;
}
.body_no{
width:100%;
height:50px;
background-color: brown;
}
.footing{
width:75%;
height:50px;
background-color: indigo;
margin:0px auto;
}
.footing_content{
width:100%;
height:330px;
background-color: darkseagreen;
}
.footing_subnav{
width:100%;
height:70px;
background-color: black;
}
</style>
</head>
<body>
<div class="top">
<div class="top_content"></div>
</div>
<div class="body">
<div class="body_img"></div>
<div class="body_content">
<div class="body_no"></div>
</div>
</div>
<div class="footing">
<div class="footing_content"></div>
<div class="footing_subnav"></div>
</div>
</body>
</html>
web前端学习（三）css学习笔记部分（2）-- css定位+盒子操作的更多相关文章
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- web前端开发常用的10个高端CSS UI开源框架
web前端开发常用的10个高端CSS UI开源框架 随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...
- Web前端开发最佳实践（9）：CSS代码太太乱，重复代码太多？你需要精简CSS代码
前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...
- 新手学习Web前端的三个高效学习方法，基础要重视
作为新手,出于对风险的担心,不免在学习一项新技能或者转投一个新行业的时候,有所犹豫与徘徊.毕竟,在这场类似冒险的选择中,我们需要投入时间.精力以及承受相关的经济损失.但是,只有勇敢迈出第一步,才能为生 ...
- web前端开发控件学习笔记之jqgrid+ztree+echarts
版权声明:本文为博主原创文章,转载请注明出处. 作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...
- 2022年Web前端开发流程和学习路线（详尽版）
前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...
- web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
- 最适合2018年自学的web前端零基础系统学习视频＋资料
这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...
随机推荐
- robocopy——Windows下的高效文件拷贝
1. 基本用法 C:\Users\>RoboCopy /? ------------------------------------------------------------------- ...
- NEO4J的安装配置及使用总结
#工具:使用neo4j desktop版本# 一,下载工具 可以到官方网站上下载桌面版或者community版本的,下载地址:https://neo4j.com/, 安装好. 二.配置环境变量 本文参 ...
- Lint found fatal errors while assembling a release target问题的解决方案
此问题发生在编译为 release 版本时,出现错误提示如下: Lint found fatal errors while assembling a release target. To procee ...
- Apache Pig入门学习文档（一）
1,Pig的安装 (一)软件要求 (二)下载Pig (三)编译Pig 2,运行Pig (一)Pig的所有执行模式 (二)pig的交互式模式 (三)使用pig脚本 ...
- vue题目
1.active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答: ...
- win10 安装face_recongnition
1.安装dlib https://stackoverflow.com/questions/41912372/dlib-installation-on-windows-10 2.安装face_recon ...
- 官网下载eclipse
百度搜索eclipse,点击官网链接进入官网 进入官网点击Download Packages 根据自己需要选择对应的版本 选择对应的版本进入下图下载页面,然后点击下载即可 下载完成,解压zip包即可使 ...
- php 怎样判断一段字符 有没有经过 urlencode 处理
有没有百分号 判断字符串 执行urldecode 之前和之后是否一致 一致就是没有经过urlencode 不一致就是经过urlencode的 自己方法:判断是否所有: if(strpos($cooki ...
- SQLServer：目录
ylbtech-SQLServer:目录 1.返回顶部 2. 文档返回顶部 · https://docs.microsoft.com/zh-cn/sql/sql-server/sql-server ...
- PAT甲级——A1025 PAT Ranking
Programming Ability Test (PAT) is organized by the College of Computer Science and Technology of Zhe ...