前端基础学习之Css(干货)

最新推荐文章于 2024-08-08 15:03:10 发布
最新推荐文章于 2024-08-08 15:03:10 发布
阅读量223 收藏 4
点赞数
分类专栏： 前端学习系列 文章标签： css 前端 学习 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60544290/article/details/128735512
版权

一.Css基础选择器

分类(标签选择器|类选择器|id选择器|通配符选择器)

    • 标签选择器
/*注意：若含有多种属性，则属性之间由分号隔开
/* 
   标签名 {
      属性名: 属性值;
      属性名: 属性值;
   }
*/
标签选择器可对所有相同标签设置样式，可多次使用，例如下面的多个p标签都被设置了字体大小和背景颜色属性
<!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>
    <style>
        h4 {
            color: red 
        }
        p {
            font-size: 20px;
            background-color: green;
        }
    </style>
</head>
<body>
    <h4>青花瓷</h4>
    <p>夜曲</p>
    <p>等你下课</p>
    <p>花海</p>
</body>
</html>
    • 类选择器
/* 
   .类名 {
      属性名: 属性值;
   }
类选择器可以一次或多次使用:例如以下俩个div标签都被设置背景颜色为red的样式
类选择器可以有多个类名,可根据不同类名设置不同样式:以下div标签根据类名box被设置宽高，根据类名red/green设置颜色
*/

<!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>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
        .red {
            background-color: red;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>
</html>
    • id选择器
/* 
   #id名 {
      属性名: 属性值;
   }
id选择器只能使用一次，具有唯一性，相当于身份证号
*/
<!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>
        #red {
            color:red;
        }
    </style>
</head>
<body>
    <div id="red">你好</div>
</body>
</html>
    • 通配符选择器
/* 
   * {
      属性名: 属性值;
   }
*/
相当于对html标签内的所有内容设置样式，以下标签都被赋予颜色red样式
<!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>
        * {
            color:red
        }
    </style>
</head>
<body>
    <h5>青花瓷</h5>
    <ul>
        <li>jay</li>
        <li>范特西</li>
    </ul>
    <p>以父之名</p>
</body>
</html>

二.字体属性

fonts属性用于定义字体系列，大小，粗细，样式

    • 字体系列(font-family)
<!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>
    <style>
        p {
            font-family: "黑体";
        }
    </style>
</head>
<body>
    <p>天青色等烟雨</p>
</body>
</html>
    • 字体大小(font-size)
<!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>
    <style>
        h1 {
            font-size:16px;
        }
        p {
            font-size:10px;
        }
    </style>
</head>
<body>
    <!-- 可改变标题标签的大小 -->
    <h1>你好世界</h1>
    <p>你好世界</p>
</body>
</html>
    • 字体粗细(font-weight)
<!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>
    <style>
        h1 {
            /* 可用于标题细化 */
            /* 属性值可用数字表示 700等同于bord,400等同于normal */
            font-weight: normal;
        }
        p {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>你好世界</h1>
    <p>你好世界</p>
</body>
</html>
    • 字体样式(font-style)
<!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>
    <style>
        p {
            /* 倾斜 */
            font-style: italic; 
        }
        em {
            /* 让倾斜标签中的字体恢复正常 */
            /* 正常 */
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>只因你太美</p>
    <em>只因...只因...你实在是太美</em>
</body>
</html>
    • 字体复合属性(font)
<!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>
    <style>
        p {
            /* 注意！！！！！！！！
            使用字体复合属性时一定要按照顺序:font-style font-weight font-size font-family
            不需要的属性可以省略，但必须保留font-size和font-family否则font属性不起作用
            */
            font:italic 700 16px '黑体'
        }
    </style>
</head>
<body>
    <p>前端路漫漫,坚持即胜利</p>
</body>
</html>

三.文本属性

文本属性包括文本颜色(color),文本对齐(text-align),文本装饰(text-decoration),文本缩进(text-indent)

    • 文本颜色
<!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>
    <style>
        p {
            /* 英文单词 */
            color: red;
        }
        h4 {
            /* rgb */
            color: rgb(19, 205, 124)
        }
        h1 {
            /* 十六进制 */
            color: #FF6600
        }
    </style>
</head>
<body>
    <p>不要你离开,距离隔不开</p>
    <h4>思念变成海</h4>
    <h1>在窗外进不来</h1>
</body>
</html>
    • 文本对齐

text-align:center:让所有行内元素和行内外元素水平居中对齐

<!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>
    <style>
        p {
            /* 让文字居于标签中间 */
            text-align: center;
        }
    </style>
</head>
<body>
    <p>你的名字</p>
</body>
</html>
    • 文本装饰
<!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>
        h1 {
            text-decoration: line-through;
        }
        h2 {
            text-decoration: overline;
        }
        h3 {
            text-decoration: underline;
        }
        a {
            /* none最常用，可去掉a标签下划线 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>王者荣耀</h1>
    <h2>是一款</h2>
    <h3>垃圾</h3>
    <a href="http://baidu.com">baidu</a>
</body>
</html>
    • 文本缩进
<!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>
    <style>
        .first {
            text-indent: 32px;
        }
        .second {
            /* em相当于当前一个文字的距离 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p class="first">为了更好服务于用人单位招聘用工和劳动者应聘求职，同时为职业技能培训工作提供数据参考，
        中国就业培训技术指导中心近期组织102个定点监测城市公共就业服务机构，
        收集汇总2022年第四季度人力资源市场供求关系较为紧张的招聘、求职需求职业岗位信息，
        形成“2022年第四季度全国招聘大于求职‘最缺工’的100个职业排行”，现向社会公布。</p>
    <p class="second">
        与2022年第三季度相比，制造业缺工状况持续，汽车行业相关岗位缺工较为突出，
        “汽车零部件再制造工”“工程机器人系统操作员”“汽车工程技术人员”等职业新进排行，
        “汽车生产线操作工”位列排行前十；
        快递物流行业用人需求明显增加，“采购员”“邮件分拣员”本季度新进排行，
        \“快件处理员”“装卸搬运工”“网约配送员”“快递员”等职业缺工程度加大。
    </p>
</body>
</html>
    • 行间距
<!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>
    <style>
        p {
            line-height: 30px;
        }
    </style>
</head>
<body>
    <p class="first">为了更好服务于用人单位招聘用工和劳动者应聘求职，同时为职业技能培训工作提供数据参考，
        中国就业培训技术指导中心近期组织102个定点监测城市公共就业服务机构，
        收集汇总2022年第四季度人力资源市场供求关系较为紧张的招聘、求职需求职业岗位信息，
        形成“2022年第四季度全国招聘大于求职‘最缺工’的100个职业排行”，现向社会公布。</p>
</body>
</html>

四.Css复合选择器

复合选择器包括后代选择器，子选择器，并集选择器，链接伪类选择器，focus伪类选择器

    • 后代选择器
<!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 p {
            color: red;
        }

        div div div {
            color: green;
        }
    </style>
</head>

<body>
    <div>
        <p>青花瓷</p>
        <div>
            <p>天青色等烟雨</p>
            <p>而我在等你</p>
            <div>等你下课</div>
        </div>
    </div>
</body>

</html>
2.子选择器
<!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>a {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <a href="#">baidu</a>
        <p>
            <a href="#">tianmao</a>
        </p>
    </div>
</body>

</html>
3.并集选择器
<!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>

        .nav1,
        .nav2>ul {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav1">
        <p>你好世界</p>
    </div>
    <div class="nav2">
        <p>曲名</p>
        <ul>
            <li>青花瓷</li>
            <li>等你下课</li>
            <li>花海</li>
        </ul>
    </div>
</body>

</html>
4.复合选择器
<!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>
        /* 任何选择器都可以作为复合选择器的一部分，选择器之间用逗号隔开 */
        .nav1,
        .nav2>ul {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav1">
        <p>你好世界</p>
    </div>
    <div class="nav2">
        <p>曲名</p>
        <ul>
            <li>青花瓷</li>
            <li>等你下课</li>
            <li>花海</li>
        </ul>
    </div>
</body>

</html>
5.链接伪类选择器
<!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>
        /* 以下标签必须按照顺序使用:简单记为:LVHA */
        /* 没有点击过的a标签使用a:link */
        a:link {
            color: gray;
            text-decoration: none;
        }

        /* 已经点击过的a标签使用a:vistied */
        a:visited {
            color: red;
        }

        /* 鼠标滑动到a标签时使用a:hover */
        a:hover {
            color: green;
        }

        /* 鼠标点击不放使用a:a */
        a:active {
            color: black;
        }

        /* 实际开发中一半只使用俩种 */
        /* a {
            color: gray;
            text-decoration: none;
        }
        a:hover {
            color: green;
        } */
    </style>
</head>

<body>
    <div>
        <a href="#">baidu</a>
    </div>
</body>

</html>
6.focus伪类选择器
<!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>
        /* 光标在哪就会赋予样式 */
        input:focus {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

五.元素显示模式

元素可根据显示模式分为块级元素，行内元素，行内块元素

    • 块级元素

常见的块级元素有：<h1>-<h6>,<div>,<ul>,<ol>,<li>,<p>

特点：

(1)独占一行

(2)可以控制宽度，高度，内边距和外边距

(3)宽度默认是容器宽度的100%

(4)是一个容器和盒子，里面可以放行内元素和块级元素

注意：文字类的元素内不能放块级元素，比如<p>,<h1>-<h6>

<!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 {
            /* width: 100px; */
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <span>你好世界</span>
    </div>
    <div>
        <span>世界你好</span>
    </div>
</body>

</html>
    • 行内元素

常见的行内元素(内联元素)有：<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>

特点:

(1)相邻行内元素在一行上，一行可以显示多个

(2)高，宽直接设置无效

(3)默认宽度就是他本身内容的宽度

(4)行内元素只能容纳文本或者其他行内元素

注意：特殊情况a里面可以放块级元素，但是最好转化

    • 行内块元素

在行内元素中有几个特殊的元素，同时具有行内元素和块级元素的特征：<img>,<input>,<td>

特点:

(1)相邻行内元素在一行上，一行可以显示多个(行内元素)

(2)默认宽度就是他本身内容的宽度(行内元素)

(3)可以控制宽度，高度，内边距和外边距(块级元素)

<!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>
        input {
            /* width: 50px; */
            height: 50px;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>
    • 元素显示模式的转换
<!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>
        a {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 行内元素转为块级元素 */
            display: block;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 块级元素转为行内元素 */
            display: inline;
        }

        span {
            /* width: 100px;
            height: 100px; */
            background-color: red;
            /* 行内元素转为行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">baidu</a><a href="#">tianmao</a>
    <div>
        你好
    </div>
    <div>
        世界
    </div>
    <span>夜曲</span><span>花海</span>
</body>

</html>
小技巧_设置单行文字垂直居中:
<!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 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        span {
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div>
        <span>你好</span>
    </div>
</body>

</html>

六.Css的背景

    • 背景颜色

background-color

<!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 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        你好
    </div>
</body>

</html>
    • 背景图片
<!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>
        body {
            /* none:默认无背景图  url():背景图地址 */
            background-image: url(images/wzry.jpg);
        }
    </style>
</head>

<body>

</body>

</html>
3.背景平铺
<!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 {
            width: 1000px;
            height: 1000px;
            background-image: url(images/wzry1.jpeg);
            /* 图片不平铺 */
            background-repeat: no-repeat;
            /* 图片平铺 */
            /* background-repeat: repeat; */
            /* 图片横向平铺 */
            /* background-repeat: repeat-x; */
            /* 图片纵向平铺 */
            background-repeat: repeat-y;
        }
    </style>
</head>

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

</html>
    • 背景位置

七.盒子模型

盒子模型组成：边框(border),内边距(padding),内容(content),外边距(margin)

    • 边框

边框宽度:border-width:像素单位;

边框样式 :border-style:solid(实线)/dashed(虚线)/dotted(点线);

边框颜色:border-color:颜色;

复合写法：border:border-width border-style border-color; （顺序不影响）

<!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 {
            height: 500px;
            width: 500px;
            /* border-width:边框宽度 */
            border-width: 10px;
            /* border-style: 边框样式 solid 实线 dashed 虚线边框 dotted 点线边框*/
            border-style: solid;
            /* border-color: 边框颜色 */
            border-color: red;
        }

        p {
            /* 边框的复合写法 */
            border: 2px dashed black;
        }
    </style>
</head>

<body>
    <div>
        你好世界
    </div>
    <p>
        世界你好
    </p>
</body>

</html>
2.内边距

左内边距 padding-left:像素;

右内边距 padding-right:像素;

上内边距 padding-top:像素;

下内边距 padding-bottom:像素;

复合写法:

padding:apx; 上下左右内边距为apx;

padding:apx bpx; 上下内边距为apx,左右内边距为bpx;

padding:apx bpx cpx; 上内边距为apx,左右内边距为bpx,下内边距为cpx;

padding:apx bpx cpx dpx; 上内边距为apx,左内边距为bpx,右内边距为cpx,下内边距为dpx;

注意：内边距会影响盒子实际大小，盒子实际大小=盒子宽/高度+内边距宽/高

<!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会影响盒子实际大小 */
        .test1 {
            height: 500px;
            width: 500px;
            background-color: red;
            padding-left: 10px;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-right: 10px;
        }

        .test2 {
            height: 300px;
            width: 300px;
            background-color: blue;
            /* 内边距padding复合写法 */

            /* 上下左右 */
            /* padding: 10px; */
            /* 上下为10左右为20 */
            /* padding: 10px 20px; */
            /* 上为10左右为20下为30 */
            /* padding: 10px 20px 30px; */
            /* 上为10右为20下为30左为40 */
            padding: 10px 20px 30px 40px;
        }
    </style>
</head>

<body>
    <div class="test1">

    </div>
    <div class="test2">

    </div>
</body>

</html>

特殊情况：盒子宽/高度没有写时，宽/高不会被撑开

<!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>
        /* 如果盒子没有写width/height属性则不会撑开盒子 */
        div {
            height: 500px;
            /* width: 500px; */
            background-color: red;
            /* padding: 100px; */
        }

        div p {
            /* width: 100%; */
            height: 50px;
            background-color: black;
            /* padding: 50px; */
        }
    </style>
</head>

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

</html>
3.外边距

左外边距 margin-left:像素;

右外边距 margin-right:像素;

上外边距 margin-top:像素;

下外边距 margin-bottom:像素;

复合写法:

margin:apx; 上下左右外边距为apx;

margin:apx bpx; 上下外边距为apx,左右外边距为bpx;

margin:apx bpx cpx; 上外边距为apx,左右外边距为bpx,下外边距为cpx;

margin:apx bpx cpx dpx; 上外边距为apx,左外边距为bpx,右外边距为cpx,下外边距为dpx;

<!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 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .test1 {
            margin-left: 50px;
            margin-right: 50px;
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .test2 {
            /* 复合写法 */
            /* margin:50px; */
            /* margin:10px 50px; */
            /* margin:10px 20px 30px; */
            margin: 10px 20px 30px 40px;
        }
    </style>
</head>

<body>
    <div class="test1">
    </div>
    <div class="test2">
    </div>
</body>

</html>

技巧一：实现块级盒子水平居中对齐

核心：给外边距左右设为auto

margin:auto/margin:0 pax/margin-left:auto;margin-right:auto;

<!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 {
            background-color: red;
            width: 100px;
            height: 100px;
            /* margin: auto;   */
            /* margin: 0 auto; */
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

技巧二：实现行内/行内块级元素水平居中对齐

核心：给元素的父级元素添加text-align:center;

<!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 {
            width: 100px;
            height: 100px;
            background-color: red;
            text-align: center;
            margin: auto;
        }
    </style>
</head>

<body>
    <div>
        <!-- 实现p元素居中给其父元素添加text-align: center即可 -->
        <p>你好世界</p>
    </div>
</body>

</html>

技巧三：清除内外边距

在实际开发过程中，浏览器基本都自带内外边距，一般在css代码中第一句都添加一句代码以消除默认内外边距

body {
         margin: 0px;
         padding: 0px;
     }

注意俩个问题：

问题一：相邻块元素的垂直外边距合并问题

当上一个块级元素有margin-bottom，下一个块级元素有margin-top时，俩者之间的垂直间距会取其中较大值，这就是垂直外边距的合并

解决方法：尽量给其中一种元素添加margin值

<!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 {
            background-color: red;
            width: 100px;
            height: 100px;
        }

        .div1 {
            margin-bottom: 100px;
        }

        .div2 {
            margin-top: 200px;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

</html>

问题二：嵌套块元素外边距垂直塌陷问题

当父元素和子元素都含有margin-top值时，会发生塌陷问题，父元素会塌陷较大的margin-top值

解决方法：

1.给父元素添加边框

2.给父元素添加内边距

3.给父元素添加overflow:hidden

<!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>
        /* 潜逃块元素垂直塌陷问题 */
        .father {
            height: 500px;
            width: 500px;
            background-color: red;
            /* margin-top: 100px; */
            /* 解决：1.给父元素添加边框 2.给父元素添加外内边距 3.给父元素添加overflow:hidden*/
            /* border: 1px solid transparent; */
            /*transparent:透明的*/
            /* padding: 1px; */
            overflow: hidden;
        }

        .son {
            height: 200px;
            width: 200px;
            background-color: blue;
            margin-top: 200px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

八.圆角边框

border-radius:length(可以为数值或者百分比的形式) 用于设置外边框圆角

原理：根据参数值形成一个圆与各个角相比对

该属性为简写属性，完整参数值可写为：

border-radius：左上 右上 右下 左下（顺序不可打乱）

可以分开写border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius(分别代表左上，右上,右下，左下)

<!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>
        .zhengxing {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 宽高都是原来的一半 */
            border-radius: 100px;
            /*参数值可写为50%也可以表示宽高都是原来的一半形成一个圆*/
        }

        .juxing {
            width: 200px;
            height: 100px;
            background-color: red;
            /* 只把高度写为一半 */
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 四个角形成的圆角皆不相同 */
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>

<body>
    1.正方形设置为圆形
    <div class="zhengxing"></div>
    2.矩形设置为圆角矩形
    <div class="juxing"></div>
    3.可以设置不同的圆角
    <div class="radius"></div>
</body>

</html>

九.盒子阴影

box-shadow:h-shadow v-shadow blur spread color (inset/outset)

h-shadow:水平方向阴影位置（可为负值）

v-shadow:垂直方向阴影位置（可为负值）

blur:影子的虚实程度

spread:影子的大小

color:影子颜色

inset:内影子 outset:外影子

注意：默认情况下为outset但是不可以手动添加outset参数。如果想让影子为内影子，可以添加inset

<!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 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            /* box-shadow: 10px 10px 10px 10px rgb(0, 0, 0, .3); */
        }

        div:hover {
            /* rgb第四个参数表示透明度 */
            box-shadow: 10px 10px 10px 10px rgb(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

十.文字阴影

text-shadow:h-shadow v-shadow blur color

h-shadow:水平方向阴影位置（可为负值）

v-shadow:垂直方向阴影位置（可为负值）

blur:影子的虚实程度

color:影子颜色

<!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>
        h1 {
            color: red;
            text-shadow: 10px 10px 1px rgb(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <h1>你好世界</h1>
</body>

</html>

十一.浮动(网页布局方式)

1.网页布局形式

传统网页布局分为三种形式：

  1. 标准流:即块级元素和行内元素都按照定义的顺序进行排放

  1. 浮动

  1. 定义

注意：实际开发中，一个网页就包含了这三种网页布局形式

2.为什么需要浮动

原因：在实际开发过程中，存在很多布局效果，标准流无法完成，需要浮动来完成布局，因为浮动可以改变元素默认的排列方式

例如，有以下问题：

问题一：如何让块级元素盒子水平排列

问题二：如何让盒子左右对齐排放

浮动最典型应用：使得块级元素盒子水平排列

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素水平排列找浮动（重点）

3.什么是浮动

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

元素不浮动

float:none;

元素左浮动

float:left;

元素右浮动

float:right;

4.浮动的特性(重难点)

(1)脱标

脱离标准流的特性移动到指定位置

浮动的盒子不再保留原先的位置

<!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>
        /* 由于box1和box2已经是浮动，则脱离了标准流，失去了原来的位置，box3作为标准流会占据他们原来的位置，实现重叠 */
        .box1,
        .box2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box3 {
            width: 500px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

(2)如果多个盒子都设置了浮动，则盒子会在一行显示并且顶端对齐排列

<!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 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

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

</html>

(3)浮动元素具有行内块元素相似特征

例如：

行内元素加了浮动后具有行内块元素特征，可以设置宽高

块级元素加了浮动后具有行内块元素特征，默认宽高不再是父级元素宽度，而是元素本身宽度

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        span {
            /* 行内元素加了浮动后具有行内块元素特征，可以设置宽高 */
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        p {
            /* 块级元素加了浮动后具有行内块元素特征，默认宽高不再是父级元素宽度，而是元素本身宽度 */
            float: right;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <span>1</span>
    <span>2</span>
    <p>你好</p>
</body>

</html>

注意：浮动元素经常和标准流一起布局使用

用标准流父盒子上下排列，内部用浮动排列左右位置。符合网页布局第一准则

一个元素动了，理论上其他兄弟元素也要动

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

十二.清除浮动

1.清除浮动的原因

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

2.清除浮动的本质

(1)清除浮动的本质是清除浮动造成的影响

(2)如果父级盒子本身有高度，则不需要清除浮动

(3)清除浮动后，父级就会根据浮动的子盒子自动检测高度，就不会影响下面的标准流了

3.清除浮动的方法

语法：选择器{clear:both/left/right}

left:清除左侧浮动影响

right:清除右侧浮动影响

both:清除所有浮动影响

清除浮动的策略是：闭合浮动(只让浮动在父盒子内造成影响，不会影响父盒子外的元素)

    • 额外标签法(隔墙法)

在浮动元素末尾添加一个块级元素标签，给其设置清除浮动样式clear:both

<!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>
        .box {
            width: 500px;
            /* height: 300px; */
            background-color: white;
            margin: 0 auto;
            border: 1px solid black;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .right {
            float: right;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

</html>
2.overflow

给父级元素添加overflow属性，将属性值设为hidden,auto,scroll

<!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>
        .box {
            width: 500px;
            /* height: 300px; */
            background-color: white;
            margin: 0 auto;
            border: 1px solid black;
            overflow: auto;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .right {
            float: right;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>
3.after伪元素

给父元素添加：

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

        .clearfix {
            /* IE6,7专有 */
            *zoom: 1;
        }
<!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>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6,7专有 */
            *zoom: 1;
        }

        .box {
            width: 500px;
            /* height: 300px; */
            background-color: white;
            margin: 0 auto;
            border: 1px solid black;
            overflow: auto;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .right {
            float: right;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>
4.双伪元素

给父元素添加：

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

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            /* IE6,7专有 */
            *zoom: 1;
        }
<!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>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            /* IE6,7专有 */
            *zoom: 1;
        }

        .box {
            width: 500px;
            /* height: 300px; */
            background-color: white;
            margin: 0 auto;
            border: 1px solid black;
            overflow: auto;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .right {
            float: right;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

十三.PS切图

1.常见的图片格式

jpg:产品类的图片

gif:图片动画效果

png:背景透明的图片

PSD:前端使用，用于复制文字，获取图片，测量大小和距离

2.ps切图
(1)图层切图

右击图层->快速导出为png

如果需要合并图层，则按住shift选中需要的图层再导出

(2)切片切图

利用切片工具手动划出图片

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

十四.CSS书写顺序

  1. 布局定位属性

  1. 自身属性

  1. 文本属性

  1. 其他属性(Css3)

十五.页面布局整体思路

  1. 确定版心(可视化区域)宽度

  1. 网页布局第一准则：先用标准流布局行，再用浮动布局每个行中的列

  1. 网页布局第二准则：布局列时先确定每个列的大小，再确定位置

  1. 制作HTML结构，再制作样式，结构比样式重要

十六.定位

1.定位的作用

定位可以让盒子自由的在某个盒子中移动或者固定在屏幕中某个位置

2.定位组成

定位=定位模式+边偏移

定位模式：指定元素在文档中定位方式

边偏移：指定元素在页面位置

    • 定位模式

定位模式通过Css中的position属性设置

属性值

语义

是否脱标

能否设置边偏移

移动参照物

使用频率

static

静态定位

未脱标

否

无法移动

很少

relative

相对定位

未脱标

能

原来位置

常用

absolute

绝对定位

脱标

能

带有定位的祖先元素

常用

fixed

固定定位

脱标

能

可视化区域

常用

sticky

粘性定位

未脱标

能

可视化区域

很少

(1) 静态定位(了解)

语法：position:static

静态定位是默认定位方式，和标准流无异

(2) 相对定位(重要)

语法：position:relative

特点：

  1. 相对定位相对于原来位置移动

  1. 原来在标准流位置继续占有(不脱标，保留原来位置)

<!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 {
            height: 200px;
            width: 200px;
        }

        .one {
            position: relative;
            top: 100px;
            left: 100px;
            background-color: red;
        }

        .two {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="one">
    </div>
    <div class="two">
    </div>
</body>

</html>

(3) 绝对定位(重要)

语法：position:absolute

特点：

  1. 如果没有祖先元素或者祖先元素都没有定位，则以浏览器为准定位

  1. 如果祖先元素有定位，则以最近一级有定位的祖先元素为准定位

  1. 脱标

<!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>
        .one {
            position: relative;
            height: 500px;
            width: 500px;
            background-color: red;
        }

        .two {
            height: 300px;
            width: 300px;
            background-color: green;
        }

        .three {
            position: absolute;
            top: 100px;
            right: 100px;
            height: 100px;
            width: 100px;
            background-color: blue;
        }
    </style>

<body>
    <div class="one">
        <div class="two">
            <div class="three"></div>
        </div>
    </div>
</body>

</html>

技巧：子绝父相

子级是绝对定位的话，父亲要用相对定位

原因：

1.子级绝对定位，不会占有位置，可以放在父盒子任何一个·地方，

(4) 固定定位(重要)

语法：position:fixed

使用场景：元素不随页面滑动而滑动

特点：

  1. 元素以浏览器可视化区域为参照物，不随滚动条滚动

  1. 脱标

技巧：固定元素到右侧版心

  1. 让固定元素left:50%,移动到可视化区域一半位置

  1. 让固定元素margin-left:版心一半距离，即可移动到右侧版心

<!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>
        .box {
            width: 1200px;
            height: 10000px;
            margin: 100px auto;
            background-color: red;
        }

        .fixed {
            position: fixed;
            top: 500px;
            /* 小算法 */
            /* ----------------------- */
            left: 50%;
            margin-left: 600px;
            /* ----------------------- */
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
    <div class="fixed">

    </div>
</body>

</html>

(5) 粘性定位(了解)

语法格式：position:sticky

特点：

  1. 以可视化区域为参照移动(固定定位特点)

  1. 不脱标(相对定位特点）

  1. 必须添加top,bottom,left,right其中一个才有效

3.定位的叠放次序

语法：z-index:正整数、0、负整数(默认为auto)

注意：

  1. 属性值只能是数字，不可以加单位

  1. 数值越大，盒子越靠上

  1. 如果属性值相同，则按照书写顺序，后来居上

  1. 只有有定位的盒子才有z-index属性

技巧：绝对定位的盒子居中算法

步骤：

  1. 让盒子左侧移到父级盒子水平居中位置

  1. 让盒子向左移动自身一半距离

<!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>
        .father {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: red;
        }

        .son {
            position: absolute;
            /* 走到父级容器的一半 */
            left: 50%;
            /* 走到水平居中位置 */
            margin-left: -50px;
            width: 100px;
            height: 20px;
            background-color: white;
            /* 加了绝对定位的盒子无法使用margin:auto实现水平居中对齐 */
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">

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

</html>
4.定位的拓展

  1. 行内元素添加绝对定位和固定定位就可以直接设置宽高

  1. 块级元素添加绝对定位和固定定位默认宽度就是内容大小

  1. 绝对定位和固定定位不会触发外边距合并问题

注意：浮动不会压住标准流文字，定位会

<!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>
        .box1 {
            /* 浮动不会压住标准流文字，只会压住盒子 */
            /* float: left; */
            /* 绝对定位会压住标准流文字 */
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2">你好世界</div>
</body>

</html>

十七.元素的隐藏与显示

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

1.display

语法：

隐藏元素 display:none;

显示元素 display:block;

元素隐藏后不保留原来位置

<!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 {
            width: 200px;
            height: 200px;
        }

        .box1 {
            /* display: none; */
            display: block;
            background-color: red;
        }

        .box2 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>
2.visibility

语法：

显示元素 visibility:hidden;

隐藏元素 visibility:visible;

元素隐藏后保留原来位置

<!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 {
            width: 200px;
            height: 200px;
        }

        .box1 {
            /* visibility: hidden; */
            visibility: visible;
            background-color: red;
        }

        .box2 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>
3.overflow

特点：显示与隐藏元素溢出部分

语法：

overflow:visible 默认情况，不会隐藏溢出部分

overflow:hidden 隐藏溢出部分

overflow:scroll 无论是否溢出时都会显示滚动条

overflow:auto 溢出时才会显示滚动条

<!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 {
            /* overflow: visible; */
            /* overflow: hidden; */
            /* overflow: scroll; */
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div class="box">
        人多在喜怒怠惰，恣情纵欲上临机而迷，一错再错，后悔不及。

        　　真实用眼睛看不到，要用心看，用力行体悟。

        　　忠厚诚笃自修，福祸听之自然。

        　　勤劳一日，得一日安眠;勤劳一生，得永世安眠。

        　　一生有恒业，一日有修业。

        　　常葆忧勤惕励之志，常去偷安怠惰之心。

        　　学当以勤，学当以恒。

        　　一日不学，一日不安;一日懈怠，一日汗颜。

        　　在这个不埋没人才的伟大时代，一定要有所准备，机会有的是。
    </div>
</body>

</html>

十八.精灵图

1.使用目的

为了有效减少服务器发送和接收请求的速度，提高页面加载速度

2.使用原理

  1. 主要针对小的背景图片使用

  1. 主要借助于背景位置实现(background-position)

  1. 一般情况下精灵图都是负值

<!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>
        .box1 {
            width: 60px;
            height: 60px;
            background: url(images/sprite.png) no-repeat -184px 0px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>

十九.字体图标

1.字体图标的优点

轻量级：一个图标字体比一系列图片小，字体加载出来图标就会马上显示，减少了服务器请求

灵活性：字体图标本身就是字体，可以设置属性

兼容性：几乎支持所有浏览器

注意：遇到样式比较简单的小图标，用字体图标，否则用精灵图

2.字体图标的下载

icomoon字库：http://icomoon.io

阿里iconfont字库：http://www.iconfont.cn

3.字体图标使用

  1. 将压缩包文件的fonts复制到当前目录下

  1. 复制压缩包文件的style.css部分代码到css里

  1. 给当前图标设置font-family='icomoon'

  1. 复制压缩包文件的demo.html中图标

<!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>
        /* 直接在压缩包文件的style.css中复制即可 */
        @font-face { 
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?n3jksq');
            src: url('fonts/icomoon.eot?n3jksq#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?n3jksq') format('truetype'),
                url('fonts/icomoon.woff?n3jksq') format('woff'),
                url('fonts/icomoon.svg?n3jksq#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        .icon-file-text {
            /* 必须要写！！！！！ */
            font-family: 'icomoon';
            font-size: 100px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 在压缩包文件的demo.html中复制 -->
    <span class="icon-file-text"></span>
</body>

</html>

二十.Css三角做法

给盒子宽高都设置为0,然后给任意一个边加边框，即可实现三角效果

<!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>
        .box {
            width: 0px;
            height: 0px;
            /* 兼容性 */
            /* ----------------- */
            font-size: 0px;
            line-height: 0px;
            /* ----------------- */

            /* 四个值必须一起设置才有显示 */
            /* border-top: 10px solid black;
            border-bottom: 10px solid blue;
            border-left: 10px solid yellow;
            border-right: 10px solid white; */

            border: 10px solid transparent;
            border-bottom-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

二十一.用户界面样式

1.鼠标指针

语法：cursor:属性值;

设置鼠标指针样式

属性值

描述

default

小白 默认

pointer

小手

move

移动

text

文本

not-allowed

禁止

<!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>
</head>

<body>
    <span style="cursor: pointer;">你好世界</span>
    <span style="cursor: move">你好世界</span>
    <span style="cursor: text">你好世界</span>
    <span style="cursor: not-allowed">你好世界</span>
</body>

</html>
2.取消表单轮廓

语法：outline:none;

<!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>
        input {
            outline: none;
        }
    </style>
</head>

<body>
    <input type="text">
</body>

</html>
3.防止拖拽文本域

语法：

/* 取消文本域轮廓 */

outline: none;

/* 防止拖拽文本域 */

resize: none;

<!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>
        textarea {
            /* 取消文本域轮廓 */
            outline: none;
            /* 防止拖拽文本域 */
            resize: none;
        }
    </style>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

</html>
4.vertical-align

语法：vertical-align:属性值;

用途：用于设置元素(图片)和文字垂直对齐,但只针对行内元素有用

属性值

描述

baseline

默认，元素放置在父元素基线上

top

元素顶端与行中最高元素顶端对齐

middle

把元素放在父元素中部

bottom

把元素顶端与行中最低元素顶端对齐

<!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>
</head>

<body>
    <img src="images/img.jpg" alt="" style="vertical-align:middle">
    <span>你好世界</span>
</body>

</html>

问题：如何解决图片底部空缝隙问题

问题产生原因：由于图片默认与基线对齐

解决方案：

  1. 设置垂直对齐方式vertical-align:top/middle/bottom;

  1. 修改图片为块级元素，因为块级元素没有垂直对齐方式

<!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 {
            border: 2px solid red;
        }

        img {
            vertical-align: bottom;
            /* vertical-align: top;
            vertical-align: middle; */
        }
    </style>
</head>

<body>
    <div>
        <img src="images/img.jpg" alt="">
    </div>
</body>

</html>
5.单行文字溢出用省略号显示

  1. 强制文字在一行显示

white-space:normal; 默认文字可以多行显示

white-space:nowrap; 文字只能单行显示

  1. 隐藏溢出文字

overflow: hidden;

  1. 溢出文字用省略号显示

text-overflow:ellipsis;

 <!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 {
            width: 100px;
            height: 100px;
            background-color: red;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>

</head>

<body>
    <div>
        人多在喜怒怠惰，恣情纵欲上临机而迷，一错再错，后悔不及。
    </div>
</body>

</html>

二十二.布局技巧

1.margin负值的运用

实现几个盒子之间只有一个边框

<!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>
        li {
            position: relative;
            float: left;
            width: 100px;
            height: 200px;
            background-color: #fff;
            list-style: none;
            border: 1px solid red;
            margin-left: -1px;
        }

        /* li:hover { */
        /* 如果盒子没有定位，则直接添加相对定位 */
        /* 提高优先级 */
        /* position: relative; */
        /* border-color: blue; */
        /* } */

        /* 如果盒子必须添加定位 */
        li:hover {
            z-index: 1;
            border-color: blue;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>
2.文字围绕浮动元素
<!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>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
        }

        .pic {
            float: left;
            width: 100px;
            height: 70p;
        }

        .pic img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pic">
            <img src="images/img.jpg" alt="">
        </div>
        <p>人多在喜怒怠惰，恣情纵欲上临机而迷</p>
    </div>
</body>

</html>
3.Css三角运用
.sanjiao {
            width: 0px;
            height: 0px;
            border-top: 100px solid red;
            border-bottom: 0px solid blue;
            border-left: 0px solid green;
            border-right: 50px solid pink;
         }
夜笙夏之歌
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS干货系列（二）CSS背景与文本
yidianbiji的博客
01-08 583
1.背景 1.1背景色，属性background-color，指定元素的背景色，不能被继承，默认值是transparent。 1.2背景图像，属性background-image，默认值是none，不能被继承。如果需要指定背景图像，则必须为这个属性设置一个url值，比如：body {background-image:url(/ex.jpg);}。 1.3背景重复，background-rep
CSS基础知识
perry_Fan
11-30 612
一、CSS 概述*.CSS ： Cascading Style Sheet 层叠样式表 *.CSS 作用就是给HTML页面标签添加各种样式 *.为什么用CSS？ HTML的缺陷： 1. 不能够适应多种设备 2. 要求浏览器必须智能化足够庞大 3. 数据和显示没有分开 4. 功能不够强大
CSS基础干货（转载）
友人C君的博客
04-29 612
原文地址：http://caibaojian.com/css-ppt 前端页面的书写顺序 先看设计稿 编写 HTML 代码 编写 CSS 代码 编写 JS 代码 今天我们主要关注编写 CSS 代码，在写 CSS 代码时，我们需要从PSD中拿到各种数据，如何精准的拿到这些数据，保证页面能够像素级还原呢？ PSD切图 打开PSD，我们看到一个PSD里面有很多的智能参考线，设计师在设计的过...
css干货教学，你想了解的全都有！！
zihong523的博客
06-26 290
CSS简介：初识CSS 一.我们为什么需要CSS？ 使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。 CSS的出现解决了下面两个问题： 将HTML页面的内容与样式分离。 提高web开发的工作效率 二，什么是CSS？ CSS是指层叠样式表(Cascading S
CSS超全总结(超多干货)
༺隆冬飘落の初霁༻的博客
08-15 384
CSS三大特性—— 继承、 优先级和层叠 继承：即子类元素继承父类的样式; 优先级：是指不同类别样式的权重比较; 层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。 链接：https://segmentfault.com/a/1190000014833437?utm_source=sf-related 选择器与优先级 ###一、元素选择符 通配选择符(*):选择所有元素 类型选择符(E)：以文档对象类型作为选择符 id选择符(E#id):以唯一标识符id属性等于id的E对象作为选择符 cla
前端面试题之CSS篇
01-08
本文总结了前端面试题中，关于css部分 ，掌握这些 ，对你面试会有很大帮助。关于JS，浏览器，框架等后续会有更新呦，需要的小可爱可以关注一下，真的全是干货，不要错过哦！:heart_suit::heart_suit::heart_suit: ...
零基础必看的web前端HTML+CSS-视频教程网盘链接提取码下载 .txt
05-16
本课程是由浠浠呀老师为小白入门前端倾力打造的前端基础教程，是零基础小白入门前端开发的不二之选。树立前端教程新标准，全程无废话，直截了当输出干货，让你看到即学到。课程共包括 2 季，内容涵盖HTML、CSS 和 ...
零基础必看的web前端HTML+CSS
10-19
为小白入门前端倾力打造的前端基础教程，是零基础小白入门前端开发的不二之选。树立前端教程新标准，全程无废话，直截了当输出干货，让你看到即学到。课程共包括 2 季，内容涵盖HTML、CSS 和 HTML5、CSS3。本次发布...
前端小白2020寒假HTML和CSS学习总结（含六大项目实战）
01-08
我是才开始学习web前端技术不久，在大学之前根本不懂得什么的前端，写这篇博客的初衷就是一是回顾，二是为了避免后来人踩雷。 所以我不会像大多权威官方博客一样的copy definitely（定义），满屏概念，我只能
css干货收藏
Dj_Fairy的博客
05-11 288
css各种干货    转载：http://www.imooc.com/article/51405   1、 &lt;script&gt; var html = document.getElementsByTagName("html")[0]; var w = document.documentElement.clientWidth || document.body....
干货系列!css知识点日记!
lfl1994的博客
03-12 424
一. 网页的组成 html  css JavaScript html: 是由标签组成 css: 负责给页面中的内容增加样式的,比如:改变字体颜色,背景色,尺寸 javascript : 增加动态效果 二. css简介 cascading style sheet  层叠样式表 学习css的好处: 1.分离出来可以是代码做到复用 2.便于维护管理,修改,页面美观 3.浏览器可以对
CSS干货系列（一）基本语法
yidianbiji的博客
01-08 495
CSS 指层叠样式表 (Cascading Style Sheets) 1.层叠次序 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4） 拥有最高的优先权。 1）浏览器缺省设置 2）外部样式表 3）内部样式表（位于 标签内部） 4）内联样式（在 HTML 元素内部） 可以理解为靠近元素的
CSS总结（内容略长）
weixin_42235173的博客
05-31 1784
CSS样式表 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> 语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。 type=“text/CSS” 在html5
CSS实用技巧干货
weixin_34341229的博客
02-27 175
一、使用 :not() 在菜单上应用/取消应用边框 我们通常的做法是先给每个菜单项设置边框，然后在设置最后一个菜单的边框为零 /* add border */ .nav li { border-right: 1px solid #666; } //* remove border */ .nav li:last-child { ...
CSS 设置hr样式
本人小可爱
08-08 356
【代码】CSS 设置hr样式。
tailwindcss @apply 和 @layer 有什么区别
前端原创分享，常年坚持记录和分享，全网阅读量超百万
08-08 255
apply用于将 Tailwind 的工具类应用到自定义的 CSS 类中，简化和复用样式。@layer用于将自定义样式归类到 Tailwind 的特定层中，确保样式的声明顺序和组织性。通过结合使用这两个指令，你可以在 Tailwind CSS 项目中更高效地管理和复用样式。
websocket，css动画和css-position、display、区别
最新发布
qq_45852108的博客
08-08 373
websocket，css动画和css-position、display、区别
怎么在 tailwindcss 项目中自定义一些可复用的样式
前端原创分享，常年坚持记录和分享，全网阅读量超百万
08-08 112
这些方法可以帮助你创建可复用的自定义样式,同时保持与 Tailwind 的一致性。选择哪种方法取决于你的具体需求和项目结构[1][2][4][5]。
CSS 多按钮根据半圆弧度排列
前端技术
08-08 194
多个按钮根据弧度，延边均匀排列。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值