CSS盒模型简单用法
1.盒模型
margin:外边距； margin-top /margin-right/margin-bottom/margin-left; 或者 margin:top right bottomleft;
border:边框；border-top /border-right/border-bottom/border-left; 或者 border:top right bottomleft;
padding:内边距；padding-top /padding-right/padding-bottom/padding-left; 或者 padding:top right bottomleft;
2.margin (外边距)
2.1margin作为外边距，因此我们可以通过调整margin的距离来改变元素的位置；
列：通过写 margin:auto 来实现让div居于整个页面中间；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{width:50px;height: 50px;background: yellow; margin: auto}
</style>
</head>
<body>
<div >
</div>
</body>
</html>
同样的我们也可以采用margin-top /margin-right/margin-bottom/margin-left;让元素居于想要的位置，但是要注意的是采用margin调整元素的位置会影响该元素后面的元素的位置；因此采用margin布局要特别注意不要影响后面的元素布局；
当我们将一个元素放到一个另一个元素中并且想通过使用margin来改变这个元素的布局，这个时候会发现如果直接使用margin会使父级元素同这个元素一起改变位置，但是父级元素的margin却没有发生改变；
列如：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.d1{width:300px;height: 300px;background: yellow; margin: auto}
.d2{width: 50px;height:50px;background: green;margin-top: 20px}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
</div>
</body>
</html>
为了使只改变你想要改变的位置却不改变父级元素的位置，使该元素脱离正常的文档流，这样改变位置的时候就不会影响父级元素了；
列如：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.d1{width:300px;height: 300px;background: yellow; margin: auto}
.d2{width: 50px;height:50px;background: green;margin-top: 20px;float:left;}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
</div>
</body>
</html>
如上的列子让d2浮动，这样脱离了文档流就可以改变d2的margin让d2的位置改变而父级d1的位置却不改变；
2.2应为margin可以为负的，因此有了负边距布局，
列：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.center{
float: left;
width: 100%;
}
.main{
background: yellow;
margin: 0 210px;
height: 200px;
}
.left,.right{
width: 200px;
height: 200px;
background: blue;
float: left;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
</style>
</head>
<body>
<div class="center">
<div class="main">
center
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
效果如图：改变窗口大小左右两边的蓝色框大小不变，中间的大小改变
2.3 由于有了负边距的布局，有衍生出了圣杯布局：
列：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
text-align: center;
font-size: 1.2em;
}
.head{
width: 100%;
height: 50px;
background: #f50;
}
.body{
padding: 0 200px;
}
.center{
width: 100%;
height: 200px;
background: yellow;
float: left;
}
.left,.right{
width: 200px;
height: 200px;
background: blue;
float: left;
position: relative;
}
.left{
margin-left: -100%;
right: 200px;
}
.right{
margin-left: -200px;
left:200px
}
.foot{
clear: both;
width: 100%;
height: 50px;
background: #0ff;
}
</style>
</head>
<body>
<div class="head">
head
</div>
<div class="body">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="foot">
foot
</div>
</body>
</html>
如下图，具有与负边距布局相同的效果，改变窗口大小黄色区域改变大小，但是蓝色区域大下固定不变
圣杯布局相对于负边距布局感觉两者的差别不大，圣杯布局的兼容性要比负边距布局更好。
3.border （边框）
用border绘制的图案：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
width: 0;
height: 0;
border:50px solid;
border-top-color: rgb(255, 11, 12);
border-right-color: rgb(56, 18, 255);
border-bottom-color: rgb(85, 255, 31);
border-left-color: rgb(255, 215, 28);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
通过对border的不同边设置不同的样式可以得到不同的图形：
4.padding （内边距）
通过调整内边距可以使内容与border之间有间隔，这一应用在文本输入框中很实用
列：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.t2{
padding-left: 16px ;
}
</style>
</head>
<body>
<input type="text" class="t1"/>
<input type="text" class="t2"/>
</body>
</html>
样式：
注意：当加入padding后会改变文本输入框的大小；
CSS盒模型简单用法的更多相关文章
- CSS盒模型和文本溢出
CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一.认识盒子模型 盒模型是css布局的基石,它规定了网页元素 ...
- 每日分享！介绍Css 盒模型！
如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...
- 4、css盒模型和文本溢出
4:css盒模型和文本溢出 学习目标 1.认识盒子模型 2.盒子模型的组成部分 3.学习盒子模型的相关元素 margin padding 4.文本溢出相关的属性 一.css属性和属性值的定义 盒模型是 ...
- CSS盒模型
CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...
- 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度
前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- CSS盒模型和定位的类型
此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
- CSS盒模型（Box Model）
阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...
随机推荐
- 关于使用Transaction对于非数据库事务的操作
在操作数据库的过程中,为了数据的一致性,我们可以使用Transaction,要么成功的时候全部提交,要么有任何一个操作失败立即全部回滚.不仅仅是在数据库方面,有时候操作其他的内容,比如说对于系统文件的 ...
- iOS 消息推送实现 APNS
本文只是记录一下如何在自己的电脑上配置APNS推送环境,其它的如推送的原理,流程什么的这里就不写了. 一. 去Apple 开发者中心,创建App ID.注意App ID不能使用通配符.并注意添加Pus ...
- ThreadPool for Delphi
http://sourceforge.net/projects/threadpoolpas/ http://hivelocity.dl.sourceforge.net/project/threadpo ...
- App Submission Issues
查看原文: http://leancodingnow.com/app-submission-issues/ I bet many iOS developers are busy submitting ...
- Jquery 右键菜单(ContextMenu)插件使用记录
目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单 ...
- hdu 5272 Dylans loves numbers 水题
Dylans loves numbers Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem. ...
- C#程序通过模板自动创建Word文档
引言:前段时间有项目要用c#生成Word格式的计算报告,通过网络查找到很多内容,但是都很凌乱,于是自己决定将具体的步骤总结整理出来,以便于更好的交流和以后相似问题可以迅速的解决! 现通过具体的示例演示 ...
- 泛型Dictionary的用法详解
泛型最常见的用途是泛型集合,命名空间System.Collections.Generic 中包含了一些基于泛型的集合类,使用泛型集合类可以提供更高的类型安全性,还有更高的性能,避免了非泛型集合的重复的 ...
- 安装linux系统并配置那点事
安装完成后,将看到如下控制台: 输入以上安装信息中所填写的用户名(user),随后输入密码(user),即可登录 Ubuntu. 随时可使用 Ctrl + Alt 快捷键可离开虚拟机. 3 配置 Ub ...
- MySQL优化---DBA对MySQL优化的一些总结
非原创, 来自梦嘉朋友, 非常好的总结, 一起学习. ------------------------------------------------- 1. 要确保有足够的内存数据库能够高效的运 ...