day14

1、display：

取值：

none；隐藏该元素,并且连该元素所占的空间也不存在了

block;显示元素

2、visibility：

取值：

hidden;隐藏该元素,但是该元素所占的空间还存在，“隐身效果”

visible;显示元素

*透明度：opacity，取值在0-1之间，0为不透明，1为全透明，

32.阴影设置

文字阴影

.text{
            font-size: 50px;
            font-weight: bold;
            text-shadow: 5px 5px 10px red;
            /* 也可以设置多个阴影，阴影之间有逗号隔开 */
        }

盒子阴影

 .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 50px auto;
            box-shadow: 5px 5px 20px 10px green,10px 10px 10px 10px yellow inset;

box-shadow : x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内（外）阴影

h-shadow：x轴偏移量，正数往左偏移，负数往右

v-shadow：y轴偏移量 正数向下偏移，负数向上

blur：阴影模糊程度，不能为负

spread：阴影大小，0阴影与盒子是同等大小

inset：表示添加内阴影和外阴影，默认值是外阴影

可以在样式设置中设置不同样式的多重阴影

33.背面隐藏属性

backface-visibility: hidden;

背景隐藏，不想让用户看到旋转之后的效果，使图片在进行旋转时背面内容不显示

34.三种列表

无序列表

无序列表

各个列表项之间没有次序各项之间为并列关系

语法：

<ul>

<li></li>

</ul>

特点：

1.自带外间距

2，自带内填充

3.自带列表符可以修改，如circle空心圆，square正方形

4.独立成行

5.高度由内容撑开，宽度默认撑开整个父元素

使用场景：新闻列表，商品列表等

有序列表

type属性:可以更改序号类型

reversed：倒序

特性与无序列表基本一致

自定义列表

语法：

<div class="box3">
        <dl>商务合作
        <dt>联系我们</dt>
        <dt>360奇胜效果联盟</dt>
        <dt>360生态链</dt>
        <dt>360标识下载</dt>
    </dl>
    </div>

特性：

1.宽度默认撑满整个父元素

2.高度默认内容撑开

3.独立成行

4.自带外间距

35.位移

transform: translate(x，y);沿X与Y轴位移

当值只有一个时，只沿X轴平移

transform: translateX(x);沿X轴位移

transform: translateY(y);沿Y轴位移

取值：px，百分比(基于元素本身计算)

负值：水平方向右为正，垂直方向下为正

例： transform: translate(100px,200px);

transform: translateX(300px);

36.元素的活动基点

transform-origin:水平方向 垂直方向

基点：用来控制元素围绕那个点进行变化

取值：

关键字：

水平：left right center

垂直： top bottom center

只有一个值的话，那么默认另一个值是center

也可以设置像素

transform-origin: 100px 100px;