A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

pangyutong

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

© pangyutong 初级黑马   /  2017-11-22 18:31  /  1128 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

    首先:每个公司都有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假装是代码>
    <!--闭合浮动的方法有3+种,常用(定义为大佬们常用的就是通用的)就是上述,对于单句的解释感兴趣请参照api自己去看-->

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

1 个回复

倒序浏览
普遍存在于公共样式里
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马