外边距折叠

• 在网页中垂直方向相邻的外边距会发生外边距折叠现象
• 兄弟元素

  • 兄弟元素间乡里难点垂直外边距会取最大值

    
    
    10.png
    
    
    外边距详细内容.png
    
    
    设置下外边距.png
    
    
    最大值.png
    
    
    相邻的垂直外边距.png

父子元素外边距折叠

• 子元素的上外边距会传递给父元素
• 子元素和父元素相邻的下外边距不会产生任何效果
  
  12.png
  
  
  11.png
  
  
  13.png
  
  
  box5设置尺寸.png
  
  Box4外边距设置bottom，box5不会有任何动静
• 在网页中垂直方向相邻的外边距会发生折叠现象
• 兄弟元素外边距折叠：
  • 兄弟元素间相邻的垂直外边距会取最大值
• 父子元素外边距折叠
  • 子元素的上外边距会传递给父元素
  • 子元素和父元素相邻的下外边距不会产生任何效果
• 兄弟元素间的外边距折叠不需要处理，但是父子元素间的上外边距折叠必须要处理

• 只有相邻的才会折叠，让他不折叠就不相邻了，给父元素加个上外边框

  
  
  14.png
  
  
  设置box3的border-top，把两者的外边距隔开.png

兄弟元素外边距折叠

• 兄弟元素间相邻的垂直外边距会取最大值

行内元素盒模型

• 两个行内之间有个缝隙，是换行导致的，把两个行内元素连起来就没有了

• image.png

• 行内元素不支持宽度和高度的设置，宽高都是由内容决定的
  内边距

• 上下内边距生效了，没有挤到别的元素，垂直方向内边距不会影响页面布局

• image.png

  - 边框

  • 行内元素可以设置边框，但是垂直方向的边框不会影响页面的布局

margin

• 水平方向外边距生效，垂直方向外边距不会影响页面布局，不会挤到别的元素

padding

• 水平方向内边距生效，垂直方向外边距不会影响页面布局，不会挤到别的元素
• image.png

文档流（normal flow）

• 网页是一个多层的结构，一层摞着一层

  • 能看到的只是网页的最上层

  • 在网页的最底层，最基础的层被称为文档流

  • 元素创建后默认都在文档流中排列

    • image.png

  • 元素在文档流里的特点

    • 块元素
      • 在文档流中从上到下垂直排列，也就是所谓的独占一行，如果离开了文档流，块元素就不会垂直排列
      • 元素默认宽度是auto，块元素在文档流中默认宽度是父元素的全部，严格来书尽量把父元素撑满
      • 块元素在文档流中默认高度是被内容撑开的

• 行内元素

  • 行内元素在文档流中自左向右水平排列，如果一行中不足以容纳所有的行内元素，元素会换到第二行，继续自左向右水平排列（和我们的书写习惯是一致的）

    
    
    image.png

1.png

• 现在所看到的就是默认宽度和高度，行内元素的默认宽度和高度都是被内容撑开的， 同时也不能指定宽度和高度

  
  
  2.png
  
  
  写个样式.png
  
  
  3.png
  
  
  4.png
  
  
  创建一个span.png
  
  
  5.png
  
  
  6.png

默认样式

• 可以通过引入重置样式表，来清除默认样式，重置样式表就是一个专门用来清除默认样式的样式表
  
  7.png
  
  
  8.png
  
  有个缝隙
  
  9.png
  
  p和box有个距离
• 在网页中，浏览器为了确保网页在没有CSS样式的前提下也可以正常浏览
• 所以浏览器都会为元素设置一些默认的样式
• 但是这些默认的样式会影响到我们所编写的样式
  • 并且在不同的浏览器中，默认样式也会有一些差异
  • 所以在编写网页前，我们都需要去除调浏览器的默认样式
    • 先明确距离是谁的
    • HTML盒模型.png
      
      
      内容区.png
      
      
      默认样式.png
      
      
      默认样式2.png
      
      
      margin设置为0，就把默认的覆盖了.png
      
      
      外边距折叠.png
      
      
      image.png
      
      

      按住方向键可以修改

      
      
      去除项目符号.png
      
      
      去除所有样式.png
• 这种是使用最方便的方式，有可能存在一些样式没有清楚彻底（用于临时开发，或者移动端）
• 还可以通过引入重置样式表，来清除默认样式

  • 重置样式表就是一个专门用来清除默认样式的样式表
    

    -
    重置样式表.png

所有元素.png

重置样式表2.png

• 重置样式表有两个版本
  • reset.CSS
    • 会直接将浏览器中所有默认样式去除（这个用的多一些）
  • normalize.css
    • 并不是简单去除样式，而是去除那些不必要的，统一那些需要使用的

15.png

16.png

• 首先清除默认样式

  
  
  17.png
• 先写外边的，再写里面的

设置外部的容器

18.png

设置里边的容器

二倍图.png

19.png

image.png

image.png

image.png

image.png

image.png

京东左侧菜单

• 一般情况用ul+li做

• 这个网页结构的编写方式不是固定的，很灵活
  用nav+div的方式写

  
  
  一个div.png

一个这个就是一个div.png

• 手机，运营商，数码有三个超链接
• Item是项的意思
• 斜杠可以直接写/，不过这样不好，一般放到标签里，比如写个<span>/</span>，设置样式的时候好设置
  
  line是线的意思.png
  
  
  先清除默认样式.png
  
  把内外边距都去除掉
  没有用ul，去掉列表前面的点就不用管了
  
  Div的宽度直接看网站的数据.png
  
  
  li的 宽度190，高度25.png
  
  
  设置菜单项的大小.png
  
  这个时候整个外边的容器就可以了
  
  字整体往右移动，用padding-left.png
  
  
  这个padding用标尺量出来的内边距18px，也可以直接看网站数据.png
  
  
  设置一个左padding字就会往右走了.png
  
  为了保证总宽度190，因为设置了左内边距18，就要用190-18，总宽度就是172px
  设置hover的效果
  
  设置hover的效果.png
  
  设置菜单项中链接的样式
  
  设置菜单项中链接的样式.png
  
  设置超链接的鼠标移入效果
  修改字体颜色

Text-decoration：none（文本修饰）
作用是去除超链接下划线

现在需要修改斜杠的效果
.item .line{ Font-size：12px；}这是修改线的大小

所有的行内元素都放到一行里，这时候就近了，这种方式是最快的方式.png

设置外部容器的大小.png

所有菜单项加一起高度450，总高度是470，所以上下内边距各10像素
再调整就去掉背景颜色
先设置居中margin：50-auto；

背景颜色是白色背景，看不出来白色就给body设置背景颜色.png

京东右侧列表

找网页中的图片方法，默认格式是webp.png

如果不想用这个格式，可以把这个.webp删了.png

一个块里放了三个图片.png

这表示整个外层的容器.png

ul写个名字，img-list是图片列表的意思，名字随意写，写语义化方便理解锻炼单词能力.png

image.png

这个类名比较简单，起不起都行，最好还起一个，熟悉一下

图片应该是可以点击的超链接
这时候就有了第一个列表了，后面的直接复制粘贴

image.png

直接写个div，里面放三个图片也行，但是分成三块，这种方式最好用块元素布局，这样处理起来比较简单

图片列表效果（素颜妆），这是刚刚定好结构没有写样式的样子，

image.png

跟左侧无序列表顺序一样，先清除默认样式
先清除内外边距

image.png

去除项目符号.png

一般的顺序先写外边再写里边，根据个人习惯，写的方式不限.png

设置外部容器的大小.png

现在ul是这么大，因为没有给ul设置宽度，ul的宽度默认是全屏的.png

先确定ul的宽度，可以用标尺测量,Ul的宽度190px.png

ul高度470px.png

设置好容器宽，高，颜色.png

ul在这里，因为现在ul的宽度小于图片的宽度，导致ul看不清楚.png

这个在最后是要删了的.png

现在设置里边的容器,宽度是190，但是实际上图片的宽度是380，这种图片我们叫做二倍图.png

现在很多高清屏或者手机屏，像素比较小，所以图片在高清屏上可能就把图片放大了，如果放1:1的图片，图片放到了就会导致图片不清楚，所以常见的方案一般会设置一个比较大的图片，这样可以确保即使手机对网页缩放两倍，图片也会确保比较高的清晰度，这个时候需要设置图片的大小

图片是li的子元素，所以可以写成.item img{width:100%;}
让图片的宽度和父元素item的宽度是一样的

打开效果，图片就跟不宽了，图片跟容器的宽度一致.png

图片间的距离10px.png

等于这两个地方都是10px.png

设置li的边距.png

这个时候可以去掉ul的背景颜色.png

跟原图差不多了.png

Margin：50px auto；往下拉一拉.png

最后一个li也有一个外边距，在这能看见，但实际上没有任何的影响.png

li的高度是被内容撑开的，图片多高，li就多高.png

图片本身高度300，显示出来是154，比实际高度多了4个像素，item的font-size：0就不会多出4个像素了.png

Div写个box1， 样式.box1{border:10px red soli:}

图片和边框没有严格贴合，有缝隙.png

直接在.box1里面写font-size：0，这个缝隙就没了.png