山西农业大学20240927

一. 浮动

1. 文档流

页面中元素的排列的默认方式, 对块级元素, 行内元素, 行内块元素都会按照其特性进行排列

1.1 书写顺序

块级元素: 先写的元素排在上面, 顺序是从上向下排列
行内(行内块)元素: 先写的元素排在左边, 顺序是从左向右排列

1.2 换行

块级元素: 独占一行
行内(行内块)元素: 受内容影响, 填满一行(父元素), 自动向下折行

1.3 占位

当一个元素在页面中消失(display:none) , 后面紧挨着的兄弟会向前一个兄弟元素的位置占位

2. 浮动属性

2.1 目的

块级子元素在父元素中浮动可以让子元素横向排列, 浮动的终极目的就是让块级元素可以横向排列, 完成更复杂的页面布局效果

2.2 浮动的语法

float: left; 左浮动; 让子元素在父元素的左侧对齐(脱离文档流)
float:right; 右浮动; 让子元素在父元素的右侧对齐(脱离文档流)
浮动属性写给需要横向排列的元素

2.3 脱离文档流

脱离文档流的元素会导致原文档流规则失效
影响:

1. 遮盖兄弟: 因为元素浮动, 下一个兄弟如果还在文档流中, 会被浮动的元素遮盖; 浮动元素会到达页面文档流的上层
2. 文字环绕浮动元素: 文字和内联元素是在同层的, 在正常的文档流块级元素的上边;当元素浮动时, 就会和下层的文档流块元素中的文字和内联元素卡在相当的位置, 会把文字卡住,挡住兄弟元素
3. 父级元素高度坍塌: 父元素没有设置高度, 在文档流中会被其子元素的累加高度撑起, 获得撑开的高度, 但是不是自己设置高度; 此时一旦子元素发生浮动,脱离文档流, 就不会给父级撑高度了, 导致父元素高度坍塌; 以至于影响父元素的兄弟元素, 最后布局混乱

2.4 解决浮动的影响

1. 父元素设置高度: 前提父元素的高度已知, 并且所有的浮动子元素高度已知
2. 利用overflow属性: 给父元素使用overflow属性,取值 hidden, scroll,auto , 能够参照子元素的高度撑开自己的高度样式, 前提: 子元素的内容不可以超过父级范围, 否则会被溢出处理
3. 使用伪类和clear属性实现[背下来]
   .box::after{
   content: “”;
   display: block;
   clear: both; /* 清除浮动 */
   }

3.浮动的布局

3.1 先看设计图, 画图

不管元素内有多少内容, 只看大块, 只画大块
每个大块都是浏览器宽度100%就可以
设置大块的标签, 标签独立的名称, css去掉内外边距
*{margin:0;padding:0;}

3.2 居中定宽

设置居中定宽的类:.center , 要知道产品的宽度是多少
.center{width:1226px;margin:auto;}

3.3 写html结构

千万不要写一个结构, 写一个css, 要把所有的结构都写完, 再按照类名逐一渲染css, 就写大块, 细节的图文, 后面加

3.4 样式: 从外向内写

1. 先写外层元素的样式, 如: 宽度,背景颜色, 边框, 子元素如果浮动可以提前写好清楚浮动类
2. 写第二层元素, 如: 宽度,背景颜色, 边框, 子元素如果浮动可以提前写好清楚
3. 设置外边距, 把布局搭起来
4. 放置元素的内容, 如 图片和文字
5. 设置图文布局, 上下或者左右
6. 设置图片的大小
7. 设置图文的间距
8. 内部图文与外部块的关系与内外间距, 注意外间距会有重叠(处理外间距重叠),内边距会放大元素(怪异盒子模型)
9. 去掉大块的颜色等