上面的布局宽度
div{

            width: 200px;

            height: 200px;

            border: 10px solid red;

            padding: 20px;

        }

------------------------------------

    <!--

    padding: 就是内边距。 padding的区域是有背景颜色。并且背景颜色和内容区域颜色一样

    也就是说background-color这个属性将填充所有的border以内的区域

    就是边框到内容之间的距离

    padding有四个方向。所以说我们能分别描述4个方向的padding

    方法有两种：1.写小属性  2.写综合属性 用空格隔开

--------------------------------------------------------------------------------
.box{
   width: 300px;
   height: 300px;
   /*padding: 30px;*/
   background-color: red;
   /*border: 5px solid yellow;*/

   /*小属性设置*/
   /*padding-top: 30px;
   padding-right: 30px;
   padding-bottom: 30px;
   padding-left: 30px;*/

   /*综合属性设置，用空格隔开*/

   /*上 右 下 左*/
   /*padding: 20px 30px 40px 50px ;*/

   /* 三个值表示的时候 上20px  左右30px  下40px*/
   padding: 20px 30px 40px;

   /*两个值表示的时候：上下为20px   左右为30px*/
   /*padding: 20px 30px;*/

   /*一个值表示的时候   上下左右都是 20px*/
   /*padding: 20px;*/




------------------------------------------------------------------


一些标签默认有padding




那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

我们现在初学可以使用通配符选择器

*{

  padding:0;

  margin:0;

}

But，这种方法效率不高。

所以我们要使用并集选择器来选中页面中应有的标签（不用背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）

https://meyerweb.com/eric/tools/css/reset/




----------------------------------------------------------------------------


盒模型的属性




盒模型的属性

width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

如果让你做一个宽高402*402的盒子，您如何来设计呢？

答案有上万种，甚至上一种。




-------------------------------------------------------


border: 边框，


border: 5px  solid  red;


border: 5px  solid  red;




border:边框的意思，描述盒子的边框

border:5px(粗细)  solid(线性样式) red(颜色)

边框有三个要素： 粗细 线性样式 颜色

border: solid

如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

按照3要素来写border

border-width: 3px;

border-style: solid;

border-color: red;

/*

border-width: 5px 10px;

border-style: solid dotted double dashed;

border-color: red green yellow;

*/

按照方向划分

border-top-width: 10px;

border-top-color: red;

border-top-style: solid;

border-right-width: 10px;

border-right-color: red;

border-right-style: solid;

border-bottom-width: 10px;

border-bottom-color: red;

border-bottom-style: solid;

border-left-width: 10px;

border-left-color: red;

border-left-style:solid;

上面12条语句，相当于 bordr: 10px solid red;

另外还可以这样：

border-top: 10px solid red;

border-right: 10px solid red;

border-bottom: 10px solid red;

border-left: 10px solid red;

清除边框的默认样式，比如input输入框

 border:none;

 border:0;

使用border来制作小三角

/*小三角 箭头指向下方*/

        div{

            width: 0;

            height: 0;
　　　　　　　border-top: 10px solid red;           top     上

            border-bottom: 20px solid red;        bottom  下

            border-left: 20px solid transparent;  left    左  透明色

            border-right: 20px solid transparent; right   右

        }


<body>
   <div></div>

</body>






-------------------------------------------------


margin




margin：外边距的意思。表示边框到最近盒子的距离。(兄弟之间)

/*表示四个方向的外边距离为20px*/

margin: 20px;

/*表示盒子向下移动了30px*/

margin-top: 30px;

/*表示盒子向右移动了50px*/

margin-left: 50px;

margin-bottom: 100px;


												


											
前端-CSS-6-盒子模型的更多相关文章
	

    
						
  1. 深入理解CSS系列（一）：理解CSS的盒子模型
		
    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
    
		
    2. 
						
  2. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
		
    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局)  ...
    
		
    3. 
						
  3. 使用css弹性盒子模型
		
    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
    
		
    4. 
						
  4. #CSS的盒子模型、元素类型
		
    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
    
		
    5. 
						
  5. 深入了解CSS中盒子模型
		
    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
    
		
    6. 
						
  6. CSS 弹性盒子模型
		
    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
    
		
    7. 
						
  7. 前端开发HTML&css入门——盒子模型以及部分CSS样式
		
    CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...
    
		
    8. 
						
  8. 前端学习笔记--CSS布局--盒子模型
		
    1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:
    
		
    9. 
						
  9. CSS样式----盒子模型（图文详解）
		
    盒子模型 盒子中的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin.如下: width:内容的宽度.CSS中 width 指的是内容的宽度,而不是 ...
    
		
    10. 
						
  10. 认识CSS中盒子模型
		
    前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 7 无线wifi传输视频开发
			
    转载,侵删 7 无线wifi传输视频开发 MT7601的驱动源码提供了两种:AP模式和STA模式源码.此时我使用USB作为AP热点,电脑作为STA模式,并使用ORTP实现无线传输视频 7.1.AP模式 ...
    
			
    2. 
						
  2. idea新用法
			
    https://blog.csdn.net/linsongbin1/article/details/80211919
    
			
    3. 
						
  3. ORACLE设置密码无过期
			
    适用于ORACLE11G //获取用户所属的profile SELECT username,PROFILE FROM dba_users;//查看profile的密码有效期 默认是180天SELECT ...
    
			
    4. 
						
  4. Linux下C/C++代码调用PHP代码(转)
			
    Linux下C/C++代码可以通过popen系统函数调用PHP代码并通过fgets函数获取PHP代码echo输出的字符串. //main.c char str[1024] = {0}; char *  ...
    
			
    5. 
						
  5. 禁止HTML页面缓存
			
    head标签里增加: <meta http-equiv="X-UA-Compatible" content="IE=8"> <meta htt ...
    
			
    6. 
						
  6. ionic使用常见问题(八)——PHP无法获取$http的post数据
			
    一个简单的post请求 $http.post('do-submit.php',myData) .success(function(){ // some code });   可是,用angularjs ...
    
			
    7. 
						
  7. VS起始页不显示最近使用的项目解决方案
			
    前段时间换了一家公司,做ASP.NET开发,让我郁闷的是VS的起始页总是不显示最近使用项目,起先没在意,后来觉得越来越不方便了,然后本着内事不决问百度,外事不决问谷歌的态度,我就百了下~,结果还真遇到 ...
    
			
    8. 
						
  8. Android 自定义 spinner (背景、字体颜色)
			
    转自:http://blog.sina.com.cn/s/blog_3e333c4a010151cj.html 1.准备两张图片,并做好9.png   2.在drawable中定义spinner_se ...
    
			
    9. 
						
  9. 大数据应用之HBase数据插入性能优化之多线程并行插入测试案例
			
    一.引言: 上篇文章提起关于HBase插入性能优化设计到的五个参数,从参数配置的角度给大家提供了一个性能测试环境的实验代码.根据网友的反馈,基于单线程的模式实现的数据插入毕竟有限.通过个人实测,在我的 ...
    
			
    10. 
						
  10. 学习笔记之C# / .NET Core 2.0
			
    C# 教程 | 菜鸟教程 http://www.runoob.com/csharp/csharp-tutorial.html .NET API Browser | Microsoft Docs htt ...
    
			
    11.