[CSS布局基础]

CSS三种定位机制: 标准文档流、浮动定位和绝对定位

盒子模型的3D立体图

盒子模型是网页布局的基石

Paste_Image.png

从上到下依次是:border、content+padding、background-image(背景图片)、background-color(背景颜色)、margin
盒子模型的3D立体图很重要,是布局的基础

一列自动居中

当设置了margin: 0 auto属性实现自动居中后,如果再设置float或绝对定位,则原先的居中效果将消失自动居中

float布局

当子元素设置了float后,父元素会受到影响

flex布局

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,710评论 1 92
  • 本文档回顾了在工作中常会用到的html/css的布局基础,由于很多坑只有在实际中踩到才会去总结,因此,本文也会不定...
    你的肖同学阅读 3,051评论 0 1
  • 什么是布局 现有样式 文档流 浮动 定位 不能满足人们的需求. 人们需要: 导航栏+内容 导航栏+内容+广告栏 从...
    愁容_骑士阅读 7,938评论 0 2
  • [toc] 使用CSS美化表格和表单元素 数据表格及结构 设置相应表格内容, 职责注意的属性: 让横坐标和纵坐标教...
    hi句身阅读 3,526评论 0 0
  • 今生已矣且将 所有无法形容的渴望与企盼 凝聚成一粒孤独的种子 播在来世 让时光逝去最简单的方法 就是让白日与黑夜
    三寸天堂阅读 1,247评论 0 0

友情链接更多精彩内容