其他分享
首页 > 其他分享> > 4. CSS进阶

4. CSS进阶

作者：互联网

@规则

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

@import "./reset.css";
  1. import
    @import “路径”
    表示导入另外一个css文件

在network中可以看见加载的css文件

  1. charset

@charset “utf-8”;
这个指令必须要写到第一行;
告诉浏览器该css文件，使用的字符编码集是utf-8

web字体与图标

web字体

解决用户电脑上没有安装相应字体的问题

font-family:‘翩翩体-简’, ‘微软雅黑’, sans-serif;

当用户电脑上没有安装相应字体，强制让用户下载该字体，放到服务器上的

ttf后缀名文件–字体文件

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

@font-face{
font-family:‘good night’;
src:url(‘字体文件存放的位置’);

}

后面设置font-family的时候，就下载该字体----临时下载，第二次访问重新下载

ctrl + r强制刷新

因为中文字体文件一般较大，所以应用不多
考虑用户体验

字体图标库：iconfont.cn

添加图标到项目之后. 复制在线链接—在线链接省略了协议名

<link href="//at.alicdn.com/t/font_2314517_gurjwm4ohnq.css">
字体图标是字体，到那时展示的样子像图片，它可以设置文字的所有特点

i元素表示图标，给它的类名加上字体图标文件里的class

bfc 块级格式化上下文

block fomatting context

它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局;

上面的是由视觉格式化模型规定的，准确的说是视觉格式化模型包括了块级格式化上下文，块级格式化上下文又包含了这些规则;

独立：不同的BFC区域，他们进行渲染时互不干扰；
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
具体规则：

  1. 创建BFC的元素，它的高度计算需要考虑浮动元素;—可以用来解决高度坍塌(一般用overflow：hidden,副作用最小)
  2. 创建BFC的元素，它的边框盒不会与浮动元素重叠
  3. 创建BFC的元素，不会和它的子元素进行外边距合并（不同的BFC外边距时不可能合并的，只有在同一个BFC中的元素才会合并）

绝对定位的元素是不可能计算高度的，因为定位元素直接脱离文档流，无法计算；
而浮动元素虽然不会计算高度，但是清除了浮动或者创建BFC之后，就可以计算高度了；

BFC渲染区域：
这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：

布局

布局：排列页面中的区域

多栏布局

两栏布局和三栏布局

假设左边侧边栏，右边主区域
两栏布局：
左边左浮动，右边右浮动；左边定宽，如果内容太多，右边也需要定宽(是否定宽和设计师商量)，定宽的话可视区宽度减少的话可能会出问题；

右边区域设置BFC(overflow：hidden),这样右边会避开浮动盒子显示；如果需要两块有空隙，需要设置浮动元素的margin-right，而不是设置主区域的margin-left;

三栏布局

左右两边都是侧边栏，中间是主区域

左边左浮动，右边右浮动，并且左右两边定宽，中间是主区域;中间创建BFC，因为块盒无视浮动元素;而容器元素一般都是块盒

等高

通常侧边栏高度不够，需要设置两者等高；

  1. css的弹性盒
  2. js控制
  3. 伪等高

元素书写顺序

.main{
margin: 0 300px;
}
再设置绝对定位解决;这种方法无法计算侧边栏，因为侧边栏永远脱离了常规流布局，无法计算高度;

后台页面的布局

浮动的细节

行高的取值

line-height
该属性值可以被继承;先计算像素值，再继承

  1. px, 像素值

  2. 无单位的数字
    先继承数字，然后根据当前元素的字体大小计算像素值;

  3. em单位

1em表示当前元素的字体大小

  1. 百分比

和em 一样

body的背景

画布 canvas
这里的画布不是这个元素，而是指一块区域

特点：

  1. 最小宽度为视口宽度
  2. 最小高度为视口高度

HTML元素的背景
覆盖画布

BODY元素的背景

如果HTMl元素有背景，BODY元素正常（背景覆盖边框盒）
如果HTML元素没有背景，BODY元素背景覆盖画布

关于画布背景图
背景图片规则：和前面的背景规则相同

  1. 背景图的宽度百分比，相对于视口
  2. 背景图的高度百分比，相对HTML元素高度(网页高度)
  3. 背景图的横向位置的百分比、预设值(right,left…)，相对于视口
  4. 背景图的纵向位置的百分比、预设值，相对于HTML元素高度(网页高度)

行盒的垂直对齐

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

给没有对齐元素设置vertical-algin

预设值：middle, top, bottom, text-top, text-bottom super(上基线对齐), sub(下基线对齐)

数值

百分比

图片的底部白边

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

解决方法：

  1. 设置父元素的字体大小为0;如果有文字则不能用这种方法;
  2. 将图片设置为块盒

参考线-深入理解字体

font-size、line-height、vertical-align|font-family

文字

文字通过一些文字制作软件做出来,如fontforge

制作文字时，会有几根参考线,不同的文字类型，参考线不同，但是同一个文字，参考线相同

参考线：一共5根

顶线：text top , ascent
上基线：super
基线：baseline—大概是字母M的最底下
下基线：sub
底线：text bottom, descent

font-size

字体大小，设置的是文字的相对大小

文字的相对大小:在印刷学中 1000、2048、1024

文字顶线到底线的距离，是文字的实际大小(content-area,内容区);
但是设置的时候是设置的是相对大小；

consolas字体的相对大小为2048,但是文字的实际大小—顶线+底线=2398, 2398 / 2048,所以设置字体大小为200px,实际的字体大小为200 * (2398 / 2048);

行盒的背景，覆盖content-area

行高

顶线向上延申的空间(text top – top)，和底线向下延申的空间(text bottom – bottom)，两个空间相同，该空间叫做line gap(空隙)

gap默认情况下，是字体设计者决定的

top到bottom,叫做virtual-area(虚拟区)

行高就是virtual-area

line-height:normal,默认值-使用文字默认的gap

文字一定出现在一行的最中间？ 错，取决于设计者;
content-area一定出现在virtual-area的最中间；对，即使gap是负值中线也重叠

vertical-align

参考线的决定因素：font-size(确定相对距离), font-family(确定实际距离), line-height(确定virtual-area) 三者确定，参考线一定确定

一个元素如果子元素出现行盒，该元素内部也会产生参考线

只有行盒才有参考线，所以如果文字不在行盒中的话，会生成一个匿名行盒包裹

<p>
<span>M</span>
</p>

默认情况下，两个元素的参考线以基线对齐
vertica-align:baseline

super:该元素的的基线与父元素的上基线对齐

sub:该元素的基线与父元素的下基线对齐

text-top:该元素的virtual-area的顶边对齐父元素的text-top

text-bottom:该元素的virtual-area的底边，对齐父元素的text-bottom

top:该元素的virtual-area的顶边对齐父元素的定边(该行中的最高顶边)

bottom:该元素的virtual-area的底边，对齐父元素的底边(父元素的最低底边)

middle:该元素的中线(content-area的一半)，与父元素的X字母的一半对齐

行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行盒最低底边

实际，一个元素的实际占用高度(高度自动)，高度的计算通过line-box

行盒：inline-box
行框：line-box

数值：相对于基线的偏移量，向下为正数，向上为负数

百分比：相对于基线的偏移量，百分比是相对于自身的Virtual-area的高度

line-box是承载文字内容的必要条件,以下情况不生成Line-box

  1. 某元素内部没有任何行盒
  2. 某元素字体大小为0

可替换元素和行块盒的基线

白边的原因

图片：基线位于图片的下外边距。

表单元素：基线位置在内容底边

行块盒：

  1. 行块盒最后一行有line-box，用最后一行的基线作为整个行块盒的基线

  2. 如果行块盒内部没有行盒，则使用下外边距作为基线

堆叠上下文

stack context (堆叠上下文)，他是一块区域，这块区域由某个元素创建,它规定了该区域中的内容在z轴上排列的先后顺序。

创建堆叠上下文的元素

  1. html元素(根元素)
  2. 设置了z-index数值的定位元素(非auto)

同一个堆叠上下文中元素在z轴上的排列

从后到前的排列顺序

处于同一级别的话比较的时候按照书写的先后顺序

  1. 创建堆叠上下文的元素的背景和边框
  2. 堆叠级别(z-index，stack level)为负值的堆叠上下文
  3. 常规流非定位的块盒
  4. 非定位的浮动盒子
  5. 常规流非定位行盒
  6. 任何z-index 是auto的定位子元素，以及z-index是0的堆叠上下文
  7. 堆叠上下文为正值的堆叠上下文

每个堆叠上下问，独立于其他堆叠上下文，他们之间不能相互穿插

svg

scalable vector graphics，可缩放的矢量图

  1. 该图片使用代码书写而成
  2. 缩放不会失真
  3. 内容轻量

使用方法

  1. svg可以嵌入浏览器，也可以单独成为一个文件

  2. 可以在img的src属性中书写路径

  3. 背景图url

  4. embed， object元素的src书写路径， MIME的type是images/svg+xml

  5. iframe元素的src，这种方法需要在svg文件中改尺寸

svg文件的书写
直接将尺寸按照属性在行间书写，一般不带像素，默认尺寸为300 * 150

详细看html5笔记中的svg书写

数据链接

data url

如何书写

数据链接：将目标文件的数据直接书写到路径位置

语法：data:MIME,数据

意义

优点：

  1. 减少了浏览器中的请求 减少了请求中浪费的时间
  2. 有利于动态生成数据

缺点：

  1. 增加了页面资源的体积 导致了传输内容增加，从而增加了单个资源的传输时间

  2. 不利于浏览器的缓存
    浏览器通常会缓存图片文件、css文件、js文件。

  3. 增加源文件的体积为原来大小的4/3；

应用场景：

  1. 当请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图(雪碧图可以减少请求次数),可以使用数据链接
  2. 图片由其他代码动态生成,并且图片较小，可以使用数据链接

base64

一种编码方式，通常用于将一些二进制数据(图片就是二进制数据)，用一个可书写的字符串表示

浏览器兼容性

问题产生原因

更详细见css3笔记

chrome 54 支持部分css3功能

厂商前缀

比如:box-sizing，chrome旧版本中使用-webkit-box-sizing:border-box;

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

浏览器在处理样式或元素时，使用如下的方式
当遇到无法识别的样式的时候，不会报错，直接略过

  1. chrome的滚动条样式

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

div::-webkit-scrollbar{
    width:10px;
}
/* 轨道 */
div::-webkit-scrollbar-track{
    background:#74c0c0;
    border-radius:8px;
}
/* 滑块 */
div::-webkit-scrollbar-thumb{
    background:#008c8c;
    border-radius:8px;
}
/* 上下两个小块 */
div::-webkit-scrollbar-button{
    background:red;
}

/* 如果需要页面中所有的滚动条都是这个样式的话,去掉div即可 */
  1. 多个背景图作为一个背景
div{
    background-image:image-set(url()1x , url() 2x);
    /* 前面加上-webkit- */
}

/* 1x表示一个显像单元上只有一个像素点-小图, 2x表示一个显像单元上只有一个像素点- 大图*/

css hack

根据不同的浏览器(主要针对IE),设置不同的样式和元素

  1. 样式

IE 中,css的特殊符号

IE5, 6 7外边距bug,浮动元素的做外边距翻倍

  1. 条件判断

低版本IE浏览器

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

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

[ ]中还可以写if lt IE8判断版本的语句

渐进增强 和 优雅降级

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

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

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

查找兼容性网站

caniuse
[doyoe]http://css.doyoe.com/

居中总结

居中：盒子在其包含块中居中

行盒或行块盒水平居中

直接设置行盒(行块盒) 父元素text-algin:center

常规流块盒水平居中

定宽，设置margin:0 auto

浮动元素需要使用css3解决或者慢慢调margin-left和margin-right(这种方法不好)

绝对定位元素的水平居中

定宽，设置左右的坐标为0,将左右margin设置为auto

实际上，固定定位(fixed)是绝对定位(absolute)的特殊形式

定宽，设置左坐标为50%,将左margin设置为负的宽的一半

单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

行块盒或块盒多行文本的垂直居中

没有完美方案

设置盒子上下内边距相同，达到类似的效果。-无法知道盒子的高度

绝对定位的垂直居中

定高，设置上下的坐标为0,将上下的margin设置为0 auto

定高，设置上坐标为50%,将上margin设置为负的高的一半

样式补充

display:list-item

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

元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列

次盒子就是前面的小黑点，该盒子无法调整，只能调整样式

li元素的display就是list-item

涉及的CSS

  1. list-style-type

设置次盒子中内容的类型,该属性可以继承,li的该属性就是继承自ul

  1. list-style-position

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

  1. 速写属性list-style
    type + position

清空次盒子

list-style:none

图片失效时的宽高问题

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

解决：设置为行块盒或者块盒

行盒中包括行块盒或可替换元素

行盒的高度与它内部的行块盒或可替换元素的高度无关
例如a元素中套一个img可替换元素，会发现二者高度无关，行盒的高度与字体大小有关

如果行盒内部是块盒的话，内部的块盒会将行盒撑开

text-algin:justify

text-algin: 只有块盒或者行块盒才有该属性

制作一个三角形

div{
    width:0px;
    height:0px;
    border:10px solid transparent;
    border-left-color:red;
}

direction 和 writing-mode

开始(start)->结束(end)
左(left)->右(right)

左右是绝对的;开始和结束是相对的，不同的国家可能有所不同

direction:;
ltr:left to right
rtl:right to left //默认值

margin-block-start:1em; //距离开始一个字体大小

writing-mode：设置文字书写方向

vertical-rl:vertical right to left
垂直方向上从左到右

设置了这个属性之后的块盒宽度自适应，如果要使其占满一行的话设置宽度为100%

utf-8字符

实体字符：香
x表示后面的数是16 进制

在’'中写的话需要写\，然后直接写数字

标签：浮动,盒子,进阶,元素,行盒,设置,对齐,CSS
来源： https://blog.csdn.net/weixin_44756776/article/details/112424339