盒子的浮动与定位（下）

最新推荐文章于 2022-06-10 21:42:03 发布
最新推荐文章于 2022-06-10 21:42:03 发布
阅读量135 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fonyer/article/details/83111205
版权

盒子的浮动与定位（下） - 截拳道 - The future is in my

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子的浮动与定位</title>
</head>
<style type="text/css">
body{
   margin:20px;
   font::Arial 12px;
}
#father{
    background-color:#a0c8ff;
 border:1px dashed #000000;
 padding:15px;
 position:relative;
}
#block0{
    background-color:#fff0ac;
 border:1px dashed #000000;
 padding:10px; 
}
#block1{
    background-color:#fff0ac;
 border:1px dashed #000000;
 padding:10px;
 position:relative;
 left:30px;
 top:30px;
 /*
 right:30px;
 bottom:30px;
 */
}
#block2{
    background-color:#fff0ac;
 border:1px dashed #000000;
 padding:10px;
 position:absolute;
 right:30px;
 top:30px; 
} 
#block3{
    background-color:#fff0ac;
 border:1px dashed #000000;
 padding:10px;
 position:fixed;
 right:500px;
 top:30px; 
}   
</style>
<body>
static标准流
  <div id="father">
    <div id="block0">Box-1</div>
 </div>
 <div id="father">
    <div id="block1">relative 相对定位</div>
 </div>
  <div id="father">
    <div id="block0">Box-1</div>
  <div id="block2">absolute 绝对定位</div>
    <div id="block0">Box-1</div>  
 </div>
  <div id="block3"> fixed 固定定位 
 </div>
 <h1>块级元素和行内元素</h1>
 <div style="display:inline">把块级元素设置成行内元素（inline）</div>
 <div style="display:inline">把块级元素设置成行内元素（inline）</div>
 <div style="display:inline">把块级元素设置成行内元素（inline）</div>
 <span style="display:block">把行内元素设置成块级元素（block）</span> 
 <span style="display:block">把行内元素设置成块级元素（block）</span> 
 <span style="display:block">把行内元素设置成块级元素（block）</span>
 <a href="#" οnclick="document.getElementById('dis').style.display == 'none' ? document.getElementById('dis').style.display = '' :document.getElementById('dis').style.display = 'none'">点击</a>
  <div id="dis" style="display:none">把行内元素设置成块级元素（block）</div> 
</body>
</html>

fonyer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
大学计算机HTML，css盒子，页面布局，浮动
qq_53587164的博客
03-02 829
盒子居中的方法 1、先让盒子的上下边缘和父盒子的水平中心线重叠，，然后再让子盒子往回移动自身一半的距离 1<div class="father"> // 结构 2<div class="son"></div> 3</div> /*下面为样式*/ 4/* 通过 transform 属性来移动*/ 5.father { 6...
html盒子浮动效果,有关CSS盒子浮动的方法详解
weixin_33212421的博客
06-04 3437
在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现就会有所不同。CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不在伸展，而是根据盒子里面的内容的宽度来确定。准备基础代...
CSS浮动
YBZ_CSDN的博客
10-08 370
浮动 视觉格式化模型，大体上将页面中盒子的排列分为三种方式： 常规流 浮动 定位 应用场景 文字环绕 横向排列 浮动的基本特点 修改float属性值为： left：左浮动，元素靠上靠左 right：右浮动，元素靠上靠右 默认值为none 当一个元素浮动后，元素必定为块盒(更改display属性为block) 浮动元素的包含块，和常规流一样，为父元素的内容盒 盒子尺寸 宽度为auto时，适应内容宽度 高度为auto时，与常规流一致，适应内容的高度 margin为auto，为0. 边框、内边距
css布局之浮动
zh_hunan的博客
10-21 289
CSS布局有三种机制 分别是普通流(标准流）、浮动和定位。 普通流（标准流）就是在HTML写的从上到下的排序 浮动就是让盒子从标准流浮起来 定位就是将盒子定在浏览器的某个位置。 什么是浮动(float) 概念：元素的浮动是指设置了浮动属性的元素会 脱离标准普通流的控制 移动到指定位置。 作用 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。 可以实现盒子的左右对齐等...
CSS基础——浮动（float）【学习笔记】
lilien的博客
11-21 2196
1. 浮动(float) 1.1 CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em等 浮动 让盒子从普通流中浮起来,主要作用让多个块级
html让一个盒子往下走代码,web前端学习笔记(CSS盒子的浮动)
weixin_39850143的博客
06-08 1887
在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现就会有所不同。CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不在伸展，而是根据盒子里面的内容的宽度来确定。准备基础代...
CSS面试须知盒子模型、浮动及定位.docx
07-08
3. 浮动的盒子参照父盒子的对齐，不会与父盒子的边框重叠，也不会超过父盒子的内边距 4. 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流 浮动的应用包括： 1. 让多个块级元素在一行显示 2. 让...
CSS下盒子模型定位浅析.pdf
10-04
【CSS盒子模型定位浅析】 ...在实际应用中，还需要掌握浮动(float)、定位(position)等高级布局技巧，以应对更复杂的设计需求。通过熟练运用CSS布局技术，开发者可以打造出更具视觉吸引力和用户体验的网页。
css的核心内容 标准流、盒子模型、浮动、定位等分析
01-19
1、块级元素：如：<div></div>2、行内元素：如：<span></span>从效果中看块级元素与行内元素的区别： 通过CSS的设置把行内元素转换成块级元素： 标准流：就是标签的排列方式。我的未来不是梦</div><span id=st ...
CSS元素的浮动与定位综合案例1源代码.pdf
07-10
本文档提供的“CSS元素的浮动与定位综合案例1”是一个关于如何使用CSS来创建画册式网页布局的实例，旨在帮助学习者深入理解CSS的浮动与定位概念。这个案例来源于喻浩的《DIV+CSS网页样式与布局从入门到精通》一书，...
css盒子阴影实现图片上浮阴影效果
sam80000的博客
11-27 753
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> /* =============================
CSS盒子模型、浮动、定位
qq_42227428的博客
06-01 3725
一、盒子模型1、css背景（background）：css可以添加背景颜色和背景图片来进行图片的设置，比如给一个div盒子，那么div盒子相关背景的属性可以设置以下：背景颜色：div {background-color: red;}，给div盒子设置一个红色背景颜色。背景图片：div {background-image: url(图片路径);}，给div盒子设置一个背景图片，背景图片我们一般给小背...
css实现盒子悬浮上拉展示详细内容-案例
JackieDYH的博客
08-11 1251
效果图-在线体验 样式代码 .wrap_div1 { position: relative; width: 260px; height: 430px; overflow: hidden; border: 1px solid red; } .boxCSS { width: 100%; height: 100%; text-align: center; border-radius: 10px; display: block; cursor: pointer.
html/css中float浮动的用法
dishashuo9913的博客
09-08 617
一、float基础用法示例 1、我们先建两个div盒子，设置高度、宽度和背景颜色； 最开始两个盒子在网页上的位置如下： 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了右边，但是蓝色盒子就直接上移到了原先红色盒子的位置。 然后我们将蓝色盒子也浮动到右边看看效果： 我们会发现它会紧跟着红色盒子排列，而不会受块级元素影响独占一...
CSS中盒子的浮动定位
evoluyi的博客
04-07 1321
CSS中盒子的浮动与定位 1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。 CSS中float属性，默认为none。将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。 float: left | righ
（7）盒子的浮动
weixin_30412167的博客
05-25 222
前两篇的资料介绍到仅仅按照标准流的方式进行排版限制性太大，接下来将介绍css中的float属性。 一、盒子的浮动（float） 1、浮动（float）主要功能是帮助对象在网页中对齐的，通过不同的命令使对象左右浮动，直到遇到border、padding、margin或其他对象边缘为止。别看这简单的浮动，却可以为我们的排版设计出各种靓丽的风格。 前面的资料介绍过在标准流中，一个块级元素在水平方向...
前端人生——CSS（盒子，浮动，定位）
hycxag的博客
01-04 2599
出现原因：样式写在骨架里面，会变得很复杂。应该达到——结构就应该写结构。外观就应该写外观。 CSS:控制外观显示样式 CSS书写位置 内部样式表（样式与结构部分分离） &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; ... &amp;amp;amp;amp;lt;style&amp;amp;amp;amp;gt; 选择器{属性：值;} /*选择器----选择标签*/ th{color: skyblu
html盒子整体向下移动,盒子上下左右居中方法全（持续更新中）
weixin_42505032的博客
05-31 7932
总是忘记这几个方法，今天来记录一下一、已知大小盒子；左右居中1、 使用定位，左右拉取方法：html:css:.box{width: 300px;height: 300px;border: 1px solid orange;position: relative;}.child{width: 100px;height: 100px;border: 1px solid blue;position:a...
利用hover实现盒子上浮效果
super1468650921的博客
06-10 605
子元素隐藏 hover后上浮
CSS基础：浮动与定位详解
"本章主要介绍了CSS基础知识，包括CSS简介、引入CSS的方法、基本选择器、复合选择器以及盒子的浮动与定位等关键概念。CSS是层叠样式表的简称，用于设计网页样式，使网页呈现出丰富的效果。CSS可以应用于HTML、XHTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值