说明电子商务网站的建设流程,家居网站建设公司排名,长沙岳麓区网站开发,什么叫做线上销售标准流#xff1a; 标准流就是元素在页面中的默认排列方式#xff0c;也就是元素在页面中的默认位置。 1.1 块元素----独占一行----从上到下排列 1.2 行内元素----不独占一行----从左到右排列#xff0c;遇到边界换行 1.3 行内块元素----不独占一行…标准流 标准流就是元素在页面中的默认排列方式也就是元素在页面中的默认位置。 1.1 块元素----独占一行----从上到下排列 1.2 行内元素----不独占一行----从左到右排列遇到边界换行 1.3 行内块元素----不独占一行----从左到右排列遇到边界换行 2.浮动:float 1.属性 left---向左浮动 right---向右浮动 2.浮动的特点 2.1 脱标---脱离标准流,释放当前盒子的默认位置---影响父盒子的高度 2.2 浮动的方向---水平方向左右没有中间 2.3 本质将元素转换为行内块元素---横向排列并且可以设置宽高 标签代码: div classleft左/div div classright右/div 样式代码: style div { height: 200px; width: 300px; } .left { background-color: aqua; /* 浮动到左 */ float: left; } .right { background-color: burlywood; /* 浮动到左 */ float: left; /* 浮动到右 */ /* float: right; */ } /style 效果:
小案例: 标签代码: ul lia href首页/a/li lia href菜鸟工具/a/li lia href菜鸟笔记/a/li lia href参考手册/a/li lia href用户笔记/a/li lia href测验/考试/a/li lia href本地书签/a/li /ul 样式代码: style ul { height: 50px; line-height: 50px; list-style: none; background-color: rgb(84, 145, 84); } ul li { float: left; padding: 0 15px; } ul li a { text-decoration: none; color: rgb(255, 255, 255); } /style 效果:
3.浮动清除: 方法一(额外标签法):在父元素内容的最后添加一个块级元素设置 CSS 属性 clear: both 方法二(双伪元素法[推荐]): /* before 解决外边距塌陷问题 */ /* 双伪元素法 */ .clearfix::before, .clearfix::after { /* 插入的内容 */ content: ; display: table; } /* after 清除浮动 */ .clearfix::after { clear: both; } 方法三(单伪元素法): 方法四(overflow [推荐]):父元素添加 CSS 属性 overflow: hidden 方法五:给父盒子设置高度[不推荐] 1.浮动后的影响 1.1.父盒子的高度塌陷背景颜色不会被子盒子撑开 1.2.父盒子下边的其他元素会上移 2.浮动的清除 方法一额外标签法---在浮动的盒子后面添加一个空的标签设置clear:both---不推荐使用 方法二给父盒子添加固定高度---不推荐使用---动态数据列表不适用 方法三单伪元素法---给父盒子添加:after伪元素设置clear:both---推荐使用 方法四双伪元素法---给父盒子添加:before和:after伪元素设置clear:both---推荐使用---即 可以清除浮动干扰同时又能解决父盒子高度塌陷的问题
