目录

CSS Display

CSS 布局 - width 和 max-width

CSS 布局 - position属性

CSS 布局 - 溢出

CSS 布局 - 浮动和清除

CSS 布局 - clear和clearfix

CSS 布局 - 浮动实例 

CSS 布局 - display：inline-block

---

CSS Display

display 属性是用于控制布局的最重要的CSS属性

display 属性规定是否/如何显示元素

每个HTML元素都有一个默认的display值，具体取决于它的元素类型

大多数元素的默认display值为block 或 inline

块级元素：块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）

块级元素包括：<div>、<h1>-<h6>、<p>、<form>、<header>、<footer>、<section> 

行内元素：内联元素不从新行开始，仅占用所需的宽度

行内元素包括：<span>、<a>、<img>

Display：none；通常与JS一起使用，以隐藏和显示元素，而无需删除和重新创建它们。

默认情况下，<script>元素使用 display：none；  

覆盖默认的Display值：每个元素都有一个默认的display值，但是可以将其覆盖

将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循Web标准很有用。

设置元素的display属性仅会更改元素的显示方式，而不会更改元素的种类。

因此带有display：block；的行内元素不允许在其中包含其他块元素。

 

隐藏元素 - display：none；还是visibility：hidden；

display：none；可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中；

visilibity：hidden；可以隐藏元素。该元素仍将占用与之前相同的空间，仍会影响布局

---

CSS 布局 - width 和 max-width

使用width、max-width 和 margin：auto；

设置块级元素的width将防止其延伸到其容器的边缘。可以将外边距设置为auto，以将元素在其容器中水平居中。元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配。

当浏览器窗口小于元素宽度时，上面的<div>会发生问题。浏览器会将水平滚动条添加到页面

这种情况下，使用max-width可以改善浏览器对小窗口的处理

---

CSS 布局 - position属性

position属性：规定应用于元素的定位方法的类型

有五个不同的位置值：

• static
• relative
• fixed
• absolute
• sticky

元素其实是使用top、bottom、left和right属性定位的。但是除非首先设置了position属性，否则这些属性将不起作用，根据不同的position值，工作方式也不同

position：static；

HTML元素默认情况下的定位方式为static

静态定位元素不受top、bottom、left和right属性影响

position：static；的元素不会以任何特殊方式定位；它始终根据页面的正确流进行定位

position：relative；

position：relative；的元素相对于其正常位置进行定位

设置相对定位的元素的 top、right、bottom和left属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

position：fixed；

position：fixed；的元素时相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。top、right、bottom和left属性用于定位此元素

固定定位的元素不会在页面中通常应防止的位置上留出空隙。

position：absolute；

position：absolute；的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如fixed），如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

“被定位的”元素是其位置除static以外的任何元素

position：sticky；

position：sticky；元素根据用户的滚动位置进行定位

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。

起先它会被相对定位，直到在视口中遇到给定的偏移位置位置，然后将其“粘贴”在适当的位置（比如position：fixed）

 重叠元素：在对元素进行定位时，他们可以与其他元素重叠

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）

 具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前

如果两个定位的元素重叠而未指定z-index ， 则位于HTML代码中最后的元素将显示在顶部。

---

CSS 布局 - 溢出

CSS Overflow：指定在元素内容太大而无法放入指定区域时是剪裁内容还是添加滚动条

overflow属性仅适用于具有指定高度的块元素

overflow可设置

• visible - 默认。溢出没有被剪裁，内容在元素框外渲染
• hidden - 溢出被剪裁，其余内容不可见
• scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
• auto - 与scroll相似，但仅在必要时添加滚动条

overflow-x 和 overflow-y：仅规定水平还是垂直地（或同时）更改内容的溢出 

---

CSS 布局 - 浮动和清除

float属性规定元素如何浮动

clear属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动

float属性：用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里

属性值可以为：

• left - 元素浮动到其容器的左侧
• right - 
• none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值
• inherit - 元素继承其父级的float值

最简单的用法是：float属性可实现（报纸上）文字包围图片的效果

 

---

CSS 布局 - clear和clearfix

clear 属性：指定哪些元素可以浮动于被清除元素的旁边以及哪一侧

clear属性值可以为：

• none - 允许两侧都有浮动元素。默认值
• left - 左侧不允许浮动元素
• right - 
• both - 左侧或右侧均不允许浮动元素
• inherit 

使用clear属性的最常见用法是在元素上使用了float属性之后

在清除浮动时，应该对清除与浮动进行匹配；如果某个元素浮动到左侧，则应清除左侧。浮动元素会继续浮动，但被清除的元素将显示在其下方

clearfix Hack：如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外；

我们可以向包含元素添加overflow：auto；在解决此问题

 只要能够控制外边距和内边距（否则可能会看到滚动条），overflow：auto； clearfix就会很好地工作。但是新的现代clearfix hack 技术使用起来更安全，以下代码被应用于多数网站

.clearfix::after{content:"";clear:both;display:table;
}

---

CSS 布局 - 浮动实例 

box-sizing & Flexbox见高级教程

导航菜单

---

CSS 布局 - display：inline-block

display：inline-block

与display：inline相比，主要区别在于display：inline-block允许在元素上设置宽度和高度

如果设置了display：inline-block；将保留上下外边距/内边距，而display：inline则不会

与display：block相比，主要区别在于display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

使用inline-block来创建导航链接

display 的一种常见用法：inline-block 用于水平而不是垂直地显示列表项

---

CSS 布局 - 水平和垂直对齐

居中对齐元素：要使块元素水平居中，请使用margin：auto；

设置元素的宽度将防止其延伸到容器边缘，然后元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配

如果未设置width属性（或将其设置为100%），则居中对齐无效

居中对齐文本：如果仅需在元素内居中文本，请使用 text-align：center；居中对齐图像：如需居中图像，请将做右外边距设置为auto，并将其设置为块元素

左对齐和右对齐

• 使用position

对齐元素的一种方法是使用 position：absolute； 

• 使用float

垂直对齐 

• 使用padding

 如需同时垂直和水平对齐，请使用 padding 和 text-align：center；

• 使用line-height

另一个技巧是使用其值等于height属性值的line-height 属性

•  使用 position 和 transform
• 使用Flexbox

justify-content 属性定义了项目在主轴上的对齐方式

align-items 属性定义了项目在交叉轴上如何对齐

---

CSS 组合器

组合器是解释选择器之间关系的某种机制

CSS选择器可以包含多个简单选择器，在简单选择器之间可以包含一个组合器

四种不同的组合器：

• 后代选择器（空格）
• 子选择器（>）
• 相邻兄弟选择器（+）
• 通用兄弟选择器（~）