`

css盒子的浮动与定位

    博客分类：
  • Css
css 
阅读更多
1. css盒子的浮动与定位

1) 盒子浮动float 

float属性：
默认是none，按照标准流来定位；
left：左悬浮；
right：右悬浮；


<style type="text/css">
    .parent{
        padding:5px;
        background-color: yellow;
        border: 1px solid red;
    }
    .d1{
        float:left; // float:none;
        margin:5px;
        background-color: gray;
        border: 1px solid gray;
    }
    .d2{
        float:right; // 不设置
        margin:5px;
        background-color: blue;
        border: 1px solid blue;
    }
    p{
        margin:5px;
        background-color: green;
        border: 1px solid green;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="d1">盒子A</div>
    <div class="d2">盒子B</div>
    <p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>


2) 使用clear清除浮动的影响 

clear属性：
默认是none，允许两边都可以有浮动对象；
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：不允许有浮动对象


<style type="text/css">
    .parent{
        padding:5px;
        background-color: yellow;
        border: 1px solid red;
    }
    .d1{
        float:left;
        margin:5px;
        height:100px;
        background-color: gray;
        border: 1px solid gray;
    }
    .d2{
        float:right;
        margin:5px;
        height:50px;
        background-color: blue;
        border: 1px solid blue;
    }
    p{
        clear:right; // clear:both;
        margin:5px;
        background-color: green;
        border: 1px solid green;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="d1">盒子A</div>
    <div class="d2">盒子B</div>
    <p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>


3) 盒子定位position 

position属性：
默认是static，按照标准流来定位；
relative：相对定位，相对于原本的标准位置偏移指定的距离；
absolute：绝对定位，以它的包含框为基准进行偏移；
fixed：固定定位，以浏览器窗口为基准进行定位；


<div class="parent">
    <div class="son">儿子</div>
</div>

<style type="text/css">
    .parent{
        padding:15px;
        background-color: green;
        border: 1px solid red;
    }
    .son{
        position:static;
        padding:10px;
        background-color: blue;
        border: 1px solid gray;
    }
</style>

<style type="text/css">
    .parent{
        padding:15px;
        background-color: green;
        border: 1px solid red;
    }
    .son{
        position:relative;
        left:30px;
        top:30px;
        padding:10px;
        background-color: blue;
        border: 1px solid gray;
    }
</style>

<style type="text/css">
    .parent{
        position:relative;
        padding:15px;
        background-color: green;
        border: 1px solid red;
    }
    .son{
        position:absolute;
        left:0px;
        top:0px;
        padding:10px;
        background-color: blue;
        border: 1px solid gray;
    }
</style>

<style type="text/css">
    .parent{
        position:relative;
        padding:15px;
        background-color: green;
        border: 1px solid red;
    }
    .son{
        position:fixed;
        left:0px;
        top:0px;
        padding:10px;
        background-color: blue;
        border: 1px solid gray;
    }
</style>


4) z-index空间位置 

z-index空间位置，默认是0，z-index值大的页面位于其值小的上方；


<style type="text/css">
    img{
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: -1;
    }
</style>
</head>
<body>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<img src="../apple.jpg"/>
</body>


5) 盒子display属性 

display：
inline：把元素变成内联元素；
block：把元素变成块级元素；


<div style="display: inline;">d1</div>
<div style="display: inline;">d2</div>
<div style="display: inline;">d3</div>
<span style="display: block;">s1</span>
<span style="display: block;">s2</span>
<span style="display: block;">s3</span>
分享到：
| css盒模型
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS下盒子模型定位浅析.pdf

    【CSS盒子模型定位浅析】 CSS（层叠样式表）是一种强大的样式控制工具，它使得网页设计者可以精细地控制页面元素的外观和布局。盒子模型是CSS布局的核心概念，它将HTML元素视为一个个具有内容(content)、内边距...

    CSS面试须知盒子模型、浮动及定位.docx

    "CSS盒子模型、浮动及定位" CSS盒子模型是指将HTML页面中的布局元素看作是一个矩形的盒子，一个CSS盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。盒子的...

    web css样式表 有css基础 css选择器 边框 背景 文本 盒子模型 浮动与定位 列表

    web css样式表 有css基础 css选择器 边框 背景 文本 盒子模型 浮动与定位 列表

    HTML浮动与定位

    ### HTML浮动与定位知识点详解 #### 一、元素的浮动 **1.1 浮动的概念** 元素的浮动是CSS中一个重要的概念，它可以让设置了浮动属性的元素脱离标准...通过合理使用浮动与定位，可以创建出更加灵活和动态的网页布局。

    CSS元素的浮动与定位综合案例1源代码.pdf

    本文档提供的“CSS元素的浮动与定位综合案例1”是一个关于如何使用CSS来创建画册式网页布局的实例，旨在帮助学习者深入理解CSS的浮动与定位概念。这个案例来源于喻浩的《DIV+CSS网页样式与布局从入门到精通》一书，...

    CSS盒子模型的应用

    **CSS盒子模型详解** 在网页设计中，CSS（层叠样式表）盒子模型是一个至关重要的概念，它定义了网页元素如何占用空间并与其他元素交互。理解盒子模型对于精确控制页面布局至关重要。本篇文章将深入探讨CSS盒子模型...

    CSS中的盒子模型（图片）

    在网页设计中，CSS（层叠样式表）是用于...通过这三张图片，你可以更直观地掌握CSS盒子模型的工作原理，并运用到实际的网页设计中。实践中，结合代码调试和视觉效果预览，将更有利于深化理解，从而提升网页设计的技能。

    css各种高级实例+源码

    深入CSS盒子模型 深入理解盒子模型（上） 深入理解盒子模型（下） 浮动与定位（上） 浮动与定位（下） 文字与图像（上） 文字与图像（下） CSS导航设计 链接与导航 竖直菜单（上） 竖直菜单（下） 水平菜单 下拉菜单...

    css 盒子模型彻底解析

    使用CSS布局，如浮动布局、定位布局、Flexbox或Grid，都可以基于盒子模型来控制元素的位置和大小。 此外，结构与表现分离是CSS设计的重要原则，意味着HTML负责内容的结构和语义，而CSS负责元素的视觉呈现。通过将...

    CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx

    CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中，实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果，并对每种方法的优缺点进行分析。 一、...

    DIV CSS 盒子模型PPT演讲.zip

    在实际应用中，配合浮动（float）、定位（position）以及Flexbox或Grid布局，可以解决各种复杂的布局问题。 在提供的压缩包中，"yanjiang.html"可能是一个包含实例代码的HTML文件，用于演示盒子模型的应用；"house....

    css 盒子模型理解1

    - 只有在普通文档流中的块级元素才会发生外边距合并，行内元素、浮动元素或绝对定位的元素之间不会发生这种情况。 - CSS重置（CSS Reset）中常用`* { margin: 0; padding: 0; }`来消除默认的外边距和内边距，以...

    css盒子模型 css margin 外边框合并

    对于CSS盒子模型的学习，除了了解上述的基础知识点外，开发者还应该熟练掌握如何通过各种CSS选择器来选择元素，并通过CSS属性来控制元素的布局与显示效果。通过不断实践和解决实际问题，才能真正掌握CSS盒子模型的...

    CSS与(X)HTML视频教程

    第4课 浮动与定位（上） 第4课 浮动与定位（下） 第5课 文字与图像（上） 第5课 文字与图像（下） 第6课 链接与导航 第7课 竖直菜单（上） 第7课 竖直菜单（下） 第8课 水平菜单 第9课 下拉菜单 第10课 表格也精彩 ...

    CSS文档流与块级元素,css

    ### CSS文档流与块级元素、内联元素详解 #### 文档流的概念 在CSS布局中，**文档流**是一个核心概念，它指的是HTML文档中元素的自然流动方式。想象一下，网页就像一条河流，其中的元素就像河中的船只，顺流而下，...

    《CSS设计彻底研究》光盘源码

    第4章　盒子的浮动与定位 　4.1　盒子的浮动　 　4.1.1　准备代码　 　4.1.2　实验1——设置第1个浮动的div　 　4.1.3　实验2——设置第2个浮动的div　 　4.1.4　实验3——设置第3个浮动的div　 　4.1.5　实验4——...

    50道CSS基础面试题

    **标准的CSS盒子模型**： - **宽度计算公式**：`宽度 = 内容的宽度（content） + border + padding + margin` - **特点**：在标准模型下，设置元素的`width`属性仅指元素的内容区域（content），不包括padding、...

    css设计彻底研究 源代码

    第4章　盒子的浮动与定位 　4.1　盒子的浮动　4.1.1　准备代码　4.1.2　实验1——设置第1个浮动的div　4.1.3　实验2——设置第2个浮动的div　4.1.4　实验3——设置第3个浮动的div　4.1.5　实验4——改变浮动的方向　...

    CSS设计彻底研究源代码

    深入CSS盒子模型 第3课 深入理解盒子模型（上） 第3课 深入理解盒子模型（下） 第4课 浮动与定位（上） 第4课 浮动与定位（下） 第5课 文字与图像（上） 第5课 文字与图像（下） CSS导航设计 第6课 链接与导航 第7课...

Magicbox
Global site tag (gtag.js) - Google Analytics