上面的布局宽度
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. hdu 4651 Partition && hdu 4658 Integer Partition——拆分数与五边形定理
			
    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4651 参考:https://blog.csdn.net/u013007900/article/detail ...
    
			
    2. 
						
  2. JMeter--详解JMeter配置元件
			
    JMeter配置元件可以用来初始化默认值和变量,以便后续采样器使用.将在其作用域的初始化阶段处理. CSV Data Set Config:被用来从文件中读取数据,并将它们拆分后存储到变量中,适合处理 ...
    
			
    3. 
						
  3. windows server 2008 修改域的密码策略
			
    1.一般情况下,进入本地安全策略修改密码策略时,,密码策略已经被锁定,无法更改,若要修改域服务器上的密码策略,请按照步骤2--6进行修改 2.在此情况下要改密码策略的过程如下, 进入组策略管理: 3. ...
    
			
    4. 
						
  4. MySQL 瓶颈及应对措施
			
    注:内容摘抄自<PHP 核心技术与最佳实践>一书 MySQL 是存在瓶颈的. 当 MySQL 单表数据量达到千万级别以上时,无论如何对 MySQL 进行优化,查询如何简单,MySQL 的性 ...
    
			
    5. 
						
  5. .gitignore 存放位置
			
    放在仓库根目录下即可.比如你的仓库在“D:\MYREPO”,位置就是“D:\MYREPO\.gitignore”. 模板可从GITHUB上COPY一份.
    
			
    6. 
						
  6. java Map实例
			
    此段资料在自于<黑马程序员_毕向东_Java基础视频教程第16天-06-集合(Map练习)> HashMap 如果对象可能会产生很多对象,可能就会需要存储,就有可能会存到hashSet(哈 ...
    
			
    7. 
						
  7. War包反编译过程
			
    War包反编译过程 很多人可以将项目编译为war发布,可是有时候得到war确看不到源码.今天分享下war反编译的过程: 1.首先下载一个小工具,在http://jd.benow.ca/官网下载jd-g ...
    
			
    8. 
						
  8. vscode美化方法以及定制主题插件
			
    首先是学会调整字体和字体大小 换成你看着舒服的字体和字体大小,当然,通常情况下默认的就很好看,但每个人的显示屏参数不同显示起来的效果因人而异,如果你有更好的方案不妨设置一下 下面展示我的浅色主题和深色 ...
    
			
    9. 
						
  9. HUD 2639   Bone Collector II
			
    Bone Collector II Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...
    
			
    10. 
						
  10. POJ 1679 The Unique MST  (次小生成树kruskal算法）
			
    The Unique MST 时间限制: 10 Sec  内存限制: 128 MB提交: 25  解决: 10[提交][状态][讨论版] 题目描述 Given a connected undirect ...
    
			
    11.