宁波网站推广方法,大连工业大学图书馆,有什么推广方法,媒介星软文平台目录 1.css中可继承与不可继承属性有哪些
2.link和import的区别
3.transition和animation的区别
4.margin和padding的使用场景
5.#xff1a;#xff1a;before和#xff1a;after的双冒号和单冒号有什么区别#xff1f;
6.display:inline-block什么时候会显示间隙
7…目录 1.css中可继承与不可继承属性有哪些
2.link和import的区别
3.transition和animation的区别
4.margin和padding的使用场景
5.before和after的双冒号和单冒号有什么区别
6.display:inline-block什么时候会显示间隙
7.如何判断元素是否到达可视区域
8.z-index属性在什么情况下会失效
9. Sass,Less是什么为什么要使用它们
10.对媒体查询的理解 1.css中可继承与不可继承属性有哪些
一,无继承性的属性
display规定元素应该生成的框类型文本属性
vertical-align垂直文本对齐text-decoration规定添加到文本的装饰text-shadow文本阴影效果white-space空白符的处理unicode-bidi设置文本的方向 3.盒子模型的属性widthheightmarginborderpadding 4.背景属性backgroundbackground-colorbackground-imagebackground-repeatbackground-positionbackground-attachment 5.定位属性floatclearpositiontoprightbottomleftmin-widthmin-heightmax-widthmax-heightoverflowclipz-index 6.生成内容属性contentcounter-resetcounter-increment 7.轮廓样式属性outline-styleoutline-width、outlien-coloroutline 8.页面样式属性sizepage-break-beforepage-break-after 9.声音样式属性pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二有继承性的属性 1.字体系列属性
font-family字体系列font-weight字体的粗细font-size字体的大小font-style字体的风格 2.文本系列属性
text-indent文本缩进text-align:文本水平对齐line-height行高word-spacing单词之间的简距letter-spacing中文或字母之间的间距text-transform控制文本大小color文本颜色 3.元素可见性
visibility控制元素显示隐藏 4.列表布局属性
list-style列表风格 5.光标属性
cursor光标显示为何种形态 2.link和import的区别
两者都是外部引用css的方式它们区别如下
link是XHTML的标签除了加载CSS外还可以定义RSS等其他事务import属于CSS范畴只能加载css。link引用css时在页面载入时候同时加载import需要页面网页完全载入以后加载。link是XHTML标签无兼容问题import是在CSS2.1提出的低版本的浏览器不支持link支持使用JavaScript控制DOM去改变样式而import不支持 3.transition和animation的区别
transition是过渡属性强调过渡它的实现需要触发一个事件比如鼠标移动上去焦点点击等才执行动画。它类似于flash的补间动画设置一个开始关键帧一个结束关键帧。animation是动画属性它的实现不需要触发事件设定好时间之后可以自己执行且可以循环一个动画。它也类似于flash的补间动画但是它可以设置多个关键帧用keyframe定义完成动画。 4.margin和padding的使用场景
需要在border外侧添加空白且空白处不需要背景时使用margin需要在border内侧添加空白且空白处需要背景时使用padding。 5.before和after的双冒号和单冒号有什么区别
1.冒号用于css3伪类双冒号用于css3伪元素。
2.before就是以一个子元素的存在定义在元素主体内容之前的一个伪元素。并不存在于dom之中只存在于页面之中。
注意 :before 和 :after 这两个伪元素是在CSS2.1里新出现的。起初伪元素的前缀使用的是单冒号语法但随着Web的进化在CSS3的规范里伪元素的语法被修改成使用双冒号成为::before、::after。 6.display:inline-block什么时候会显示间隙
有空格时会有间隙可以删除空格解决。margin正值时可以让margin使用负值解决使用font-size时可通过设置font-size0letter-spacingword-spacing解决。 7.如何判断元素是否到达可视区域
以图片显示为例
window.innerHeight是浏览器可视区的高度document.body.scrollTop||document.doucmentElement.scrollTop是浏览器滚动过的距离imgs.offsetTop是元素顶部距离文档顶部的高度包括滚动条的距离内容达到显示区域的img.offsetTopwindow.innerHeightdocument.body.scrollTop 8.z-index属性在什么情况下会失效
通常z-index的使用是在两个重叠的标签在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要时relativeabsolute或是fixed。
z-index属性在下列情况下会失效
父元素position为relative时子元素的z-index失效。解决父元素position改为absolute或static元素没有设置position属性为非static属性。解决设置该元素的position属性为relativeabsolute或fixed中的一种元素在设置z-index的同时还设置了float浮动。解决float去除改为displayinline-block 9. Sass,Less是什么为什么要使用它们
它们都是css预处理器是css上的一种抽象层。他们是一种特殊的语法/语言编译成css。例如Less是一种动态样式语言将css赋予了动态语言的特性如变量继承运算函数Less既可以在客户端运行也可以在服务器端运行。
为什么要使用它们
结构清晰便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理 减少无意义的机械劳动。可以轻松实现多重继承。 完全兼容 CSS 代码可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展所以老的 CSS 代码也可以与 LESS 代码一同编译。 10.对媒体查询的理解
媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成例如宽度高度和颜色。媒体查询添加自CSS3允许内容的呈现针对一个特定范围的输出设备而进行裁剪而不必改变内容本身适合web网页对应不同型号的设备而做出对应的响应适配。
媒体查询包含⼀个可选的媒体类型和满⾜CSS3规范的条件下包含零个或多个表达式这些表达式描述了媒体特征最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示⽂档所使⽤的设备类型并且所有的表达式的值都是true那么该媒体查询的结果为true。那么媒体查询内的样式将会⽣效
!-- link元素中的CSS媒体查询 --
link relstylesheet media(max-width: 800px) hrefexample.css /
!-- 样式表中的CSS媒体查询 --
style
media (max-width: 600px) { .facet_sidebar { display: none; }
}
/style简单来说使用media查询可以针对不同的媒体类型定义不同的样式。media可以针对不同的屏幕尺寸设置不同的样式特别是需要设置响应式的页面media是非常有用的。当重置浏览器大小的过程中页面也会根据浏览器的宽度和高度重新渲染页面。
