HTML5与CSS3知识点总结（31-39）

31 解决外边距塌陷

满足以下条件就会产生外边距塌陷现象：

1. 子元素在父元素里面
2. 子元素中有margin-top或者margin-bottom值

解决方案：

第一种：给父元素增加内边距padding值

第二种方式：父元素增加边框border值

第三种方式：父元素增加overflow：hidden

第四种方式：给父元素或者子元素增加浮动，让其脱离标准流都可以

第五种：将父元素转变为行内块元素，display：inline-block

第六种：给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位

第七种：给父盒子增加flex或者inline-flex

32 隐藏元素

隐藏一个元素可以通过把 display 属性设置为"none"，或把 visibility 属性设置为"hidden"。但是请注意，这两种方法会产生不同 的结果。

visibility:hidden; 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了， 但仍然会影响布局。

display:none; 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用 的空间也会从页面布局中消失。

33 使元素在盒子里面垂直水平居中

p{
      border: 1px solid red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
  }

34 CSS改善 HTML 表单的外观（上接25）

• 设置输入框的样式

  如果只想设置特定输入类型的样式，则可以使用属性选择器：

  input[type=text]{} - 将仅选择文本字段

  input[type=password]{} - 将仅选择密码字段

  input[type=number]{}- 将仅选择数字字段

• 填充输入框

  使用 padding 属性在文本字段内添加空间

  input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  }
  

  请注意，我们已将 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框。

• 带边框的输入框

  使用 border 属性更改边框的粗细和颜色，并使用 border-radius 属性添加圆角

• 彩色的输入框 使用 background-color 属性为输入添加背景色，并使用 color 属性更改文本颜色：

• 获得焦点的输入框

  默认情况下，某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。你可以通过向输入框添加 outline: none; 来消 除此行为。

  input[type="text"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  outline: none;
  }
  

  使用 :focus 选择器可以在输入字段获得焦点时为其设置样式：

  input[type="text"]:focus {
  background-color: lightblue;
  border: 3px solid #555;
  }
  

• 带有图标/图像的输入框

  如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注 意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间：

  input[type="text"] {
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  border: 2px solid #cccccc;
  border-radius: 4px;
  background-color: white;
  background-image: url('img/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
  }
  

• 设置文本域的样式

  使用 resize 属性可防止对 textareas 调整大小（禁用右下角的“抓取器”）：

  textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
  }
  

• 设置输入按钮的样式

input[type="button"],
input[type="submit"],
input[type="reset"] {
background-color: green;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;/*鼠标变成手*/
}

35 CSS轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。 轮廓与边框不同！轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。轮廓也不是元素尺寸的一部分；元素的总宽度 和高度不受轮廓线宽度的影响。

• 轮廓样式

  outline-style 属性指定轮廓的样式，并可设置如下值： dotted - 定义点状的轮廓。 dashed - 定义虚线的轮廓。 solid - 定义实线的轮廓。 double - 定义双线的轮廓。 groove - 定义 3D 凹槽轮廓。 ridge - 定义 3D 凸槽轮廓。 inset - 定义 3D 凹边轮廓。 outset - 定义 3D 凸边轮廓。 none - 定义无轮廓。hidden - 定义隐藏的轮廓。

• 轮廓宽度 outline-width 属性指定轮廓的宽度

• 轮廓颜色 outline-color 属性用于设置轮廓的颜色。

  outline: 5px solid yellow;
  

• 轮廓偏移

  outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

36 CSS3 引入了媒体类型

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如： 视口的宽度和高度 ；设备的宽度和高度 ；方向（平板电脑/手机处于横向还是纵向模式）；分辨率 使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。

媒体查询语法：媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false

@media not|only mediatype and (expressions) {
CSS-Code;
}

CSS3媒体类型

值	描述
all	用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等等。
speech	用于大声“读出”页面的屏幕阅读器 。

媒体查询的简单实例：

下面的例子在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色会是粉色）：

body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

下例显示了一个菜单，如果视口的宽度为 480 像素或更宽，则该菜单会浮动到页面的左侧（如果视口小于 480 像素，则该菜单将 位于内容的顶部）：

#leftsidebar { width: 100%; float: none; }
#main { margin-left: 0; }
@media screen and (min-width: 480px) {
#leftsidebar { width: 200px; float: left; }
#main { margin-left: 216px; }
}

37 box-sizing属性

通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width）

box-sizing是css3的新属性，对容器宽高进行定义：引入box-sizing: border-box的容器的内边距和边框不再会增加它的宽度和高度，即padding和border的值算在指定宽高内部的，但外边距依然时算作外部。

38 特殊选择器

:nth-child(n) 选择器匹配父元素中第n个子元素。参数是元素的索引，索引从1开始。n可以为odd（奇数）或者even（偶数）或者公式（例如：n+2）

指定每个p元素匹配父元素的第2个子元素的背景色：

p:nth-child(2){
    background-color: red;
}

:nth-of-type(n) 选择器匹配同类型中的第n个同级兄弟元素。参数是元素索引，索引从1开始。可以为odd（奇数）或者even（偶数）或者公式（例如：n+2）

:last-child 选择器用来匹配父元素中最后一个子元素。

::selection 选择器匹配元素中被用户选中或处于高亮状态的部分。只可用应用于少数的css属性:color,background,cursor,outline

39 过渡 transition属性

• transition-property属性 用于设置应用过渡的css属性。其基本语法如下：

  transition-property:  none|all|property;
  

  属性值	描述
  none	没有属性会获得过渡效果
  all	所有属性都将获得过渡效果
  property	定义应用过渡效果的css属性名称，多个名称之间以逗号分隔

• transition-duration属性 用于定义过渡效果持续的时间：

  transition-duration: time;
  

  默认值为0，常用单位是秒（s）或者毫秒（ms）。

• transition-timing-function属性 用于规定过渡效果的速度曲线

  属性值	描述
  linear	指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)
  ease	指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,0.1)
  ease-in	指定以慢速开始，然后逐渐加快的过渡效果，等同于cubic-bezier(0.42,0,1,1)
  ease-out	指定以慢速结束的过渡效果，等同于cubic-bezier(0,0,0.58,1)
  ease-in-out	指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1)
  cubic-bezier(n,n,n,n)	定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0-1之间

  "cubic-bezier(n,n,n,n)“中文译为"贝塞尔曲线”

• transition-delay属性 用于规定过渡效果的开始时间

  transition-delay: time;

默认属性值为0，常用单位是秒(s)或者毫秒(ms)。属性值可以为正整数、负整数、0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；当设置为正数时，过渡动作会延时触发。

注：transition属性是复合属性，基本语法如下：

 transition: property duration time-function delay;

例如：

transition: border-radius 5s ease-in-out 2s;

如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有值，并且使用逗号进行分离。