Phase3 Day2 css

css

1.概述

Web的衰弱
在web早期（1990-1993）,html是一个很局限的语言。几乎完全由用于描述段落，超链接，列表和标题的结构化元素组成。随着万维网的出现（用户交互体验的加强），对html的要求越来越大，人们迫切需要html增加新的元素，去完成一个特定的功能–>css

css:层叠样式表 （级联样式表）

• 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
• CSS以HTML为基础，提供了丰富样式功能。

1.1 在html中引入css

• 行内
  对html中有一个style标签, 这个标签的内容就是css的样式
  

• 内联
  

• 外联(外部导入)
  第一种:通过link
  
  第二种:通过css文件
  

2.选择器

选择器就是, 把css中的样式通过某种中方式和html代码关联起来, 这种方式的选择,就是css选择器

• 标签选择器: 标签选择器, 就是通过’标签名’把html重点代码(标签) 和 css 对应(标签名) 样式结合起来
  

• ID选择器: 通过html元素的id属性,把html元素和css样式关联起来,
  Id选择器的写法就是,以’#***’来写
  ID: 对于每一个html元素来说, 都可以有一个属性id, 并且这个id是唯一的, 可以唯一标识这个html源
  

• 类选择器: 就是通过标签中的类名, (class属性指向的类名) 来关联css样式类选择器的写法: 是以 ‘.****’
  

• 复合选择器:后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
  p b { color:#FF000;}则p段落中b标签会变色
  p,div { color:#FF0000;}都会变色

• 属性选择器:用于选取带有指定属性的元素
  

• 伪类选择器:伪类是用来添加一些选择器的特殊效果。其实就在html中预先定义好的一些选择器。
  a:link {color:#FF0000;} /* 未访问的链接 /
  a:visited {color:#00FF00;} / 已访问的链接 /
  a:hover {color:#FF00FF;} / 鼠标划过链接 /
  a:active {color:#0000FF;} / 已选中的链接 */

• 伪元素选择器:伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多

选择器优先级

• !important > 行内 > ID选择器 > 伪类|类 | 属性选择 > 标签 > 通配符
• CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

3.盒子模型

• 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

• 对这个所占据的盒子, 有一些区分 (四块)：元素内容, 内边距(padding), 边框(border),外边距(margin)

宽高

背景颜色: 背景色 = 元素大小 + 内边距

边框: 边框仅设置宽度并不会起效果, 要配合’固体’属性(solid)

3.1 行/块元素转换

对应属性:

• 块级元素对应于display:block.
• 行内元素对应于display:inline.
• 行内块元素对应于display: inline-block属性

**对齐方式: ** : vertical-align

3.2 边框合并

在html中, 有垂直方向两个元素的外边距紧相邻, 那么就会产生一种现象:外边距合并 , 并且,合并到结果,是按照紧相邻的外边距最大的那个值进行合并

4 浮动float

标准文档流:在html页面, html元素(标签) 按照元素特性(行,块) 从左向右,从上向下顺序排列, 叫标准文档流

浮动:就是把一个html元素, 从标准文档流脱离出来(比喻: 把一个元素’漂浮起来,覆盖了标准文档流) 设计初衷是为了解决文字环绕问题,现在用来布局

浮动特性:

• 浮动只影响后面的元素
• 浮动找浮动，不浮动找不浮动
• 浮动以元素顶部为基准对齐
• 浮动可是实现模式转换（eg:span 设置浮动可以设置宽高）
• 让块级元素在一行显示

清除浮动clear:

• 当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开
• 一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面
• 出现这种情况，我们需要清除浮动,谁收影响就清除谁
• clear：left，right，both

5.定位

Position:通过使用position ，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式

• Static:元素框正常生成。
  默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• Relative:元素框偏移某个距离。
  相对定位的元素，相对于其正常位置进行定位
  并不脱离文档流
• Absolute:元素框从文档流完全删除
  绝对定位绝对不占空间位置（与浮动一样）
  脱离文档
  元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
  生成绝对定位的元素，相对于非 static 定位的第一个父元素进行定位。
  当一个盒子包含在另一个盒子中，所有父级盒子未设置定位，子盒子以浏览器左上角为基准设置位置； 当父盒子设置定位，子盒子以父盒子左上角为基准设置位置
• Fixed:绝对定位的元素，相对于浏览器窗口进行定位
  生成绝对定位的元素，相对于浏览器窗口进行定位

z-index: 仅能在定位元素上奏效,（例如 z-index:99）

6.溢出和隐藏(overflow)

溢出:overflow 属性规定当内容溢出元素框时发生的事情
属性:

• Visible:默认值。内容不会被修剪，会呈现在元素框之外。
• Hidden:内容会被修剪，并且其余内容是不可见的。
• Scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• Auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

隐藏:

• display:none 元素隐藏不占位置
• overflow:hidden; 将超出部分的元素隐藏
• visibility:hidden; 元素隐藏占位置