CSS学习笔记五---盒子模型 & 溢出属性

一：知识点

1：盒子模型

            div{
                width: 500px;
                height: 300px;
                background-color: yellow;
                text-align: justify;
                
                padding: 10px 20px 30px 40px;
                /* padding 内边距
                1：设置padding一个值，上下左右四个方向间距是一样的；
                2：设置padding两个值，两个值分为 上下值  左右值
                3：设置padding三个值， 上 左右 下
                4：设置padding四个值，（按照顺时针方向）上 右 下 左
                */
            }

2：padding 内边距

        a：设置padding一个值，上下左右四个方向间距是一样的；

        b：设置padding两个值，两个值分为 上下值    左右值

        c：设置padding三个值， 上   左右   下

        d：设置padding四个值，（按照顺时针方向）上   右   下   左

        e：padding设置单一方向值：top bottom left right

3：border 边框

border：10px double red;

        a：border-style样式：solid double dashed dotted；

        b：设置单一方向：top bottom left right

        c：border（简写）=border-weight  border-style  border-color

        d：以上属性单方向设置规则同上

4：margin 外边距

        a：各个方向边距设置规则同上

        b：背景色不能蔓延到外边距

        c：外边距可以赋值为负值（常用）

        d：盒子在水平方向居中：margin： 0  auto；

              横向居中方案，使用比较多；

        e：上下两个盒子，上盒子设置了下边距，下盒子设置了上边距，两个盒子中间的边距取最大值；（垂直方向，外边距取最大值）

        f：水平方向，外边距取和

        g：父盒子和子盒子（！！！！）

                怎么在子盒子上设置外边距，而保证不会作用到父盒子上？

                        aa：给父盒子加内边距，父盒子高度减去内边距

                                子margin-top===>父padding-top，注意高度计算

                        bb：给父盒子设置边框，即可设置子margin-top属性，注意高度计算

                        transparent：透明（设置颜色时会用）

                        cc：设置子盒子或者父盒子浮动，即可设置子margin-top属性

                        dd：给父盒子设置overflow：hidden（BFC块）

5： 增加了padding，border，一定得注意设计的区域长宽的变化！！！

6：溢出属性

7：空余空间属性

        a：nowrap：不换行（比较常用）

        b：pre标签：保留内容格式（空格，回车）

        c：pre-wrap：显示回车，空格，换行

        d：pre-line：显示回车，不显示空格、换行

        e： white-space:nowrap;

                overflow:hidden;

                text-overflow:ellipsis;

                保证其中内容不换行，溢出后的文本显示省略号...

二：其他内容补充（PS软件的简单使用）

1：图片放大缩小（快捷键） ctrl + +/-

2：空格：快速移动图片

3：标尺：ctrl + r，参考线

4：矩形选框工具：选取像素，信息（窗口---信息）中显示W，H （单位像素）

5：取消选取ctrl+d

6：文件---存储为web所用格式

7：取色：吸管工具