1.当div标签中含有子标签，如果div标签的大小是被div中的子标签撑起来的，那么可能布局(之后)可能就会出现问题(if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: ;

        }

        .outer{

            background-color: gold;

            width: 300px;

            height: 300px;

            overflow: hidden;

        }

        .box1{

            width: 100px;

            height: 100px;

            background-color: blue;

            margin-top:10px;        /*margin-top 是以id =div1 的这个标签*/

        }

        .box2{

            width: 100px;

            height: 100px;

            background-color: darksalmon;

            /*如果这样的话就合适呢，对着就下去了*/

            margin-top: 10px;

        }

    </style>

</head>

<body>

<div id="div1" style="background-color: burlywood; width:300px; height

:300px"></div>

<div style="background-color: chartreuse">

    <div class="box1"></div>

    <div class="box2"></div>

</div>

</body>

</html>

示例1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: ;

        }

        .outer{

            background-color: gold;

            width: 300px;

            height: 300px;

            overflow: hidden;

        }

        .box1{

            width: 100px;

            height: 100px;

            background-color: blue;

            margin-top:10px;        /*margin-top 是以class=outer 的这个标签*/

        }

        .box2{

            width: 100px;

            height: 100px;

            background-color: darksalmon;

            /*如果这样的话就合适呢，对着就下去了*/

            margin-top: 10px;

        }

    </style>

</head>

<body>

<div id="div1" style="background-color: burlywood; width:300px; height

:300px"></div>

<div class="outer">

    <div class="box1"></div>

    <div class="box2"></div>

</div>

</body>

</html>

示例2

　　解决方法:设置padding bording，让div便签称为子标签的真正的父标签

        这两种会改变结构

            1.加上padding

            2.加上border

        不改变结构

            3.overflow:hidden   (理解：相当给div标签设置了隐藏的边界，否则不会出现超出部分隐藏功能了)，还有一点，overflow:hidden 清除浮动


 

CSS----布局注意事项的更多相关文章

  1. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  2. 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法

    前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...

  3. WEB入门.七 CSS布局模型

    学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...

  4. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  5. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  6. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  7. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  8. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  9. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  10. CSS 布局口诀

    body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...

随机推荐

  1. Dapper总结（二）---事务和存储过程

    一  dapper使用事务 string sql1 = "insert into UserInfo values('user8',27,'s')"; string sql2 = & ...

  2. webapi框架搭建-webapi异常处理

    webapi框架搭建系列博客 前言 上一篇我们已经完成了项目的日志管理,在项目开发中日志会经常记录程序中的异常,供后续问题排查使用.本篇讲如何在webapi里加入异常处理机制. 目的和原则 1.程序任 ...

  3. java实现网页验证码

    Servlet: package cn.bdqn.servlet; import javax.imageio.ImageIO; import javax.servlet.ServletExceptio ...

  4. MongoDB - 日常操作二

    MongoDB 开启认证与用户管理  ./mongo # 先登录 use admin # 切换到admin库 db.addUser(") # 创建用户 db.addUser('zhansan ...

  5. POJ1679 The Unique MST【次小生成树】

    题意: 判断最小生成树是否唯一. 思路: 首先求出最小生成树,记录现在这个最小生成树上所有的边,然后通过取消其中一条边,找到这两点上其他的边形成一棵新的生成树,求其权值,通过枚举所有可能,通过这些权值 ...

  6. 第17月第7天 iOS 数组越界，防Crash处理

    1. 上面方法已经可以避免crash,为了避免冗余的代码,写一个NSArray的分类,利用runtime替换NSArray的对象方法objectAtIndex:,在这里进行判断,捕获异常: #impo ...

  7. jquery 跨域请求

    参考博客:  http://www.cnblogs.com/freeweb/p/4908832.html 由于安全性问题, js 一般不支持跨域操作,但只要在客户端与服务器端引入相同的参数,通过jso ...

  8. Linux查找文件、文件夹

    https://www.jianshu.com/p/f3a46e5c96ba 查找目录:find /(查找范围) -name '查找关键字' -type d 查找文件:find /(查找范围) -na ...

  9. Java读取Excel转换成JSON字符串进而转换成Java对象

    Jar包

  10. java中网络设置代理

    三种方式: 1.JVM启动时加参数设置代理 在系统启动时,使用-D项来设置代理. 例如: java -Dhttp.ProxyHost="proxyUrl" -Dhttp.Proxy ...