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

标题: 王文博--20221017--CSS [打印本页]

作者: 博5237 时间: 2022-10-17 23:32
标题: 王文博--20221017--CSS
一、今日学习内容
传统网页的布局三种方式
1、标准流：就是标签按照规定好的默认顺序方式排列
1、块级元素：块级元素会独占一行，从上而下顺序排序
2、行内元素：行内元素会按照顺序，从左到右进行排序，碰到父元素的边缘会自动换行
2、浮动：
为什么需要浮动：
有很多情况是标准了无法完成或者不好完成的布局，此时使用浮动会更加方便，浮动可以改变元素标签默认的排列顺序
浮动的典型应用：
可以让镀铬块级元素一行排列显示
网页布局的准则：
多个块级纵向排列找标准流，多个块级元素横向排列找浮动
浮动的语法：
float属性可以创建浮动
属性值：left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）
浮动的特性：
1、浮动的元素会脱离标准流（脱标）
2、浮动元素会一行显示并且元素顶部对齐
3、浮动会具有行内块元素的特性
4、浮动的元素不会压住自己下面盒子的文本内容，因为浮动的特性就是为了做到文字环绕的
浮动布局的注意点：
1、浮动和标准流父盒子的搭配
先用标准流的父元素排列上下位置，之后内部的子元素采用浮动排列左右位置
2、一个元素浮动了，其他的兄弟元素理论上也要跟着浮动
浮动的盒子只会影响后面的标准流，不会影响前面的标准流
清除浮动：
为什么要清除浮动
如果父盒子没有添加清除浮动，那么子盒子浮动不占位置，父盒子不指定高度的话，后面的标准流会紧挨着父盒子进行排列，所以要清除浮动
额外标签法（隔墙法）
w3c推荐的做法，但是我们实际工作中基本不用（结尾给块级元素清楚浮动；clear：both；）
给父级标签添加overflow属性
给父级添加after伪元素
父级添加双伪类元素
3、定位：
为什么要用定位？
当我们滚动屏幕的时候，定位可以将盒子固定到某个位置
某个元素可以自由在合资内移动位置，并且会压住盒子
定位的使用
定位=定位模式+边偏移
定位模式用于指定一个元素在盒子内的定位方式，边偏移决定了元素的最终位置
定位模式：
值语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
position：static（静态定位）
position的默认定位方式，食物定位的意思，没有边偏移，基本不用等于标准流
position：relative（相对定位）
特点：1、是相对于自己原本的位置进行移动的（参照点是自己原来的位置）
2、原来位置的标准流位置继续占有，后面的盒子依然以标准流的方式来对待他
3、相对位置没有脱标
position：absolute（绝对定位）
特点：1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为标准进行定位
2、如果祖先元素有定位（相对绝对固定位置）自已最近一级有定位的祖先元素为参考点进行偏移
3、绝对定位不占有原先的位置（脱标）
4、相对定位最大的最用就是给绝对定位当爹的（子绝父相）

二、今日问题

三、解决方案

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