css007 margin padding border

css007 margin padding border

1、理解盒模型（盒模型：就是把一些东西，包括html各种标签都包含在一个

看不见的盒子里）

     1/在web浏览器中任何标签都是一个盒子，内容的周围环绕着装饰盒子的不同属性

     Pad ding：内容和其框线之间的距离

     Margin：一个标签和另一个标签之间的距离

     Border：盒子周边的直线

     Background-color：填充边框内部空间的间隔

 

 

2、用margin和padding控制空间 （margin控制盒子外部和其他元素之间的空间；

padding控制盒子里面内容到盒子的距离，在一般浏览器都会有默认的行距或者各种缩进距离。一般要用margin和padding清零。Margin和padding后面可以跟1到4个值，如果是两个值的话，分别代表上下 和 左右。一般的顺序是：上右下左（顺序一定不能搞乱了）。可以指定方向，比如margin-top）

 

          1、margin和padding都是在内容的周围添加空间。

          2、边距冲突：当margin-bottom 遇到（冲突）下面一个元素的margin-top时，浏览器是应用他们之间比较大的那个（只应用一个，不是两个相加）

          3、可以用margin的负值消除不必要的空隙（margin是比较少数可以用负值的一个css属性。Padding一定要用正值）

          4、行内盒子，块级盒子及其其他显示设置：css有两种不同的盒子：块级盒子（block box）  行内盒子（inline box）

          5、Display属性可以改变盒子的属性：display：block/inline/inline-block;

 

 

3、添加边框（border属性。例如：border：1px solid #fff；代表画一个1像素，

颜色为黑色的边框。Border的上下左右和margin、padding用法一样在实践1中的吧PDF转变成html中有多处用到border来代替<div>标签，这样可以省掉一些代码开销和时间开销。比如友情链接的绿色边框线的叠加。页脚浅绿色图层的叠加）

 

          1、Border 属性的块级设置方法：border：1px solid #fff；

          2、单独格式化各条边框：例如：border-top：1px solid red；

          3、可以用none隐藏某一条边框：如

                 border：1px solid red；

                 border-top：none； （两条代码代表画一个没有顶的边框）

          4、还可以对每条边框定义颜色，宽度，样式：（可以对一个盒子设置两条下边框吗？有没有办法让后面设置的css样式不覆盖前面设置的样式？？）

                  如：border-width：20px；

                      border-style：double；

                      border-color：red；

           可以对边框设置不同的颜色：如

                    border：2px dashed

                     border-color：red yellow blue black；

              

 

 

4、设置背景色（background-color）

         background-color：red；/#f00; /rgb(255,0,0);

 

5、创建圆角（单词忘了怎么写了。。）

         Border-radius:20px;(后面跟的值如果是四个代表的位置（从左上顺时针）)

         

6、添加阴影（text-shadow，上一个章节刚刚学到的，例如：

          text-shadow：5px 9px 2px #fff；其中第一个值代表水平方向：正值在右。第二个值代表垂直方向，正值在下 。第三个值代表模糊度，值越大越模糊，第四个值             代表颜色。）（问题：第三个值可以是负的吗？）

          （上一节是文本的，这一节是盒子的）

             border-shadow后面跟的值和上一节中的text-shadow用法一样

            有两个可选的值：inset （嵌入式阴影） spead（外部阴影）

               border：inset 3px 4px 5px red;

 

7、确定高度和宽度 （height 和 width 不是继承的属性，但是后面的值可以填上inherit 代表继承父类的宽高。一般border的使用都会配合宽高，这样才能画出一个正常的                 形状出来）

 

          1、box-sizing属性跳帧盒子的宽度

             box-sizing：content-box；/padding-box;/border-box;

          2、用overflow属性控制溢出文本

               Overflow：visible；/scroll;/auto;/hidden;

          3、宽度的最小化和最大化

          max-width

          max-height

          min-width

          min-width

 

 

 

8、用浮动元素包围内容（float：left/right; 浮动是的样式更加多样，在浮动后

          记得清除浮动，不然会影响接下来的html内容，啥问题都会出现，可怕了，实践1的那个pdf转化为html中，就是没有清楚浮动，一堆问题调了好久。清除浮动：可以          在浮动结束后写：overfloat：hidden；也可以在接下来的内容中写:clear:left/right/both;）

 

          1、背景和边框是不能浮动的。。。

          2、clear：none；完全关闭清楚属性

 

 

注：蓝色为看目录是自己根据之前知识表达出来的，黑色为看书后补充或者修改。红色为看完该知识点后产生的问题。