菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 王涛-20221017-CSS4 [打印本页]

作者: 黑桃K 时间: 2022-10-17 23:30
标题: 王涛-20221017-CSS4
CSS浮动
* 传统网页的布局的三种方式

* 1.标准流

* 标准流就是标签按照规定好的默认顺序方式排列

* 1.块级元素会独占一行，从上到下顺序排列
* 2.行内元素会按照顺序，从左到右进行排列，碰到父元素的边沿会自动换行
* 2.浮动

* 有很多情况是标准流不好完成，或者无法完成的布局，此时使用浮动会更加方便，浮动可以改变元素标签默认的排列方式
* 1.浮动的典型应用

* 1.可以让多个块级元素一行内排列显示
* 2.网页布局的准则

* 多个块级元素纵向排列应用标准流，多个块级元素横向排列用浮动
* 3.浮动的语法

* float属性可以创建浮动
* 1.left元素向左浮动2.right元素向右浮动
* 3.none元素不浮动（默认值）
* 4.浮动的特性

* 1.浮动的元素会脱离标准流（脱标）
* 2.浮动元素会一行内显示并且顶部对齐
* 3.浮动元素具有行内元素特性
* 4.浮动的元素不会压住其他元素的内容显示，因为浮动的特性就是为了做到文字环绕
* 5.浮动的元素之间默认是没有空袭的
* 5.浮动布局注意点

* 1.浮动和标准流父盒子的搭配：先用标准流的父元素排列上下位置，之后内部的子元素采用浮动排列左右位置
* 2.一个元素浮动了，其他兄弟元素理论上也要跟着浮动
* 3.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
* 6.清除浮动

* 如果父盒子没有添加清除浮动，子盒子浮动不占位置，父盒子不指定高度，后面的标准流会紧挨着父盒子进行排列，所以要清除浮动
* 1.额外标签法（隔墙法）：W3C推荐做法，但是我们实际工作基本不用
* 2.给父级标签添加overflow属性：overflow:hidden
* 3.给父级添加after伪元素:
* 4.父级添加双伪元素:
* 3.定位

* 为什么需要使用定位

* 1.当我们滚动屏幕的时候，定位可以将盒子定位到屏幕的某个位置
* 2.某个元素可以自由的在盒子内移动位置，并且会压住盒子
* 定位的使用

* 1.定位=定位模式+边偏移定位模式用于指定一个元素在盒子内的定位方式，边偏移决定了元素的最终位置
* 定位模式：

* 1.position:static（静态定位）默认定位方式，没有边偏移，基本不用
* 2.position:relative（相对定位）

* 1.相对于自己原来的位置进行移动
* 2.原来位置的标准流位置继续占用，后面的盒子仍然以标准流的方式来对待它
* 3.相对位置没有脱标
* 3.position:absolute（绝对定位）

* 1.如果没有祖先元素，或者祖先元素没有定位，则以浏览器为标准定位
* 2.如果祖先元素有定位（相对，绝对，固定位置），则以最近一级的祖先元素为参考点移动位置
* 3.相对定位不再占有原来的位置（脱标）
* 4.相对定位最大的作用就是给绝对定位当爹的（子绝父像）
* 4.position:fixed（固定定位）

字体图标的使用
* iconfont-阿里巴巴矢量图标库

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)