1、中间栏先加载  ！！！（若不是这个条件的话  ，那可以用  calc 或者flex布局来实现  中间栏自适应，左右栏定宽）

2、中间栏自适应   width：100%

3、左右栏固定宽

左中右  浮动  （本来应该在一行显示的，但是中间栏宽100% ,所以左右会掉下来，此时就需要设置margin-left）

左margin-left：-100%

右 margin-left：  200px（自身宽）

父元素设置padding： 0  200px  （父元素不能右宽100%，保证左右留200给左右栏）

左边栏：position   ：relative   ；left ： -200px

右边栏：position   ：relative   ；right：  -200px

给父元素容器加最小宽度   min-width： 400px

方法二：

在一的基础上优化代码

！！！此时可以去掉左右栏的定位，去掉父元素的padding，给中间栏的容器加margin  ： 0  200px  这样中间栏就不会有空间被左右栏遮挡住了

css学习_css布局案例的更多相关文章

  1. css学习_css浮动

    1.文档流介绍 网页布局的核心就是利用css来摆放盒子, 把盒子摆放在合适的位置. css的定位机制有以下3种(网页布局一般需要3种搭配使用): a.普通流(标准流) b.浮动 1.浮动只有左右. 2 ...

  2. css学习_css补充知识

    1.渐进增强,优雅降级 2.浏览器前缀 3.背景渐变   4.css  验证工具 2种方式:第2种支持验证本地的css(推荐) 5.css压缩  ----(节约空间,节省带宽) 6.旋转轮播图 案例: ...

  3. css学习_css盒模型及应用

    1.看透网页布局的本质 2.盒模型 margin.border.padding.width.height a. border: 1px solid red                (solid/ ...

  4. CSS：绝对定位布局案例 position布局实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. CSS学习摘要-布局

    注:全文摘自MDN-介绍CSS布局 CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流.周边元素.父容器或者主视口/窗口的位置.在这个模块中将涉及更多关于页面布局技术的细节: 浮动 ...

  6. css的网页布局案例

    常见行布局: 导航使用position:fixed固定住 导航会脱离文档流,不占据空间 导致下面的元素上移,因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE ht ...

  7. css学习_css伪元素的本质

    1.伪元素的本质(插入了一个元素(行内元素/标签/盒子) 案例1: 案例2:

  8. css学习_css精灵技术、字体图标

    1.精灵技术产生的背景(减少向服务器请求的次数,减小服务器压力) 2.精灵技术的本质(小的背景图集中在一张大图上) 3.精灵技术的使用 案例1: 案例2: 注意:产品类的图片一般不是用背景,而是用im ...

  9. css学习_css用户界面样式

    1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: ...

随机推荐

  1. IDEA 代码规范插件

    前言 在工作过程中,每个人的代码习惯都不同,在一起工作做同一个项目,如果按照自己的习惯来,有可能造成代码维护困难,开发进度缓慢等. 代码规范的重要性 谷歌发布的代码规范中指出,80% 的缺失是由 20 ...

  2. swoole简单demo测试

    测试代码 1.server.php: <?php $serv = new swoole_server("0.0.0.0", 9502); $serv->on('conn ...

  3. Leetcode#88. Merge Sorted Array（合并两个有序数组）

    题目描述 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别为 m ...

  4. git切换到新的远程地址

    查看仓库链接 git remote -v 修改url链接 git remote set-url origin URL

  5. 第七节，Python的可视化包——matplotlib

    1.2D图表 import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt # 通过rcParams设置全局横 ...

  6. Django之BBS博客项目

    一.登陆功能(验证码) from geetest import GeetestLib from django.contrib import auth #使用极验滑动验证码的登陆 def login(r ...

  7. Lua中字符串库中的几个重点函数

    [前言] 在<Lua中的一些库(1)>中也说到了,要对string库的模式匹配进行单独的讲解.对于字符串的处理,对于任何语言的学习来说,都是一个难点,而且也是一个必会的知识点.给你一个字符 ...

  8. mysql 迁移

    背景 这次做oracle数据迁移,也想总结像mysql的数据迁移方式.简单列下吧,因为具体方式网上很多. 方式 可以通过修改mysql.ini的数据文件目录位置方法实现拷贝迁移,此种方式简单 通过备份 ...

  9. HTML基础-标签

    html标签元素 html标签 在HTML静态页面中,每个网页具有唯一`<html></html>`,即`<html>`标签. html div标签 即网页中的盒子 ...

  10. jsp 异步处理

    一.  概述 异步处理功能可以节约容器线程.你应该将此功能 使用在长时间运行的操作上.此功能的作用是释放正在 等待完成的线程,使该线程能够被另一请求所使用. 二. 编写异步Servlet和过滤器 We ...