CSS进阶-CSDN博客

本文链接：https://blog.csdn.net/m0_73783119/article/details/128358401

一.@规则

at-rule: @规则、@语句、CSS语句、CSS指令

1. import

@import “路径”;

在css中导入另外一个css文件，页面中只需要引入一个css

2. charset

@charset “utf-8”;

告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行

二.web字体和图标

1.web字体

用户电脑上没有安装相应字体，强制让用户下载该字体（放在服务器上的，直接下载,只是临时安装）

使用@font-face指令制作一个新字体

 @font-face{
            font-family: "good night";
            src: url("font/晚安体.ttf");
        }

2.字体图标

做的最好的字体图标库iconfont.cn
注：
1.习惯上会使用i元素制作图标，i元素是一个行盒
2.因为他是字体，座椅可以设置color，font-size等等，放大之后不会变模糊
3.unicode的方式可以直接复制代码将内容粘贴到style当中，属于远程读取,在style中新添加类样式，设置字体
在下面设置i元素的类样式，并放入相应图标的&…(文字编码)，i元素默认斜体。

小图片：字体图标，雪碧图

三.块级格式化上下文

全称Block Formatting Context，简称BFC
它是一块 独立的渲染区域 ，它规定了在该区域中，常规流块盒的布局

常规流块盒在水平方向上，必须撑满包含块（各项加起来等于宽度）
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，无视浮动元素和定位元素

BFC渲染区域：

这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
1)根元素:意味着，元素创建的BFC区域，覆盖了网页中所有的元素
2)浮动和绝对定位元素
3)overflow不等于visible的块盒
4)行块盒
5表格

独立

在这里插入图片描述

不同的BFC区域，它们进行渲染时互不干扰
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

具体规则：

1.创建BFC的元素，它的自动高度需要计算浮动元素
为需要去除浮动的元素设置position，float,但是这样会影响到布局方式，所以往往使用改变overflow属性为hidden，其实如果仅仅为了清除浮动clearfix也挺好
2.创建BFC的元素，它的边框盒不会与浮动元素重叠
bfc元素会主动避开浮动元素，因为他需要单独出来设置样式，如果想要改变bfc与浮动元素之间的距离，则改变浮动元素的margin，而不可以改变bfc的margin
3.创建BFC的元素，不会和它的子元素进行外边距合并
处在不同bfc的元素，外边距不会合并，只有同一个bfc元素中的外边距会发生合并

四.布局

排列页面中的区域

1.多栏布局

两栏布局

三栏布局
侧边栏一般都会定宽,侧边栏左浮动或者右浮动，如果主区域不定宽，为主区域添加overflow：hidden（会生成bfc元素主动避开浮动元素）

2.等高

CSS3的弹性盒
JS控制
伪等高
给侧边栏设置一个超级大的高度，然后设置margin-bottom为负的超级多，最后设置父元素overflow为hidden，这样之后aside和main等高

3.元素书写顺序

先写浮动元素，再写常规流块盒，但是这对搜索引擎不太友好,如果要求主区域尽量靠前，可以使用-----
将主区域提前，去除aside的左右浮动，去除主元素的overflow，为main设置左右margin，先将空间留出来，然后使用绝对定位，将两个aside挂过去

4.后台页面的布局

五.行盒的垂直对齐

1.多个行盒垂直方向上的对齐

给没有对齐元素设置vertical-align(要设置在行盒身上)
middle为居中，如果不满意的话可以设置为数值，进行调整

预设值

数值

2.图片的底部白边

图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。

设置父元素的字体大小为0,但是这样的话内部字体都不见了
将图片设置为块盒

六.浏览器兼容性

1.问题产生原因

市场竞争
标准版本的变化

2.厂商前缀

比如：box-sizing，谷歌旧版本浏览器中使用-webkit-box-sizing:border-box

市场竞争，标准没有发布
标准仍在讨论中（草案），浏览器厂商希望先支持

IE： -ms-
Chrome，safari: -webkit-
opera： -o-
firefox: -moz-

浏览器在处理样式或元素时，使用如下的方式：
当遇到无法识别的代码时，直接略过。

谷歌浏览器的滚动条样式

div::-webkit-scrollbar(谷歌浏览器特有，该伪元素表示滚动条的整体样式)
div::-webkit-scrollbar-thumb（表示滚动条中的滑块）
div::-webkit-scrollbar-track（表示滚动条中的轨道）
div::-webkit-scrollbar-button(两端按钮)

实际上，在开发中使用自定义的滚动条，往往是使用div+css+JS实现的

多个背景图中选一个作为背景

 background-image:-webkit-image-set(url(img/small.jpg)1x,url(img/big.jpg)) 2x;

如果像素小于1px使用small，小于2px使用big，自动判断分辨率

3.css hack

根据不同的浏览器（主要针对IE），设置不同的样式和元素

样式

IE中，CSS的特殊符号

*属性，兼容IE5、IE6、IE7
_属性，兼容IE5~IE6
属性值\9，兼容IE5~IE11
属性值\0，兼容IE8~IE11
属性值\9\0，兼容IE9~IE10

IE5、6、7的外边距bug，浮动元素的左外边距翻倍

条件判断
IE可以识别注释中的一些特殊字符

  <!--[if IE]> <p>
        这是IE浏览器
    </p> 
<![endif]-->

IE和其他非IE都可以运行对应代码的写法

    <!--[if IE]> <p>
        这是IE浏览器
    </p> 
<![endif]-->
    
    <!-- [if!(IE)]><-->
        <p>
        这是非IE浏览器
    </p>
 <!--<![endif]-->

4.渐近增强和优雅降级

两种解决兼容性问题的思路，会影响代码的书写风格

渐近增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式

书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的代码。

优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理

书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式。

5.caniuse

查找css兼容性

caniuse.com

七.样式补充

1.display:list-item（ul就是这样）

设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子

元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列（先排次盒子，再排主盒子），次盒子在主盒子前生成一个东西，次盒子的样式无法改变

涉及的css：

list-style-type

设置次盒子中内容的类型

list-style-position

设置次盒子相对于主盒子的位置

速写属性list-style

清空次盒子

list-style:none

2.图片失效时的宽高问题

如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高

3.行盒中包含行块盒或可替换元素

行盒的高度与它内部的行块盒或可替换元素(图片，input文本框，按钮，音频…)的高度无关,只与字体大小有关，这时候设置边框，只会有行盒的边框，此时，可以将图片设置边框，也可以设置行块盒。如果是块盒，块盒会被图片等撑开

4.text-align:justify

text-align:

left: 左对齐
right：右对齐
center：居中
justify：除最后一行外，分散对齐

如果想让最后一行也分散对齐，则给元素添加after

  p::after{
            content: "";
            display: inline-block;
            width: 100%;
        }

此时after变成最后一行只是看不见

5.制作一个三角形

只做一个盒子，将他的宽高设置为0，设置border-width和border-style，设置颜色时三个边为透明（transparent），也可以使用层叠，先都为透明，在单独设置一个边框。

<!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: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            border-color: red blue green chocolate;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>