CSS+html笔记

1、选择器{ text align：center}

需要给父亲标签添加才可以让子元素（包括文字和图片）水平居中

（1）属性选择器 [class^='类名中共同包含的部分']

选择类名里面带有local-nav-icon的所有子元素

.local-nav li a [class^='local-nav-icon'] {
    width: 32px;
    height: 32px;
}

2、京东的css初始化代码

* {
    margin: 0;
    padding: 0
}

em,
i {
    font-style: normal
}

li {
    list-style: none
}

img {
    border: 0;
    这里是为了消除图片下面的缝隙
    vertical-align: middle
}

button {
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

3、box-size属性：

box-size：content-box盒子宽度等于width+padding+border
box-size：border-box 盒子大小为width

4、line-height只需要给父亲标签设置，所有子元素都垂直居中

5、符号字体的使用步骤

1. 到这个网站中选择符号，下载font压缩包

https://icomoon.io/app/#/select

2. 下载后解压缩，将fonts文件夹放到案例根目录下
3. 复制style.css文本文件中的字体声明代码到css文件中
4. 打开demo.html，选择要使用的符号，复制e开头的代码或者是后面的方框到需要添加富豪的地方
5. 复制font-family: 'icomoon';到选择器中，注意复制格式如‘e91e’的符号时需要添加’’,复制方框则不需要

6、HTML5表单input

使用outline: none;可以除去输入框选中时的边框颜色

7、logo的seo优化

CSS代码如下：

.header .logo {
    position: absolute;
    top: 0;
    left: 0;
    /* 注意这里直接将logo盒子定义为logo.png的大小 */
    width: 176px;
    height: 56px;
}

.header .logo a {
    display: block;
    width: 176px;
    height: 56px;
    font-size: 0;
    background: url(../images/logo.png) no-repeat;
}

html代码如下：

        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>

---

8、实现‘…'效果

---

效果图：以京东商城为例，做出这种效果

只需要添加三行代码在标签中

---

9、transform2D转换

---

transform复合写法：

10.tranform:translate(50%,50%)

11、移动端特殊样式

12.Input 样式美化

https://www.jianshu.com/p/9b4b60b8d475

13.移动端二倍精灵图做法★★★

14.移动端Flex布局

（1）justify-content(父元素）

（2）align-items(父元素）

（3）align-items(父元素）

可以给父元素添加 flex-wrap:wrap; wrap：换行 / nowrap：不换行
复合写法：flex-flow，是flex-direction和flex-wrap属性的复合属性

flex-flow:row wrap;

15.Flex布局做下面这种样子的过程

16.背景颜色的渐变效果