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盒模型的不了解,撞了很多次的南墙呀 ...
随机推荐
- as3.0:文字 效果
//文字描边效果var tf1 = _root.createTextField("tf1", _root.getNextHighestDepth(), 10, 10, 0, 0); ...
- 如何在KVM中管理存储池
来自:http://blog.csdn.net/my2005lb/article/details/8635661 KVM平台以存储池的形式对存储进行统一管理,所谓存储池可以理解为本地目录.通过远端磁盘 ...
- ActionBar ShareActionProvider
添加share按钮 添加share按钮的主要步骤: 1. 在ActionBar中添加share按钮 2. 从item中获取ShareActionProvider ShareActionProvider ...
- Django官方文档学习2——数据库及模板
网址:https://docs.djangoproject.com/en/1.10/intro/tutorial02/ 1.扫描installed_apps,创建需要的数据库table python ...
- putty 中文乱码解决方法
解决putty.exe 中文乱码的问题 export NLS_LANG="AMERICAN_AMERICA.ZHS16GBK"
- iOS 3DES DES AES加密注意事项！！很重要，否则会加密失败
今天做项目,需要进行3des加密. 加密的gkey:abcdefgh giv:(偏移量)abcdefgh 加密后结果:p+X985x5bFS6dWjAnm6sdQ== 下面是代码: +(NSStr ...
- Codeforces Gym 100463E Spies 并查集
Spies Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100463/attachments Desc ...
- 一步步学Mybatis-搭建最简单的开发环境-开篇（1）
最近抽空学习了Mybatis这个框架,在学习的过程中也找了很多的文章,个人感觉官网上的东西太多太杂,不适合许多希望一步步快速上手的朋友们,当然觉得查阅问题的时候可以直接通过官网找还比较快或者是Stac ...
- iOS开发——数据持久化Swift篇&（四）CoreData
CoreData import CoreData class ViewController: UIViewController { override func viewDidLoad() { supe ...
- LeetCode45 Jump Game II
题目: Given an array of non-negative integers, you are initially positioned at the first index of the ...