黑马程序员技术交流社区

标题: 就css初始化谈一下我的理解 [打印本页]

作者: pangyutong 时间: 2017-11-22 18:31
标题: 就css初始化谈一下我的理解
首先：每个公司都有css初始化的一套标准，可就最底层来说也就是一些默认属性的修改不让默认的属性影响我们的布局。

就css来说，层叠样式表，层叠（动词）样式表（名词）个人呢认为就实操来说动来的更加重要毕竟动次打次动次打次《？o？》层叠层叠就是叠叠叠。。。罗汉？不是的是叠样式

废话少说，来码
---------------------------------假装<pre><hr></hr></pre>-----------------------------------------------
<pre 假装是代码>
/*基础常用元素常用初始化*/
html.body.ul.ol.li.dl等元素边距填充置空 margin：0；padding：0；//啊好基础，我都不好意思了

img.input.button 边框清除外边线（就是元素外包裹的那层）style给清理了border：none；outline-style：none；//啊还是好基础

ul.ol列表样式设为空 list-style：none；//高潮马上喷稍等

input上下填充清零字体重置 padding-top/bottom font-family等等//基础的就不咋说了欢迎留言我

select。input 行内元素垂直排列 verytical-align 设置为middle（内容与对象中部对齐）默认为baseline（与基线对齐） //属性可以查api去  强调里面的属性针对文本还是针对内容这是有区别的

textarea 文本区域默认可以拖动的我们关掉它 resize：none；

img去掉图片底侧默认的3（重点  敲黑板）像素空白 border：0 vertical-align：middle；

table边框合并为一条 border-collapse：collapse；

涉及文本表单切记标签内默认的文本修饰要清理不然后期要叠叠叠罗汉 text-decoration：none；
</pre假装是代码>
------------------------------------------------假装<pre><hr></hr></pre>--------------------------------
/*稍微不辣么基础*/
<pre假装是代码>
//其他不缩了就缩一下下div布局之前清除float（也叫闭合浮动专业的ing）

//参照淘宝京东
伪元素：

.clearfix:after{
content:"";
Visibility:hidden;
Display:block;
Height:0;
Clear:both;
}
.clearfix{Zoom:1;}  //兼容处理

双伪元素：.clearfix:before , .clearfix:after {
display : table ;
content : "." ;
}
.clearfix:after { clear : both ; }
.clearfix { zoom:1; } //兼容处理
</pre假装是代码>


                                             版权声明：以上为本人纯手工码，转载请标注出处。 @pangyutong

作者: stevent 时间: 2017-12-1 18:59
普遍存在于公共样式里

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2