web前端第四天

1.盒子模型

        padding：定义元素边框与元素内容之间的空间（内边距）

        margin：定义元素周围的空间（外边距）

        

2.内边距

        padding

        

3.外边距

        margin

        

4.外边距塌陷问题

        外边距的塌陷问题只会在垂直之间产生塌陷，水平之间不受影响；两个盒子的垂直外边距全接触才会触发，一方有1px的border都不会触发。

        父元素的第一个子元素的margin-top值会被父元素抢走，给父元素添加边框。

        解决方法：

             1.给任意一个加border

                        给他们中任何一个加border，有1px就不会重合，外币那句就不会塌陷

            2.给父padding

                        给父加内边距与子产生距离，但会导致父的每个方向都变大一个内边距

            3.给父元素overflow：hidden；

                

5.文本溢出

        overflow：元素溢出时所需的行为，即当元素的内容大于块级格式化上下文时

        visible：内容不能被裁减并且可能渲染到盒子的外面

        hidden：内容将被裁剪以适应边距

        auto：内容自适应边距，如果内容溢出，则提供滚动条

        

6.样式继承

        css样式的继承性：不是所有的样式都继承，只有改变后对布局无影响的样式，才会继承（a链接最好在自身更改样式）

7.解决padding影响盒子大小问题

        添加 box-sizing：border-box；

8.flex布局

        display：flex（告诉浏览器引用弹性布局了，不写将无法生效）

        属性：

        1.flex-direction属性决定主轴的方向（即项目的排列方式）

                row：（默认值）主轴在水平方向，起点在左端

                row-reverse：主轴为水平方向，起点在右端

                column：主轴为垂直方向，起点在上沿

                column-reverse：主轴为垂直方向，起点在下沿

        

        2.flex-wrap：让flex布局变为多行

                nowrap：（默认）不换行，多出来的项目会挤压原本项目所占的空间

                wrap：换行，第一行在上方

        ​​​​​​​        

                wrap-reverse：换行，第一行在下方

        3.justify-content：主轴上的布局

                start：起点对齐（默认）

                end：终点对齐

                center：水平居中

                space-arround：均与分布在行中，周围空间相等

                space-between：均匀分布在行中，第一项下起始行，最后一项在结束行

                space-evenly：任何两个项目之间的间距（以及边缘空间）相等

        ​​​​​​​        

        4.align-items：侧轴上的布局（单行的）

                center：垂直居中

                start：起点对齐

        5.aling-content：（多行的）

                center

                start

                end

                space-between

                space-around

                spacec-evenly

                ​​​​​​​

6.order

        值越小,排列在越靠前的位置

7.定位补充

        z-index:定位中显示的优先级,值越大,元素的层级越高,当元素发生重叠时,层级高的元素会覆盖在层级低的元素上面,使层级低的元素重叠部分被遮盖

8.浮动

        指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕

        属性:

                 float:none;不浮动

                float:left;左浮动

                float:right;右浮动

        浮动的基本特性:

                 可以使块元素排列在一行

                脱离文档流

                提升层级

   浮动的问题:

        子元素浮动导致父元素高度塌陷

        影响之后元素的布局

9.float问题解决办法

        1.给父元素固定高度

        2.为父元素设置overflow: hidden

        

        3.在浮动元素增加一个空div元素,设置样式为clear: both放在空元素上

        

        4.在父元素现有内容的末尾添加一个clear:both的新的内容

        

10.渐变

        to top:向上

        to buttom:向下

        to left：向左

        to right：向右

        

11.字体图标

        阿里巴巴矢量图标库

12.媒体查询

        使用@media查询，可以针对不同的媒体类型定义不同的样式

                    <style>

                    /*页面宽度小于等于300px时，背景变蓝色。*/

                        @media screen and (max-width: 300px) {

                    body {

                        background-color: blue;

                            }

                     }

                /*页面宽度大于等于500px时，背景变红色。*/

                @media screen and (min-width: 500px) {

                    body {

                        background-color: red;

                    }

                }

            </style>

13.2d转换

        

14.3d转换

        ​​​​​​​