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盒模型的不了解,撞了很多次的南墙呀 ...
随机推荐
- 使用#pragma阻止一些warnings
这篇博客的内容都是记的网上的.是流水账.只是记录下来以便日后之有,避免每次重新google. #pragma除了可以用来把不同功能的代码进行分隔组织外还可以用来disable一些warnings.这在 ...
- Java常见排序算法之冒泡排序
在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...
- bzoj 1026 [SCOI2009]windy数 数位dp
1026: [SCOI2009]windy数 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline ...
- c语言write与python的struct模块交互
以下讲的都是用二进制形式打开文件.网上有很多struct模块的文章,下面是我做的小实验. 1.对于c里面的fwrite写入一个单字节,写的就是它的二进制.如3,写入文件就是二进制0x03,它并不是3的 ...
- Kubuntu（14.04）共享wifi（热点）
笔记本(kubuntu14.04)通过有线上网,共享本机无线给手机.平板及其他通过wifi上网的设备. 曾经在网上找过各种方法.下载了非常多软件都不能在本机上实现wifi共享,以下这样的方法眼下相对简 ...
- 视频流服务器配置[windows平台][转]
视频流服务器配置[windows平台] 搭建一个Flv视频播放服务器 作者:笨小孩 发布于:2013-9-1 20:18 分类:环境架设 IIS,Apache,Nginx环境都可以很好的支持视频的播放 ...
- ssl/https双向验证的配置
1.SSL认证 不需要特别配置,相关证书库生成看https认证中的相关部分 2.HTTPS认证 一.基本概念 1.单向认证,就是传输的数据加密过了,但是不会校验客户端的来源 2.双向认证,如果客户端 ...
- 为您的Android，iOS等应用加入声波传输功能
记得12年左右的时候,美国出现了chirp应用,该应用能够使用声波在iphone手机间传输文本,图片.甚至视频.当时认为非常高大上. 再后来,到13年的时候国内也出现了非常多声波应用.比方支付宝的声波 ...
- Hello_IOS ios开发transform属性
#import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutl ...
- WCF关于VS2010的配置
C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE 下的 devenv.exe.config 在 <configura ...