前端学习笔记(12)之css一些无聊的知识点

时间:2020-7-31 作者:admin


BFC、布局、属性选择符、非IE常见bug

BFC

BFC:
块级格式化上下文 -> 独立的渲染区

  • BFC布局规则:
    一、内部的Box会在垂直方向,一个接一个地放置。
    二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(按照最大margin值设置)
    三、每个元素的margin box的左边, 与包含块border box的左边相接触
    四、BFC的区域不会与float box重叠。
    五、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
    六、计算BFC的高度时,浮动元素也参与计算

  • BFC的触发条件:
    根元素(html)
    float属性不为none
    position为absolute或fixed
    display为inline-block, table-cell, table-caption, flex, inline-flex
    overflow不为visible

  • BFC的应用
    1、自适应两栏布局
    2、清除内部浮动
    3、防止margin上下重叠

##圣杯布局、双飞翼布局
这两种布局都是三列布局,只是叫法不一样,两边固定,中间高度自适应。

  • 圣杯布局
    两侧用float 设置两个div,中间的用overflow:hidden(开启bfc)来控制宽度。
  • 双飞翼布局
    *两侧还是用浮动,假设两侧浮动的div宽度是150px,中间的部分在外边套一个div,高100%,左右设置上padding:150px,把子元素挤到中间。子元素高100%。

计算值的表达式 calc()

计算宽高的的表达式:calc( 100%-150px )
100% * 2
100% – 10px
10em – 10px

width的属性值

fill-available 合理分配有效剩余空间
min-content 找子元素最小的宽度
max-content 找子元素最大的宽度
fit-content 找子元素内容的宽度。按照子元素的宽度进行设置

雪碧图

背景图整合规则:
1:整合的大图必须是透明
2:小图标尽量上下排列
3:小图标之间的间距根据实际需求留出足够大小。

非IE浏览器常见bug

1:图片会把容器撑大大约3px.
css hack:
a:img标签两侧不要回车
b: img{display:block;}

2:表单元素对齐不一致:
css hack:
给input添加浮动

3:按钮大小不一致:
a:如果一个input按钮有边框,在input按钮的外面套一个元素,给元素添加边框
b: 如果一个按钮是一张图片的情况,直接切图,做背景即可
c: 不在表单里面的按钮,都用a模拟。

4:透明属性opacity:
css hack:
opacity:0.5;
filter:alpha(opacity=50);

5:鼠标指针BUG: cursor:hand; 不兼容
CSS hack:
cursor:pointer; 手指形状

cursor:
auto默认
crosshair加号
text文本
wait等待
help帮助
progress过程
inherit继承
move移动
ne-resize向上或向右移动
pointer手形

属性选择符(通过html属性选择元素)

选择符[属性]{ } -> 带有当前属性的标签会匹配
选择符[属性=“属性值”]{} -> 属性和属性值都需要匹配
选择符[属性~=“属性值”]{} -> 属性值是一个词列表。包含当前词的时候就匹配
选择符[属性*=“属性值”]{} -> 属性值包含当前字符即可匹配。
选择符[属性^=“属性值”]{} -> 属性值必须是当前字符开头可匹配
选择符[属性$=“属性值”]{} -> 属性值必须是当前字符结尾可匹配
选择符[属性|=“属性值”]{} -> 属性值仅是当前词,或者是以当前词- 开头 则匹配 ”left-con“

浏览器四大内核

Trident 代表作:IE
Gecko 代表作:Mozilla
Webkit 代表作:苹果、之前版本的谷歌
Blink 代表作:新版本谷歌、新版本Opera

形成兼容的根本原因:因为内核不同。

结构性伪类

选择符:first-child{ }
选择符:last-child{ }
选择符:nth-child(number){ }
选择符:nth-last-child(number){ }
选择符:only-child{ }

选择符:first-of-type{ }
选择符:last-of-type{ }
选择符:nth-of-type(number){ }
选择符:nth-last-of-type(number){ }
选择符:only-of-type{ }

最后补充,选择符 :empty{} 选中全部的空标签。
:foot{}捕获的元素是根标签。

每日一丧

等不到的晚安别等了,挤不进的世界别挤了,走不下去的路别走了,不该爱的人也别爱了。
前端学习笔记(12)之css一些无聊的知识点

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。