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. redis 一主二从三哨兵

    总体部署 一主二从三哨兵 ip地址分配分别为 主 127.0.0.1:6379 从 127.0.0.1:6389 从 127.0.0.1:6399 哨兵 127.0.0.1:26379 哨兵 127. ...

  2. 【Maven】eclipse中使用Maven、生命周期

    1.在eclipse中创建maven工程 >>在eclipse中配置maven: 配置maven版本:Eclips自带了一个maven,一般不用自带的这个,而选择我们安装的那个maven ...

  3. JAVA记录-SpringMVC集成redis

    1.redis.properties #主机地址 redis.host=127.0.0.1 #端口号 redis.port=6379 #当池内没有返回对象时,最大等待时间毫秒数 redis.pool. ...

  4. 从匿名函数（闭包特性）到 PHP 设计模式之容器模式

    匿名函数(匿名函数) 匿名函数,也叫闭包函数,它允许临时创建一个没有指定名称的函数,常用作回调函数参数的值,也可以作为变量的值来使用.具体的使用见以下示例代码: /* 示例一:声明一个简单匿名函数,并 ...

  5. mysql Mac终端操作

    1.启动mysql :brew services start mysql 2.登陆mysql :  mysql -u root -p mysql 命令.      -u 后面接用户名 root超级管理 ...

  6. 重定向printf

    #include "stdio.h" #ifdef __GNUC__#define PUTCHAR_PROTOTYPE int __io_putchar(int ch)#else# ...

  7. Python排序算法之快速排序

    快速排序(quickSort) 快排的思想:首先任意选取一个数据(通常选用数组的第一个数)作为关键数据,然后将所有比它小的数都放到它前面,所有比它大的数都放到它后面,这个过程称为一趟快速排序. 百度百 ...

  8. Javaweb学习笔记——（三）——————JavaScript基础&DOM基础

    day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...

  9. QLabel-标签控件的应用

    label = QLabel('我是李明') #创建标签控件对象.参数:标签中要显示的文本 label.setText('我是明明') 修改标签控件显示的文本 self.label.text() 返回 ...

  10. TypeError: Only valid with DatetimeIndex, TimedeltaIndex or PeriodIndex, but got an instance of 'Index'

    这个问题说的很清楚,就是类型不对,需要转化类型,首先讲一下这个问题是在使用pandas的resample函数激发的,官方文档解释的较为清楚,如下: Convenience method for fre ...