web day3 笔记

1.盒子阴影

Box-shadow: （inset阴影在里面了）x , y, 阴影发散度, 颜色   盒子阴影

Text-shadow  文字阴影

2.列表样式

List-style:none 去掉列表默认样式

3.轮廓样式

Outline:none 去掉默认

Outline-offset：？px  轮廓和元素的距离

Outline-style：？ 轮廓线样式（实虚线）

Outline-color：？ 轮廓线颜色

Outline-width：？px 宽度

4.内外边距

内边距

Padding：上，右，下，左

Padding：？px 四个方向都是

Padding：？px，？px  上下 左右

外边距

Margin

5.定位

Position：static 静态定位

                   Relative 相对定位（相对于自身位置进行移动，保留原先的位置）

                            Top：

                            ……

                   Absolute 绝对定位（一般在上级和相对定位配合使用，如果都没，则相对于浏览器，不占有原来的位置）

                            Top：

                            ……

                   Fixed 固定定位（一直固定再浏览器某个位置，不保留原来位置）

                            Top：

                            ……

                   Sticky 粘性定位（拉到某处，一直定位在屏幕上）

6.叠放顺序

z-index (1,2……)越大在越上面

7.元素的显示和隐藏

Display：none 隐藏

Visibility：hidden 隐藏

                    Visible 可见

溢出

Overflow：hidden 隐藏

                     Auto 变成下拉框了上下

                     Scroll 滚动上下左右都有

                     Visible 显示

8.display

Display：none 显示隐藏不占位置

                   Block 变为块元素

                   Inline-block 变为行内块

9.vertical-align

Vertical-align：？ 文本图片之类的对齐方式

10.单行文本溢出

White-space：nowrap 强制一行显示

Overflow：hidden 隐藏

Text-overflow：ellipsis 加……

11.css3提供的布局

Display：flex 弹性盒子

Flex-direction  容器项目排列方向

主轴对齐方式

Justify-content：space-between 两边靠边之间对齐

                              Center 居中

                              Space-around 四周对齐

                              Flex-start

                              Flex-end

                              Space-evenly

侧轴对齐方式

Align-items：center 居中

                      Flex-start

                      Flex-end

                      Stretch 高度填充

Flex：？ 占几份

12.flex多行

Flex-wrap 换行