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

标题: 康利-20221017-css4 [打印本页]

作者: 智商不在服务区 时间: 2022-10-17 23:43
标题: 康利-20221017-css4
一、学习内容：
1.传统网页布局的三种方式
标准流、css浮动、定位
标准流：标签按照规定好的默认顺序方式排列
块级元素会独占一行，从上到下顺序排列
行内元素会按照顺序，从左到右进行排列，如果碰到父元素的边缘会自动换行
css浮动：有很多情况是标准流不好完成或者无法完成的布局，此时使用浮动会更加方便，浮动可以改变元素标签默认的排列方式
浮动的典型应用：可以让多个块级元素一行内排列显示
网页布局的准则:多个块级纵向排列找标准流，多个块级元素横向排列找浮动
浮动的语法：float属性可以创建浮动
浮动的特性：浮动的元素会一行内显示并且元素顶部对齐；
浮动的元素会脱离标准流（脱标）；
浮动元素会具有行内块元素的特性；
浮动的元素不会压住自己下面的盒子的文字内容，因为浮动的特性就是为了做到文字环绕的效果；
浮动的元素之间默认是没有空隙的。
注意：浮动和标准流父盒子的搭配---先用标准流的父元素排列上下位置，之后内部的子元素采用浮动排列左右位置；
一个元素浮动了，其它兄弟元素理论上也要跟着浮动---浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
清除浮动：额外标签法（隔墙法）、给父元素添加overflow属性、给父级添加after伪元素、父级添加双伪元素
定位：当我们滚动屏幕时，定位可以将盒子固定到屏幕的某个位置；某个元素可以自由的在盒子内移动位置，标签会压住盒子
定位的使用：定位=定位模式+边偏移
定位模式用于指定一个元素在盒子内的定位方式，边偏移决定了元素的最终位置
模式有静态定位、相对定位、绝对定位、固定定位等
2.字体图标

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