CSS标签属性及案例超详细笔记，高级前端面试题

75

5.CSS的属性

===========================================================================

5.1 字体属性

---

CSS 字体属性允许设置字体样式 (font-family) 和字体加粗 (font-weight)，还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）；

• font-family：默认微软雅黑，如果浏览器不支持字体系列，就会使用默认的字体系列；

• font-size：字体大小（px）

• font-style：字体风格

*   normal(默认)

*   italic(斜体)

*   oblique : 倾斜的字体

• font-weight：设置字体粗细程度

*   不设置:默认normal

*   bolder:适当加粗

font字体的简写属性：将所有的样式属性声明在一个样式代码

• font:楷体 50px oblique bolder ;

这是一个span标签

5.2 文本属性

---

可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进；

• direction：设置文本方向

*   ltr: left to right

*   rtl: right to left

• line-height:文本行高

• color:颜色(red/#F00)

• letter-spacing :字符间距

• letter-spacing :单词间距(系统默认两个字组成一个单词)

• text-align:文本的对齐方式(left,center,right)

• text-decoration:文本的修饰

*   underline:下划线

*   line-through:中划线

*   overline:上划线

*   none:去掉修饰内容

• text-indent:首行缩进以em为单位如：首行缩进2个字符2em

• letter-spacing:字符间距,字符与字符之间的间距

• word-spacing:单词间距,单词与单词之间的间距

这是一个div

超链接

this is a div1

this is a div2

5.3 背景属性

---

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果；

• background-color:将颜色作为背景

• background-image:将图片作为背景

• background-repeat:设置背景是否重复以及如何重复

• 默认图片作为背景，如果这个图片没有将浏览占满，它会自动以左上角为（0，0)点，x轴和y轴在重复；

• no-repeat:不重复 (推荐)

• repeat-x:x轴重复

• repeat-y:y轴重复

• background-size: cover(全覆盖)

• background-position:设置图片的起始位置

• 默认值:top left

• top center

CSS背景属性

5.4 字体、文本、背景案例

---

读心灵鸡汤小故事，品智慧人生

一位老和尚，他身边聚拢着一帮虔诚的弟子。这一天，他嘱咐弟子每人去南山打一担柴回来。弟

子们匆匆行至离山不远的河边，人人目瞪口呆。只见洪水从山上奔泻而下，无论如何也休想渡河打柴

了。无功而返，弟子们都有些垂头丧气。唯独一个小和尚与师傅坦然相对。师傅问其故，小和尚从怀

中掏出一个苹果，递给师傅说，过不了河，打不了柴,

见河边有棵苹果树，我就顺手把树上唯一的一个苹果摘来了。后来，这位小和尚成了师傅的衣钵传人。

世上有走不完的路，也有过不了的河。过不了的河掉头而回，也是一种智慧。

但真正的智慧还要在河边做一件事情：放飞思想的风筝，摘下一个“苹果”。历览古今，抱定这样一种生活信念的人，最终都实现了人生的突围和超越。

5.5 尺寸属性

---

CSS 尺寸 (Dimension)属性允许控制元素的高度和宽度。同样，允许你增加行间距；只对你设定的范围有效；

CSS尺寸属性对行内元素无效，只对是块级元素

这是一个font

这是一个span

这是一个div

5.6 表格属性

---

通过CSS表格样式设置边框和单元格之间的空隙，CSS 中设置表格边框，使用 border 属性；

• border-collapse：合并边框和单元之间空隙；

• width 和 height 属性定义表格的宽度和高度；

• text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中；

• vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐；

学号 姓名 班级 成绩 1 张三 1001班 80 2 李四 1002班 90

5.7 列表属性

---

CSS 列表属性允许放置、改变列表项标志，或者将图像作为列表项标志；

• list-style-image：将图象设置为列表项标志；

• list-style-position：设置列表中列表项标志的位置；

*   inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐；

*   outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐；

*   inherit：规定应该从父元素继承 list-style-position 属性的值；

• list-style-type：设置列表项标志的样式；

*   square：列表项标志为方片

*   disc：实心圆（默认）

*   circle：空心圆

• 卡卡
• 之家
• 卡卡

• 

  5.8 边框属性

  ---

  CSS边框属性允许规定元素边框的样式、宽度和颜色；

  • 边框默认的方向(颜色/宽度/样式):上 右 下 左(顺时针方向)；

  • 边框所有的属性(颜色/宽度/样式):某一个边没有设置颜色/宽度/样式都会补齐对边的颜色/宽度/样式；

  

  

  5.9 圆角边框

  ---

  边角是个弧形；

  border-radius：创建圆角

  box-shadow：向方框添加阴影

  border-image：使用图片来创建边框

  

  

  5.10 浮动属性

  ---

  浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；

  • float:right：进行右浮动

  • float:left：进行左浮动

  • clear：清除浮动

  *   both：左右两边都不浮动
  

  div1
  div2
  div3

  

  6. 盒子模型

  ===========================================================================

  将HTML页面中的任意元素都可以看为是“盒子”（万物皆盒子）；CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和外边距的方式；

  • 盒子的容量（element）：指定盒子的宽度和高度（DIV的宽度和高度）；

  • 盒子的厚度（border）：就是指定DIV元素的边框大小；

  • 盒子的内边距（padding）：内容和边框之间的距离；

  • 盒子的外边距（margin）：盒子跟盒子之间的距离；

  padding和margin都和CSS边框里的特点一致；

  • 默认方向：上、右、下、左

  • 某一个边没有设置外边距或内边距会自动补齐对边的外边距跟内边距；

  

  • element:元素内容

  • width:元素内容的宽度

  • height:元素内容的高度

  • border:元素的边框

  • padding:边框到内容的距离

  • margin:边框到其他元素的距离,同时设置左上右下外边距

  

  

  注意：

  • 内边距和外边距的值可以是负数；

  • 在页面上，设置margin-right无效，因为元素默认是左对齐，不管怎么设置元素都是左对齐，所以将元素设置为右对齐就可以看到效果，float:right；

  • 浏览器：元素进行渲染的时候，是从左往右进行渲染；

  7. CSS定位

  ============================================================================

  CSS 定位 (Positioning) 属性允许对元素进行定位；

  • position:

  *   固定(fixed)
  

  *   相对(relative)
  

  *   绝对(absolute)
  

  *   静态(static)
  

  • left：对元素进行左偏移；

  • top:对元素进行上偏移；

  • right:对元素进行右偏移；

  • bottom:对元素进行下偏移；

  7.1 固定定位

  ---

  只在一个位置进行显示；(类似小广告)

  

  卡卡之家

  卡卡之家

  卡卡之家

  卡卡之家

  卡卡之家

  卡卡之家

  卡卡之家

  卡卡之家

  卡卡之家

  卡卡之家

  卡卡之家

  卡卡之家

  

  7.2 相对定位

  ---

  如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动；

  这是span1

  这是span2

  这是span3

  

  原有元素占用的空间不会消失，偏移根据原有位置进行偏移；

  7.3 绝对定位

  ---

  设置绝对定位的元素框从文档流中删除，并相对于其包含块定位，元素原先在正常文档流中所占的空间会关闭；

  这是一个span1

  这是一个span2

  这是一个span3

  

  绝对定位并不会在原有位置占用空间，元素的偏移是根据父容器进行偏移；

  8. 块级元素和行内元素

  ================================================================================

  display: inline(行内元素)、block(块级元素)、inline-block(行内块级元素)；

  块级元素：

  • 块级元素前后会带有换行符,占用一整行；

  • 常见的块级元素:div；

  行内元素：

  • 行内元素前后没有换行符,只包裹内容；

  • 常见的行内元素:span；

  • margin-top、margin-bottom、padding-top、padding-bottom设置无效；

  这是一个div

  这是一个span

  

  9. CSS伸缩布局

  ==============================================================================

  伸缩布局flex：在响应式开发中可以发挥极大的作用；

  如：内容根据浏览器的大小而进行改变；

  • flex-container:伸缩容器；

  • main-axis:主轴,元素的排列方向，默认是row(水平方向)；

  • cross-axis:侧轴，默认是column(垂直方向)；

  • flex-item:伸缩元素，会按照主轴的方向进行排列；

  

  9.1 flex入门案例一

  ---

  左边是菜单栏（40%），右边是内容栏（60%），高度填充整个屏幕；