前端第五课----(默认显示类型和显示类型转换)
块级元素特性:
block(div/p/dl/form/h1~h6/ol/ul)
1.独占一行
2.高度由里面的元素撑开
3.宽度默认100%(继承父元素宽度)
4.可以设置外边距/内边距
6.p标签下不可以包裹块级元素(只存放文本)
行内元素特性:
inline:(a/b/em/i/img/span)
1.和其他行内元素处于同一行
2.不支持宽高
3.上下外边距无效,auto无效(不支持auto居中)
4.内边距只对内联元素产生影响,无块级元素
5.标签之间的空格解析
6.a标签能包裹块级元素(特殊,区域链接)
行内块级:(集合两种行内元素的性质inline-bock:)
1.本质上是行内元素,具有行内元素的性质
2.支持宽高
3.上下外边距有效,auto无效(不支持auto居中)
4.内边距只有对内联元素产生影响,无视块级元素
5.标签之间的空格解析
6.img标签不是行内块元素(是行内元素,但是可以设置宽高)
设置行内块级元素会遇到的问题:
将两个行内元素或块级元素以回车隔开且再将它设置为行内块级后,两个行内块级元素之间会产生空格(回车被解析为空格)。解决方法:
1.设置其父级元素font-size=0;
2.删除标签之间的回车;
3.从根本解决问题,(不要使用)
字符和数字会被解析为一个字符串,会超出设置的范围。
两个行内块级元素存在时,其中一个会与另一个块级元素内容的最低端对齐。解决方法:设置vertical-align:top;
浏览器内核:
内核名称:Trident(IE内核)-IE系列/360浏览器.猎豹浏览器/百度浏览器/世界之窗 -ms-
Gecko(Firefox内核)->火狐浏览器 -moz-
webkit(Safari内核,Chrome内核原型,开源)->苹果safari浏览器/安卓默认浏览器 -webkit-
Blink->Chrome(谷歌自主研发) -webkit-
Opera现已改用Google Chrome的Blink内核 -o-
现在最新版的浏览器基本都支持css3基本都不用写前缀,写前缀是为了向前兼容老版本的浏览器
写法:-o-animation:; -ms-animation:; -moz-animation:;这样可以兼容不同的浏览器。
元素的隐藏:
元素设置为display:none;整个元素会完全消失,浏览器不进行解析。与block匹配使用;
元素的可见性:
元素默认为visibility:visible;
元素的不可见visibility:hidden;(元素只是不显示但存在于原来位置)效果等同于–
opacity:0;(设置的是标签的透明度里面内容也会变透明);
溢出:
overflow:hidden;(超出范围的内容会被藏起来)
默认值:overflow:visible;
**加载文本滚动条:**overflow:auto;(文字超出是才会显示滚动条)
无论有无内容都会显示滚动条:overflow:scroll;(横纵滚动条都存在)
overflow:scroll-x:(只存在横向滚动条)
overflow:scroll-y;(只存在纵向滚动条)
overflow-x:hidden(隐藏横向滚动)纵向同理。
默认样式清除:
li的小点清除
a清除标签下划线 改变颜色:color:…;