领先的免费Web技术教程,涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

秒懂css布局(css布局模型)

nixiaole 2025-04-07 17:19:45 知识剖析 6 ℃

提示:点击上方"蓝色字体"↑ 可以订阅噢!

摘要 51RGB官方微信

小技巧知识整合,小白们的福利

设置元素的现实方式

display:block

默认宽度为父级元素宽度

可设置宽高

换行显示

display:inline

默认宽度为内容宽度

不可设置宽高

同行显示

display:inline-block

默认宽度为内容宽度

可以设置高宽

同行显示

整块换行,inline行间换行

默认标签有 表单标签

display:none

设置元素不显示

与visibility:hidden的区别

visibility:hidden仅仅隐藏元素不可见,但是后面元素不能占据他的位置。

块级元素水平居中

1

.content{margin:auto; with:990px;}

居中导航

  • 导航

float:right

默认宽带为内容宽度

脱离文档流

向指定方向一直移动

float元素在同一文档流

float元素半脱离文档流(对元素,脱离文档流,对内容在文档流)

清除浮动

clearfix

.clearfix:after{content:".";display:block;clear:both;height:0; overflow:hidden;visibility:hidden;}

.clearfix{zoom:1;}

想认识志同道合的朋友一起学习web

加入我们的学习QQ群 19066743

丰富的学习资源,周一到周四免费直播公开课

长按图片,识别二维码即可入群

你可能感兴趣的精彩内容

微信:UI设计自学平台加关注

长按关注:《UI设计自学平台》

Tags:

最近发表
标签列表