CSS

html: 结构

css:层叠样式表 用于html的外观显示

• 文本内容

• 图片的外形

• 版面的布局

3种样式

image

• 行内样式 | 书写方便 | 没有实现样式和结构相分离 | 使用较少|控制一个标签
• 内部样式 | 部分结构与样式相分享 | 没有彻底分离 | 较多 | 控制一个页面
• 外部样式| 完全实现结构和样式相分离 | 需要引入 | 最多 | 控制整个站点

font-size:设置字号可以使用相对长度单位也可以使用绝对长度单位

长度单位

• font-family:设置字体p{ font-family:"微软雅⿊";}
  可以同时指定多个字体中间以逗号隔开,表示浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体.

1. 现在⽹网⻚页中普遍使⽤用14px+。
2. 尽量量使⽤用偶数的数字字号。ie6等⽼老老式浏览器器⽀支持奇数会有bug。
3. 各种字体之间必须使⽤用英⽂文状态下的逗号隔开。
4. 中⽂文字体需要加英⽂文状态下的引号，英⽂文字体⼀一般不不需要加引号。当需要设置英⽂文字体时，英⽂文字体名必须位于中⽂文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英⽂文状态下的单引号或双引号，例例如font-
family: "Times New Roman";。
6. 尽量量使⽤用系统默认字体，保证在任何⽤用户的浏览器器中都能正确显示。

CSS Unicode字体

在 CSS 中设置字体名称，直接写中⽂文是可以的。但是在⽂文件编码(GB2312、UTF-8 等)不不匹配时会
产⽣生乱码的错误。xp 系统不不⽀支持 类似微软雅⿊的中⽂

方案一: 你可以使⽤用英⽂文来替代。 ⽐比如 font-family:"Microsoft Yahei"。
方案二: 在 CSS 直接使⽤用 Unicode 编码来写字体名称可以避免这些错误。使⽤用 Unicode 写中⽂文字体 名称，浏览器器是可以正确的解析的。 font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软 雅⿊”。

字体

font:综合设置字体样式

选择器器{font: font-style font-weight font-size/line-height font-family;}

line-height

块级元素(block-level)

每个块元素通常都会独自占据一整行,可以对其设置宽度,高度,对齐等属性,常用用网页布局和网页结构的搭建.
常⻅见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点

• 总是从新行开始
• 宽度,高度,行高,外边距以及内边距都可以控制
• 宽度默认是父容器的100%
• 可以容纳内联元素和其它块元素

行内元素(inline-level)

行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度,高度,对齐等属性,常用于控制页面中文本的样式.
 常⻅的⾏内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素(inline-level)的特点

• 和相邻行内元素在一行上
• 宽,高无效,但水平方向的padding和margin可以设置,垂直方向的无效.
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其它行内元素.(a 特殊a 里面可以放块级元素)

注意

1.只有文字才能组成段落因此p里面不能放块级元素,同理还有这些标签h1~h6,dt,它们都是文字类块级标签,里面不能放其他块级元素.
2. 链接里面不能再放链接
3.a 里面可以放块级元素

行内块元素

CSS 三大特性

• CSS层叠性
  • 多种CSS样式的叠加
  • 是浏览器处理冲突的一个能力 [就近原则]
1.样式冲突,遵循的原则是就近原则.哪个样式离着结构近,就执行哪个样式
2.样式不冲突不会层叠
• CSS继承性
  • 子承父业 恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式(text-， font-，line-这些元素开头的都可以继承，以及color属性)
• CSS优先级
  • 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为 0，也就是说子元素定义的样式会覆盖继承来的样式。
  • ⾏内样式优先。应用style属性的元素，其行内样式的权重⾮常高(1,0,0,0)。总之，他拥有比上面提到的选择器都大的优先级。
  • 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最⼤的优先级，或者说排在最后的样式优先级最大。
  • CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最⼤优先级。

权重是可以叠加的

水平居中

• 文字水平居中text-align: center
• 盒子水平居中左右margin改为auto
  • 必须是块级元素,盒子必须指定宽度,用margin: auto;或margin: 0 auto;

外边距合并问题

• 相邻块元素垂直外边距的合并(也称外边距塌陷)
• 嵌套块元素垂直外边距的合并
  1.可以为⽗父元素定义1像素的上边框或上内边距。
  2.可以为⽗父元素添加overflow:hidden。

0E3913AF-2976-4882-8FFF-232BFF59F62F.png

浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素指定的位置的过程.`浮动的主要目的是 让多个块级元素一⾏显示`

清除浮动本质

  清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题

清除浮动的方法

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到⾥面，让父盒子闭合出口和 入口不让他们出来影响其他元素。

元素的定位

  元素的定位属性主要包括`定位模式`和`边偏移`两部分。
  1、边偏移 top bottom left right
  2、定位模式(定位的分类)
      - 静态定位(static):  `就是网页中所有元素都默认的是静态定位哦! 其实就是标准流的特性。`
      - 相对定位relative(自恋型): `相对定位是将元素相对于它在标准流中的位置进⾏定位，当position属性的取值为relative时，可以将元素定位于相对位置`
        1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
        2. 其次，每次移动的位置，是以自己的左上角为基点移动(相对于⾃⼰来移动位置)
      - 绝对定位absolute (拼爹型): `绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。`
      子绝⽗相
      - 固定定位fixed(认死理理型)
        1. 固定定位的元素跟父亲没有任何关系，只认浏览器器。
        2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
    3.叠放次序
        当对多个元素同时设置定位时，定位元素之间有可能会发⽣重叠。在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应⽤用z-index层叠等级属性，其取值可为正整数、负整数和0。
 注意:
  1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
  2. 如果取值相同，则根据书写顺序，后来居上。
  3. 后⾯数字一定不能加单位
  4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

定位模式转换

跟浮动一样,元素添加了绝对定位和固定定位之后,元素模式也发生转换,都转换为行内块模式, 因此比如行内元素 如果添加了绝对定位或者固定位后浮动后可以不用转换模式，直接给⾼度和宽度就可以了。

元素的显示与隐藏

• display显示

  display:none 隐藏对象
  display:block 转换为块级元素同时还显示元素
  特点: 隐藏之后,不再保留位置
  

• visibility可见性

  visible: 对象可视
  hidden: 对象隐藏
  特点: 隐藏之后,继续保留原有位置.(停职留薪)
  

• overflow溢出

  检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
  visible :  不剪切内容也不添加滚动条。
  auto :   超出⾃动显示滚动条，不超出不显示滚动条
  hidden :  不显示超过对象尺寸的内容，超出的部分隐藏掉
  scroll :  不管超出内容否，总是显示滚动条
  

HTML转义符