CSS常用的字体及文本样式

字体属性

1. font-family——字体名称

• 浏览器从前往后依次进行字体选择，若有该字体则选中，若没有该字体，则向后选择，若全部没有，则设置为浏览器默认字体

div{
    font-family: Courier, 'arial block', '微软雅黑';
}

2. font-size——字体大小

• 浏览器默认字体大小——16px

• 相对于显示器屏幕分辨率而言 div{ font-size: 12px; }

• 相对于父对象内文本的字体尺寸,1em=16px div{ font-size: 1.5 em; }

• 对于根标签内文本的字体尺寸,rem常用于移动端布局中 div{ font-size: 1rem; }

• 可用英文单词表示：small，smaller,large,larger等 div{ font-size: small; }

• 相对于父对象中字体的百分比，字体不能自适应 div{ font-size: 80%; }

3. font-weight——字体粗细

p { 
    font-weight:bold; /*bolder*/
}
h1{ 
    font-weight:normal; 
}
span{
    font-weight:800;
}

4. font-style——字体样式

• 常用于页面中将斜体等非正常字体，转换为正常字体显示

• 正常显示

em {
    font-style:normal;
}

• 斜体显示

i {
    font-style:italic;
}

5. font——复合属性 font-weight font-size/line-height font-family div{ font:bold 12px/30px arial,sans-serif,"宋体"; }

文本属性

1. color——字体颜色

body { color:red; }

h1 { color:#00ff00; }

p { color:rgb(0,0,255); } 最后多了透明度 span{ color:rgba(255,0,0,0.1); }

2. text-align——文本水平对齐方式

h1 { text-align:center; }

h2 { text-align:left; }

h3 { text-align:right; }

3. vertical-align——垂直对齐方式 仅适用于图像周围的文本

4. text-decoration——文本修饰线

h1 {
    /*上划线*/
    text-decoration:overline;
}   
h2 {
    /*贯穿线，删除线*/
    text-decoration:line-through;
}   
h3 {
    /*下划线*/
    text-decoration:underline;
}   
a {
    /*取消修饰线*/
    text-decoration: none;
}

5. text-indent——文本缩进

6. line-height——文本行高

• 当 line-height = height 时，文本垂直居中

p {
	height:20px;
    line-height:20px;
}

7.text-overflow——文本溢出标识

div{
    /*文本溢出显示省略号*/
	text-overflow:ellipsis;
}

div{
    /*文本溢出进行裁切*/
	text-overflow:clip;
}

如何让*** 【单行文本】 ***显示省略号?

div {
    /*1.容器有宽度*/
    width:100px;
    /*2.强制不换行*/
    white-space:nowrap
    /*3.溢出要隐藏*/
    overflow:hidden;
    /*4.最后怎么显：ellipsis省略号，clip裁剪*/
    text-overflow:ellipsis;
}

CSS盒模型

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。 每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

• 内容区域 content area ，由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。

如果 box-sizing 为 content-box（默认），则内容区域的大小可明确地通过 width、min-width、max-width、height、min-height，和 max-height 控制。

• 内边距区域 padding area 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。

• 内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。

• 边框区域 border area 由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。

• 边框的粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height，和 max-height 属性控制。假如框盒上设有背景（background-color 或 background-image），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可通过 CSS 属性 background-clip 来改变。

• 外边距区域 margin area 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。

外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。

最后，请注意，除可替换元素外，对于行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（每一行文字的高度）则由 line-height 属性决定，即使边框和内边距仍会显示在内容周围。

box-sizing: content-box;(默认) 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右) box-sizing: border-box; 而IE盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border。盒子的总宽度为 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

盒模型常见问题和解决方法

margin 塌陷现象

margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的 真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到 了边距值大的值内部。

• 同级元素塌陷 上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是 较大的那个值。
• 父子元素塌陷 父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的 margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。

解决 margin 塌陷问题的方法

1. 同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
2. 父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距 分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来， 而是父级的 padding 挤出来。 另外注意：水平方向的 margin 没有塌陷现象。 注： 1.设置边框 2.overflow：hidden; 3.使用伪元素

标准文档流及浮动属性

• 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的 流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
• HTML就是一种标准文档流文件。
• HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。

float 属性定义元素在哪个方向浮动。

• left 元素向左浮动。
• right 元素向右浮动。
• none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
• inherit 规定应该从父元素继承 float 属性的值。

浮动存在的问题以及解决办法

• 问题一
  • 标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。 如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。
• 浮动的问题2
  • 父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有 可能影响到后面浮动元素的贴边。

清除浮动一：height

解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边 问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现

清除浮动二：clear属性

解决：浮动元素影响后面元素标准流位置和贴边。 问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确

清除浮动三：隔墙法

• 外墙法 解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离。 问题：父元素没有高度自适应。
• 内墙法 解决：父元素高度自适应，浮动影响后面的元素位置和贴边。 缺点：浮动是 css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余。

清除浮动四：伪类

• 本质是使用伪类方法利用css代码书写一堵内墙。 伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。 :after：这个伪类表示选中的是某个标签内部的最后的位置。 书写方法：前面必须加普通的选择器，后面连续书写伪类名称。 将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一 个clearfix的类名。

清除浮动五：溢出隐藏

给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以 解决浮动的所有问题。

背景属性以及背景图的应用

背景属性

背景颜色 background-color(rgba背景半透明) 背景图片 background-image 背景重复 background-repeat 背景定位 background-position 背景附着 background-attachment 背景缩放 background-size 多背景逗号隔开

背景图应用

• 替换插入图

<h1>
    <a href='#'><img src='imgaes.png'/></a>
</h1>

• padding 区域背景图

.news li {
    padding-left: 25px;
    background: url(images.png) no-repeat left center
}

• 精灵图技术

1.将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片。 2.利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。

定位属性以及应用和定位问题解决

定位属性position 属性值：relative 相对定位 absolute 绝对定位 fixed 固定定位 偏移量属性 水平方向：left、right。 垂直方向：top、bottom。

应用

• 压盖效果
• 据中
• 解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定 位，利用相对定位居中的方法进行居中。
• 解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定 位，利用相对定位居中的方法进行居中。

定位问题和解决方法

定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。 如果都是定位的元素，在 HTML 中后写的定位压盖先写的定位。 因此，书写代码时，需要注意压盖效果，必须合理设置 HTML 元素的书写顺序。

• 自定义压盖顺序注意事项

• 属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。
• 如果属性值相同，比较HTML书写顺序，后写的压盖先写的。
• z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
• 父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分： 父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。

子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了 z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效 应”。

HTML5新增语义化布局标签

新增语义化标签

<header>：头部标签
<nav>：导航标签
<main>: 主体标签
<article>：独立的内容标签
<section>：区段标签
<aside>：侧边栏标签
<footer>：尾部标签

多媒体标签

音频：<audio> 视频：<video>

h5 新增<input>表单类型

type="email" 限制用户输入必须为Email类型
type="url" 限制用户输入必须为URL类型
type="date" 限制用户输入必须为日期类型
type="time" 限制用户输入必须为时间类型
type="month" 限制用户输入必须为月类型
type="week" 限制用户输入必须为周类型
type="number" 限制用户输入必须为数字类型
type="range" 滑动条
type="tel" 手机号码
type="search" 搜索框
type="color" 生成一个颜色选择表单

• <datalist> 标签

<input type="text" list="option-list">
<datalist id='option-list'>
    <option value="广州">gz</option>
    <option value="广州">gz</option>
    <option value="广州">gz</option>
</datalist>

CSS3新增属性

属性列表

• 边框 (Borders) border-color border-image border-radiusbox-shadow
• 背景 (Backgrounds) background-origin background-clip background-size
• 颜色 (Color)
  opacity RGBA colors
• 文本 (Text effects) text-shadow
  text-overflow word-wrap

盒子阴影box-shadow

CSS3新增选择器

• 子级选择器 element1 > element2
• 兄弟选择器 element1 + element2,element1 ~ element2
• 结构伪类选择器 E:first-child 匹配父元素中的第一个子元素E E:last-child 匹配父元素中最后一个E元素 E:nth-child(n) 匹配父元素中的第n个子元素E E:first-of-type 指定类型E的第一个 E:last-of-type 指定类型E的最后一个 E:nth-of-type(n) 指定类型E的第n个
• 伪元素选择器 E::before 在 E 元素内部的前面插入一个元素 E::after 在 E 元素内部的后面插入一个元素 E::first-letter 选择到了 E 容器内的第一个字母 E::first-line 选择到了 E 容器内的第一行文本
• 属性选择器 E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性且属性值等于val的E元素 E[att^="val"] 匹配具有att属性、且值以val开头的E元素 E[att$="val"] 匹配具有att属性、且值以val结尾的E元素 E[att*="val"] 匹配具有att属性、且值中含有val的E元素

新增2D/3D属性和动画

2D属性transform

• 位移 translate()
• 缩放 scale()
• 旋转 rotate()
• 倾斜 skew()
• 原点 transform­-origin

3D属性

透视属性 perspective：像数值，近大远小

CSS动画

@keyframes 动画名称 { 动画过程，可以添加任意百分比处的动画细节 } animation 属性 div { animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间； }