`

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:盒子模型

    这种现象仅发生在普通文档流中的块级元素之间，行内元素、浮动元素以及绝对定位元素的外边距不会发生合并。 ##### 外边距合并示例 例如，在一个容器中有两个垂直相邻的段落元素，如果第一个段落设置了`margin-...

    css各种高级实例+源码

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

    css 盒子模型彻底解析

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

    09第3章 CSS - 盒子模型与布局.zip

    在探讨CSS盒子模型与布局时，我们通常会涉及到一系列的核心概念，包括盒模型的基本组成部分、定位技术以及如何通过浮动来设计页面布局。本系列文件涵盖了这些主题的详细讲解和实践案例。 首先，盒模型是CSS布局的...

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

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

    javascript-8.CSS 盒子模型.html

    在实际开发中，除了通过直接设置这些属性来控制布局之外，开发者还可以利用CSS的浮动（float）、定位（position）、弹性盒子（flexbox）和网格（grid）等布局方式来实现复杂的页面结构。在使用这些布局技术时，盒子...

    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、...

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