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. 启动tomcat时报错：java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException：A child container failed during start

    解决方法:https://www.cnblogs.com/xiangxinhouse/p/6377842.html

  2. sql 各种常用函数

    1.stuff函数 替换制定字符串 stuff(,,'许嵩') 结果: 最帅的许嵩最帅的我 2.replace函数 select replace('蜀云泉真是帅啊','蜀云泉','许嵩') 结果: 许 ...

  3. TCP粘包，拆包及解决方法

    在进行Java NIO学习时,发现,如果客户端连续不断的向服务端发送数据包时,服务端接收的数据会出现两个数据包粘在一起的情况,这就是TCP协议中经常会遇到的粘包以及拆包的问题.我们都知道TCP属于传输 ...

  4. HDU - 3002 King of Destruction（最小割）

    http://acm.hdu.edu.cn/showproblem.php?pid=3002   最小割模板 #include<iostream> #include<cmath> ...

  5. Java编程思想 学习笔记8

    八.多态  在面向对象的程序设计语言中,多态是继数据抽象和继承之后的第三种基本特征. 多态通过分离做什么和怎么做,从另一角度将接口和实现分离开来. “封装”通过合并特征和行为来创建新的数据类型.“实现 ...

  6. Android Retrofit2.1.0设置编码格式GBK

    设置接口如下: public interface IHttpService { /** * 获取userId * @param params * @return */ @FormUrlEncoded ...

  7. 旋钮QDial

    样式: import sys from PyQt5.QtGui import QFont from PyQt5.QtWidgets import QApplication, QWidget, QDia ...

  8. mvc小技巧

    1.从Controller后台赋值的html标签显示在前台不起作用的问题?比如后台:ViewData["Message"]="<span  style=\" ...

  9. dp之免费馅饼

    免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  10. Android UI组件之自定义控件实现IP地址控件

    http://www.cnblogs.com/razerlack/p/4273282.html