开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详

4、元素的显示与隐藏

4.1 display 显示

display 设置或检索对象是否及如何显示。

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： display 隐藏元素后，不再占有原来的位置。

4.2 visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 　元素可视

visibility：hidden; 　 元素隐藏

特点：visibility 隐藏元素后，继续占有原来的位置。

4.3 overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

实际开发场景：

0. 清除浮动
1. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

总结：

属性	区别	用途
display 显示 （重点）	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility 可见性 （了解）	隐藏对象，保留位置	使用较少
overflow 溢出（重点）	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

5、CSS浮动

5.1 基本概念

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

  选择器 { 
     float: 属性值; 
  }

float 属性可以设置以下值之一：

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

5.2 浮动布局注意

1、浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

5.3 清除浮动

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：

• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
• 父级有了高度，就不会影响下面的标准流了

清除浮动样式

语法：

 选择器{clear:属性值;} 

clear 属性可设置以下值之一：

• none - 允许两侧都有浮动元素。默认值
• left - 左侧不允许浮动元素
• right- 右侧不允许浮动元素
• both - 左侧或右侧均不允许浮动元素
• inherit - 元素继承其父级的 clear 值

清除浮动两种方式

         /*清除浮动------方式1*/
             /*.clearfix:after {
                 content: "";
                 display: block;
                 height: 0;
                 clear: both;
                 visibility: hidden;
             }*/
             
             /*清除浮动------方式2*/
             .clearfix:before,
             .clearfix:after {
                 content: "";
                 display: table;
             }
             
             .clearfix:after {
                 clear: both;
             }
             
             .clearfix {
                 /* IE6、7 专有 */
                 *zoom: 1;
             }

6、CSS中常用样式设置

6.1 背景

background-color 属性指定元素的背景色。

     body {
       background-color: lightblue;
     }
     h1 {
       background-color: green;
     }

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

     div {
         background-color: green;
         /*opacity: 0.3;*/
         background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
     }

background-image 属性指定用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素。

     body {
       background-image: url("paper.gif");
     }

background-repeat背景重复

如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)

如需垂直重复图像，请设置 background-repeat: repeat-y;

background-repeat: no-repeat

background-position 属性用于指定背景图像的位置。

     body {
           background-image: url("gradient_bg.png");
           background-repeat: repeat-x;
            background-repeat: no-repeat;
            background-position: right top;
     }

background - 简写属性

在使用简写属性时，属性值的顺序为：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

 body {
   background: #ffffff url("tree.png") no-repeat right top;
 }

6.2 字体

font-family 属性规定文本的字体。

 .p1 {
   font-family: "Times New Roman", Times, serif;
 }
 ​
 .p2 {
   font-family: Arial, Helvetica, sans-serif;
 }

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

• normal - 文字正常显示
• italic - 文本以斜体显示
• oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

 p.normal {
   font-style: normal;
 }
 ​
 p.italic {
   font-style: italic;
 }

font-weight 属性指定字体的粗细：

 p.normal {
   font-weight: normal;
 }
 ​
 p.thick {
   font-weight: bold;
 }

font-size 属性设置文本的大小。

 h1 {
   font-size: 40px;
 }
 ​
 h2 {
   font-size: 30px;
 }

6.3 文本

color 属性用于设置文本的颜色。

• 颜色名 - 比如 "red"
• 十六进制值 - 比如 "#ff0000"
• RGB 值 - 比如 "rgb(255,0,0)"

 body {
   color: blue;
 }
 ​
 h1 {
   color: green;
 }

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

 h1 {
   text-align: center;
 }
 ​
 h2 {
   text-align: left;
 }
 ​
 h3 {
   text-align: right;
 }
 div {
   text-align: justify;
 }

direction 和 unicode-bidi 属性可用于更改元素的文本方向：

 p {
   direction: rtl;
   unicode-bidi: bidi-override;
 }

vertical-align 属性设置元素的垂直对齐方式。

 img.top {
   vertical-align: top;
 }

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：

其他 text-decoration 值用于装饰文本

 a {
   text-decoration: none;
 }
 h1 {
   text-decoration: overline;
 }
 ​
 h2 {
   text-decoration: line-through;
 }
 ​
 h3 {
   text-decoration: underline;
 }

text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

 p.uppercase {
   text-transform: uppercase;
 }
 ​
 p.lowercase {
   text-transform: lowercase;
 }
 ​
 p.capitalize {
   text-transform: capitalize;
 }

text-indent 属性用于指定文本第一行的缩进：

 p {
   text-indent: 50px;
 }

letter-spacing 属性用于指定文本中字符之间的间距。

 h1 {
   letter-spacing: 3px;
 }
 h2 {
   letter-spacing: -3px;
 }

line-height 属性用于指定行之间的间距：

word-spacing 属性用于指定文本中单词之间的间距。

white-space 属性指定元素内部空白的处理方式。

 p.small {
   line-height: 0.8;
 }
 ​
 p.big {
   line-height: 1.8;
 }

text-shadow 属性为文本添加阴影。

 h1 {
   text-shadow: 2px 2px 5px red;
 }

6.4 轮廓

6.5 边框