上面的布局宽度
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. JVM（上）
			
    堆.栈 JVM内存≍Heap(堆内存)+PermGen(方法区)+Thrend(栈)Heap(堆内存)=Young(年轻代)+Old(老年代),官方文档建议整个年轻代占整个堆内存的3/8,老年代占整个 ...
    
			
    2. 
						
  2. 关于 Vue 方法前面的美元符号
			
    关于 Vue 方法前面的美元符号 学到这一段,不明白什么意思,然后手贱把 $ 删除了,出现未定义方法. vm.$watch('counter', function(nval, oval) { aler ...
    
			
    3. 
						
  3. Angular 4 表单校验2
			
    1. 将表单的方法移动到单独的ts文件夹中 2. code export function mobileValidator(control: FormControl): any { const myr ...
    
			
    4. 
						
  4. thinkphp mysql和mongodb 完美使用
			
    thinkphp mysql和mongodb 完美使用.第一步:在你的应用的Model文件下建立一个MonModel如下图第二步:MonModel的内容如下 <?php /** * Create ...
    
			
    5. 
						
  5. Gitlab Jenkins WebHook 持续集成配置踩坑记
			
    Jenkins相关介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 目的 配置Gitla ...
    
			
    6. 
						
  6. JS时间（日期）比较或相减(暂时停用)
			
    注:此文均来自网上,可行,只供参考 //JAVASCRIPT中 日期相减很麻烦 ,现在有现成的实现方法,拷贝过去就可以用了,方便 //调用该方法(主方法) function dateDiff(date ...
    
			
    7. 
						
  7. debian之apt源
			
    美国的 deb http://ftp.us.debian.org/debian stable main contrib non-freedeb-src http://ftp.us.debian.org ...
    
			
    8. 
						
  8. LAMP兄弟连 李强强 GVIM配置文件完整版
			
    转自http://blog.sina.com.cn/s/blog_5fbb378c01016npv.html "自己看着李强强老师视频代码手写打的.之前最后的一个gvim默认函数方法没放上, ...
    
			
    9. 
						
  9. 使用pip安装Scrapy出错
			
    目录 安装Scrapy出错 安装 使用pip安装(Ubuntu) 错误信息 解决方法 安装Scrapy出错 安装 使用pip安装(Ubuntu) # 安装pip sudo apt install py ...
    
			
    10. 
						
  10. -Java-Runoob-高级教程-实例-数组：09. Java 实例 – 数组扩容
			
    ylbtech-Java-Runoob-高级教程-实例-数组:09. Java 实例 – 数组扩容 1.返回顶部 1. Java 实例 - 数组扩容  Java 实例 以下实例演示了如何在数组初始化后 ...
    
			
    11.