max-width， min-width

min-width：最小宽度，无论内容多少，宽度都大于或等于min-width。

这里设置的最小宽度，表示的是无论用户怎么缩小网页，最后可视区域和可滚动区域的宽度之和是1300，并不是表示用户只能将网页缩小到1300px后，不能再缩小网页了。他会出现滚动条。

max-width：最大宽度，无论内容多少，宽度都小于或等于max-width。

移动端适配时, 可以设置最大宽度和最小宽度。

边框样式值

border-style

网络异常，图片无法展示

margin

margin传递问题

margin-left, margin-right不会传递。

建议：

margin一般是用来设置兄弟元素之间的间距。

padding一般是用来设置父子元素之间的间距。

margin-top传递

原因：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素。

margin-bottom传递

原因：如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素。

这种只是指元素本身重叠，设置border就可以解决。所以设置border后就不算重叠了。

margin折叠问题

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）。

水平方向上的margin（margin-left、margin-right）永远不会collapse。

合并后取最大的margin值作为最终的margin值。

两个兄弟块级元素之间上下margin的折叠。

父子块级元素之间margin的折叠。

网络异常，图片无法展示

为什么margin: 0 auto可以使设置宽度的块级元素居中

块级元素，即使设置了宽度，他也会独占一行。所以右边就空出来了。

但是margin-left, margin-right默认值又是0，那么为啥元素右侧会出现大片空白呢？

因为浏览器将剩余空间分配给了margin-right。

那么如果设置margin: 0 auto; 它将设置空白区域自动均分给margin-left, margin-right。

那将margin垂直方向设置成auto，能垂直居中吗？

不能，因为块级元素height默认是auto, 由内容撑开，所以并不是独占整个父元素高度，由此浏览器就不会将剩余空间分配给margin-top,margin-bottom，让其在垂直方向上居中。

outline

outline表示元素的外轮廓

不占用（盒子模型 -> border + padding + content）空间

默认显示在border的外面

outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似。

使用：去除a元素、input元素的focus轮廓效果。

box-shadow，text-shadow

box-shadow属性可以设置一个或者多个阴影。多个阴影之间用逗号,隔开，从前到后叠加。

格式顺序：

offset-x, 水平方向的偏移，正数往右偏移

offset-y, 垂直方向的偏移，正数往下偏移

blur-radius, 模糊半径

spread-radius, 延伸半径。这里的延伸是围绕着整个盒子和文字的。

阴影的颜色，如果没有设置，就跟随color属性的颜色

inset：外框阴影变成内框阴影

text-shadow同box-shadow,但是他没有soread-radius值。

提供一个调节阴影的一个网站

通过border设置图形

下面推荐一个网站

行内非替换元素的注意事项

什么是行内非替换元素呢？

就是我们常说的inline（内联）元素。

width、height、margin-top、margin-bottom这些属性对于行内非替换元素不生效。

设置padding-top, padding-bottom时，他是不占据空间的,但是会将元素撑大。但是对于padding-left, padding-right是占据空间的。

<style>
    span {
      padding: 30px;
      background: skyblue;
    }
  </style>
    <body>
      <span>span元素</span>
      <i>i元素</i>
      <div>div元素</div>
    </body>

网络异常，图片无法展示

设置border也不占据空间。

<style>
    span {
      /* padding: 30px; */
      background: skyblue;
      border: 100px solid red;
    }
  </style>
    <body>
      <span>span元素</span>
      <i>i元素</i>
      <div>div元素</div>
    </body>

网络异常，图片无法展示

background-image

background-image用于设置元素的背景图片 会盖在(不是覆盖)background-color的上面

如果设置了多张图片，设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面。

注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的。

background-size

background-size用于设置背景图片的大小

auto：默认值, 以背景图本身大小显示

cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见

contain：缩放背景图，**宽度或者高度铺满元素，但是图片保持宽高比 **

百分比，相对于背景区（background positioning area）

length：具体的大小，比如100px。

background-position

如果只设置了1个方向，另一个方向默认是center。

网络异常，图片无法展示

这个可以实现背景图片重要部分居中显示，但是前提是图片的重要部分必须事先在图片中间。

background-attachment

background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

可以设置以下3个值

scroll（默认值）：此关键属性值表示背景相对于元素（具有滚动机制的元素）本身固定，而不是随着它的内容滚动。

local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动。

fixed：此关键属性值表示背景相对于视口（浏览器窗口）固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

background

背景相关的css简写属性。必须设置一个相关值。设置的相关属性的顺序是随意的。

background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面。

background-image和img对比

网络异常，图片无法展示

img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片。

background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息。

table

表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了。我们都可以通过css样式来设置。

表格线

给td, th设置border即可。

合并单元格间隙和合并border

给table设置border-collapse：collapse。

单元格合并

跨列合并: 使用colspan。在最左边的单元格(元素)写上colspan属性, 并且省略掉合并的td。

跨行合并: 使用rowspan。在最上面的单元格(元素)写上rowspan属性, 并且省略掉后面tr中的td。

<style>
    table {
      border-collapse: collapse;
    }
    td {
      border: 1px solid black;
    }
  </style>
  <table>
    <tr>
      <td colspan="2">第一</td>
      <td>第一</td>
    </tr>
    <tr>
      <td>第二</td>
      <td>第二</td>
      <td>第二</td>
    </tr>
  </table>

网络异常，图片无法展示

textarea

多行文本输入框是否可以缩放

禁止缩放：resize: none;

水平缩放：resize: horizontal;

垂直缩放：resize: vertical;

水平垂直缩放：resize: both;

表单元素的默认选中属性

对于checkbox, radio，通过设置checked属性。

对于select，option，通过设置selected。

css spirit

一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分。

CSS Sprite的好处

减少网页的http请求数量，加快网页响应速度，减轻服务器压力

减小图片总大小

解决了图片命名的困扰，只需要针对一张集合的图片命名

Sprite图片制作（雪碧图、精灵图）

那么怎么使用它呢？

设置对应元素的宽度和高度

设置精灵图作为背景图片

调整背景图片的位置来展示

这个网站可以快速获取精灵图的位置

标准流

在标准流中，可以使用margin、padding对元素进行定位，其中margin还可以设置负数

比较明显的缺点是

设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果

不便于实现元素层叠的效果

所以需要通过position来解决。

定位position

static

元素默认的定位方式就是static,但是不可以使用定位偏移属性left, top, right, bottom。

relative

也是处于标准流中，但是可以使用定位偏移属性，而且偏移的时候不会影响其他元素。从而可以产生元素的覆盖。定位参照对象是元素自己原来的位置。

sticky

粘性定位，他是固定定位和相对定位的结合体。

它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点。当达到这个阈值点时, 就会变成固定(绝对)定位。

阈值表示设置的sticky元素偏移量和参考元素之间的距离。

其他定位元素，请参考这篇文章

绝对定位（absolute, fixed）元素的特点(重点)

可以随意设置宽高

宽高默认由内容决定

不再受标准流的约束。不再严格按照从上到下、从左到右排布。不再严格区分块级、行内级，块级、行内级的很多特性都会消失

不再给父元素汇报宽高数据

脱标元素内部默认还是按照标准流布局

对于绝对定位元素来说

定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度

定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度

上面这些公式，配合宽度，高度（这里的元素默认宽度也行，比如img标签引入图片的宽度, 而不是说必须设置width， height属性）和margin: auto可以做到水平垂直居中。

<style>
    div {
      position: relative;
      width:300px;
      margin: 0 auto;
      border: 1px solid black;
      height: 600px;
    }
    img {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
    }
  </style>
 <div class="box">
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="">
 </div>

网络异常，图片无法展示

如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性 left: 0、right: 0、top: 0、bottom: 0、margin:0。

为啥设置了上面的哪些属性就会使定位元素和参照元素一样的宽高呢? 因为height, width都是auto了，参照上面的公式，浏览器就会将元素设置成和参照元素一样宽高。

浮动元素的特点

元素一旦浮动后, 脱离标准流

朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止。并且定位元素会层叠在浮动元素上面。

多个元素都浮动，不会相互重叠，而是依次排列

浮动元素不像定位（absolute, fixed）元素,脱离标准流后不会重叠在一起，但是定位元素在没有设置偏移量之前是重叠在一起的。

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

比如行内级元素、inline-block元素、块级元素的文字内容。

浮动元素不会影响前面相邻的块级元素，但是会影响相邻的行内级元素

绝对定位元素默认是不会覆盖和影响前面的元素的。 不管前面的元素是啥类型的。

<style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      /* position: absolute; */
      /* top: 0; */
      float: left;
    }
  </style>
<body>
  <!-- <span>ppppppppppppppppppppppppppppppppppppppp</span> -->
  <!-- <input type="text"> -->
  <p>ppppppppppppppppppppppppppppppppppppppp</p>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
</body>

解决行内级元素中间间距问题

产生原因：编写代码时，换行书写标签所致。

方式一

设置父元素font-size: 0; 行内级元素在设置font-size。

方式二

在编写代码时不换行

方式三

通过浮动。

方式四

通过flex。

为啥要解决这个问题？目的是让布局更加准确。

一些大型网站的水平布局

考拉

主要是解决边框重叠问题，通过margin负值解决后，整体的宽度就会少了几像素（因为边框重叠了， 2px合并成1px了），所以，我们就必须增加子元素的宽度。但是需要设置子元素的box-sizing: border-box。

<style>
    .content {
      width: 1100px;
      margin: 0 auto;
      height: 800px;
      background: #ccc;
    }
    .box {
      /* margin-left: 1px; */
    }
    .item {
      width: 221px;
      height: 168px;
      background: orange;
      color: #fff;
      float: left;
      border: 1px solid #000;
      /* 这个是让元素边框不重叠，以至于box整体减少了4px， 所以我们需要将宽度设置为221px,  */
      margin-right: -1px;
      box-sizing: border-box;
    }
    .item.first {
      width: 220px;
    }
  </style>
  <div class="content">
    <div class="box">
      <div class="item first">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </div>

京东

主要就是解决margin设置后，宽度不够问题，通过设置margin负值来增大父元素的整体宽度来达到子元素浮动后不换行。需要额外包裹一个元素。

刚好多出的空间盛放最后一个元素的margin-right,让其不换行。

<style>
    .content {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
      height: 800px;
    }
    /* 布局样式 */
    .box {
      /* margin: 0 -5px; */
      /* 这里就是用到了 父w = 子w + margin-left + margin-right这个公式了。 让box这个盒子变大*/
      margin-right: -10px;
    }
    .item {
      width: 230px;
      height: 322px;
      background-color: purple;
      color: #fff;
      /* 浮动 */
      float: left;
      margin-right: 10px;
      /* margin: 0 5px; */
    }
  </style>
  <div class="content">
    <div class="box">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
    </div>
  </div>

clear属性

这里我只想介绍一下clear的意思。

clear 属性可以指定一个元素是否必须移动(清除浮动后)到浮动元素下面; 主要是让一个标准流中的元素放在浮动元素下面，从而不让浮动元素影响后面的元素了。

clear的常用取值

left：要求元素的顶部低于之前生成的所有左浮动元素的底部

right：要求元素的顶部低于之前生成的所有右浮动元素的底部

both：要求元素的顶部低于之前生成的所有浮动元素的底部

none：默认值，无特殊要求

.clear_fix::after {
      content: "";
      clear: both;
      display: block;
      /* 浏览器兼容 */
      visibility: hidden;
      height: 0;
    }
    .clear_fix {
      /* IE6/7 */
      *zoom: 1;
    }

flex

设置flex布局后，flex-item 不再严格区分块级元素和行内级元素。但是flex盒子依旧还是区分，因为有两种属性可以使盒子变成flex盒子。（flex, inline-flex）。

flex-direction

flex-direction 决定了 main axis 的方向，有 4 个取值。row（默认值）、row-reverse、column、column-reverse。

网络异常，图片无法展示

justify-content

justify-content 决定了 flex items（整体）在 main axis 上的对齐方式。

align-item

align-items 决定了 flex items（每行，在当前换行的区域）在 cross axis 上的对齐方式。

baseline。基线对齐。

网络异常，图片无法展示

normal：在弹性布局中，效果和stretch一样。

stretch：当 flex items 在 cross axis 方向的 size（width, height）为 auto 时，会自动拉伸至填充 flex container。

align-content

align-content 决定了多行 flex items（整体）在 cross axis 上的对齐方式，用法与 justify-content 类似。

在交叉轴方向上有多余空间的时候使用，来决定空间如何分配。

如果主轴和交叉轴方向都未设置size(width， height)，并且justify-content, align-content都设置stretch，那么他只会拉伸元素的主轴方向的size。

flex-grow

flex items 扩展后的最终 size 不能超过 max-width\max-height。

flex-shrink

flex items 收缩后的最终 size 不能小于 min-width\min-height。

flex-basis

大部分和主轴设置的size一样，但是对于特别长的英文单词来说，为了使单词可以放下，他会自动增大flex-basis的值，让其可以显示，但是设置width / height, 文字将有一部分被截取。

决定 flex items 最终 base size 的因素，从优先级高到低

 max-width\max-height\min-width\min-height

flex-basis

width\height

内容本身的 size

flex

flex-grow flex-shrink flex-basis简写属性。

flex: none => 0 0 auto

flex: auto => 1 1 auto

一些值的具体使用，请看这里

解决justify-content设置space-between后，最后一行元素不够出现布局错乱问题

通过添加多个具有宽度的元素来占位，但是不需要设置高度。

<style>
    .container {
      width: 500px;
      background-color: orange;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .item {
      width: 110px;
      height: 140px;
    }
    .container > i {
      width: 110px;
    }
  </style>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item3">3</div>
    <!-- 添加span的个数是列数减-2 -->
   <i></i><i></i>
  </div>

css的这些内容你可能知道，但是又不完全知道(一)（下）

max-width， min-width

边框样式值

margin

margin传递问题

margin-top传递

margin-bottom传递

margin折叠问题

为什么margin: 0 auto可以使设置宽度的块级元素居中

outline

box-shadow，text-shadow

通过border设置图形

行内非替换元素的注意事项

background-image

background-size

background-position

background-attachment

background

background-image和img对比

table

表格线

合并单元格间隙和合并border

单元格合并

textarea

表单元素的默认选中属性

css spirit

标准流

定位position

static

relative

sticky

绝对定位（absolute, fixed）元素的特点(重点)

浮动元素的特点

元素一旦浮动后, 脱离标准流

多个元素都浮动，不会相互重叠，而是依次排列

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

浮动元素不会影响前面相邻的块级元素，但是会影响相邻的行内级元素

解决行内级元素中间间距问题

方式一

方式二

方式三

方式四

一些大型网站的水平布局

考拉

京东

clear属性

flex

flex-direction

justify-content

align-item

align-content

flex-grow

flex-shrink

flex-basis

flex

解决justify-content设置space-between后，最后一行元素不够出现布局错乱问题

热门文章

最新文章

相关课程

相关电子书

相关实验场景