海浪Code

Appearance

水平布局 ​

一个元素在其父元素中，必须满足

外边距+外边框+内边距+宽度 = 父元素的宽度

这个公式。

如果不满足，浏览器会自动调整。如果这七个值中，没有 auto 的情况，则浏览器会自动调整margin-right，使等式满足。

如 margin: 10px auto 就是自动调整两边的距离，达到居中的效果。

width（默认是auto），margin-left，margin-right 这是哪个值可以设置成 auto 。如果某个值设置成 auto ,浏览器会自动调整 auto 这个值。

垂直布局 ​

默认情况下，父元素的高度由子元素撑开。

如果子元素的高度超过了父元素设置的高度，这时候，子元素会从父元素溢出。

css
/* 处理溢出的样式 */
/* 
* 默认值：visible
* hidden 隐藏溢出的内容
* scroll 生成x,y滚动条，可以查看溢出的内容
* auto 自动生成滚动条
*/

外边距的重叠 ​

相邻的垂直方向外边距会发生重叠现象，

兄弟元素 ​

兄弟元素的相邻外边距会取两者之间的较大值。

​ 如果相邻的外边距一正一负，则取两者的和。

​ 如果两者都是负值，则取绝对值大的。

兄弟之间的外边距重叠对我们是有利的。我们不需要进行处理。

父子元素 ​

父子元素之间的外边距，子元素的会传递给父元素（上外边距）。

父子外边距的重叠会影响到我们页面的布局，我们必须得处理。（要么不用外边距，要么别让他们相邻 border 和 padding）

解决重叠方法实例

css
.box1::before{
    content: '';
    display: table;
}

行内元素 ​

直接给行内元素设置宽度和高度是没有用的。

可以设置 padding，但是垂直方向的 padding 不会影响页面的布局

可以设置 border，但是垂直方向的 border 不会影响页面的布局

可以设置 margin，但是垂直方向的 margin 不会影响页面的布局

Display ​

设置元素显示的类型。

  1. inline 行内元素
  2. block 块级元素
  3. inline-blobk 行内块元素，宽高生效，且不独占一行
  4. table 将元素设置成一个表格
  5. none 不显示元素

visibility ​

用来设置元素的显示状态

  1. visible 默认值，正常显示。
  2. hidden 隐藏，但是会占用位置。只是视觉上的隐藏。和display:none不同
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>京东图片</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .imgItem{
            display: block;
            width: 200px;
            margin: 10px auto;
        }
    </style>
</head>
<body>
<div class="imgList">
    <img class="imgItem" src="img/jd1.webp" alt="">
    <img class="imgItem" src="img/jd2.webp" alt="">
    <img class="imgItem" src="img/jd3.webp" alt="">
</div>
</body>
</html>