CSS 知识点整理

本文是我整理的关于CSS的部分基础知识点，适合正在准备前端工作面试的人做简单回顾。

1. 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。[1]

 

2. 隐藏元素 - display:none或visibility:hidden

  • visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
  • display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。[1]

 

3. 块和内联元素

利用CSS我们可以摆脱HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：

  • display:block -- 显示为块级元素
  • display:inline  -- 显示为内联元素
  • dipslay:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性[2]

 

4. Position

position 属性的五个值：

  • static -- HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
  • relative -- 相对定位元素的定位是相对其正常位置。相对定位元素经常被用来作为绝对定位元素的容器块。注意relative最小化使用原则。（具体解释参考https://segmentfault.com/a/1190000014877050）
  • fixed -- 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
  • absolute -- 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
  • sticky -- 粘性定位的元素是依赖于用户的滚动，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix。(点击查看实例) [1]

 

5. Overflow

overflow 属性的五个值：

  • visible -- 默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden -- 内容会被修剪，并且其余内容是不可见的。
  • scroll -- 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto -- 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  • inherit -- 规则应该从父元素继承 overflow 属性的值。[1]

 

6. Float

Float 会使元素向左或向右移动，其周围的元素也会重新排列。Float 往往是用于图像，但它在布局时一样非常有用。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

6.1 彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

6.2 清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。[1]

例如：

CSS 代码：

.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
    background: silver;
}
.text_line
{
    clear:both;
    margin-bottom:2px;
}

HTML 代码：

<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<h3 class="text_line">-----这里清除浮动-----</h3>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>

 效果如下：

 
 
 
 

-----这里清除浮动-----

 
 
 
 

 

 

 

 

7. 水平居中

7.1 margin:auto;

设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配。如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

7.2 text-align: center;

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center; [1]

 

8. 垂直居中

8.1 利用padding

比如，如果想要一段文字在一个div中垂直居中，可以设置这个模块上下padding相同。

8.2 line-height

可以设置 line-height 属性值和 height 属性值相等来使 div 元素垂直居中。[1]

关键代码：

.center {
    line-height: 200px;
    height: 200px;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

8.3 postion 和 transform

关键代码：

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 

9. 伪类/伪元素

a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。[1]

选择器示例示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值

  

10. CSS 组合选择符

在 CSS3 中包含了四种组合方式:

  • 后代选择器 -- 以空格分隔 (div p)
  • 子元素选择器 -- 以大于号分隔 (div>p)
  • 相邻兄弟选择器 -- 以加号分隔 (div+p)，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
  • 后续兄弟选择器 -- 以破折号分隔 (div~p)，后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。[1]

 

11. CSS 媒体类型

@media 规则允许在相同样式表为不同媒体设置不同的样式。[1]

媒体类型描述
all 用于所有的媒体设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示，比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv 用于电视机类型的设备。

12. CSS 属性选择器

注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。[1]

  • 下面是包含标题（title）的所有元素的例子：
[title]{ }
  • 下面是标题 title='example' 的所有元素的例子:
[title=example] {}
  • 下面是包含hello的title属性的元素的例子，使用（~）分隔属性和值:
[title~=hello] { }
  • 下面是包含en的lang属性的元素样式的例子，适用于en、en-us、en-gb等，使用（|）分隔属性和值:
[lang|=en] { }

 

参考资料：

  1. CSS教程 | 菜鸟教程

  2. html块级元素和内联元素区别详解

 

posted @ 2019-03-01 18:37  Zhenqi  阅读(1135)  评论(0)  编辑  收藏  举报