CSS知识复习2

盒子模型

CSS长度单位

px ：像素。
em ：相对元素 font-size 的倍数。
rem ：相对根字体大小，html标签就是根。
% ：相对父元素计算。
注意： CSS 中设置长度，必须加单位，否则样式无效！

元素的显示模式

块元素和行内块元素可以通过CSS设置宽高，行内元素不行

修改元素的显示模式

display

盒子模型的组成

CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。
margin（外边距）： 盒子与外界的距离。
border（边框）： 盒子的边框。
padding（内边距）： 紧贴内容的补白区域。
content（内容）：元素中的文本或后代元素都是它的内容。

盒子的大小 = content + 左右 padding + 左右 border 。
注意：外边距 margin 不会影响盒子的大小，但会影响盒子的位置。

关于默认高度

所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。
总宽度 = 父的 content — 自身的左右 margin 。
内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding 。

盒子内边距（padding）

padding 复合属性的使用规则：

• padding: 10px; 四个方向内边距都是 10px 。
• padding: 10px 20px; 上 10px ，左右 20px 。（上下、左右）
• padding: 10px 20px 30px; 上 10px ，左右 20px ，下 30px 。（上、左右、下）
• padding: 10px 20px 30px 40px; 上 10px ，右 20px ，下 30px ，左 40px 。（上、右、下、左）

注意点：

• padding 的值不能为负数。
• 行内元素 的 左右内边距是没问题的，上下内边距不能完美的设置。
• 块级元素、行内块元素，四个方向内边距都可以完美设置。

盒子边框（border）

border-style 、 border-width 、 border-color 也是复合属性。

盒子外边距（margin）

注意事项

块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右margin 可以完美设置，上下 margin 设置无效。
margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级
元素会在父元素中水平居中。
margin 的值可以是负值。

margin塌陷

什么是 margin 塌陷？
第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。
如何解决 margin 塌陷？
方案一： 给父元素设置不为 0 的 padding 。
方案二： 给父元素设置宽度不为 0 的 border 。
方案三：给父元素设置 css 样式 overflow:hidden。

margin合并

什么是 margin 合并？
上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
如何解决 margin 塌陷？
无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

处理内容溢出

overflow 常用的值是 hidden 和 auto

隐藏元素方式

方式一：visibility 属性
visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。
元素看不见了，还占有原来的位置（元素的大小依然保持）。
方式二： display 属性
设置 display:none ，就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

样式继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样
式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。
会继承的属性
字体属性、文本属性（除了vertical-align）、文字颜色 等。
不会继承的属性
边框、背景、内边距、外边距、宽高、溢出方式 等。
一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。

默认样式

优先级：元素的默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择器
到该元素。

布局小技巧

• 行内元素、行内块元素，可以被父元素当做文本处理。
  即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
  例如： text-align 、 line-height 、 text-indent 等。
• 如何让子元素，在父亲中 水平居中：
  若子元素为块元素，给父元素加上： margin:0 auto; 。
  若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。
• 如何让子元素，在父亲中 垂直居中：
  若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子总高) / 2。
  若子元素为行内元素、行内块元素：
  让父元素的 height = line-height ，每个子元素都加上： vertical-align:middle。
  补充：若想绝对垂直居中，父元素 font-size 设置为 0

浮动

最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。

浮动特点

脱离文档流。
不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽、高。
不会独占一行，可以与其他元素共用一行。
不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
不会像行内块一样被当做文本处理（没有行内块的空白问题）。

浮动影响以及解决方法

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟
无影响。
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元
素。
如何解决？清除浮动
方案一： 给父元素指定高度。
方案二： 给父元素也设置浮动，带来其他影响。
方案三： 给父元素设置 overflow:hidden 。
方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推荐使用

.parent::after {content: "";display: block;clear:both;
}

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

浮动相关属性

定位

相对定位

给元素设置 position:relative 即可实现相对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
参考点是相对自己原来的位置
特点：
不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是：

• 定位的元素会盖在普通元素之上。
• 都发生定位的两个元素，后写的元素会盖在先写的元素之上。

left 不能和 right 一起设置， top 和 bottom 不能一起设置。
相对定位的元素，也能继续浮动，但不推荐这样做。
相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。
注意：绝大多数情况下，相对定位，会与绝对定位配合使用。

绝对定位

给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
参考点是包含块。
什么是包含块？
对于没有脱离文档流的元素：包含块就是父元素；
对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都
没定位，那包含块就是整个页面）。

固定定位

position: fixed
参考点是视口

粘性定位

position:sticky
参考点：离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。
特点：
不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
最常用的值是 top 值。

定位层级

定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
可以通过 css 属性 z-index 调整元素的显示层级。
z-index 的属性值是数字，没有单位，值越大显示层级越高。
只有定位的元素设置 z-index 才有效。
如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。

布局

版心

在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页
的版心。
版心的宽度一般是 960 ~ 1200 像素之间。
版心可以是一个，也可以是多个。

常用布局名词

重置默认样式

方案一：使用全局选择器
方案二：reset.css
方案三：Normalize.css