寒假周总结--周报2

# 样式补充

## display:list-item

设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子

元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列

涉及的css：

1. ```list-style-type```

设置次盒子中内容的类型

2. ```list-style-position```

设置次盒子相对于主盒子的位置

3. 速写属性```list-style```

**清空次盒子**

list-style:none

## 图片失效时的宽高问题

如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高

## 行盒中包含行块盒或可替换元素

行盒的高度与它内部的行块盒或可替换元素的高度无关

[若包含的是块盒，则行盒的高度会被撑开]

## text-align:justify

text-align:

- left: 左对齐

- right：右对齐

- center：居中

- justify：除最后一行外，（把空白）分散对齐

[行块盒的排列方式和行盒一样]

[outline,不占尺寸的边框;border,占尺寸的边框]

[横向排列:行块盒（空白折叠）;浮动（标准，高度坍塌）]

## 制作一个三角形

## direction 和 writing-mode

开始 start -> 结束 end

左 left -> 右 end

开始和结束是相对的，不同国家有不同的习惯

左右是绝对的

direction设置的是开始到结束的方向

writing-mode：设置文字书写方向

## utf-8字符【&#x+16进制数】

content:"\880e\6678\fe10...";（使用伪元素选择器时书写格式）

<!-- [伪元素选择器通常省略一个:进行书写]    -->

[默认溢出显示]

[那4个伪类都是针对满足特定条件的元素设置样式，cursor设置的是在哪个元素上光标悬停时光标的样式]

[z-index适用于所有定位元素（决定显示先后）]

[## 选择器的组合   并且【连着写】  指既满足这个又满足那个(空格)

```选择器的并且组合看下面有点点感觉

<i class="iconfont icon-fangdajing"></i>

```

]

@规则

    @charset 设置样式表的编码 @charset 'utf-8';

    @import 导入其他样式文件 @import 'reset.css';

    @media 媒体查询

    @font-face 自定义字体

    浮动的父元素是浮动则不用清楚父元素浮动

    给一个元素多个类名可以用任一一个也只能用一个进行样式设置

    .abcd得连着前面写

    ```圆弧边框

    border-radius: 0 20px 20px 0;

    ```

    ```css中的淘宝渐变色

    background-image: linear-gradient(to right,#ff9000,#ff5000);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000',endColorstr='#ffff5000',GradientType=1);

    ```

    ```calc计算函数（括号里必须在运算符号两侧加空格）/*支持情况IE9+*/

    width: calc(100% - 190px);

    ```

    ```transition属性

    transition: 要过渡的属性 时间;

    ```

    ```按钮button设置垂直居中时要将button的margin-top设置为负的button高度的一半，其余情况类比相同则类似

    button{

    height: 30px;

    position: absolute;

    top: 50%;

    margin-top: -15px;

    }

    ```

    做小圆点背景时要设置该背景的font-size为0，因为一般他会留下一个字体大小的高度，其余情况类比相同则类似。

    ```图片的垂直居中对齐借助单元格相关知识的技巧

    display: table-cell;

    vertical-align: middle;

    ```

    ```弹性盒模型的布局--较为方便/*支持情况IE10+*/

    display: flex;

    justify-content: space-around;

    align-items: center;

    ```