6月17日知识点总结

1.背景的简写

语法格式：

background:color image  repeat position;

2.背景的尺寸

1.使用像素

 2.设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。有可能会有留白

3.设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover最多

导航案例：

<style>
        /* 初始属性 */
        a {
            text-decoration: none;
            /* a标签的字体颜色要直接对a标签进行设置 */
            color: #666;

        }

        /* 后代选择器 */
        .nav a {
            width: 150px;
            height: 50px;
            /* border: 1px solid red; */
            /* 由于a标签是行内元素,所以设置宽和高无效 */
            display: inline-block;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 50px;
        }

        /* 当鼠标悬停时显示图片和更换字体颜色 */
        .nav a:hover {
            background: url(img/btn.png) no-repeat center;
            color: #fff;
        }
    </style>

<div class="nav">
        <a href="">首页</a>
        <a href="">业务展示</a>
        <a href="">人才招聘</a>
        <a href="">关于我们</a>
        <a href="">联系我们</a>
    </div>

运行结果

3.字体图标

阿里icon font字库

iconfont-阿里巴巴矢量图标库

下载图标资源之后，把以下文件放入fonts文件夹中

第一种方法：Font class引用

1.引入css文件

<!-- 1.引入css文件 -->
    <link rel="stylesheet" href="fonts/iconfont.css">
    <style>
        .icon-qichepeijian {
            color: red;
            font-size: 60px;
        }
    </style>

2.设置标签和class名 iconfont一定不能少 icon-qichepeijian引入字体图标名

<!-- 2:设置标签和class名 iconfont一定不能少 icon-qichepeijian引入字体图标名-->
    <span class="iconfont icon-qichepeijian"></span>

第二种方法：Unicode 引用

1.拷贝font-face

/* 1.拷贝font-face */
        @font-face {
            font-family: "iconfont";
            /* Project id  */
            src: url('fonts/iconfont.ttf?t=1718595727310') format('truetype');
        }

2.定义使用iconfont的样式

/* 2.定义使用 iconfont 的样式 */
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

3.拷贝span的标签并且把unicode特殊字符作为文本设置到span的内容当中

<!-- 3.拷贝span的标签并且把unicode特殊字符作为文本设置到span的内容当中 -->
    <span class="iconfont">&#x345d;</span>

运行结果

4.list-style属性

 1.去掉小圆点 

list-style-type: none;

2.disc实心圆

默认

3.空心圆

list-style-type: circle; 

4.方型

list-style-type: square;

 

• list-style-position

outside:默认值

保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

list-style-position: inside; 

列表项目标记放置在文本以内，且环绕文本根据标记对齐。

• list-style-image:url(img/sq.png);

自定义标记

5.css的三大特性：

1.css层叠性

当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。所谓层叠性是指多种CSS样式的叠加,就是css处理冲突的能力。

2.css继承性

书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可

1.对于字体、文本属性等网页中通用的样式可以使用继承。 字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。

2.不具有继承性： 边框、外边距、内边距、背景、定位、元素高属性 。

3.css优先级

!important>行内样式表>ID选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式

4.css的权重

6.盒子模型

盒子模型组成部分:content(width/height) padding(内边距) border(边框) margin(外边距)