从css盒子与定位到布局

字数 750阅读 184

css盒子模型

原理:padding,border,margin三者构成一个盒子。

图片来自网络
图片来自网络

Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。

w3c标准:总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

IE标准:总宽度 = margin-left + width + margin-right

css定位机制

普通流
  • 元素的位置由元素在HTML文档中的位置决定,从左到右,自上而下。

  • 块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

  • 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

定位
  • 相对定位(reletive)

    元素保持其形状及其所占空间,相对于普通流中其他元素的偏移。

  • 绝对定位(absloute)

    相对于已定位的祖先元素,如果没有已定位的祖先元素则相对于最初的包含块。
    脱离普通流,覆盖在普通流定位之上

  • 固定定位(fixed)

    相对于浏览器窗口的绝对定位

浮动
  • 不在普通流中占据空间,但会对之后的浮动元素产生空间占位影响

布局

常见布局
  • 单列水平居中布局, 一列定宽一列自适应布局, 两列定宽一列自适应布局, 两侧定宽中间自适应三列布局。

  • 圣杯与双飞翼是常见的三列布局,左右两列宽度固定,中列自适应。

圣杯布局
  • 为了给两边侧栏空出位置,给container元素设置padding

  • 左右两个div用相对定位并分配left,right属性,用负边距消除占位

  • main div设置100%宽度

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
body {
    padding: 0;
    margin: 0;
    min-width: 600px; /* 2*left + right */
}
.container {
    padding-left: 200px;
    padding-right: 200px;
}
.main {
    float: left;
    width: 100%;
    height: 300px;
    background-color: red;
}
.left {
    position: relative;
    left: -200px;
    float: left;
    width: 190px;
    height: 300px;
    margin-left: -100%;
    background-color: blue;
}
.right {
    position: relative;
    right: -210px;
    float: left;
    width: 190px;
    height: 300px;
    margin-left: -200px;
    background-color: green;
}
双飞翼布局
  • 三列左浮动
  • 为了不让main内容被遮挡,给其设置padding
  • 用负边距给左右两列定位,消除占位
<div class="main-con">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
.main-con {
    float: left;
    width: 100%;
}

.main {
    height: 300px;
    margin-left: 210px;
    margin-right: 210px;
    background-color: red;
}

.left {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: blue;
}

.right {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -200px;
    background-color: green;
}
两者异同
  • 两者都把主栏放在文档流最前面,优先加载。

  • 两者都是三列浮动,然后通过负边距定位消除占位形成三列布局

  • 中列main处理不同:圣杯布局是利用父容器的左、右内边距定位;双飞翼布局是把主栏嵌套在div后利用主列的左、右外边距定位。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
  • 引言 这次给大家带来了CSS-盒子模型部分的笔记,大家一同交流😊 认识盒子模型之前,先来了解一下CSS元素的分类吧...