8.22学习笔记

1div

昨天讲的Div的样式属性，border margin

padding  内边距

设置padding的时候，这个元素的实际宽高会被拉伸

实际宽高==设置的宽高+padding值（有两个） +borderX2

占用空间==设置的宽高+2×margin+2×padding+border×2

 

Padding设置完之后，会无形拉大盒子。怎样解决这种效果。

                       

Box-sizing 保证了div的宽高永远是设定的值，加了padding只会去挤空间。

background背景

Background:red; 带颜色的背景

 

简写

 

大小需要单独列出来。

定位 position

相对定位 position:relative; 这个属性给需要定位的父级。

绝对定位 position:absoluet; 他有四个值 top left right bottom；

 

position的使用其实是将该标签的类型改变了，将块变成了行级块。

页面结构分析：

  结构层：

         最外面的一层，这个结构层不能设置太多样式，一般设置宽，margino；

         千万不要设置position，会让内部元素脱离文档流。

  布局层：

            给与内部元素进行排版的。

position造成的脱离文档流应该如何解决？

    最简单的是给父级一个高。

通过今天的学习，我了解到如何给盒子加背景图，并且怎样设置盒子比较节省排版。通过这些学习，做出了三国杀游戏的一个界面，虽然过程中遇到了一些小问题，比如在加入第四张人物图片的时候，不知道怎么设置可以向右边做定位，琢磨了半天加上和同学讨论才解决了这个问题，原来隐藏掉renwu标签里的 left 和top就可以了。

下图是我下午做出来的效果图，感觉每天进步一点点都是超级开心的。