Skip to content

[css] 第87天 写出几个初始化CSS的样式,并解释说明为什么要这样写 #601

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第87天 写出几个初始化CSS的样式,并解释说明为什么要这样写

Activity

dondonZh

dondonZh commented on Jul 12, 2019

@dondonZh

去除margin 和padding还有一些属性 对布局带来的影响

xiangshuo1992

xiangshuo1992 commented on Jul 12, 2019

@xiangshuo1992
Contributor

li {list-style: none}
取消列表的标识符

nowherebutup

nowherebutup commented on Jul 12, 2019

@nowherebutup
padding:0;
margin:0;

为了解决各个浏览器显示不一样的问题

yangxy6

yangxy6 commented on Jul 12, 2019

@yangxy6
// 自适应高度
html,
body {
  width: 100%;
  height: 100%;
}
// 清除浮动
.clearfix {
  zoom: 1;
}
.clearfix::before,
.clearfix::after {
  display: table;
  content: '';
}
.clearfix::after {
  clear: both;
}
encountermm

encountermm commented on Jul 12, 2019

@encountermm

引用css初始化库,如;
normalize.css

  1. 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异
    2.初始化CSS样式可以提高编码质量,保持代码的统一性,如果不初始化,重复的CSS样式很多。
webforworld

webforworld commented on Jul 12, 2019

@webforworld

outline:none
消除button的激活边框

542154968

542154968 commented on Jul 16, 2019

@542154968

reset.css

chenshijin1

chenshijin1 commented on Dec 5, 2020

@chenshijin1
/*清除元素默认的内外边距  */
* {
    margin: 0;
    padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {
    font-style: normal;
}
/*去掉列表前面的小点*/
li {
    list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
    border: 0;  /*ie6*/
    vertical-align: middle;
}

/*取消链接的下划线*/
a {
    text-decoration: none;
}

/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}
smile-2008

smile-2008 commented on Mar 3, 2021

@smile-2008

reset.css

normalize.css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@xiangshuo1992@dondonZh@542154968

        Issue actions

          [css] 第87天 写出几个初始化CSS的样式,并解释说明为什么要这样写 · Issue #601 · haizlin/fe-interview