资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端（六）之盒模型显隐、定位与流式布局思想

前端（六）之盒模型显隐、定位与流式布局思想

cikenerd / 1716人阅读

摘要：前端之盒模型显隐定位与流式布局思想前端之盒模型显隐定位与流式布局思想盒模型的显隐盒模型的显隐盒子的显隐通过控制盒子的显示方式来隐藏盒子该隐藏方式在页面中不占位通过控制盒子的透明度来隐藏盒子该隐藏方式在页面中占位注一般显隐操作的盒子都是采用

前端之盒模型显隐、定位与流式布局思想

盒模型的显隐




    
    盒子的显隐

定位

相对定位




    
    相对定位布局
    

    



    
1

绝对定位




    
    绝对定位布局

固定定位




    
    固定定位

z-index 属性




    
    z-index
    


    

        
1

        
2

        
3

        
4

        
5

    
`

流式布局思想




    
    流式布局思想

hover 父子悬浮

总结

一.浮动布局的总结

1.同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局
2.浮动布局的盒子宽度在没有设定时会自适应内容宽度

二.盒子的显隐

display: none;
在页面中不占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 不需要用动画处理时

opacity: 0;
在页面中占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 需要采用动画处理时

三.定位布局

什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式
  • 相对定位
参考系: 自身原有位置
position: relative;  => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.left = -right | top = -bottom
3.布局后不影响自身原有位置
4.不脱离文档流
  • 绝对定位
参考系: 最近的定位父级
position: absolute;  => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.父级必须自己设置宽高
3.完全离文档流
  • 固定定位
参考系: 页面窗口
position: fixed;  => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.相对于页面窗口是静止的
3.完全脱离文档流
  • z-index
修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高

四.流式布局思想

1. 百分比
2. vw | vh => max-width(height) | min-width(height)
3. em | rem
云服务器 GPU云服务器 java 流式布局 布局定位 绝对定位布局 对象模型与数据模型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1454.html

相关文章

  • css之盒模型

    摘要：内容不会被修剪，会呈现在元素框之外。内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。规定应该从父元素继承属性的值。盒模型 1.定义 1.任意一个元素都可以当作盒模型 2.盒子的大小由内容宽高(width/height)+边距(padding)+边框(border) 3.盒子由外边距(margin),影响盒子的位置 广义盒模型:文档中所有功能性及内容性标签,及文档中所有显示性标签. 狭...

    SKYZACK 评论0 收藏0

  • 前端知识归纳

    摘要：继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中，在垂直方向上的会发生重叠。 技能考察： 一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时 让浏览器的爬虫和...

    sixleaves 评论0 收藏0

  • 前端知识归纳

    摘要：继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中，在垂直方向上的会发生重叠。 技能考察： 一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时 让浏览器的爬虫和...

    NotFound 评论0 收藏0

  • 前端知识归纳

    摘要：继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中，在垂直方向上的会发生重叠。 技能考察： 一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时 让浏览器的爬虫和...

    魏宪会 评论0 收藏0

发表评论

登陆后可评论

0条评论

cikenerd

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<