网站建设工作讲话,插画师培训网站建设,整屏网站模板,wordpress多说插件下载地址1、CSS 伪元素用于向某些选择器设置特殊效果#xff08;用来当作一个东西的#xff0c;跟一个元素差不多#xff0c;但不是元素#xff09;。 ① :frist-line伪元素#xff1a;用于向文本首行设置特殊样式#xff0c;但是只能用于块级元素。 以下属性可应用于 “ frist-l…1、CSS 伪元素用于向某些选择器设置特殊效果用来当作一个东西的跟一个元素差不多但不是元素。 ① :frist-line伪元素用于向文本首行设置特殊样式但是只能用于块级元素。 以下属性可应用于 “ frist-line ” 伪元素 font、color、background、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear 。 ② :first-letter伪元素用于向文本首字母设置特殊样式只能用于块级元素。 以下属性可应用于 “ first-letter ” 伪元素 font、color、background、margin、padding、border、text-decoration、vertical-align(仅当float为none时)、text-transform、line-height、float、clear 。 ③ 伪元素和css类可以配合使用p.article: first-letter { }可以使所有 class 为 article 的段落的首字母样式改变 。 ④ 多重伪元素可以结合多个伪元素来使用。p: first-letter { }p: first-line { }段落的第一个字母根据p: first-letter具体样式显示第一行其余文本根据p: first-line具体样式显示段落中其余文本以具体段落设置的其他样式显示。 ⑤ :before伪元素可以在元素内容前面插入新内容 。 ⑥ :after伪元素可以在元素的内容之后插入新内容 。 ⑦ 许多人喜欢给 blockquote 引用段添加巨大的引号作为背景这种时候我们就可以用 :before 来代替 background 了既可以给背景留下空间还可以直接使用文字而非图片 blockquote::before { content: open-quote; position: absolute; z-index: -1; color: #DDD; font-size: 120px; font-family: serif; font-weight: bolder; } ⑧ 清除浮动 .clear-fix { *overflow: hidden; *zoom: 1; } .clear-fix:after { display: table; content: ; width: 0; clear: both; } 2、CSS 伪类用于向某些选择器添加特殊的效果用来选择的 ① :active向被激活的元素添加样式 ② :focus向拥有键盘输入焦点的元素添加样式 ③ :hover当鼠标悬浮在元素上方时向元素添加样式 ④ :link向未被访问的链接添加样式 ⑤ :visiter向已被访问的链接添加样式 ⑥ :first-child向元素的第一个子元素添加样式 ⑦ :lang向带有指定lang属性的元素添加样式使你有能力为不同的语言定义特殊的规则 q:lang(no){ quotes: ~ ~ } p文字q langno段落中的引用的文字/q文字/p 3、解决塌陷清除浮动 ① 添加空元素 经典的解决方法就是在浮动元素下方添加一个非浮动元素。代码这样写 div
div stylefloat:left;width:45%;/div div stylefloat:right;width:45%;/div div styleclear:both;/div /div 原理是父容器现在必须考虑非浮动子元素的位置而后者肯定出现在浮动元素下方所以显示出来父容器就把所有子元素都包括进去了。这种方法比较简单但是要在页面中增加冗余标签违背了语义网的原则。 ② 浮动的父容器 另一种思路是索性将父容器也改成浮动定位这样它就可以带着子元素一起浮动了。 div stylefloat:left; div stylefloat:left;width:45%;/div div stylefloat:right;width:45%;/div /div 这种方法不用修改HTML代码但是缺点在于父容器变成浮动以后会影响到后面元素的定位而且有时候父容器是定位死的无法变成浮动。③ 浮动元素的自动clearing让父容器变得可以自动清理clearing子元素的浮动从而能够识别出浮动子元素的位置不会出现显示上的差错。要做到这点只要为父容器加上一条overflow: hidden的CSS语句就行了。代码这样写 div styleoverflow: hidden; div stylefloat:left;width:45%;/div div stylefloat:right;width:45%;/div /div 这种方法的缺点主要有二个一个是IE 6不支持另一个是一旦子元素的大小超过父容器的大小就会出显示问题。 ④ 通过CSS语句添加子元素呢这样就不用修改HTML代码 .clearfix:after { content: \0020; display: block; height: 0; clear: both; } .clearfix { zoom: 1; } clearfix是父容器的class名称content:020;是在父容器的结尾处放一个空白字符height: 0;是让这个这个空白字符不显示出来display: block; clear: both;是确保这个空白字符是非浮动的独立区块。添加一条IE 6的独有命令zoom:1;就行了这条命令的作用是激活父元素的hasLayout属性让父元素拥有自己的布局。IE 6会读取这条命令其他浏览器则会直接忽略它。 4、什么情况下hidden不起作用 position设置成fixedoverflow的hidden不起作用。 5、css盒子模型问的是border、padding、margin三个属性如何作用在一个块级元素上 一个盒子的宽度 border padding width(content内容的宽度)。 我想给一个给一个盒子加一个宽度然后再加一个padding但是这个盒子原本的宽度不改变也就是说width的值没有改变且不会因为加了padding而往外扩增该如何做有两种方式 ① 当一个块元素没有设置width时这个盒子的宽度是默认填充父元素的宽度这时随便给这个块元素加padding都是向内扩展的不会向外扩展。 ② border-sizing: content-box / border-box / inherit ; content-box宽度和高度分别应用到元素的内容框在宽度和高度之外绘制元素的内边距和边框。 border-box为元素设定的宽度和高度决定了元素的边框盒就是说,用border的宽度来指代width把加上border、padding之后的宽度用width强行给限制住然后宽度也就会变成向内扩展。 inherit规定应从父元素继承 box-sizing 属性的值。 6、关于字体的说一下rem这个单位移动端产生和设置 em是相对于父元素的font-sizerem是相对于根元素的font-size。 rem的补充 ① 对于不支持它的浏览器应对方法也很简单就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小 ② IE9/IE10在用于伪元素时或者使用字体简写声明时不支持rem ③ IOS Safari5.0-5.1虽然支持rem但是在使用媒体查询时不支持rem。 7、如何在css代码里提升代码的优先级a { color:red;} 用什么方法覆盖掉 解决 ① body a { color:red;}优先级计算公式标签1id100class10加起来就是他的优先级。 ② 在color后面加一个!important强行将优先级提升到最大。 ③ !important提升指定样式规则的应用优先权。 8、有两个CSS语句能起到隐藏节点的作用visibility和display 1visibility 规定了元素是否可见即使不可见也会占用上面的空间在这里就是在指它与display的不一样了。 2display 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型如果使用 display 不谨慎会很危险因为可能违反 HTML 中已经定义的显示层次结构。对于 XML由于 XML 没有内置的这种层次结构所有 display 是绝对必要的。 3对比 相同点都有相同的功能就是隐藏。 不同点当我们定义了display后在渲染树中不会引擎是不会去构建这个框的。而visibility当我们使它隐藏的时候他在渲染树中会构建只是不去渲染。这也就是W3c上面所说的不可见会占空间的原因。他们两者在优化中visibility会显得更好因为我们不会因为它而去改变了文档中已经定义好的显示层次结构了。 [转载自http://www.cnblogs.com/xsilence/p/6050412.html]转载于:https://www.cnblogs.com/gw1016/p/6050459.html
