border属于盒子属性吗,不属于盒子属性
盒模型”这个概念的理解，和它都涉及到哪些css属性
border为盒子的边框，margin为盒子与外界的距离，padding为盒子里的东西与盒子边框的距离，width，height为盒子里的东西的长和宽.
border有border-top,border-bottom,border-left,border-right,分别设置上下左右的边框样式，比如border-left:2px solid red;是把左边框的粗细设置为2像素，风格为实线，颜色为红色。前面的例子为简写形式，其实际上是些为border-left-width:2px; border-left-style:solid; border-left-color:red;
border-radius有border-top-left,border-top-right,border-bottom-left,border-bottom-right,是设置盒子的四个角的半径，可以接受的单位有像素和百分比，可以将盒子的边框弄成一个圆角矩形甚至圆形。
margin有margin-top,margin-bottom,margin-left,margin-right,设置了盒子与其他元素之间的距离，比如margin-left:3px;就把盒子与左边元素的距离设置成了2像素，另外设置好body的宽度后，用margin-left:auto;margin-right:auto;就把盒子居中了。
padding有padding-left,padding-bottom,padding-right;padding-top;可以设置盒子里的东西与盒子边框的距离。
ps:margin与padding不接受颜色设置。
整个盒子的宽度为width+padding-left+padding-right+border-left-width+border-right-width;
整个盒子的高度为height+padding-top+padding-bottom+border-top-width+border-bottom-width;
css不属于盒子属性的是
float。css不属于盒子属性的是float，因为盒模型的组成的三个重要属性是marginborder和padding，没有float。CSS是CascadingStyleSheets的简称，中文称为层叠样式表。
什么是盒模型
? ? ??在前端中盒模型可谓是十分重要的，它是CSS进行页面布局的基石，在页面CSS布局中盒模型规定了网页元素如何排列显示以及元素之间的相互关系。在H5中CSS样样式定义所有的元素都可以拥有像盒子一样的平面空间和外形。（如下图所示）整个盒模型包含了：内容区（content）、补白或填充（因叫法不同；padding）、边框（border）、边界或外边距（margin）这就是盒模型。
? ? ??从盒模型的定义中我们了解到了盒模型是由内容区（content）、填充区（padding）（注：在本文中就称填充区）、边框（border）及外边距（margin）（注：在本文中就称外边距）4个部分组成，那么它们是怎么来定义的，每个组成部分的属性用法又是什么？
? ? ??Content（内容区）：它是整个元素的宽和高，是属于元素内容的区域
? ? ??border（边框）：它是盒子的边缘既是边框
? ? ??Padding（填充区）：它是盒子边框与内容之间的间距，或者说是父元素与子元素之间的内边距
? ? ??Margin（外边距）：它是盒子边框以外的外边距，或者说是同辈元素之间的间距
? ? ??border-width:1px; ：设置边框的宽度的，在设置边框宽度时会用到此属性默认为1px，在网页中很多修饰性线条都是由边框来实现的，在给属性加值得时候需要加上单位，如px（像素），em...
? ? ??border-style:solid: ：设置边框的线型样式，边框线性也有多个值，如：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)...
? ? ??border-color:; ；设置边框的颜色，默认为黑色。
? ? ??Border-style:none; ；取消边框，在css样式中如盒子有单一方向用不到边框可用此属性取消边框
? ? ??扩展：border-style:none;的应用场景：加了超链接的插入图片，在IE低版本浏览器会出现边框。解决方法：给img 这个标签添加border-style:none;。
边框有四个方向，必要时可单独设置一方向边框属性，
? ? ??1：border-top: ?????上边框，可给边框设置宽度、线型、颜色。
? ? ??2：border-right: ????右边框，可给边框设置宽度、线型、颜色。
? ? ??3：border-bottom: ??底边框，可给边框设置宽度、线型、颜色。
? ? ??4：border-left: ?????左边框，可给边框设置宽度、线型、颜色。
? ? ??为盒子写边框属性时，为方便书写，有复合式写法：
? ? ??1：border-top-width:10px ; ???????上边框的宽度
? ? ??2：border-right-width:20px; 右边框的宽度
? ? ??3：border-bottom-width:30px; ???下边框的宽度
? ? ??4：border-left-width: 40px; ??????左边框的宽度
? ? ??border-width:10px 20px 30px 40px; ?border-width 的复合式写法
? ? ??1：border-top-style:solid; ???????????上边框的线型
? ? ??2：border-right-style:dashed; ????????右边框的线型
? ? ??3：border-bottom-style:double; ??????下边框的线型
? ? ??4：border-left-style:dotted; ??????????左边框的线型
? ? ??边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框
? ? ??border-style:solid dashed dotted double; ???border-style 的复合式写法
? ? ??1：border-top-color:#f00; ??????????上边框的颜色
? ? ??2：border-right-color:#ff0; ??????????右边框的颜色
? ? ??3：border-bottom-color:#00f; ???????下边框的颜色
? ? ??4：border-left-color:#fff; ??????????左边框的颜色
? ? ??border-color:#f00 #ff0 #00f #fff; ?border-color 的复合式写法
? ? ??如果边框的属性值我用1、2、3、4、来代替，那么它们的复合式写法可有以下几种：
? ? ??1：border:1；2；3；4； ：1、上 ；2、右 ；3、下； 4、左
? ? ??2：border:1；2；3； ???：1、上；2、左和右3、下
? ? ??3：border:1；2； ??????：1、上和下；2、左和右
? ? ??4：border:1； ?????????：1、上、下、左、右 ?
? ? ??复合式写法：分开设置每个边的边框样式
? ? ??1：border-top:#f00 solid 10px; ??
? ? ??2：border-right:#0f0 dotted 20px;
? ? ??3：border-bottom:#00f dashed 30px;
? ? ??4：border-left:#fff double 40px;
? ? ??border：10px solid #ff0; ?????代表四个边框样式是统一的，最复合式的写法；
注：边框的大小，是会添加在元素原有大小之外的，会改变元素原本的大小；也就是说边框是占位置的（在标准盒模型的情况下）。
? ? ??可以用来控制父元素和子元素之间的位置关系
? ? ??可以用来控制元素和内容之间的位置关系
? ? ??再给盒子添加了padding值之后，padding值会把元素原有的盒子大小撑大，如果让元素原本盒子大小不变得话，需要在元素的宽高上减掉所加的padding值。 padding属性对背景图片是不起作用的，可以说背景图片的位置，是不受padding的影响的。如果元素本身有背景色，那么背景色会延展到padding区域。
padding的使用方法
方法一：给盒子单个方向加padding值
? ? ??1：padding-top:10px; ????????上填充
? ? ??2：padding-right:10px; ???????右填充
? ? ??3：padding-bottom:10px; ?????下填充
? ? ??4：padding-left:10px; ?????????左填充
?方法二：给盒子所有方向加padding值（复合式写法）
? ? ??1：padding： 1 ??2 ???3 ??4 ?： ?1、上；2、右；3、下；4、左
? ? ??2：padding： 1 ??2 ???3 ?????： ?1、上；2、左和右；3、下
? ? ??3：padding： 1 ??2 ??????????： ?1、上和下；2、左和右
? ? ??4：padding： 1 ??????????????： ?1、上 、右、 下、 左
? ? ??用来控制同辈元素之间的位置关系。
? ? ??margin是显示在元素边框以外的空白区的，给元素加上的margin值是不需要减去的，而且margin属性的值可以施加负值。
方法一：给盒子单个方向加margin值
? ? ??1：margin-top:10px; ????????上外边距
? ? ??2：margin-right:10px; ???????右外边距
? ? ??3：margin-bottom:10px; ?????下外边距
? ? ??4：margin-left:10px; ????????左外边距
方法二：给盒子所有方向加margin值（复合式写法）
? ? ??margin：1 ??2 ???3 ??4 ???????：1、上；2、右；3、下；4、左
? ? ??margin：1 ??2 ???3 ???????????：1、上；2、左和右；3、下
? ? ??margin：1 ??2 ????????????????：1、上和下；2、左和右
? ? ??margin：1 ????????????????????：1、上、右、下、左
? ? ??在盒模型中margin属性除了可以设置外边距以外，还可实现元素水平居中：margin：0 auto；、margin-left:auto;、margin-right:auto;共三种属性值。
? ? ??在盒模型中margin属性是可以写负值的，可以用此来实现元素位置调整，而且margin的值是不会影响到元素的实际大小，但是会影响到其他元素所占区域。
? ? ??盒模型中如果给多个元素设置margin值，上下两个相邻元素之间的margin值会重叠显示，会用相邻元素margin的最大值显示
? ? ??在盒模型中当给元素里第一个子元素（块状元素）添加margin-top值的时候，会错误的把这个margin-top值添加给父元素。此条件建立在当前元素下没有浮动和边框的条件下。
? ? ??这两种bug都可以用BFC解决，其中bug2给大家推荐几种方法：
? ? ??方法1：给父元素添加overflow：hidden；属性（比较好用）
? ? ??方法2：给父元素添加边框
? ? ??方法3：把元素中的margin属性改用padding属性
? ? ??方法3：给父元素和子元素添加浮动属性
? ? ??最后给大家提示一下：margin就是用来控制同辈元素之间的位置关系；padding就是用来控制父子元素之间的位置关系。
? ? ??标准盒模型和怪异盒模型区别就在于他们的组成部分
? ? ??宽高组成content+padding+border+margin
? ? ??元素宽度实际占有的位置大小：宽+左右padding+左右border+左右margin
? ? ??元素高度实际占有的位置大小：高+上下padding+上下border+上下margin
? ? ??元素的宽度：width（content+border+padding）+margin
? ? ??属性：box-sizing: border-box（怪异盒模型）/content-box（标准盒模型）
? ? ??相较而言，标准盒模型的组成属性是分开组成的，而怪异盒模型的content、border、padding属性可以看做一个组成部分，再加上margin属性由此构成了整个怪异盒模型
? ? ??从盒模型的定义中我们了解到了盒模型是由4个部分组成，那么盒子的大该如何计算呢？由定义我们可以想到盒子的大小应该是：内容区（content）+填充区（padding）+边框（border）+外边距（margin）=盒子大小。但是，在盒模型这四个属性中除了content属性其余属性值都有4个属性，那么盒子的宽高大小可以用此方法计算：
? ? ??由margin-left+border-left+padding-left+width(content内容元素的宽度)+padding-right+border-right+margin-right=元素的总宽度。如下图2-1、2-2所示
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 图2-1
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 图2-2
盒子元素的高度:
? ? ??由margin-top+border-top+padding-top+height(content内容元素的高度)+padding-right+border-right+margin-right=元素的总宽度。如下图2-3、2-4所示
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 图2-3
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 图2-4
? ? ?? 作为一名新手，在H5中我只是初入，可谓是入门都没有踏进，所以在后面的日子里需要去努力成长，去拼搏，当然这些都是我个人的想法，此外感谢看到这里大佬和朋友，在这里看了一段白话，因为本人文采并不是特别好，又是初入H5，所以文中有些不顺望大家谅解。
盒子模型介绍
概念： 盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的 容器。
作用： CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地 丰富 和 促进 各个盒子乃至整个 HTML 文档的 表现效果和布局结构 。
组成： 每个盒子都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin），4个属性组成。
每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。
一、内容(content)
? ? ?宽度width和高度height属性设置，对盒子内容大小的大小进行控制
二、内边距（padding）
padding属性用于设置内边距。 是指边框与内容之间的距离。
a）padding-top、padding-right、padding-bottom、padding-left
????????b)? padding: 1px 2px 3px 4px(? 顺时针 )
注意： 后面跟几个数值表示的意思是不一样的。值的个数表达意思：
????????????1个值padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
????????????2个值padding:? 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
????????????3个值padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 ????????????????????????????????????左右是5像素 下是10像素
????????????4个值padding:? 上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px ????????????????????????????????15px; 表示 上3px 右是5px 下 10px 左15px
三、盒子边框（border）
border 属性来定义盒子的边框，该属性包含3个子属性：border-style(边框样式)，border-color(边框颜色)，border-width(边框宽度)。
1、定义宽度
a） border-top-width、border-bottom-width、border-left-width、border-right-width?
b） border-width:2px;? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ?border-width:1px 2px 3px 4px;? ? ? ? ? ? ? ?
注意： 当定义边框宽度时，必须要定义边框的显示样式，由于 默认样式为none ,所以仅设置边框的宽度，由于样式不存在，边框宽度也自动被清除为 0。
2、定义颜色
Demo:border-top-color:?green;??border-color:?yellow;
3、定义样式?border-style:
????????????????????hidden:隐藏边框(IE 不支持)? ? ? ? ? ? ? ? ?dotted:点线
????????????????????dashed:虚线? ? ? ? ? ? ?solid:实线? ? ? ? ? ? double:双线边框
4、复合属性
????????综合写法：border : border-width || border-style || border-color
???????? 注意：顺序不能错误。
5、圆角边框（CSS3）：
????语法：border-radius: 左上角? 右上角? 右下角? 左下角;
????Demo：border-radius:?10px;? ? ? ?/*? 一个数值表示4个角都是相同的 10px 的弧度 */
????????????????????????border-radius: 50%;? ? ? ? ?/*? 100px?? 50% 取宽度和高度 一半? */
四、外边距（margin）
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”，定义了元素与其他相邻元素的距离， 这段空白通常不能放置其他内容。
margin-top、margin-right、margin-bottom、margin-left
margin:1px 2px 3px 4px(? 顺时针 )
常用功能：
一、盒子水平居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
? ? ? ? ? ? ? ?块级元素和盒子必须指定宽度（width）
? ? ? ? 左右的外边距都设置为auto，就可使块级元素水平居中。
二、外边距合并
????margin的外边距合并（margin collapsing）
? ? ? ?????margin属性有一个特别的行为，就是外边距合并，这个行为只对普通文档流中的块级元素的 垂直外边距有效； 行内框（inline-block）、浮动元素和绝对定位的原素不会发生外边距合并。
????????发生外边距合并的两种基本情况：
????????1、两个或多个垂直毗邻的兄弟元素，上面元素的下边距会与下面元素的上边距发生合并，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
????????2.父元素和子元素之间，父元素的上外边距和第一个子元素的上外边距、父元素的下外边距和最后一个子元素的下外边距。发生这种情况的前提是父元素和第一个（或最后一个）子元素之间不存在边框和内边距把外边距分隔开，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
三、盒子模型和box-sizing
????????box-sizing是用来 设置width、height的作用对象 的。
? ? ? ? 三个值:content-box(默认值) 、? border-box 、inherit（继承父类）;
???????? 注意：没有margin-box
? ? ????box-sizing:conten-box，width=元素的内容区? ? (标准盒子模型)
? ? ????box-sizing:border-box，width=元素内容区+padding+border? (IE盒子模型)
四、背景剪裁 (Background clip)
????????当我们给一个元素设置background-color和background-imge时，这个背景会覆盖到元素border的外边界，background-clip属性可以用来 调整背景所覆盖的区域:
????????border-box:背景延伸到边框外，默认值
????????padding-box：背景延伸到内边距外，但是不会绘制到border。
????????content-box：背景被裁剪至内容区（content box）外沿。
五、溢流（overflow）
????????当用绝对的值设置盒子的大小时（比如，固定像素的 width 和 height），内容可能会超出设置的大小，此时内容就会溢流盒子。要控制这时候发生的事情，我们可以使用 overflow 属性。 最常用的：
????????hidden：溢出部分不会显示
????????visible：默认值，子元素会从父元素溢出，在父元素外部显示
????????scroll：生成两个滚动条，通过滚动条来查看完整的内容
????????auto：根据需要生成滚动条
六、轮廓(Outline)
????????盒子的 outline 看起来像边界，但是它不是盒模型的一部分。它表现得像边界，但是是画在盒子之上，不会修改盒子的大小（具体来说，ouline 是画在边界框之外，外边距区域之内）。
七、盒子显示（display）类型
????????display 三种常见的值为?block、inline、inline-block
????????????????????block（块盒）：盒子之前以及之后的内容出现在不同的行上
????????????????????inline （行内盒）：与块盒相反：与周围的文本和其它行内元素出现在同一行，并且其内容会像段落中的文本行一样，随着文本流换行（宽度和高度设置对行内盒无效，在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置，但是不会影响周围块盒的位置。）；
????????????????????inline-block（行内块盒）：
? ? ? ? ? 介于前两者之间：
? ? ? ? ? ? ? ? ? ?像行内盒一样，跟随周围的文本流堆放，不会在其前后创建换行；
? ? ? ? ? ? ? ? ? ?像块盒一样，使用宽度和高度设置大小，并且维护其块完整性?— 它不会跨段落行换行。
????????? 块级元素默认设置为?display: block;?，行内元素默认设置为?display: inline 。
display: flex? — 允许你处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。