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. sklearn模块函数介绍

    一.sklearn.metrics.accuracy_score 这个包可以帮助我们统计两个列表中相同位置元素相同的个数,比如我们预测出来的label和真实的label有多大差距,预测的准确率是多少, ...

  2. linux配置无秘钥登陆

    linux配置无秘钥登陆 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 最近有点心烦,很少写博客了,后期的3个月里,估计更新的频率也不会太高,请见谅,今天给大家共享一下linux不 ...

  3. 远程升级云服务器系统 CentOS 6.x 至 CentOS 7.x

    由于docker-ce不再支持centos6,所以觉得吧系统升级为centos7,以下是踩坑的过程 1.添加源 /etc/yum.repos.d/upgrade.repo [upgrade] name ...

  4. Linux命令之ll

    ll命令 用处:以长格形式列出当前目录下的所有文件,每个文件的长度和创建时间不同. 用法:输入 ll 示例: 前面的一大串字母的意思,第一个要么是d要么是-,d的意思就是目录,-的意思就是文件.其后的 ...

  5. redis分布式工具类 ----RedisShardedPoolUtil

    这个是redis分布式的工具类,看非分布式的看  这里 说一下redis的分布式,分布式,无疑,肯定不是一台redis服务器.假如说,我们有两台redis服务器,一个6379端口,一个6380端口.那 ...

  6. Spark记录-Spark-Shell客户端操作读取Hive数据

    1.拷贝hive-site.xml到spark/conf下,拷贝mysql-connector-java-xxx-bin.jar到hive/lib下 2.开启hive元数据服务:hive  --ser ...

  7. Hive记录-配置客户端可视化管理工具远程连接

    配置客户端远程连接(方便可视化工具操作)-不需要在hive服务器上敲命令了 1.安装DBeaver工具:https://dbeaver.com/download/ 2.准备相关驱动文件(服务器上hiv ...

  8. 超哥带你学GIT

    git入门 git安装 git基础 git分支 github与gitlab与git三个基佬的故事 gitlab与pycharm结合 github使用 git超清技能图 学习git站点: git官网 廖 ...

  9. C# 对图片加水印

    using System; using System.Collections; using System.Data; using System.Linq; using System.Web; usin ...

  10. UBUNTU18.4环境下使用更好用的搜索引擎（无奈，只能起这样的标题）

    初步安装 更新软件源 sudo apt-get update 安装pip (一个安装和管理 Python 包的工具) sudo apt-get install python-pip sudo apt- ...