htm盒子模型与定位
以下图片,详细清晰的讲明了盒子模型。
行内元素之间的水平距离
当两个行内元素并排紧邻时,它们之间的距离为margin-left和margin-right之和。
注意,对于行内元素,margin-top,margin-bottom无效果。
块级元素之间的竖直距离
两个块级元素之间的距离不是margin-bottom与margin-top总和,而是两者中的较大者。
盒子的浮动和定位
CSS 有三种基本的定位机制:普通流、浮动和定位。
浮动
浮动某元素,则要指定一个明确的宽度;否则,它们会尽可能地窄,没浮动前是100%。
浮动的框可以向左或向右移动,
如果它的外边缘碰到包含框或另一个浮动框的边框为止。
如果它的外边缘碰到非浮动框,则会换行到非浮动框的下面。
<style type="text/css">
#top{
border:thin solid #800000
}
#one{
border: thin solid red;
float:left;
}
#normal{
width:100px;
height:100px;
border:thin solid blue;
float:left
}
</style>
<div id="top">
<div id="normal">非浮动碰撞物</div>
<div id="one">阿大</div>
</div>
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
<div id="top">
<div id="normal">非浮动碰撞物</div>
<div id="one">阿大</div>
<div id="two">阿二</div>
</div>
阿二如果不浮动,就会占据阿大的位置,不过阿二的文本,会受到阿大的宽度影响。(浮动元素占据的空间,会对行内元素产生影响,从而形成文本环绕的效果)
如果浮动,则会紧挨在阿大旁边。
float 属性定义元素在哪个方向浮动。
以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS 中,任何元素都可以浮动。
对阿大、阿二都进行浮动,它们都脱离了标准流,宋词div马上占据了阿大和阿二的位置。
两个盒子有一定的空间把文字挤到一边,形成图文混排效果。(浮动元素占据的空间,会对行内元素产生影响,从而形成文本环绕的效果)
<div id="top">
<div id="normal">非浮动碰撞物</div>
<div id="one">阿大</div>
<div id="two">阿二</div>
<div id="text"><span>
谁道闲情抛弃久?每到春来,惆怅还依旧。日日花前常病酒,不辞镜里朱颜瘦。
河畔青芜堤上柳,为问新愁,何事年年有?独立小桥风满袖,平林新月人归后。
</span></div>
清除浮动
如果不想要文本div占据阿大阿二的位置而产生的文字环绕效果。可以对文本div使用.clear{ clear:both;}
注意:对clear属性的设置要放到文字所在的盒子里,而不是放到“浮动”的盒子里。
去掉文字div后,要解决高度自适应问题
去掉文字后,由于阿大和阿二都脱离了标准流,所以top DIV视阿大和阿二于无形。把高度收回。
解决方法是:在阿二后面加<div class=“clear”></div>,并对.clear{clear:both;}进行清除浮动。
定位
static (静态定位)
元素框正常生成。
relative (相对定位)
元素框偏移某个距离。它原本所占的空间仍霸占着。
absolute (绝对定位)
元素框从文档流完全删除,并相对于其包含块定位。(注意:包含块必须也是绝对定位/fixed)元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。
fixed (固定定位)
元素框的表现类似于将position 设置为absolute,但其包含块是视窗本身。(不支持IE6)
CSS 相对定位
对一个元素进行相对定位,它将以起点为参照,垂直或水平移动。
div{
border:thin solid gray;
}
div>div{
margin:10px;
width:80px;
}
#relative{
position:relative;
top:20px;
left:30px;
}
#top{
float:left
}
<div id="top">
<div>div1</div><div id="relative">div2</div><div>div3</div>
</div>
注意: 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。注意,相对定位后,top div的宽度。因此,移动元素会导致它覆盖其它框。
绝对定位,元素不再保留原来占据的空间。
htm盒子模型与定位相关推荐
- CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
- 前端学习 day4 : 盒子模型,浮动,定位
1.居中问题 text-align是让块元素中的内容在块元素的范围内水平居中 如果设置块元素中的内容的属性line-height的高度等于块元素高度的话,那么该内容垂直居中 2.盒子边框的设置 2.1 ...
- JavaScript-页面布局-div布局-盒子模型
文章目录 1.盒子模型 2.定位方式 3.排列属性-float和clear 4.块和内联属性 5.作者答疑 在使用Html构建界面时,最关键的标签是div,这是一个有着各种属性的块状标签,能够以绝 ...
- 【CSS】笔记3-三大样式、盒子模型、PS、圆角、阴影
目录 一.三大特性 1.层叠性 2.继承性 3.优先级 4.CSS权重叠加 二.盒子模型 1.盒子模型 (1)边框(border) (2)border-collapse表格细线边框 (3)边框会影响盒 ...
- 前端与移动开发-----CSS(三大特性+盒子模型原理)
CSS 三大特性(层叠性.继承性.优先级 ) CSS 三大特性之层叠性 在开发中出现样式层叠时候:对一个元素多次设置同一个样式,会使用最后一次设置的属性值 . 样式层叠的原则:样式冲突,就近原则,后定 ...
- 盒子模型的初识及css标签使用
CSS盒子模型 1.常用样式 2.盒子模型 * 3.定位(绝对定位 相对定位)* 4.CSS3常见效果 盒子模型介绍 常用样式 基础样式 样式名 描述 text-align 设置内容位置(指定块级元素 ...
- html5盒子模型作业,HTML5盒子模型。
盒子模型. 盒子由 margin.border.padding.content 四部分组成. margin :外边距 border:边框 padding:内边距 (内容与边框的距离) content: ...
- css基础,盒子模型,选择器与权重
1.css基础 1.1css简介 css(叠层样式表)是一种标记语言 1.1.1css语法规则 选择器加声明 <style>/* 选择器{样式} *//* 给谁改样式{改什么样式} */p ...
- web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
最新文章
- 太阳能控制器原理图_太阳能人体感应壁灯的电路设计
- 一秒搭建gitbook
- 解决Mac上adb: command not found问题
- Python网络爬虫第二弹《http和https协议》
- 进程间的通信——共享内存
- java斗地主随机发牌_使用Java实现斗地主游戏的发牌过程
- hervorgehen ( aus ... )
- 精选机器学习深度学习视频资源合集 !(附下载链接)
- 李沐动手学深度学习V2-注意力评分函数
- 【Shell】 sed/tr替换换行符
- 跳石板-2017网易校招
- 局部全局变量、匿名函数、递行函数
- 王者里的高清绝美海报(别再用黑乎乎的背景了)
- 中外企业文化杂志中外企业文化杂志社中外企业文化编辑部2022年第5期目录
- 如何在客户端避免繁冗的服务器GUID定义及导入?
- win10中搭建并配置ftp服务器的方法(实现多用户登录整合版
- 年终总结季,咋看 PDF 版知识星球中的总结帖呢?
- java 自定义注解以及注解的实现原理
- 清华大学出版社c语言程序设计第五版,清华大学出版社-图书详情-《C程序设计教程(第5版)》...
- 【计算】分页存储逻辑地址转物理地址
热门文章
- java基础之Integer和Long
- 微信运动刷步怎么用?微信运动刷步使用教程[多图]
- 计算机三级考点6:网络关键设备选型。
- Floyd-Warshall算法(Floyd-Warshall algorithm)
- java创建pdf空白页_使用itext将html转成PDF,PDF空白的问题。
- html有序列表设置混合编码,一组你值得拥有的 Markdown 中混用 HTML 案例
- 怎么设置计算机显示列表格式,(怎样显示excel的文件后缀名)excle后缀格式怎么显示...
- 那些实用的 Chrome 扩展神器(二)
- 美国医生谈医疗创业公司的五大成功要素:简化流程、绩效工资、授权
- 账号被盗,如何强制下线?