前端知识点——五大主流浏览器及其内核
IE浏览器 内核是trident
Firefox(火狐浏览器) 内核是Gecko
Google chrome 内核是webkit/blink
Safari(苹果浏览器) 内核是webkit
opera(欧朋浏览器) 内核是presto
前端知识点——css选择器及其权重
css选择分为7种:分别是 通配符选择器/标签选择器/伪元素选择器/类名选择器/属性选择器/伪类选择器/id选择器。
css选择器权重比较
!important 权重无穷
行间样式 权重1000
id选择器 权重100
class|[属性选择器]|伪类 权重10
标签选择器|伪元素 权重1
通配符选择器 权重0
前端知识点——伪类与伪元素
伪类
伪元素
前端知识点——块级元素|行级元素|行级块元素
块级元素
特点:独占一行,可以通过css改变宽高,display:block;
举例:div p ul li ol li hr form address
行级元素
特点:内容决定元素所占位置,不可以通过css改变宽高,display:inline;
举例:span strong em a del
行级块元素
特点: 内容决定大小,可以改变宽高,display:inline-block;
举例:img
前端知识点——position的常用属性
position:absolute;绝对定位
特点:脱离原来位置进行定位,相对于最近的有定位的父级进行定位,如果没有有定位的父级,则相对于文档进行定位。
position:relative;相对定位
特点:保留原来位置进行定位,相对于自己原来的位置进行定位。
position:fixed;固定定位
特点: 固定到某一位置,不会随着页面的滚动而改变位置。
前端知识点——parseInt()函数
parseInt();可以有一个参数,也可以有两个参数。
当有一个参数的时候,执行此函数的结果就是将此参数转化为整数,此参数默认为十进制数。
当有两个此参数时,如果第一个参数是“0x”开头的,则代表是16进制的,如果第一个参数是“0”开头的,则代表是8进制的,然后将这个数转化成第二个参数的进制的。
parseInt(021,8); 第一个参数是0开头的,则这个数是8进制的,所以转化成十进制的结果就是 2*8+1=17,第二个参数是8,则需要将十进制的17转化为8进制,结果就是15.
前端知识点——浮动流
float:left/right;浮动元素产生了浮动流。
浮动元素产生了浮动流。所有产生了浮动流的元素,块级元素看不到他们,产生了bfc的元素和文本类属性(inline)的元素以及文本都能够看法浮动元素。
清除浮动的几种方法:
触发块级元素的bfc属性。 float:left/right;position:absolute;overflow:hidden;
在浮动元素的兄弟元素上,新增一个p元素或者div元素,添加一个额clear类名,css属性为clear:both;
给浮动元素的父级添加clearfix属性,给父级的伪元素添加以下css代码,伪元素的三件套:
.clearfix::after{
content:"";
display:block;
clear:both;
}
position:absolute;float:left/right;
添加了这两种css样式的元素,可以打元素内部把元素转换成 inline-block;行级块元素的特征是L元素根据宽高改变位置,且可以通过css设置宽高。
文本元素溢出打点
单行文本溢出打点
禁止换行:white-space:nowrap;
溢出部分隐藏:overflow:hidden
文本显示为点:text-overflow:ellipsis;
多行文本溢出打点
溢出部分隐藏:overflow:hidden;
文本显示为点:text-overflow:ellipsis;
将对象作为弹性伸缩盒子模型展示:display:-webkit-box;
限制在一个块元素显示的文本的行数:-webkt-line-clamp:2;
设置或检索伸缩盒子对象的子元素的排列方式:-webkit-box-orient:vertical;
文字替换图片的方法:
html中写文字,css样式设置background-image:url(图片) no-repeat;
设置css样式。
text-indent:-9999px;
文字缩进,负值则表示文字会出显示区域。
white-space:nowrap;
设置文字不要换行。
overflow:hidden;
溢出部分隐藏。
这样设置的结果就是,如果css出现了问题,则Html中会显示文字,如果css没有问题,则展示图片。
文字替换图片的方法2:
考虑的原理是padding中可以出现背景图片但是不能出现内容,所以可以将元素高度设置为0;padding-top设置为元素的原有高度,overflow:hidden;
此时设置的文字不会展示,图片会展示,但是当css不识别的时候,只能展示为文字。