ShanTianQi

前端基础(二)

2.17浮动

传统网页布局的三种方式

网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置。

CSS提供了三种传统布局方式：

1.标准流

所谓的标准流：就是标签按照规定好的默认方式排列

1.块级元素会独占一行，从上向下顺序排列。

2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

以上都是标准流布局，标准流是最基本的布局方式。

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式(后面移动端学习新的布局方式)。

2.浮动(float)

有很多的布局效果，标准流是没有办法完成的，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

典型应用：可以让多个块级元素一行内排列显示。

网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float属性用于创建浮动框，将其移动到另一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法

选择器 { float: 属性值;}

浮动特性(重难点)

1.浮动元素会脱离标准流(脱标)，浮动的盒子不再保留原先的位置

20210727212645

2.浮动的元素会一行内显示并且元素顶部对齐

注意：浮动的元素是相互贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

3.浮动的元素会具有行内块元素的特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后会具有行内块元素相似的特性。

浮动元素经常和标准流父级搭配使用

伪类约束浮动元素位置，我们网页布局一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

网页布局第二准则：先设置盒子大小，之后设置盒子的位置

2.18常见网页布局

​ 标准流 浮动

​ 小米

浮动布局注意点

1.浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2.一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

2.19清除浮动

1.Why？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

2.清除浮动的本质

3.清除浮动

语法

选择器{clear: 属性值;}

我们实际工作中，几乎只用clear: both;

清除浮动的策略是：闭合浮动

方法

1.额外标签法也称隔墙法，是W3C推荐的做法(了解)

额外标签法会在浮动元素末尾添加一个空的标签。例如

，或者其他标签(如
等)。

tips：要求添加的这个新标签必须是块级元素。

2.父级添加overflow属性

可以给父元素添加overflow属性，将其属性值设置为hidden、auto或者scroll。

3.父级添加after伪元素

:after方式是额外标签法的升级版。也是给父元素添加

.clearfix:after {
    content : "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {/* IE6、7专有*/
   *zoom: 1;
}

4.父级添加双伪元素

也是给父元素添加

.clearfix:before,.clearfix:after {
    content : "";
    display:table;
}
.clearfix:after {
    clear :both;
}
.clearfix {
    *zoom: 1;
}

总结

2.20PS切图

1.常见的图片格式

jpg图像格式 gif图像格式 png图像格式 PSD图像格式

2.PS切图的方式

最简单的切图方式：右击图层→快速导出为PNG

很多情况下，我们需要合并图层再导出：

1.选中需要的图层：图层菜单→合并图层(ctrl+e)

2.右击→快速导出为PNG

1.利用切片选中图片

2.导出选中的图片

文件菜单→导出→存储为web设备所用格式→选择我们要的图片格式→存储

Cutterman插件

2.21学成在线案例

1.CSS属性书写顺序(重点)

2.网页布局整体思路

导航栏注意点：

实际开发中，我们不会直接用链接a而是用li包含链接(li+a)的做法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 头部区域 -->
    <div class="head w">

        <div class="logo">
            <img src="./images/logo-s.png" alt="" width="100%">
        </div>
        <div class="head1">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <div class="head2">
            <div class="sou1"><input type="text" class="i1" value="请输入关键字"></div>
            <div class="sou2"><button class="i2"><img src="./images/btn.png" alt="" width="100%"></button> </div>
        </div>
        <div class="head3">
            <div class="headphoto"></div>
            <h3>qq-qinfei</h3>
        </div>
    </div>
    <!-- banner区域 -->
    <div class="banner">
        <div class="heihe">
            <ul>
                <li><a href="#">前端开发<h3>></h3></a></li>
                <li><a href="#">后端开发<h3>></h3></a></li>
                <li><a href="#">移动开发<h3>></h3></a></li>
                <li><a href="#">人工智能<h3>></h3></a></li>
                <li><a href="#">商业预测<h3>></h3></a></li>
                <li><a href="#">云计算&大数据<h3>></h3></a></li>
                <li><a href="#">运维&从测试<h3>></h3></a></li>
                <li><a href="#">UI设计<h3>></h3></a></li>
                <li><a href="#">产品<h3>></h3></a></li>
            </ul>
        </div>
    </div>
    <!-- 精品推荐1区域 -->
    <div class="text w">
        <div class="t1">
            <ul>
                <li><a href="#" class="jingpin">精品推荐</a></li>
                <li><a href="#">JQuery</a></li>
                <li><a href="#">Spark</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">JavaWeb</a></li>
                <li><a href="#">JS</a></li>
                <li><a href="#">CSS</a></li>
            </ul>
        </div>
        <div class="t2">
            <li><a href="#" class="xingqu">修改兴趣</a></li>
        </div>
    </div>
    <!-- box区域 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <img src="./images/icon1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> .1125人在学习
                    </div>
                </li>
                <li>
                    <img src="./images/icon1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> .1125人在学习
                    </div>
                </li>
                <li>
                    <img src="./images/icon1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> .1125人在学习
                    </div>
                </li>
                <li>
                    <img src="./images/icon1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> .1125人在学习
                    </div>
                </li>
                <li>
                    <img src="./images/icon1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> .1125人在学习
                    </div>
                </li>
                <li>
                    <img src="./images/icon1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> .1125人在学习
                    </div>
                </li>
                <li>
                    <img src="./images/icon1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> .1125人在学习
                    </div>
                </li>
                <li>
                    <img src="./images/icon1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> .1125人在学习
                    </div>
                </li>
                <li>
                    <img src="./images/icon1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> .1125人在学习
                    </div>
                </li>
                <li>
                    <img src="./images/icon1.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> .1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- footer区域 -->
    <div class="footer">
        <div class="w">
            <div class="right">
                <img src="./images/logo-s.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br> 2017年XTCG Inc.保留所有权利。-沪ICP备15025210</p>
                <a href="#" class="app">下载app</a>
            </div>
            <div class="links">
                <dl>
                    <dt>关于学生网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学生网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学生网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
            </div>
        </div>
    </div>

</body>

</html>
* {
    padding: 0;
    margin: 0;
}

.w {
    width: 1200px;
    margin: auto;
}

a {
    text-decoration: none;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

body {
    background-color: #f3f5f7;
}

.head {
    height: 42px;
    margin: 30px auto;
}

.head>div {
    float: left;
}

.logo {
    float: left;
    width: 198px;
    height: 42px;
}

.head1 {
    float: left;
    width: 294px;
    height: 42px;
    margin-left: 60px;
}

.head1 a {
    font-size: 18px;
    font-family: 'Microsoft YaHei';
    color: #050505;
    line-height: 42px;
}

.head1 ul li {
    float: left;
    list-style: none;
    margin: 0 15px;
}

.head1 ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
}

.head1 ul li a:hover {
    border-bottom: 2px solid #47aaff;
    color: #47aaff;
}

.head2 .i1 {
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    font-size: 14px;
    color: #bfbfcd;
    padding-left: 15px;
    margin-left: 70px;
}

.head .head2 .i1 {
    border-right: none;
}

.head2 .i2 {
    width: 50px;
    height: 42px;
    border: none;
    border-radius: 2px;
}

.sou1 {
    float: left;
}

.sou2 {
    float: left;
}

.head3 {
    float: left;
    width: 99.95px;
    height: 42px;
    background-image: url(./images/tou_03.png);
    background-repeat: no-repeat;
    margin-left: 40px;
    margin-top: 6px;
}

.head3 h3 {
    font-size: 14px;
    color: #666666;
    font-weight: 400;
    font-family: 'Microsoft YaHei';
    margin-left: 30px;
    margin-top: 15px;
}

.banner {
    height: 410px;
    background-color: #1c036c;
    background-image: url(./images/banner_03.png);
    background-repeat: no-repeat;
    background-position: center top;
}

.banner .heihe {
    width: 200px;
    height: 410px;
    background-color: rgba(0, 0, 0, .3);
    margin-left: 132px;
}

.heihe ul li {
    list-style: none;
}

.heihe ul li a {
    display: block;
    width: 200px;
    height: 45px;
    font-size: 14px;
    line-height: 45px;
    font-family: 'Microsoft YaHei';
    color: #ffffff;
    text-decoration: none;
    text-indent: 2.3em;
}

.heihe h3 {
    display: block;
    float: right;
    margin-right: 15px;
}

.heihe ul li :hover {
    color: #0aa4ff;
}

.text {
    width: 1200px;
    height: 60px;
    background-color: #ffffff;
    margin-top: 10px;
    box-shadow: 3px 3px 3px -1px rgba(0, 0, 0, .2);
}

.text .t1 ul li {
    display: block;
    float: left;
    list-style: none;
    height: 20px;
}

.text .t1 ul li a {
    height: 16.5px;
    color: black;
    font-size: 16.5px;
    padding: 0 25px;
    margin: 10px auto;
    line-height: 60px;
    border-left: 1px solid #cccccc;
}

.text .t1 .jingpin {
    color: #00a4ff;
    font-weight: 700;
    border-left: none;
}

.t2 li {
    list-style: none;
}

.t2 .xingqu {
    float: right;
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #00b8ff;
    padding: 20px 30px;
}

.box {
    margin-top: 30px;
}

.box-hd {
    height: 45px;
}

.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}

.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}

.box-bd ul {
    width: 1225px;
}

.box-bd ul li {
    float: left;
    width: 228px;
    height: 270px;
    list-style: none;
    background-color: #ffffff;
    margin-right: 15px;
    margin-bottom: 15px;
}

.box-bd ul li img {
    width: 100%;
}

.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}

.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}

.box-bd .info span {
    color: #ff7c2d
}

.footer {
    height: 415px;
    background-color: #ffffff;
}

.footer .w {
    padding-top: 35px;
}

.right {
    float: left;
}

.right p {
    font-size: 12px;
    color: #666;
    margin: 20px 0 15px 0;
}

.right .app {
    display: block;
    width: 118px;
    height: 33px;
    color: #00a4ff;
    font-size: 16px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 33px;
}

.links {
    float: right;
}

.links dl {
    float: left;
    margin-left: 100px;
}

.links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}

.links dl dd a {
    color: #333;
    font-size: 12px;
}

2.22定位

定位：将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位由两部分组成：定位模式和边偏移

1.定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个。

2.边偏移

边偏移就是定位的盒子移动到的最终位置。有top、bottom、left和right 4个属性。

1.静态定位static(了解)

静态定位是元素的默认定位方式，无定位的意思

语法

选择器 { position: static; }

2.相对定位relative(重要)

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

语法

选择器 { position: relative; }

特点

3.绝对定位absolut(重要)

绝对定位是元素在移动位置时，是相对于它祖先元素来说的。

语法

选择器 { position: absolute; }

特点

子绝父相

子级使用绝对定位(absolute)，父级则需要相对定位(relative)

所以相对定位经常用来作为绝对定位的父级

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

不绝对，如果父元素不需要占有位置，子绝父绝也会遇到

4.固定定位fixed(重要)

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

语法

选择器 { position: fixed; }

特点

1.以浏览器的可视窗口为参照点移动元素

2.固定定位不再占有原先的位置

固定定位也是脱标的，其实固定定位也可以看做一种特殊的绝对定位。

3.固定定位小技巧：固定在版心右侧位置

小算法：

就可以让固定定位的盒子贴着版心右侧对齐了

5.粘性定位sticky

粘性定位可以被认为是相对定位和固定定位的混合

语法

选择器 { position: sticky; top: 10px }

特点

定位总结

6.定位叠放次序z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)

语法

选择器 {z-index: 1;}

7.绝对定位的盒子居中

加了绝对定位的盒子不能通过**margin:0 auto;**水平居中，但是可以通过以下计算方法实现水平和垂直居中。

8.定位特殊特性

绝对定位和固定定位也和浮动类似

9.脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位或固定定位的元素都不会触发外边距合并的问题。

10.绝对定位或者固定定位会完全压住盒子

浮动元素不同，只会压住它下面的标准流盒子，但是不会压住下面标准流盒子里面的文字或者图片。

但是绝对定位或者固定定位会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。

2.23综合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        .tb-promo {
            position: relative;
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;
        }
        
        .tb-promo img {
            width: 520px;
            height: 280px;
        }
        
        .prev,
        .next {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            text-decoration: none;
            text-align: center;
            color: #fff;
            background-color: rgba(0, 0, 0, .3);
            line-height: 30px;
        }
        
        .prev {
            left: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }
        
        .next {
            right: 0;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }
        
        .promo-nav {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background-color: rgba(255, 255, 255, .3);
            border-radius: 7px;
        }
        
        .promo-nav li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            margin: 2px 3px;
        }
        
        .promo-nav .chengse {
            background-color: #ff5000;
        }
    </style>
</head>

<body>
    <div class="tb-promo">
        <img src="./O1CN016VwHel1dQqPXjgJIt_!!6000000003731-0-octopus.jpg" alt="">
        <a href="#" class="prev">&lt;</a>
        <a href="#" class="next">&gt;</a>
        <ul class="promo-nav">
            <li></li>
            <li></li>
            <li class="chengse"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

2.24网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子。

通过CSS浮动、定位可以让每个盒子排列成网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

1.标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

2.浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

3.定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

2.25元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

本质：让一个元素在页面中隐藏或者显示出来。

1.display属性

display属性用于设置一个元素应如何显示

display隐藏元素后，不再占有原来的位置。

后面应用及其广泛，搭配JS可以做很多的网页特效。

2.visbility可见性

visbility属性用于指定一个元素应可见还是隐藏。

visbility隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来的位置，就用visbility: hidden;

如果隐藏元素不想要原来的位置，就用display: none;(用处更多 重点)

3.overflow溢出

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么。

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow:hidden;因为它会隐藏多余的部分。

第三章 CSS高级技巧

3.1精灵图

1.Why?

一个网页中往往会应用很多小的背景图像作为修饰，当网页中图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(CSS Sprites)

核心原理：将网页中的一些小背景图片整合到一张大图中，这样服务器只需要一次请求就可以了。

2.精灵图的使用

使用精灵图核心：

3.2字体图标

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。

精灵图有优点，但是缺点也很明显。

1.图片文件还是比较大的。

2.图片本身放大和缩小会失真

3.一旦图片制作完毕想要更换非常复杂

字体图标(incofont)，展示的是图标，本质属于字体。

优点：

注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。

2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

3.3CSS三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。

div {
   width : 0;
   height: 0;
   line-height : 0;
   font-size: 0;
   border: 50px solid transparent;
   border-left-color: pink;
}

3.4CSS用户界面样式

1.鼠标样式 cursor

li {cursor: pointer;}

设置或检索再对象上移动的鼠标指针采用何种系统预定义的光标形状。

2.轮廓线 outline

给表单添加outline:0; 或者 outline:none; 样式之后，就可以去掉默认的蓝色边框。

input {outline: none; }

3.防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的。

textarea{ resize: none; }

3.5vertical-align属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单(行内块元素)和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法

vertical-align: baseline | top | middle | bottom

解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加vertical-align:middle | top | bottom等。(提倡使用)

2.把图片转换为块级元素display:block;

3.6溢出的文字省略号显示

1.单行文本溢出显示省略号

三个条件

2.多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或者移动端(移动端大部分是webKit内核)

overflow: hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webKit-box;
/*限制在一个块元素显示的文本的行数*/
-webKit-line-clamp: 2;
/*设置或检索伸缩和对象的子元素的排列方式*/
-webKit-box-orient: vertical;

3.7常见布局技巧

1.margin负值的运用

2.文字围绕浮动元素

巧妙用于文字围绕浮动元素，加浮动即可。

3.行内块的巧妙运用

4.CSS三角强化

代码

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

3.8CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

简单理解：CSS初始化是指重设浏览器的样式。(也称为CSS reset)

每个网页都必须首先进行CSS初始化

京东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;/*CSS3新属性 抗锯齿*/
   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}

Unicode编码字体

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码的时候出现乱码的问题。

比如：

黑体\9ED1\4F53

宋体\5B8B\4F53

微软雅黑\5FAE\8F6F\96C5\9ED1

第四章 HTML5和CSS3提高

4.1HTML5新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

1.1HTML5新增的语义化标签

注意：

这些语义化标准主要是针对搜索引擎的，这些新标签页面中可以使用多次，在IE9中，需要把这些元素转换为块级元素。移动端更喜欢这些标签。

1.2HTML5新增的多媒体标签

新增的多媒体标签主要包含两个：

1. 音频：

2. 视频：

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。

当前

语法

<video src="文件地址" controls="controls"></video>

常见属性

例：autoplay=“autoplay”

当前< audio>元素支持三种音频格式：

语法

<audio src="文件地址" controls="controls"></audio>

常见属性

多媒体标签总结

1.3HTML5新增的input类型

1.4HTML5新增的表单属性

可以通过以下方式修改placeholder里面的字体颜色：

input::placeholder{
    color:pink;
}

4.2CSS3新特性

2.1CSS3的现状

CSS3新增选择器

1.属性选择器

属性选择器可以根据元素特定的属性来选择元素。这样就可以不用借助于类或者id选择器。

注意：类选择器、属性选择器、伪类选择器，权重为10。

2.结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素

**nth-child(n)**选择某个父元素的一个或多个特定的子元素

区别

1.nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配

2.nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找到第n个孩子

3.伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

注意：

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒子模型，有两个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分为两种情况：

1.box-sizing:content-box 盒子的大小为width+padding+border(以前默认的)

2.box-sizing:border-box 盒子大小为width

如果盒子模型我们改为了box-sizing:border-box，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

CSS3其他特性(了解)

1.图片变模糊

CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数(); 例如：filter:blur(5px); blur模糊处理 数值越大越模糊

2.计算盒子宽度width:calc函数

CSS3 calc函数：

calc()此CSS函数让你在声明CSS属性值时执行一些计算。

width:calc(100% -80px);

括号里面可以使用+ - * / 来进行计算。

3.CSS3过渡(重点)

过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态 渐渐的过渡到另外一个状态

可以让我们页面更好看，更具动感，虽然 低版本浏览器不支持(IE9以下版本) 但是不会影响页面布局。

我们现在经常和 :hover一起搭配使用

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

**1.属性：**想要变化的CSS属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。

**2.花费时间：**单位是秒(必须写单位) 比如0.5s

**3.运动曲线：**默认是ease(可以省略)

**4.何时开始：**单位是秒(必须写单位)可以设置延迟触发时间 默认是0s(可以省略)

使用口诀：谁做过渡给谁加

第五章 PC端品优购项目

5.1模块化开发

好几个页面相同的部分样式可以写在一个css中：common.css

5.2网站favicon图标

favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。

1.制作favicon图标

把png图片转换为ico图标

2.favicon图标放到网站根目录下

3.HTML页面引入favicon图标

在HTML页面里面的元素之间引入代码

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

5.3网站TDK三大标签SEO优化

SEO(Search Engine Optimization)汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名提高网站的知名度。

1.title网站标题

title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

建议：网站名(产品名)-网站的介绍(尽量不超过30个汉字)

2.description网站说明

简要说明我们的网站是做什么的

我们提倡，description作为网站的总体业务和主题概括，多采用”我们是…”、“我们提供…”、“xxx网作为…”、“电话:010…”之类语句。

3.Keywords关键字

Keywords是页面关键字，是搜索引擎的关注点之一

Keywords最好限制为6~8个关键字，关键字之间用英文逗号隔开，采用关键字1,关键字2的形式。

5.4常用模块类名命名

5.5LOGO SEO优化

1.logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。

2.h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可。

3.为了搜索引擎收录我们，我们链接里面要放文字(网站名称)，但是文字不要显示出来。

4.最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了。

5.6Web服务器

服务器(也称为主机)是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。

Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览;可以放置数据文件，让全世界下载。

以下服务器我们主要指的是Web服务器。

根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。

5.7本地服务器

我们可以把自己的电脑设置为本地服务器，这样同一个局域网内的同学就可以访问自己的网站了

5.8远程服务器

本地服务器主要在局域网中访问，如果想要在局域网中访问，就可以把网站上传到远程服务器。

远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。

总结∶
1.服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器
2.服务器可以分为本地服务器和远程服务器
3.远程服务器是别的公司为我们提供了一台计算机。
4.我们可以把网站上传到远程服务器里面，别人就可以通过域名访问我们的网站了。

第六章 附加CSS3特性

6.1CSS3 2D转换

**转换(transform)**是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，可以简单理解为变形。

1.移动translate

语法

transform:translate(x,y);/*或者分开写*/
transform:translateX(n);
transform:translateY(n);

重点

2.旋转rotate

2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。

语法

transform:rotate(度数)

重点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }
        
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

设置转换中心点transform-origin

我们可以设置元素转换的中心点

语法

transform-origin:x y;

重点

3.缩放scale

语法

transform:scale(x,y);

注意

2D转换综合性写法

注意

2D转换总结

6.2CSS3 动画

**动画(animation)**是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用

制作动画分为两步：

1.用Keyframes定义动画(类似定义类选择器)

@Keyframes 动画名称 {
    0%{
        width:100px;
    }
    100%{
        width:200px;
    }
}

动画序列

2.使用动画

/*调用动画*/
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;

动画常见属性

动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

animation: myfirst 5s linear 2s infinite alternate;

速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是”ease”

6.3CSS3 3D转换

3D位移：translate3d(x,y,z)

3D旋转：rotate3d(x,y,z)

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。

语法

左手准则

3D旋转rotate3d

transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可)，xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

透视：perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的

透视写在被观察元素的父盒子上面

d：就是视距，视距就是一个人距离人的眼睛到屏幕的距离。

z：就是z轴，物体距离屏幕的距离，z轴越大(正值)我们看到的物体就越大。

3D呈现transfrom-style

6.4浏览器私有前缀

1.私有前缀

2.提倡的写法

-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;

#HTML#CSS