一些概念
CSS 盒子模型
css 盒模型本质上是一个盒子,封装周围的html元素,盒模型结构(从外到里):
外边距:决定了元素与元素之间的距离,我称之为”社交距离“;
边框:就是这个盒子的边框,是否有边框,边框的粗细颜色,甚至可以设置边框的阴影等;
内边距:就是实际元素内容跟边框的距离,假设边框为一个表格的话,内边距就是决定表格内容是要在左上、右下、还是居中;
关于 BFC 你了解哪些
BFC 是什么 :
一句话:块状格式化上下文
通俗解释:BFC 是一个独立的渲染区域,感觉就像是一个结界,让处于 BFC 内部和外部的元素互相隔离,使内外元素的定位不会相互影响。
BFC 规则 :
-
计算
BFC
的高度时,浮动元素也参与计算
怎么实现 BFC :
BFC的触发条件贼多,举几个常见的例子:
-
元素设置浮动:float 除 none 以外的值
-
元素设置绝对定位,position: absolute/fixed
-
overflow 值为:hidden、auto、scroll
-
display 值为:inline-block、table-cell、table-caption、flex
BFC 有哪些特点 :
我的理解 BFC 没有特点,BFC 是个规则,这个规则就是它的特点,在某下场景下使用 BFC 规则所实现的效果,就是它的特点。
例如两个块元素垂直方向的外边距会重叠,那么就可以使用 BFC 的隔离规则,做出调整,使其不会重叠,那么这个就是 BFC 的特点:防止垂直方向的外边距重叠。
CSS3 新特性
-
选择器
-
新样式:边框、背景、文字、颜色
-
transition 过渡
-
transform 转换
-
animation 动画
-
颜色渐变
-
布局: flex布局、栅栏布局
CSS 有哪些选择器以及它们的优先级
id选择器(id)> 类选择器(class)> 元素选择器 > 通用选择器(*)
(选择器的优先级,可以理解为越具体优先级越高)
注:
!important
例外规则当在一个样式声明中使用一个
!important
规则时,此声明将覆盖任何其他声明。虽然,从技术上讲,!important
与优先级无关,但它与最终的结果直接相关。使用!important
是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有!important
规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。
一些实践
如何实现水平垂直居中
如何清除浮动
更新中。。。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。