css双飞翼布局

amazingbc

于 2020-03-07 16:27:59 发布

阅读量226

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/sbc_sbc/article/details/104618298

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

仅作为小知识点补充，作笔记用
1. 保证css盒子模型size固定
 2. position定位
 3. 浮动和清除浮动
 4. 双飞翼布局
 5. 浮动的清楚与闭合
 6. flex布局

保证盒子模型size固定

由于盒子模型元素的边框和内边距会撑开模型，例如：
在这里插入图片描述
解决方法是使用如下代码：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

在这里插入图片描述

position定位：

position有以下定位:static relative absolute fixed,可以百度搜索其具体概念

一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

具体示例

使用absolute和relative可以产生很好的两列效果

清除浮动：

有时候浮动的图片会大于容器
在这里插入图片描述
解决方法：

.clearfix {
overflow: auto;
zoom: 1;
}

浮动两列布局例子

在这里插入图片描述

双飞翼布局

基础：margin-left设置百分比是相对于父元素宽度的，这个宽度是不包括padding在内的。
所以设置一个容器包裹左中右三个div，容器设计padding

.container{
    padding: 0 300px 0 200px;
}

dom元素需按照中左右依次放置：

<div class="container">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

将被包裹的三个容器position设置为relative

body{
    min-width: 700px;
}
.container{
    padding: 0 300px 0 200px;
}
.middle{
    width: 100%;
    height: 200px;
    background: #ccc;
}
.left{
    position: relative;
    left: -200px;
    margin-left: -100%;
    width: 200px;
    height: 200px;
    background: green;
}
.right{
    position: relative;
    right:-300px;
    margin-left: -300px;
    width: 300px;
    height: 200px;
    background: orange;
}
.middle,.left,.right{
    float: left
}