尚硅谷前端基础 (53)

好，有关于核模型的一个基本的介绍，我们就说这么多了啊，也就是说这个基本的一些特点就具备这么多，当然还有一些特殊的地方，比如说特殊的边框啊，哎，比如说呃，盒子模型的特殊的一个状态是吧，我们先暂时先不说那些，我们还是呃先来往下说，再说个东西，然后我们来做几个练习。那这里面呢，我们来再说一个东西啊，基础知识我们叫做一个一零，我们叫做一个默认样式。点一个HTML，那什么叫做默认样式呢？我们来看一下啊，先写个页面出来，呃，直接给它运行一下。然后把这关掉，在这里边呢，我写个div，第二一个BOX1BOX1这啊我们来写一个样式style标签，Style标签里边我们是一个点一个BOX1，我写一个100 hi是一个100，然后borderer呢，我给它设置一个一个像素的一个solid力的一个这个黑色一个边框，那现在我们这个标签我就设置完了啊，就设置完了，那现在我们这儿就出现了一个这个黑色的一个div，对吧，黑色的一个div，这个div呢，它是在我们这个包Y里的啊包里的，但是这个时候我们要注意它有个问题，你来看这儿啊，你看我的这个div。

它是不是紧贴着我这个浏览器的边儿的，哎，很明显不是，它是一个什么呀，它是等于上下是不是有这么一个，有这么一个距离呀，哎，有这么一个距离，那这个时候问题来了，这个距离看起来好像是一个一个边距是吧，好像是外边距啊，或者是什么其他是什么东西，对吧？总之这个这儿会出现了一个这个距离，而这个距离我在页面里边，我有没有去设置，诶很明显我并没有设置，但是这个距离却实打实的在这儿显示出来了，那这是为什么？诶，这个又是一个什么东西啊，什么东西诶没设置，但是它却却有这是一个啊再来看啊，我在这写一个P标签，P标签写一个，我是一个段落，诶我是一个段落，然后呢，我多复制几个啊，复制几个，复制几个P标签，你发现什么呢？诶，我们这个P标签，你看前后是不是都会有这样一个这个距离啊，哎，前。

后都有这样一个距离，其实这儿应该也有，但是下面没写东西，看不见了，那这个距离很明显应该是一个外边距，或者是一个内边距，对吧，十有八九应该是外边距，但是这个时候你看我有没有给他设置外边距，哎，我没有给他设置，你我连P的样式我是不是都没写呀？哎，我就直接写了一个P标签没有设置啊，再来看写个谁呢？我写一个UL，哎，Ul里边我们放的是L，诶这个是我们这个列表向E。我复制几个啊复制几个，这来一个这个列表项二，这来一个列表项三，我们来看一下我们这LYLY，诶就更那什么了，哎，上面这编距可能是段落的，不用管它，但是你发现我这个是LY干嘛呢？是不是这一块有这么一个距离啊，诶这一块有一个距离，就是说它并不是贴着这个左边的啊，并不是仅仅贴在左边的，它是有这么一个距离，诶那问题来了，你像这些疑似于边距的东西，我们并没有去设置，但是在我们的哎页面里为什么还会存在有这些东西呢？哎，那这就是我们要说的一个东西，叫做一个默认样式，诶默认样式什么叫默认样式呢？诶通常情况下，诶通常情况下我们的浏览器它都为什么呢？诶都会为我们这个元素啊，设置什么呢？设置一些默认样式，为什么要设置默认样式，我们想一下。

我们之前说了，HTMR负责结构，而我们4SS负责表现，也就是说结构这个东西我们是看不见的，结构应该是看不像人类的骨架一样，骨头你是应该看不见的，所以按照道理来讲，如果你不写4SS，那应该网页里边你就什么都看不见，懂意思吗？因为结构嘛，结构应该就是看不见的，所以不写CSS就应该什么都看不见。但是我们的浏览器为了确保你在没有样式的时候，页面的信息也可以显示，所以浏览器都会给你添加一些默认样式，所谓默认样式就是你没有写样式的时候，它所存在的一个样式，啊，这叫做一个默认样式，那通常情况下默认样式，哎，我们说了默认样式的一个存在，哎，存在它会什么呢？诶，会影响到我们页面的一个布局，什么意思？也就是说浏览器已经给这些元素指定过一个值了，而这个值它不一定。

这是我想需要的，但是我想改的时候呢，哎，我改的时候可能稍微的麻烦一点，所以往往开发的时候我们必须要干嘛，哎，往往默认样式的存在会影响到什么呢？会影响到我们页面布局，通常情况下，通常情况下我们在编写我们这个网页时，我们必须要什么呢？诶必须要去除我们的这什么呀？诶去除掉我们浏览器的一个默认样式，为什么要去除掉诶因为诶首先默认样式大小，你不知道它设的是什么默认样式，第二一个哎不同的浏览器它的默认样式可能也不一样，比如说在一个浏览器里，默认样式是八像素，可能换一个就变成了六像素，所以这个时候其实我们说了不怕你是八，也不怕你是六，就怕什么呢？就怕你不统一，所以为了我们得到一个统一的效果，所以通常情况下，我们在编写一个网页的时候，都要把这个默认样式给它去掉啊，去掉这里面主要指的是我们这个PC端的页面啊P里。

如果是移动端，其实相对来说去的比较少啊，移动端的模式样式一般都比较统一，一般也去的比较少，主要是PC端我们要去除，那这里回到我们的页面里，那现在就产生一个问题，我怎么知道它有哪些默认样式？哎，换句话说，比如举个例子，现在我就想让这个div紧紧的贴到浏览器的边上，没有这个距离，那这个时候我是不是想把这个距离给它去掉啊？那这个东西我要怎么去？哎，你要去的话，你得先知道这个距离是谁的，是谁的，你再给谁去吧，哎，你不能瞎去，所以这里边我们要先看一下我的这个这个距离到底属于谁，怎么看，直接F12，诶在这个浏览器里点击F12，然后有一个元素查看器，你可以查看元素，点哪就看哪，我们来看一下，点这个div div你点开的话，你看啊，你看它实际上上边下边诶左边还有下边都没有边距，唯独有右边有这么大个一个。

边距为什么有这外边距，我们说了这个外边距是我们浏览器自己算出来的，哎，自己算出来，所以一看它是不是上下没有啊，诶所以你通过这个选中元素，你可以来查看这个东西，再或者干嘛呢，你直接选中它，选中它以后，你看这块有一个栏叫做computed computed计算的意思，直接点开的话，它会给你显示一个这个盒子的一个模型啊，盒子模型，当然这个模型有时候显显示的不是那么准确，比如说现在这个div的一个右外边距，它就没有体现出来，对吧？外边距没有体现出来，但是它这确实有，但是我们来看一下，你看它有没有上，外边距有没有左，有没有下，是不是都没有，包括右，他这也没有体现出来，但是实打实的确实有啊，确实有这么一个距离，只是它没有体现出来而已，但是很明显的看到这儿，即使在这个图这儿，它是也没有体现出上边还有左边这个圆具啊，哎，那也就是说这个距离它是不是div的，哎，不是div的，不是div能是谁的啊，不是div的就只能是它的。

负元素你不可能是P元素的，P元素它影响不到div对吧，所以它的负元素是人负元素是不是就是bodyy啊，哎，就是bodyy，所以这块我们直接点过来，我们来点body，哎，Body我们看到了，你看body的com显示什么Mar上边八个，左边八个，下边八个，然后还有右边八个，也就是说我们包Y有一个上下左右四个方向的一个外边距，也就正好是不是就是这个距离啊，你直接选择包Y，你看见了是不是正好是这儿有一个问距啊，而恰恰我们说了，为什么div是贴到这儿，就是因为包Y这儿有一个问问距，所以现在我们不想让div在这儿，那我们是要把包那个外边距给它去掉啊，哎，怎么去掉？我们直接写，非常简单，直接来一个这个body body，我们这儿直接来一个，不就是marin吗？现在有八个像做marin，我直接把这个marin啊变成一个零，再来看这个。

外边距是不是就没了，那你现在来看我的这个，我的这个这个是就贴到紧边上了啊，那这个外边距就被我们给去除掉了啊，去除掉了再看段落，段落这个距离你看是不是上下是不是都有一个距离啊，哎，上下都有一个距离，来我们选中这个P，我们来看一下P1选中你就看出来了，这个P元素是不是上下各带有一个外边距啊，哎，上下各带有一个外边距，所以这个时候我们要做的话，也只是把它给去掉就行了，但是这边我们要说一个问题，这个P有上下的外边距，第二个P它是不是也有一个上下外边距啊，但是你发现什么，他们两个P之间那个距离有没有采取一个诶。

有没有体现出两个外延距没有，他们之间距离是不是通常都只是一个外边距啊，哎，为什么只是一个，还是那一个特点，就是我们这个上下外边距发生了重叠啊，发生外边距重叠，所以你来看啊，我点中这个P，它上边距是一个16，下外边距也是一个16，而你写两个P的时候，他们的外边距并没有达到32这么大，为什么？哎，就是因为合并了，重叠了，所以就不会出现那么大的距离，如果如果没有合并的话，那就会出现一种奇怪的现象，这个距离最上边那个距离会比较的小，而中间的距离会比较比较大，但是有了合并就避免这个问题啊，所以咱们先不说它了，我们直接来给它去掉，直接来一个这个P，然后我们来一个叫做margin，诶，M0M0，然后这时候再看P之间那个间距是不是也就没了，哎，也没了，接着再往下看我们的ul，我们的ul，你看啊，Ul比较特殊。

啊，你看上下有16个外边距，诶左右还有诶这左边里边还有一个40像素的一个拍顶啊拍顶，那我们就不废话了，我直接来什么呢？哎，我直接来一个ULUL呢，哎，Margin给它去掉，哎，Margin就没了，但是这是不是还存在这个距离啊，哎，你看这个颜色，这个绿色的是吧，绿色的表示的是一个PA定，所以PA定我们给它去掉，我直接来一个P0，那这个时候PA定数也没了，哎那这样你看我们这个元素都变成了一个比较原始的一个状态啊叭，较原始状态，但是这个时候注意我们发现一个问题，我发现什么问题呢？我们发现与此同时ul开始，它里边是不是有一个有一个点那个项目符号啊，哎，那个大痦子对吧，有一大痦子，那个大痦子怎么也没了，哎，我去除marin，去除拍on的同时，是不是把它那个那项目符符号那个大黑雾的是不是给点进去了，有没有影响到那个项目符号，诶注意啊，我改一下，我这给它加一个marin left margin left呢我们就给它。

加一个这个20个像素，我们来看一下20个像素，哎，你看这点在不在，诶这点还在，这点还在，只是当你把这marin拍定都重置以后，这个点干嘛呀，点藏到这里边去了，所以是不是就导致看不见这个点了，哎导致看不见这个点了，那这个时候我们来先想一下，你们写这个玩意儿，我们需不需要这点，诶一般情况下这个点我们是不需要的啊，一般情况我们我们是不需要的，所以这个时候我还应该把这个点给它单独的去一下，怎么去，我们有一个东西叫做list style list style。

List style叫什么呢？哎，List就是列表，Style就是风格，这指的就是我们项目符号的风格，我直接给他设置一个什么呢？设置一个nu，这时候你再看这点还有没有了，哎，这个点就没有啊，所以这时候modern life你也可以给它去掉了，那这个里边我们现在啊，List这叫做去除我们这个项目符号啊，去除项目符号，那这样我们通过这样一种方式，就把我们的包地的P的，还有ul的，它上面所带的所有的默认样式，我们就都已经给它去除掉了，当然像div div没有什么默认样式对吧？都的是我们自己指定的，没有默认的，Li也没有啊，都没有默认样式，所以Li跟div我们就不用去了，对吧？也就是说我们去的就是三个body p，还有ul，但是这个时候就会产生一个一个问题。

什么问题呢？OK，我现在是去了，那我问你，我的网页里是不是只有body pul他们三个带有默认样式是不是，诶很明显不是只有他们有，其他的一些标签是不是也会有，那这个时候我要把所有标签都给它去了，那我这个时候就很麻烦了，我得先看看诶这个标签有没有默认样式，有我就去，没用还不能理他，那我就得把所有标签是不是都得考虑一遍呀？哎，那这样处理起来就会比较麻烦，每一次写个网页就这么来一套，每一次写就这么来一回，那这个东西是不是就很麻烦呀？诶很麻烦，所以这个时候通常情况下啊，我们不这么写，这么写比较麻烦，但是你要知道什么目的，这么写的目的就是把这些默认样式给它去除掉啊，给它去除掉，那不这么写你又要怎么写呢？啊，不这么写你要怎么写，那这里边我们要说一下，其实你会发现啊，我们在去除默认样式的时候，最主要的。

就是谁，就是margin和这个pading，因为margin和pading它会影响我们布局，也会影响元素的大小，所以通常情况下我们会把他们的margin和padding都给它去掉，那这里边也就是说实际上所有元素的margin还有pading我们是不是都不希望看见，哎，所以通常情况下我们最简单的做法就是一个星号MARIN0，然后PA掉零，最简单的做法就是这个，这样就可以把所有东西都给它去掉，那这样所有元素星号是不是表示所有元素，那MARIN0表示把marin设为零，PAIN0表示把PA定设为零，那我这么写完了以后，所有元素的marin和PA定就都变成了零，我就不用一个一个再写了，然后当你在遇到其他的时候，比如说你遇到了ul有list style，那你就给ul来一个list style单独再去一下就完事了，所以通常最简单的方式我们是这么写啊。

这么写的啊，所以这种方式是我们通常要写的，主要就是这个UL都不用考虑，主要就是这个星号这个啊，这个是我们通常要用的方式，好，那这两种方式看完了啊，两种方式看完了，这种方式，这种方式我们开发的时候会用，就是一些简单的页面，我写一些事例，我要一个个写太麻烦了，开发时候我会用，但是就是我们学简单的页面我们会用，但是我们真正要去做一些复杂的页面，其实我们应该严谨上来讲，我还是应该干嘛呢？一个一个去，我要把这些样式一个一个都去的非常非常的干净，因为什么呢？因为我这么去绝对会有残留，什么叫残留呢？一定会有一些标签，那个默认样式我去除不掉啊，去除不掉那问题就来了，哎呀，这能解决一下，哎，临时解决一下，但是它并不是一个最完美的方案，那这里边我们实际上需要一个比较完美的方案，可以把我们页面中的所有默认样式。

全都清楚，那怎么办呢？哎，那这里面注意了，我们就得。把我所有的标签，我们HTML里边，我们这儿是不是一共有145个标签啊，哎，我就需要把这145个标签都看一下，然后要找到这145个标签当中谁包含有默认样式，然后我再写一个CSS，把那个默认样式一个一个的给它去除掉，我这么一说，你这么一听，你是不是就会觉得很麻烦呀，哎，很麻烦，所以我们会不会那么做，会那么做，但是不是我们自己做，为什么？因为这种东西是一个很普遍的需求，不止你我有这个需求，别人去写的时候也会有这个需求，那既然别人也有这个需求，那我们干嘛不干脆把别人写好的拿过来呢？哎，拿过来呢？所以这里边我给你提供了两个我们常见的重置样式表，所谓的重置样。

表，就是这个样式表里专门是用来干嘛的，专门是用来清除我们浏览器的一个默认样式的，也就意味着如果你想要把浏览器的默认样式给它清除掉，你就直接把这两个样式表引入到你的网页中即可，所以我把他们啊，我们直接在我的网页里，我在我的项目里，我这里新建一个文件夹，叫做CSSCSS，然后。新建一个文件夹，叫做一个CSS，那刚才写的空格了啊，然后呢，我把这两个文件我给他拖进来。诶，OK，你不是想清除默认样式吗？怎么办？你直接link一下，通过link引入我们CSS，我们先引入的是一个下边CSS下边的一个RA set.css你看我引入完了是不是都都没了，哎，你看body上，Body上也没了，Div上本来就没有，段落上也没了，我们的ul是不是也没了？哎，所以你只需要引入它，所有的默认样式都会被清除啊，都会被清除，而且注意引的时候一定要注意，这个引入一定要在你的样式上边引入，因为我们这个样式谁在下边是不是谁的优先机高啊，谁在下边就是优先机一样的时候，谁在下边谁就生效，所以如果你把它放到你样式的下边，那很有可能它会把你的样式给你覆盖掉啊，所以这个东西写到最上边啊，最上边叫做一个reet.CSS为什么这玩意儿能这么神奇呢？其实也不神奇，你看它就是干嘛了，哎，你看前边是不是选择。

他去分组选了一堆标签啊，然后什么MARGIN0 paing0 border0，设成100%，也就是说他通过这些东西把我们这些标签，什么marging啊，Paing啊，这些东西是不是通通的给你去掉了，哎，去掉了等等等等啊，下边还有一系列的，我们就不一一展示了，总之他就是干了一件事儿，去除了我们浏览器的一个默认样式，而且这个还是一个比较，诶，比较这个经典的啊，是这么一个网站，这它一个官方网站，你看这还是2011年的一个版本，但是它也算是一个最新版，因为到现在的话，基本上它里边的常用的项都已经给我们包含里边了，我们也不需要对它进行修改了，所以直接粘过来就可以直接去使用啊，直接使用不用改它了，好，这个是我们一个版本叫做一个reet.CSS还有一个叫做normalize.css这个也是重置样式表啊，两个都是比较经典的，那我们来再引入一个这个。

的link我们叫做一个normal size，哎，比鞋盖CSS我们叫做一个normalize.css我引入完了以后，你会发现什么呢？哎，的确包的那个边距确实没了，确实没了，但是你会发现什么呢？你会发现P这个上下边距，包括我们ul这个编剧是不是还在啊，包括这个项目符号是不是都还在啊，哎，都还在，所以啊，这两个表有什么区别，我们来说一下我们的重置样式表，重置样式表是干嘛的？它是专门用来对我们浏览器的这个样式进行什么呢？进行重置的啊，进行重置的这两个表他们的思想不太一样，set.css res.CSS它直接去除了我们浏览器的一个默认样式，诶，以前你有的我直接给你变成零，你要是那个list style有对吧，我给你去掉，也就说这个。

有时候它就是去除，把所有的样式都给你重置，变成零啊，变成零，而我们这个novel light，哎，Li z啊，normalize.css，它是干嘛呢？它是对我们这个默认样式哎进行了统一，它并不是简单的去除，而是进行了什么呢统一，哎你以前可能你像这种段落的，要是我们re就直接给你重置为零了，而我们的这个normalize，它给你保留到一个16，并且你只要写上它以后，它会确保所有浏览器里都是16，所以它俩区别就是re是去除，而normal是把它干嘛呀，把它统一啊，它统一，所以这里边代码呢，Normal里边稍微的会复杂一点啊，复杂一点，但是这两个都是我们开发中，呃，可能会用到的，但是不会同时用，一般就用一个，要么你就用，要么你就用no啊，根据你。

项目的不同，那我个人现在可能还是比较倾向于用这个，因为确实用起来比较比较的省事一点，它直接给你去除了，但是normal呢也能用，但是用的时候你像这些样式的话，你该调整还得需要去调整一下啊好，关于这个东西我们就不多说了啊，总之诶，总结起来就是两件事，第一个浏览器里存在有默认样式，第二件事儿，我们需要对这些默认样式进行去除，尤其是在PK端，然后具体来说怎么去除两种方式，呃，具体来说三种方式吧，一种方式我们直接用星号这种方式，把这个默认的paing margin，呃，这个pading还有margin全都给它去除，这是第一种方式，剩下的第二种方式我们可以用re.css，第三种方式可以用normal less.css这三种方都是有效的，根据需要去选择，那如果真正做项目的话，那就这两个里面任选。

其啊，这两个里边任选其一，如果就是临时做个练习，做个小DEMO，那就用这种方式啊，好，这个是我们说的一个浏览器的默认样式，我们来听一下。