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天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...
随机推荐
- 博弈论 | 暑期集训Day2学习总结
今天的知识点为博弈论. 相比于昨天完全陌生难懂的概念,今天接触到的东西应该算是非常容易理解了,一下子又对ACM的学习重拾信心.毕竟game作为主题也吸引眼球,每种博弈背景下引入的游戏介绍也十分有趣.主 ...
- Netty SimpleChannelInboundHandler和ChannelInboundHandler区别
一般用netty来发送和接收数据都会继承SimpleChannelInboundHandler和ChannelInboundHandlerAdapter这两个抽象类,那么这两个到底有什么区别呢? 在客 ...
- 记录下sparkStream的做法(scala)
一直用storm做实时流的开发,之前系统学过spark但是一直没做个模版出来用,国庆节有时间准备做个sparkStream的模板用来防止以后公司要用.(功能模拟华为日常需求,db入库hadoop环境) ...
- Leetcode515. Find Largest Value in Each Tree Row在每个树行中找最大值
您需要在二叉树的每一行中找到最大的值. 示例: 输入: 1 / \ 3 2 / \ \ 5 3 9 输出: [1, 3, 9] class Solution { public: vector<i ...
- gethostname gethostbyname gethostbyaddr 获得主机相关信息
网络编程里经常需要获得主机的相关信息,下面围绕相关的函数以及用到的结构来说明. 获得主机名:int gethostname( char FAR *name, //[out] Pointer to a ...
- codeforces600E. Lomsat gelral(dsu on tree)
dsu on tree先分轻重儿子先处理轻边,再处理重儿子再加上轻儿子的答案 #include<iostream> #include<cstdio> #include<q ...
- js中call、apply、bind的区别和应用
一.总体概述 这三个方法都是改变函数本身的this指向的,但是略有不同 1.call 使用方法:函数名.call(this指向,展开的参数列表); 如果传入的this指向是null或者是undifin ...
- yolo-windows检测高分辨率图像及封装应用
YOLO训练自己的数据集的一些心得 封装yolo-windows为动态链接库 yolo-windows源码 项目开源代码:LargeImageDetect-yolo-windows 由于项目需要,需要 ...
- Tuxera ntfs软件如何删除干净
sudo /Library/Filesystems/fusefs_txantfs.fs/Contents/Resources/Support/uninstall-package.sh
- CentOS 6.5 Apache、MySQL、PHP环境配置(LAMP)
yum -y install httpd mysql-server php #安装apache.mysql和PHP yum -y install php-mysql php-gd php-mbstri ...