CSS 基础点集锦一:盒子模型、浮动、清除浮动
示意图(图片来自w3school):
说明:上图中,由内而外依次是
元素内容(content)
内边矩(padding-top、padding-right、padding- bottom、padding-left)
边框(border-top、border-right、border-bottom、border- left)
外边距(marging-top、margin-right、margin-bottom、margin-left)。
内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。而且,外边距可以是负值,而且在很多情况下都要使用负值的外边距。
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
提示:背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:
* { margin: 0; padding: 0; }
在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图(图片来自w3school):
#box { width: 70px; margin: 10px; padding: 5px; }参考:点击打开链接
参考:点击打开链接
案例:126邮箱
其所用图片:
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:
再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
CSS float 属性
在 CSS 中,我们通过 float 属性实现元素的浮动。
如需更多有关 float 属性的知识,请访问参考手册:CSS float 属性。
w3school拓展阅读:点击打开链接
由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。
3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
解决方法:
clear: both清除产生浮动 父级div定义 overflow:hidden对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
.clearFix清除浮动(参考:点击打开链接)
.clearFix:after { content: "."; /*内容为“.”就是一个英文的句号而已。也可以不写。*/ display: block; /*加入的这个元素转换为块级元素。*/ clear: both; /*清除左右两边浮动。*/ visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已;*/ line-height: 0; /*行高为0;*/ height: 0; /*高度为0;*/ font-size: 0; /*字体大小为0;*/ .clearFix { *zoom: 1; }
在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。
在标准浏览器下,.clearFix:after这个伪类会在应用到.clearFix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。
在需要清除浮动的时候,只要写一个.clearFix就行了,然后在需要清浮动的元素中 添加clearFix类名就好了。 作者:jiankunking 出处:http://blog.csdn.net/jiankunking
CSS躬行记(4)——浮动形状 CSS规范新增了一个模块:CSS Shapes,shape-outside属性属于该模块,它能影响浮动元素周边内容流的形状(即浮动形状),可接收三类值:形状盒子、函数和图像。
相关文章
- 【NLP基础】英文关键词抽取RAKE算法
- 每天20分钟之spring-cloud-gateway基础四自定义过滤工厂
- Log4j2 Demos(基础/时间&大小回滚/定期删除/日志脱敏)「建议收藏」
- css规则定义的分类,CSS规则定义英汉对照表[通俗易懂]
- CSS基础笔记——超链接样式
- 在html中加入外部css样式,如何引入CSS样式表?
- 【前端就业课 第二阶段】CSS 零基础到实战(04)定位
- CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战(07)
- 持续集成gitlab-ci.yml配置文档基础
- web基础知识_Web开发基础
- 从头学前端-CSS基础05
- CSS 基础 之 基础选择器+字体文本相关样式
- CSS基础学习(3)
- 从头学前端-CSS基础05
- 【DSP视频教程】第11期:插补算法,曲线拟合丝滑顺畅,统计函数和基础函数加速实现,汇集SIMD,饱和和MAC乘累加应用实战(2023-02-12)
- Java岗大厂面试百日冲刺 - 日积月累,每日三题【Day07】——Java基础篇
- 【愚公系列】2023年03月 其他-Web前端基础面试题(数据结构和算法_8道)
- Activity基础篇
- CSS 基础
- 一文搞懂HTTPProxy丨含基础、高级路由、服务韧性
- Linux基础:巡检Linux状态 网络IO 、磁盘、CPU、内存
- 前端基础-CSS是什么详解编程语言
- Scalaz(1)- 基础篇:隐式转换解析策略-Implicit resolution详解编程语言
- Java基础详解编程语言
- CSS基础 – position详解编程语言
- CSS基础 – 弹性盒子模型 – flex布局详解编程语言
- Go语言Base64编码——电子邮件的基础编码格式
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- 从Redis中获取数据熟悉基础数据类型(获取redis中数据类型)
- juqery学习之六CSS--css、位置、宽高
- php压缩多个CSS为一个css的代码并缓存
- 零基础写python爬虫之抓取糗事百科代码分享