CSS布局方式
1.内边距 padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
*{
margin:0px;
}
.div1{
width:100px;
height:100px;
background-color:red;
padding:10px;/*内边距以内容为目标，距离边框的距离，盒子会被撑大*/
//如果没有给出left-top-right-bottom，默认为全部都是这个边距
} </style> <body> <div class="div1"></div> </body>
2.外边距 margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
*{
margin:0px;
}
.div2{
width:100px;
height:100px;
background-color:green;
border:2px solid yellow;
//Border：围绕在内边距和内容外的边框
margin-top:40px;
//margin:用于控制元素与元素之间的距离；margin最基本的用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
}
</style> <body>
<div class="div2"></div>
<!--margin collaspe 边境坍陷或者说边境重叠
外边距的重叠只产生在普通流文档的上下边距之间，这个看起来有点奇怪的规则，其实有其现实意义，设想
当我们上下排列一系列规则的块及元素,(如段落 p时)那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离 1.兄弟div：上面的margin-bottom和下面的div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值 2.父子div： 如果父级div中没有border，padding，inline content，子级的div会一直向上找，
直到找到某个标签包括border padding inline content 中的其中一个，然后按此div进行margin
-->
</body> </html>
3.浮动 float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .continer{
border:1px solid red;
width:300px;
} .div1{
width:100px;
height:200px;
background-color:yellow;
float:left;
} .div2{
width:100px;
height:200px;
background-color:green;
float:right;//浮动脱离文档流，后面的元素会填充进来，如果前面的元素也为浮动元素，会停在浮动元素后面 } .div3{
clear:both;
} .div4{
background-color:blue;
} .clearfix:after{
content:"";
display:block;
clear:both;/*清除左右浮动*/
} </style> </head>
<body> <div class="continer clearfix"> <div class="div1">box1</div>
<div class="div2">box2</div>
<!--<div class="div3"></div>-->
</div>
<div class="div4">box4</div> </body>
</html>
4.定位 position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位属性</title>
<style> *{
margin:0px;
} .div1{
width:200px;
height:100px;
background-color:yellow; } .div2{
width:200px;
height:100px;
background-color:green; position:absolute;/*绝对定位脱离文档流，相对于已定位的祖先元素，如果祖先元素没有定位则相对于body元素*/ /*position:relative;*//*相对定位，相对于自己原来的位置进行重新定位，不脱离文档流*/
left:100px;
top:100px;
} .div3{
width:100px;
height:200px;
background-color:red
} .div4{
width:200px;
height:200px;
background-color:blue;
} .return{
width:80px;
height:80px;
position:fixed;/*已窗口为参考点，固定定位*/
bottom:50px;
right:5px;
color:green;
text-align:center;
line-height:80px;
background-color:blue;
} </style>
</head>
<body> <div class="continer clearfix"> <div class="div1">box1</div>
<div class="div2">box2</div>
<div class="div3">box3</div>
<div class="div4">box4</div> </div>
<div style="height:2000px;background-color:pink"></div> <div class="return">返回顶部</div> <!--仅使用margin属性布局绝对定位：margin-bottom，margin-right的值不再对文档流产生影响，因为元素已经脱离文档流
不管他的祖先元素有没有定位，都是以文档流中原来的位置偏移参照物--> </body>
</html>
5.display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:50px;
height:50px;
background-color:yellow;
/* display:inline;*/
} p{
width:50px;
height:50px;
background-color:red;
/*display:inline*/
} span{
width:50px;
height:50px;
background-color:blue;
display:inline-block;
} a{
width:50px;
height:50px;
background-color:green;
display:inline-block; }
</style> </head>
<body> <div>div1</div>
<p>123</p> <span>spannnnn</span>
<a href="#">abcaaaaa</a> </body>
</html>
CSS布局方式的更多相关文章
- 细谈CSS布局方式
一.CSS布局方式分类 [1].默认文档流方式:以默认的html元素的结构顺序显示 [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动.left对象向左浮动,而后面的内容流 ...
- 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法
前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...
- CSS布局方式--inline-block 布局
布局其实就是想办法怎样将一些元素横向的排列起来,纵向由于块级元素的存在会自动占据一行. inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行,而且使用 inline-bl ...
- css 布局方式
布局方式 1 布局:设置元素在网页中的排列方式及显示效果 2 分类: 1 标准流布局(文档流,普通流,静态流) 是默认的布局方式 特点:将元素按照书写顺序及元素类型,从上至下,从左至右排列 2 浮动布 ...
- css布局方式总结
### 居中布局 ### 一.水平居中 * 要求:子元素于父元素水平居中且其(子元素与父元素)宽度均可变. ```` javacript <div class="parent" ...
- CSS 布局入门
概述 Web 兴起之后,关于CSS的介绍和学习资料已经铺天盖地. 本文不涉及具体的CSS语法之类的,而是希望从初学者的角度,让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用. ...
- [转]基于display:table的CSS布局
当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...
- css Table布局：基于display:table的CSS布局
两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
- 还在为垂直居中苦恼？CSS 布局利器 flexbox 轻轻松松帮你搞定
传统的 CSS 布局方式是基于盒模型(它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法),实现时依赖于 block, inline, table, position, float 这些属性, ...
随机推荐
- windows怎么远程访问deepin linux桌面
deepin linux端安装anydesk 1.首先点击打开任务栏上的“深度商店” 2.打开后搜索anydesk. 3.点击进入后按“安装”即可,安装完成即可在“深度商店”点击“打开”运行anyde ...
- SAEJ1757-1-2015（一）
SURFACE VEHICLE STANDARD 表面车辆标准 Standard Metrology for Vehicular Displays 车载显示 ...
- python - 函数any() 和 all() 的区别
转自:https://www.cnblogs.com/nulige/p/6128816.html any()与all()函数的区别: any是任意,而all是全部. 版本:该函数适用于2.5以上版本, ...
- css(float浮动和clear清除)
教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1 ...
- 关于Toad的Cannot load OCI DLL问题
昨天重新安装了新版本的JDK,突然发现Toad连接的时候报Cannot load OCI DLL....问题,网上查找了多种方法均不见效. 后调整系统环境变量配置,还原了之前安装的JDK版本,问题修复 ...
- 51N皇后
题目:n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击.给定一个整数 n,返回所有不同的 n 皇后问题的解决方案.每一种解法包含一个明确的 n 皇后问题的 ...
- java：IO流（File，字节流/输入输出流（InputStream（FileInputStream），OutputStream（FileOutStream）），字符流（Reader，Writer））
File: * java.io.File类:代表一个文件或目录. * 常用的构造方法: * File(String pathname)通过将给定路径名字符串转换为抽象路径名来创建一个新 File 实例 ...
- CTF—攻防练习之HTTP—PUT上传漏洞
主机:192.168.32.152 靶机:192.168.32.159 中间件PUT漏洞 包括apache,tomcat,IIS等中间件设置支持的HTTP方法(get,post,head,delete ...
- Jmeter 04 Jmeter变量的使用
在使用jmeter进行接口测试时,我们难免会遇到需要从上下文中获取测试数据的情况,这个时候就需要引入变量了. 定义变量 添加->配置元件->用户自定义的变量 添加->配置元件-> ...
- Elasticsearch-索引新数据（创建索引、添加数据）
ES-索引新数据 0.通过mapping映射新建索引 CURL -XPOST 'localhost:9200/test/index?pretty' -d '{ "mappings" ...