CSS基础必备盒模型及清除浮动
盒模型
盒模型是有两种标准的,一个是标准模型,一个是IE模型。
css如何设置两种模型
这里用到了CSS3 的属性 box-sizing
/* 标准模型 */ box-sizing:content-box;/*IE模型*/ box-sizing:border-box;
行内元素
行内元素对margin的支持
行内元素不支持margin-top与margin-bottom。块级元素及行内块没有这个问题。
行内元素对padding的支持
行内元素设置padding-top会向上延伸一段距离,会覆盖住上面的节点。padding-bottom会向下延伸一段距离,会覆盖住下面的节点。块级元素及行内块没有这个问题。
JS获取宽高
通过JS获取盒模型对应的宽和高,有以下几种方法:
为了方便书写,以下用dom来表示获取的HTML的节点。
1. dom.style.width/height
这种方式只能取到dom元素内联样式所设置的宽高,也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话,通过这种方法是获取不到dom的宽高的。
2. dom.currentStyle.width/height
这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方式设置的样式,都能获取到。
但这种方式只有IE浏览器支持。
3. window.getComputedStyle(dom).width/height
这种方式的原理和2是一样的,这个可以兼容更多的浏览器,通用性好一些。
4. dom.getBoundingClientRect().width/height
这种方式是根据元素在视窗中的绝对位置来获取宽高的
5.dom.offsetWidth/offsetHeight
这个就没什么好说的了,最常用的,也是兼容最好的。
边距重叠
父元素没有设置margin-top,而子元素设置了margin-top:20px;可以看出,父元素也一起有了边距。
边距重叠解决方案(BFC)
首先要明确BFC是什么意思,其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”
BFC的原理
- 内部的box会在垂直方向,一个接一个的放置
- 每个元素的margin box的左边,与包含块border box的左边相接触(对于从右往左的格式化,否则相反)
- box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
- bfc的区域不会与浮动区域的box重叠
- bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
- 计算bfc高度的时候,浮动元素也会参与计算
怎么取创建bfc
- float属性不为none(脱离文档流)
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex,inline-flex
- overflow不为visible
- 根元素
应用场景
- 自适应两栏布局
- 清除内部浮动
- 防止垂直margin重叠
清楚浮动
浮动对页面的影响:
如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0,
下面的元素会自动补位,所以这个时候要进行浮动的清除。
方式一:使用overflow属性来清除浮动
.ovh{
overflow:hidden;
}
先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
注意:一般情况下也不会使用这种方式,因为overflow:hidden有一个特点,离开了这个元素所在的区域以后会被隐藏(overflow:hidden会将超出的部分隐藏起来).
方式二:使用额外标签法
.clear{
clear:both;
}
在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响.
a.内部标签:会将这个浮动盒子的父盒子高度重新撑开.
b.外部标签:会将这个浮动盒子的影响清除,但是不会撑开父盒子.
注意:一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签,造成结构的混乱.
方法三:使用伪元素来清除浮动(after意思:后来,以后)
.clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
方法四:使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
总结:第一种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到,第二种方法会增加许多不必要的标签,
所以我们尽量使用第三种方法来清除浮动,为什么不选择第四种方法呢?因为第四种是第三种的改良版
转载于:https://www.cnblogs.com/yiyi17/p/8744729.html
CSS基础必备盒模型及清除浮动相关推荐
- CSS 基础框盒模型介绍
当对一个文档进行布局(lay out)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box).CSS 决定 ...
- CSS基础(二)--盒模型与浮动
盒模型 认识width和height 一个盒子中主要的属性有5个:width.height.padding.border.margin. width是"宽度"的意思,CSS中wid ...
- CSS相关知识点:6种清除浮动和BFC
文章目录 CSS相关知识点:6种清除浮动和BFC 一.6种清除浮动 1.场景 2.原因 3.清除浮动 (1).给父级设置对应的高度 (2).给父级增加定位absolute (3).将父级也设计成浮动 ...
- CSS基础必备知识点01
CSS基础必备知识点 CSS(Cascading Style Sheme), 层叠样式表或级联样式表,简称样式表.它的作用是给HTML网页设置外观或者样式.其中外观或者样式指的是:HTML网页中的文字 ...
- CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...
- 【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点 思维导图 ...
- CSS基础:盒子模型和浮动
盒子模型 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子,封装HTML元素. 它包括:外边距(marg ...
- 深入css布局 (1) — 盒模型 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- CSS基础、盒子模型、选择器与权重
CSS基础.选择器与权重.盒子模型 一.CSS的字体属性 CSS Fonts(字体)属性用于定义字体系列,例如大小.粗细.和文字样式(斜体之类). 1.字体 CSS使用font-family属性定义文 ...
最新文章
- 32个笔画顺序表图片_32个笔画掌握透了,练字真的不难
- FineReport——权限分配以及自定义首页
- React Axios 请求解决跨域问题
- [AX]AX2012 纪录缓存
- 面试题: 数据库 已看1 视图 游标
- commons-io_从Commons CLI迁移到picocli
- 好消息,MaxtoCode完全支持2005BETA2版,多谢恩电提供的测试样例
- MySql 触发器同步备份数据表记录
- Eclipse:Cannot complete the install because of a conflicting dependency.问题解决
- 机器学习(十九)——PageRank算法, KNN, loss function详解
- 运算符与,|与||的区别
- NLP复习资料(3)-六~七章:马尔科夫模型与条件随机场、词法分析与词性标注
- ie浏览器如何实现scrollto_如何实现报表直接打印需求
- lol自动刷人机辅助_LOL玩家转DOTA2后如何适应
- JupyterLab显示pyecharts图像
- 刨根问底--struts-default.xml
- 设计模式(四)行为型模式
- c jni 调用java_JNI NDK (AndroidStudio+CMake )实现C C++调用Java代码流程
- 十天入门php,十天学会PHP之第十天
- python读取csmar_Python:爬取上市公司公告-Wind-CSMAR
热门文章
- 在iOS中求数组元素中最大数与最小数
- The difference between synchronous and asynchronous code in JavaScript
- IDEA无法识别pom.xml文件,内容全部显示为灰色,或者无颜色
- 在 Java 项目中打印错误日志的正确姿势,排查问题更方便,非常实用!
- 面试被问到“零拷贝”!你真的理解吗?
- 大数据架构如何做到流批一体?
- Elastic 的成功上市:偶然和必然
- Python 判断一个数是不是质数
- 怎么修改_PDF怎么修改文字?其实修改PDF内容很简单
- php类型优先级_PHP: 运算符优先级 - Manual