前端复习:CSS专题3

2023-01-31 01:01:05 css 复习 专题

1.1 行高

  • CSS中,所有的行,都有行高。盒模型的padding,绝对不是直接作用在文字上的,而是作用在“行”上。
    line-height: 40px;

    前端复习:CSS专题3

  • 文字,是在自己的行里面居中的。比如说,现在的文字字号为14px,行高为24px。那么:
    前端复习:CSS专题3
  • 为了严格保证字在行里面居中,我们的工程师都有个约定:行高、字号,一般都是偶数。这样,它们的差,就是偶数,就能够被2整除。

    1.2 单行文本垂直居中

  • 文本在行里面居中,公式为:
    行高:盒子高;

    前端复习:CSS专题3

  • 需要注意的是,这个小技巧,行高=盒子高。只适用于单行文本垂直居中,不适用于多行。如果想让多行文本垂直居中,需要设置盒子的padding值。
    前端复习:CSS专题3

    1.3 font属性

  • 使用font属性,能够将字号、行高、字体一起设置。
    font: 14px/24px “宋体”;
  • 等价于三行语句:
    font-size:14px;
    line-height:24px;
    font-family:"宋体";
  • font-family就是“字体”的意思。
  • 网页中不是所有字体都能用,因为这个字体要看用户的电脑里面装没装。比如说你设置为:
    font-family: "华文彩云";
  • 如果用户电脑中没有这个字体,那么就会变成宋体。页面中,中文我们只使用: 微软雅黑、宋体、黑体。
  • 为了防止用户电脑里面,没有微软雅黑这个字体。就要用英文的逗号,隔开备选字体,就是说如果用于电脑里面,没有安装微软雅黑字体,那么就是宋体:
    font-family: "微软雅黑","宋体";
  • 备选字体可以有无数个,用逗号隔开。
  • 我们要将英文字体,放在最前面,这样所有的中文,就不能够匹配英文字体,就自动的变为后面的中文字体:
    font-family: "Times New Roman","微软雅黑","宋体";
  • 所有的中文字体,都有英文别名,我们也要知道:
  • 微软雅黑的英文别名为:font-family: "Microsoft YaHei"; ;宋体的英文别名为:font-family: "SimSun";。
  • font属性能够将font-size、line-height、font-family合三为一:
    font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";
  • 行高可以用百分比,表示字号的百分之多少。一般来说,都是大于100%的,因为行高一定要大于字号。
    font:12px/200% “宋体”
  • 等价于:
    font:12px/24px “宋体”;

    2.1 伪类

  • 也就是说,同一个标签,根据用户的某种状态不同,有不同的样式,这就叫做“伪类”。
  • 类就是工程师加的,比如div属于box类,但是a属于什么类呢?不明确,因为要看用户有没有点击、有没有触碰,所以就叫做“伪类”。
  • 伪类用冒号来表示,分为4种:
        a:link{
            color:red;
        }
        a:visited{
            color:orange;
        }
        a:hover{
            color:green;
        }
        a:active{
            color:black;
        }

    1、link表示,用户没有点击过这个链接的样式,是英文中“链接”的意思。
    2、:visited表示,用户访问过这个链接的样式,是英文“访问过的”意思。
    3、:hover表示,用户鼠标悬停的时候链接的样式,是英文“悬停”的意思。
    4、:active表示,用户用鼠标点击这个链接,但是不松手,此刻的样式,是英文“激活”的意思。

  • 需要记住,这四种状态,在css中,必须按照固定的顺序:a:link 、a:visited 、a:hover 、a:active。如果不按照顺序,那么将失效。“爱恨准则”love hate,必须先爱后恨。

    2.2 超级链接的美化

  • a标签在使用的时候,非常的难。因为不仅仅要控制a这个盒子,也要控制它的伪类。
  • 我们一定要将a标签写在前面,:link、:visited、:hover、:active这些伪类写在后面。
  • a标签中,描述盒子,伪类中描述文字的样式、背景。
        .nav ul li a{
            display: block;
            width: 120px;
            height: 40px;
        }
        .nav ul li a:link ,.nav ul li a:visited{
            text-decoration: none;
            background-color: yellowgreen;
            color:white;
        }
        .nav ul li a:hover{
            background-color: purple;
            font-weight: bold;
            color:yellow;
        }
  • 需要记住,所有的a都不继承text、font这些东西,因为a自己有一个伪类的权重。
  • 最标准的,就是把link、visited、hover都要写。但是前端开发工程师在大量的实线中,发现不写link、visited浏览器也挺兼容,所以把a标签简化了。
  • a:link、a:visited都是可以省略的,简写在a标签里面。也就是说,a标签蕴含了link、visited的状态。
    .nav ul li a{
            display: block;
            width: 120px;
            height: 50px;
            text-decoration: none;
            background-color: purple;
            color:white;
        }
        .nav ul li a:hover{
            background-color: orange;
        }

    3.1 background-color属性

  • 背景颜色属性。CSS2.1中,颜色的表示方法有哪些?一共有三种:单词、rgb表示法、十六进制表示法。

    3.1.1 用英文单词来表示

  • 能够用英文单词来表述的颜色,都是简单颜色。
  • 红色:background-color: red; 。

    3.1.2 用rgb方法来表示

  • 红色:background-color: rgb(255,0,0);。rgb表示三原色“红”red、“绿”green、“蓝”blue。光学显示器,每个像素都是由三原色的发光原件组成的。靠明亮度不同可以调成不同的颜色。
  • 用逗号隔开,r、g、b的值,每个值的取值范围0~255,一共256个值。
  • 如果此项的值background-color: rgb(0,255,0); ;蓝色:,是255,那么就说明是纯色。
  • 绿色:background-color: rgb(0,255,0); ;蓝色:background-color: rgb(0,0,255);;黑色:background-color: rgb(0,0,0);;白色:background-color: rgb(255,255,255);。
  • 颜色可以叠加,比如×××就是红色和绿色的叠加:background-color: rgb(255,255,0);

    3.1.3 十六机制表示法

  • 红色:background-color: #ff0000;。所有用#开头的值,都是16进制的。
  • 16进制表示法,也就是两位两位看,看r、g、b,但是没有逗号隔开。
  • ff就是10进制的255,00就是10进制的0,所以等价于rgb(255,0,0)。

    3.2 background-image

  • 用于给盒子加上背景图片:background-image:url(images/wuyifan.jpg);。
  • url()表示网址,unifORM resouces locator 统一资源定位符。images/wuyifan.jpg 就是相对路径。
    前端复习:CSS专题3
  • 背景天生就是被平铺满的。

    3.3 background-repeat属性

  • 设置背景图片是否重复,重复方式为:repeat表示“重复”。
  • repeat表示“重复”的意思。
    前端复习:CSS专题3
  • 也就是说,background-repeat属性,有三种值:
    background-repeat:no-repeat;   不重复
    background-repeat:repeat-x;    横向重复
    background-repeat:repeat-y;    纵向重复

    3.4 background-position属性

    3.4.1 属性的意思

  • position就是“位置”的意思,background-position就是背景定位属性。
    background-position:向右移动量 向下移动量;

    前端复习:CSS专题3

  • 定位属性可以是负数:
    前端复习:CSS专题3

    3.4.2 CSS精灵

  • “CSS精灵”,英文css sprite,所以也叫作“css雪碧”技术。是一种CSS图像合并技术,该方法时将小图标和背景图像合并到一张图片上,然后利用css的背景定位技术来显示需要显示的图片部分。
  • CSS精灵有什么优点,就是减少了Http请求。比如说4张小图片,原来需要4个http请求,但是用了css精灵后,4张小图片变成了一张图,http请求只有1个。
  • 如淘宝网中的精灵兔:
    前端复习:CSS专题3

    3.4.3 使用单词描述属性

  • background-position描述左右的词为left、 center、right;描述上下的词为:top 、center、bottom。
    background-position: right bottom;

    前端复习:CSS专题3

    3.5 background-attachment

  • 背景是否固定。
    background-attachment:fixed;
  • 背景会被固定住,不会被滚动条滚走。

    3.6 background综合属性

  • background属性和border一样,是一个综合属性:
    background:red url(1.jpg) no-repeat 100px 100px fixed;
  • 等价于:
    1background-color:red;
    2background-image:url(1.jpg);
    3background-repeat:no-repeat;
    4background-position:100px 100px;
    background-attachment:fixed;
  • 可以任意省略部分:
    background: red;
  • 定位有三种,分别为相对定位、绝对定位、固定定位。
  • 相对定位为:position:relative;
  • 绝对定位为:position:absolute;
  • 固定定位为:position:fixed;

    4.1 认识相对定位

  • 相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。
    前端复习:CSS专题3
  • 也就是说,如果一个盒子想要进行位置调整,那么就要使用相对定位。
    position:relative;   → 必须先声明,自己要相对定位了,
    left:100px;       → 然后进行调整。
    top:150px;       → 然后进行调整。

    4.2 不脱标,老家留坑,形影分离

  • 相对定位不脱离标准流,其真实的位置还是在老家里,只不过影子出去了,可以到处飘。
    前端复习:CSS专题3

    4.3 相对定位用途

  • 相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。就两个作用:
    1、微调元素;
    2、做绝对定位的参考;

    4.4 相对定位的定位值

  • 可以使用left、right来描述盒子左、右的移动;可以使用top、bottom来描述盒子的下、上的移动。
  • 绝对定位要比相对定位更灵活。
    前端复习:CSS专题3

    5.1 绝对定位脱标

  • 绝对定位的盒子,是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不准守。绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block;就可以设置宽高:
        span{
            position: absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

    5.2 参考点

  • 绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角。
    前端复习:CSS专题3
  • 如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应的页面的左下角:
    前端复习:CSS专题3
  • 面试题
    前端复习:CSS专题3
  • 用bottom定位的时候,参考的是浏览器首屏大小对应的页面左下角:
    前端复习:CSS专题3

    5.3 以盒子为参考点

  • 一个绝对定位的元素,如果父辈元素中也出现定位的元素,那么将以父辈这个元素,为参考点:
    前端复习:CSS专题3
  • 要听最近的已经定位的祖先元素的,不一定是父亲,可能是爷爷。
    <div class="box1">   →  相对定位
        <div class="box2">  →  没有定位
            <p></p>   → 绝对定位,将以box1为参考,因为box2没有定位,box1就是最近的父辈元素
        </div>
    </div>
    <div class="box1">   →  相对定位
        <div class="box2">  → 相对定位
            <p></p>   → 绝对定位,将以box2为参考,因为box2是自己最近的父辈元素
        </div>
    </div>
  • 不一定是相对定位,任何定位,都可以作为参考点。
    <div>  → 绝对定位
        <p></p>  → 绝对定位,将以div作为参考点。因为父亲定位了。
    </div>

    5.4 绝对定位的盒子居中

  • 绝对定位之后,所有标准流的规则,都不适用了,所以margin : 0 auto;失效。可以使用如下设置使其水平居中:
    left:50%;
    margin-left:负的宽度的一半
  • 固定定位,就是相对于浏览器窗口的定位。无论页面如何滚动,这个盒子显示的位置不变。
  • 固定定位脱标。

    1、z-index值表示谁压着谁。数值大的盖住数值小的。
    2、只有定位了的元素,才能够有z-index值。也就是说,不管相对定位、决定定位、固定定位,都可以使用z-index值。而浮动的东西不能够使用。
    3、z-index值没有单位,就是一个整数值。默认的z-index值为0。
    4、定位了的元素,永远能够压住没有定位的元素。

相关文章