HTML + CSS 宝典 第七节 css进阶 1

                                      HTML + CSS 宝典 第七节 css进阶 1

1.  @规则

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

● import      表明导入 另外一个 css 文件

@import  '路径.css';

● chartset     表明该css 文件的字符集格式   次指令集设定 必须卸载 文件第一行

@charset "utf-8";

 

2.  web 字体和图标

● web 字体        （解决浏览器 上面没有安装相应的字体，强制让用户下载 服务器上的字体 （用户无感） ）

Lorem ipsum dolor sit amet. 长夜慢慢

由于 字体文件往往  会比较法 让用户去下载的话  比较耗时； 所以不是最优选择

 

● 字体图标    可以在下面的 连接上面  创建项目

https://www.iconfont.cn

该效率 会比 加载 字体文件 高很多

Lorem ipsum dolor sit amet. 长夜慢慢

 

3.  块级格式化 上下文

全称： Block  Formatting Context,  简写 BFC

他是一块 独立的 渲染区域，  它规定了再该区域中  常规流块盒的布局； 不同的 BFC 区域，他们进行渲染时 互不干扰

BFC 渲染区域： 

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

• 根元素 html 元素，      意味着 元素创建的 BFC 区域，覆盖了网页中所有的元素

• 浮动 和 绝对定位  固定定位元素   

• overflow 不等于 visible 的块盒

    ●创建 BFC 的元素，隔绝 了它内部 和 外部的联系， 内部的渲染不会影响的到外部

     具体规则

•  创建 BFC 的元素， 他的自动高度需要计算浮动元素                                                                                            一方面 发生高度坍塌的  可以利用 BFC； 恢复高度 但是不建议这么做

   

•  创建 BFC 的元素， 他的边框和不会与浮动元素重叠

   

•  创建 BFC 的元素， 它会和它的 子元素  不进行外边框合并 （原本状态是 合并的）

   

        

 

4.  布局

● 两栏布局

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo magni dolores quia quos voluptas, laborum a labore, suscipit minima vel ex nihil quidem ratione fugit consequuntur in nobis adipisci perspiciatis voluptate eveniet dignissimos! Nesciunt

 

● 三栏布局

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto eos corporis nostrum iste laboriosam soluta magnam illo odio facilis magni numquam, veniam ex placeat ad suscipit? Dolorem, consequuntur aliquid! Beatae aliquam aliquid debitis nostrumLorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, praesentium neque culpa debitis voluptates cum reprehenderit quas. Odio laudantium facilis nam iusto ut in voluptatem officiis modi ab dolor rem placeat quae, autem natus odit? Voluptatum,Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus rem magni labore inventore. Eveniet earum magnam eum consectetur omnis possimus fugit tenetur aspernatur qui asperiores eos fugiat ex aperiam magni, autem aut quidem numquam? Ratione

 

● 伪等高 布局 

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo magni dolores quia quos voluptas, laborum a labore, suscipit minima vel ex nihil quidem ratione fugit consequuntur in nobis adipisci perspiciatis voluptate eveniet dignissimos! Nesciuntillum atque in fuga et tenetur, numquam nemo voluptatum modi unde minima, maiores aliquid. Perferendis quod saepe deserunt repudiandae eius, obcaecati, porro a ea rem nulla ad nam, voluptatum dolore. Id, omnis repellendus nostrum aspernaturdicta delectus voluptatem, quis cum itaque, consequatur fugit eveniet? Voluptatum, ut. Eaque soluta optio veniam rerum laudantium velit eligendi quisquam, iure aut sapiente labore quasi incidunt vero temporibus libero fugit asperiores blanditiisnihil consectetur doloribus aliquam doloremque reprehenderit officia? Vero quisquam autem quam provident magnam est excepturi ex voluptatum sequi, nobis dicta consequatur repellendus, vitae rem odit eos? Voluptas omnis alias ad veniam ducimusdeserunt ab atque debitis minima, voluptatem suscipit, temporibus earum perspiciatis sed! Ab asperiores ea minima quam, quisquam nisi temporibus beatae quas officia quo? Facere, cum! Nesciunt accusantium molestiae fugiat ab aspernatur veroperspiciatis debitis deleniti, labore enim maxime voluptas natus odio nulla, voluptate vitae ipsum! Repellat corporis blanditiis laudantium saepe autem incidunt optio animi deserunt nostrum modi sit, velit ab perferendis repudiandae temporasunt libero recusandae consequuntur numquam, aliquam nisi nulla iusto! Vero placeat iusto voluptates corrupti natus recusandae quisquam perspiciatis commodi esse voluptatem tempora optio cupiditate assumenda aspernatur aliquam dolor sapienteperferendis, consectetur deleniti autem facere vitae saepe soluta illo. Ex dolor magnam consequatur praesentium vitae illo rem laudantium neque architecto officia dignissimos tenetur deserunt cum iure voluptatibus qui, ab hic accusamus inventorenecessitatibus commodi. Dicta dolorum sapiente expedita ex veniam veritatis ad repellendus? Ea id nemo, voluptatibus consequatur alias iste libero! Debitis tempore, delectus iste nulla veritatis dolorum qui animi itaque, libero labore porroreprehenderit. Voluptate, dolores quidem sapiente, iste quae incidunt minus aut deserunt rerum perferendis eligendi inventore nam velit omnis, maiores minima beatae suscipit ducimus quo earum atque! Animi autem, modi commodi officia sed sunteum assumenda distinctio praesentium laborum ad, dignissimos et magnam, voluptatem cupiditate voluptates. Modi debitis nisi voluptate adipisci itaque voluptates nostrum quae quas dignissimos libero velit ut voluptas eius iusto magni sapientetenetur, voluptatibus atque est dolore nihil rerum illum quisquam animi! Magni odio amet delectus commodi sed aut eveniet facere ab, asperiores perspiciatis consequatur saepe? Nesciunt quibusdam qui atque consequatur iure facilis esse ducimusrepudiandae mollitia ipsa itaque, pariatur impedit exercitationem modi est incidunt perspiciatis accusamus dolore aliquam porro illo? Necessitatibus adipisci quidem magnam itaque cum. Laboriosam non neque voluptas commodi in incidunt hic modiperspiciatis dolore inventore quia nesciunt sed consectetur, ducimus ratione accusamus blanditiis nam, soluta qui exercitationem praesentium ipsam quod. Magni sapiente iste nisi quidem error deserunt vero tempore voluptatem, explicabo saepeadipisci sunt? Cumque ullam laboriosam earum similique veritatis libero blanditiis debitis dolorem saepe ipsum? Maxime reiciendis, porro laboriosam aspernatur voluptatibus veritatis, voluptatem necessitatibus nesciunt quia accusantium, earumodio corrupti nostrum ipsa? Earum deserunt corrupti velit repellat sapiente harum. Cupiditate aspernatur unde quidem facere recusandae quis, ipsa eos illo ratione at alias vel animi possimus quo accusamus similique ad fugiat a? Debitis asperioresnobis error, saepe eum quae illo repudiandae consequatur accusantium dicta impedit nam repellendus architecto ut possimus aut, ipsa accusamus, sed fugit animi deleniti illum reprehenderit eveniet blanditiis. Exercitationem non mollitia odititaque iste enim aperiam voluptatem, ducimus, dicta quaerat dolores vitae doloribus molestiae quasi magnam culpa pariatur accusantium. Tempore, mollitia assumenda! Officiis, cupiditate soluta reprehenderit corporis atque sed optio nobis evenieteligendi unde explicabo consectetur qui culpa nam pariatur modi quam fugit libero itaque quae, esse amet ipsam doloremque aperiam! Dolores consequuntur labore quia eaque, fugit quaerat voluptates quos! Dolorem incidunt dignissimos delenitisunt quod perferendis, quos vel quidem dolore suscipit dolorum ullam neque labore recusandae optio officia facilis ipsum officiis repudiandae omnis temporibus nesciunt harum doloremque! Dolor, facere qui. Unde eos impedit fugiat atque velitnobis eveniet nostrum expedita odio, eius nisi quis corporis deleniti autem laborum laboriosam dignissimos magnam praesentium voluptates odit soluta cupiditate. Eveniet temporibus, vitae suscipit magni deserunt quod. Odit, cupiditate quaeofficiis doloremque in perferendis rem quia explicabo sed dolore facere fugiat totam fuga? Iusto cupiditate magni accusamus harum numquam incidunt illum ipsa dolores unde iste deleniti eos fuga excepturi fugit itaque optio, placeat nemo ducimusmaxime nobis totam? Ipsa provident fuga, nihil deleniti quam sapiente cupiditate et inventore. Eaque autem corrupti illum vel vero quod dolore temporibus suscipit culpa minima placeat rerum voluptatem possimus deleniti consectetur aut quae,maxime a? Incidunt eaque maxime unde sunt at, alias fugit ullam ipsum nobis voluptatibus dicta necessitatibus mollitia laboriosam provident, amet ipsam! Enim culpa minima laudantium cum labore aliquam illum atque a blanditiis laborum voluptateat possimus necessitatibus modi placeat expedita animi sapiente harum, corrupti temporibus eaque ab. Beatae nam dolore architecto ab culpa atque vel nemo? Saepe, earum? Veniam quo eligendi quam eveniet ad quidem error porro molestias culpanulla ea vel nihil, nostrum nesciunt architecto quod quaerat autem, est debitis, impedit illo ducimus aperiam a magnam. Accusantium molestias necessitatibus cum magnam veritatis aspernatur tempora assumenda nobis praesentium! Soluta fuga minusnesciunt. Nisi omnis in debitis, aliquid nam iusto, aut asperiores tempora porro pariatur aspernatur quisquam fugit error. Impedit possimus explicabo numquam nemo quibusdam? Totam natus consequatur nemo excepturi magni, sapiente corporis quosdicta neque expedita soluta ad, sit, quia nobis esse. Nihil hic totam praesentium corporis nostrum vitae labore debitis sequi. Sit eius a libero nihil velit facilis iusto, provident est dolor, veritatis sapiente quae voluptates. Blanditiisdoloremque ut in ipsum alias possimus velit quam, quisquam quae dicta voluptates voluptatum impedit minima ipsa illo eum sed commodi minus provident ducimus magnam. Officiis, accusantium? Quas saepe corrupti dignissimos quis ea dolorum nonobcaecati assumenda, repudiandae quos quaerat ex suscipit odio explicabo, possimus exercitationem ipsam, veniam vel sit voluptatem repellendus esse quidem! Ratione iure facilis incidunt qui repudiandae perspiciatis autem possimus veritatismagni aut earum similique ullam, laboriosam assumenda consequuntur eveniet cupiditate neque praesentium, ut maxime voluptatum. Omnis vel consectetur illum esse ducimus, alias, quia inventore quos quis incidunt delectus, animi laborum. Similiqueest quaerat laudantium consectetur quae.

 

5.  浮动元素的 细节

● 盒子的位置

*  左浮动 的盒子 向上向左排列

*  右浮动 的盒子 向上向右排列

*  浮动盒子的 顶边不得高于上一个盒子的顶边

*  若剩余空间无法放下浮动盒子，该盒子会下移动， 直到具备足够空间容纳盒子， 然后再向左向右移动

6.  行高的取值

     line-height

1. px,  像素值

2. 无单位 数字

3. em 单位

4. 百分比

•     如果设置行高的时候 添加了单位；那么  他的子元素的 行高 会先计算行高 在继承；

•     如果想设置 全局 的，最好不要写单位；  他会先继承， 然后再计算 子元素行高。这样一来， 子元素的行高会随着 字体产生变化

7.  body 的背景  颜色& 图片

●  画布   canvas    一块区域

特点：

1. 最小宽度  为 视口宽度

2. 最小高度  为 视口高度

 

●  Html  元素的背景   覆盖画布（子元素 覆盖父元素）

●  body  元素的背景   

1. 如果 html 元素有背景， body 元素正常      （  背景覆盖 边框盒 ）
2. 如果 html 元素没有背景  body 元素 覆盖画布

● 背景画布图片

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

 

8.  行盒的垂直对齐

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

 给没有对齐的元素 设置  vertical-align

● 图片底部白边

 图片的 父元是一个 块盒，块盒高度自动  图片底部和父元素之间往往 会出现白边，而且白边会随着字体大小变化

解决方法：

1. 设置字体大小为 0
2. 将图片设置为块盒

9.  （参考线） 深入理解字体

• font-size

• line-height

• vertical-align

• font-family

 

●    文字 字体,  是通过 字体软件   制作出来的   比如： fontforge

      文字的制作过程中  会涉及 几条 参考线，不同文字类型  参考线不是一样的，而同一种文字 参考线一致

    

 

●   字体大小   ， 设置的是文字的相对大小  以 consolas 字体为例

     文字相对大小： 1000   2048   1024

     字体的框：            2048

     文字实际占的大小  2398  (会比设置相对字体大)

 文字顶线到 底线的距离， 是文字的实际大小 （content-area, 内容区域） 文字的实际大小

 

我们设置的 字体大小为 200px , 但是 实际 显示 的大小 却是 234px；

并且  行盒的背景   覆盖 content-area;   以至于 背景色 包裹住 字体

 

 

●   行高

     顶线向上延伸的空间（top）， 和底线向下延伸的空间(bottom)， 两个空间是相等的，该空间叫做 gap（空隙）

     gap 空间  默认情况下 是 设计师者决定的 ，后面可以代码设置

 

 top 到  buttom , 叫做 virtual-area  (虚拟区域)； top和buttom 的 相对位置  不同的字体是不一样的 ，有的甚至可以    为 负数

通常设置的行高 ：  就是 设置  virtual-area 的 line-gap

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

 

        ● vertical-align

  影响参考线的几个因素： font-size,    font-family,   line-height

一个元素 如果 子元素出现行盒 (出现文字的地方 必有行盒)，该元素就会产生参考线

 

由此以来 就出出现 P 元素的 参考线  和 span 元素 参考线， 如何排列的问题

● 默认情况是 ： 基线对齐 的排列方式    也就是  baseline 参考线

 

        ● vertical-align : super;                 该元素的基线 与 父元素的  上基线对齐

        ● vertical-align : sub;                    该元素的基线 与 父元素的   下基线对齐

        ● vertical-align : text-top;             该元素的 virtual-area 的顶边，对齐父元素的 text-top

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

        ● vertical-align : top;                    该元素的 virtual-area 的顶边，对齐父元素的 顶边（该行中的 最高顶边）

        ● vertical-align : bottom;              该元素的 virtual-area 的底边，对齐父元素的 底边（该行中的 最底底边）

        ● vertical-align : 数值;                   相对于基线 base-line 的偏移量， 正数向上， 负数向下

        ● vertical-align : 百分比;                相对于基线 base-line 的偏移量， 百分比是相对于 自身 virtual-area 的高度

        ● vertical-align : middle;               该元素的中线（content-area 的一半），与父元素的 X 字母高度一半的位置 对齐

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

         实际上： 一个元素 的实际占用高度（自动高度），高度的计算通过 line-box 计算

         行盒： inline-box

         行框： line-box；   是承载文字内容的必要条件，以下情况不生成  行框；

             1， 某元素内部没有任何行盒     

             2， 某元素 字体 为 0

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

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

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

        *行块盒：

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

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

10.  堆叠上下文   z-index

堆叠上下文  （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. 堆叠级别为正值的堆叠上下文

 

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

 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！