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. Python IPy模块

    #!/usr/bin/env python # -*- coding: utf-8 -* # Created by YangYongming at 2018/09/17 20:22 # FileNam ...

  2. 2018acm-icpc江苏邀请赛后记

    这场比赛可真难. 不得不说矿大的环境大大出乎了我的意料,无论是校园面积还是基础设施都很好,唯一美中不足的大概是吃了一顿晚饭每个菜都有辣,幸好饭票发的很多,一个人四张饭票,一张饭票可以换3根香蕉,于是我 ...

  3. JQuery实现轮播图及其原理

    源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...

  4. 用Java实现几种常见的排序算法

    用Java语言实现的各种排序,包括插入排序.冒泡排序.选择排序.Shell排序.快速排序.归并排序.堆排序.SortUtil等. 插入排序: package org.rut.util.algorith ...

  5. javascript 实现手风琴特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. IDEA中导入多个包自动合并为星号

    IDEA中导入同一个包下的几个class会自动合并为星号,如下图.可以通过设置让其不自动合并为星号. 1.选择File→Settings→Editor→Code style→Java,再点击右边的Im ...

  7. UVALive - 7637 E - Balanced String(构造)

    原题链接 题意:给出一个打乱顺序的序列,问是否能构造出一个括号匹配的字符串.每个数字为此前读取到的左括号数减去右括号数. 分析:有左括号开始构造,不够的话就找右括号.注意特殊情况待处理.详情看代码 # ...

  8. ubuntu16.04.1下安装mysql

    版本信息 ubuntu版本:16.04.1 mysql-server版本:5.7.23 安装 先查看一下apt可获取的mysql版本 ubuntu@VM-0-4-ubuntu:~$ apt searc ...

  9. 用struts2 s2-045漏洞拿站记录

    浏览FreeBuf时发现的文章,新出的漏洞: http://www.freebuf.com/vuls/128668.html 漏洞一出,各位大神早就写出POC: http://www.reg008.c ...

  10. 【逆向工具】IDA使用5-（ string、图形化与视图的切换、图形化显示反汇编地址、自动注释、标签使用）

    分析petya病毒时新学会的技巧. IDA技巧1 : string 提取文件中的字符串内容,如果看到一些文件字符串可以定位到关键的函数中. view -> open subview -> ...