css盒子模型、文档流、相对与绝对定位、浮动与清除模型
一、CSS中的盒子模型 标准模式和混杂模式(IE)。在标准模式下浏览器按照规范呈现页面;在混杂模式下,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
html元素一般分为块级元素和行内元素 块级元素:块级元素排斥其他元素与其位于同一行,可以设定宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素, 常见的块级元素有div, p ,h1~h6,ul,table,form,hr等。 每一个块元素都可以分为context、padding、boder和margin几个部分,我们常说的宽和高,通常指的是context的宽和高(也有可能是context+padding,具体跟浏览器有关), padding代表内容和边框之间的填充,margin代表边框之外的空白,如上图: 行内元素:行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效,但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。 行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。常见的行内元素有a, em ,strong,span,i,img,lable,button,select等。 块级元素和行内元素区别
可以通过修改样式display属性改变元素是以块级还是行内元素呈现,当display的值设为block时,元素将以块级方式呈现;当display值设为inline时,元素将以行内形式呈现。 如果想让一个元素可以设置宽度高度,又让它以行内形式显示,我们可以设置display的值为inline-block。 例子:
二、CSS中的文档流模型 所有的块元素在html文档中是按照它们出现在文档中的先后顺序排列的(当然,嵌套不在此列),每一个块都会另起一行。如下图 他们对应的html如下: 为了定义他们的宽度、高度还有边框,我们定义如下的CSS: #div2 { #div3 { 三、CSS中的相对定位和绝对定位模型 在文档流中,每个块元素都会被安排到流中的一个位置,我们可以通过CSS中的定位属性来重新安排它的位置。定位分为相对定位和绝对定位, 相对定位是相对于该块元素在文档流中的位置的,比如,我们可以使用相对定位把div2放到div1的右侧,CSS代码如下: #div2 { #div3 { 下面是效果: 可以看到一个有趣的现象,那就是虽然我们把div2移走了,但是div1和div3中间还是有一个空间,说明相对定位的元素是会占据文档流空间的,这里的div2就是典型的“站着茅坑不拉屎”。 使用绝对定位也是可以把div2摆到div1的右边的,而且绝对定位是不会占据文档流空间的,如下图,div1和div3之间没有空白:
绝对定位是个好东西,可以把内容显示到页面上的任何位置,但是对于我们程序员来说,却不能使用太多的绝对定位,因为使用程序动态向div中添加内容,div的大小是不可知的,无法将每一个div的位置都定死。 四、CSS中的浮动和清除模型 这里把div2和div3都定义了为浮动,代码如下: #div3 { 那什么情况下需要clear呢?这是因为float的元素和绝对定位的元素一样,也是不占用文档空间的,因此,如果我们把div2和div3都嵌套在div1中,并且把div2和div3都定义为浮动,那么由于它们不占用文档空间,设置为浮动后div2和div3都不属于div1的内容了,所以作为父元素的div1没有内容填充,不知道自动扩展大小,以至于显示出来div2和div3会跑到div1的外面,如下图 下面是它们的html代码: 下面是它们的css代码: #div2 { #div3 { 因为float的元素不占用文档流空间,有时候元素还会重叠到float元素上,这里我就不举例了。 为了解决上面的问题,就需要在float之后的元素上面使用clear,在此例中,我们在div3后面加入一个空段落,并设置其为clear,如下: clear 属性定义了元素的哪边上不允许出现浮动元素。下面是新增加的空段落的CSS代码: .clear{ |
转载于:https://www.cnblogs.com/inconceivable/p/5235812.html
css盒子模型、文档流、相对与绝对定位、浮动与清除模型相关推荐
- CSS:标准文档流、浮动、绝对定位—(解决有时候父元素不能自动扩展)
CSS(表现标准语言)的三种定位机制 标准文档流:从上到下.从左到右,由块级标签(独占一行div ul li dl dt )和行级元素(同一行显示)组成 自动居中 margin:0 auto:设置ma ...
- 关于css脱离标准文档流的两种方式
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- html脱离标准文档流,关于css脱离标准文档流的两种方式
所谓脱离标准文档流就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. 不浮动的盒子会无视浮动的盒子,假使现有两个盒子,一个浮动一个不浮动,则浮动的盒子会覆 ...
- HTML浮动导致高度塌陷,HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- html自适应_web前端入门到实战:HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- css什么操作下会脱离文档流
css操作脱离文档流 1.float 浮动布局 2.position:absolute;绝对定位 3.position:fixed;固定定位 position:relative 相对定位不会脱离文档 ...
- HTML05——行内块级元素_文档流_font属性_盒子模型_练习
目录 行内块级元素 文档流 font属性 文本段落 文字属性 盒子模型 概念和属性 常见问题 块元素和行元素的相互转换 display属性 overflow属性 边框.宽度与高度 浮动float 练习 ...
- HTML5+CSS3学习笔记(三)文档流和盒子模型【附练习:图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记 文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
- 05-CSS 权重 盒模型 标准文档流 浮动
一.权重问题 1.1. !important 标记 可以通过 k : v !important 来给一个属性提高权重,这个属性的权重是无穷大的. <style>.spac2{color: ...
最新文章
- 2022-2028年中国木门行业投资分析及前景预测报告(全卷)
- oracle 27140,ORA-27140 ORA-27300 ORA-27301
- java 静态方法 实例方法的区别_java 静态方法和实例方法的区别
- Android开发切换host应用
- html中的高和宽背景色怎么写,css background-size与背景图片填满div
- 自定义构建基于.net core 的基础镜像
- SpringCloud工作笔记078---SpringBoot中使用sping事件驱动模型
- java ftl crud_使用JDBC完成CRUD(增删改查)
- 1011. A+B和C (15)-PAT乙级真题
- 使用MATLAB转换图片为数据进行vga显示
- 基于itchat实现微信群消息同步机器人
- 大数据:新动力 新机遇 新途径
- 小说php 站点源码下载,PTCMS小说站源码
- NDVI 数据处理,及估算植被覆盖度(一)
- 武汉科技大学计算机实验预约系统,实验室与设备管理处
- java直接控制飞鹅打印机_智慧餐厅,飞鹅智能云打印机设置教程
- 无法找到元素 ‘aop:aspectj-autoproxy‘ 的声明
- 两年工作经验成功面试阿里P6总结(配答案)
- Git 中 cat 的使用
- 第一节 java数据类型