CSS基础知识要点(Y7)

409 阅读7分钟

1.【width】宽度和【height】高度

【width】设置宽度

    width:值

【height】设置高度

    height:值

heightwidth 属性不包括内边距边框外边距。它设置的是元素内边距边框以及外边距内的区域高度宽度

【max-width】用于设置元素的最大宽度。

可以用长度值(例如 px、cm 等)或包含块百分比)来指定 max-width最大宽度),也可以将其设置为 none默认值。意味着没有最大宽度)。

    max-width:值

【min-width】使用 max-width 能够改善浏览器对小窗口的处理。

注释:max-width 属性的覆盖 width(宽度)

    min-width:值

【max-heigth】最大高度

    max-heigth:值

【min-height】最小高度

    min-heigth:值

2.盒子模型(标准盒子模型和IE怪异盒子模型)

标准盒模型内容区 内容填充区(内边距) 边框 外边距

设置宽度
标准盒模型中针对的元素的内容区

怪异盒模型宽度是包括 内容区 内容填充区 边框三部分

IE怪异盒模型 内容区+内容填充区(内边距)+边框(宽度) 外边距

【box-sizing】标签定义怪异盒子模型

    box-sizing: border-box;

3.文本样式

【color】文字颜色

   color:颜色值;

【font-family】字体类型

规定文本字体 可以匹配多个字体 都不匹配的话会使用默认字体

    font-family:字体类型;

五个通用字体族

  • 衬线字体(Serif)- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体(Sans-serif)- 字体线条简洁(没有小笔画)。它们营造出现代而简约的外观。
  • 等宽字体(Monospace)- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体(Cursive)- 模仿了人类的笔迹。
  • 幻想字体(Fantasy)- 是装饰性/俏皮的字体。

【font-size】字体大小

    font-size:值;

注:普通文本(如段落)的默认大小16px16px = 1em)。

使用了像素,则仍然可以使用缩放工具调整整个页面大小

可以有很多单位 相对单位(px em rem vw vh )和绝对单位(cm mm )

为了允许用户调整文本大小(在浏览器菜单中),用 em 设置字体大小

拓展:响应式字体大小

可以使用 vw 单位设置文本大小,它的意思是“视口宽度”("viewport width")。

文本大小将遵循浏览器窗口的大小,请调整浏览器窗口大小

视口Viewport)是浏览器窗口大小1vw = 视口宽度的 1%。如果视口为 50 厘米宽,则 1vw 为 0.5 厘米。

【font-weight】字体加粗

指定字体粗细

    font-weight:值;

【font-style】字体样式

主要用于指定斜体文本

【参数值】

normal】文字正常显示
【italic】文本以斜体显示
【oblique】文本为“倾斜”(倾斜与斜体非常相似,但支持较少)

【font-variant】英文单词

指定是否以 small-caps 字体小型大写字母显示文本。 在 small-caps 字体中,所有小写字母都将转换为大写字母。但是,转换后的大写字母字体大小小于文本中原始大写字母的字体大小。

【参数值】

【small-caps】小写变大写 字体会比较小

【text-align】文本水平对齐方式

    text-align:值

【vertical-align】垂直对齐方式

    vertical-align:值

【text-decoration】文本修饰

用于设置或删除文本装饰

    text-decoration:值;

【参数值】

【underline】下划线
【overline】上划线
【line-through】中划线

通常用于从链接上删除下划线 注:建议不要在非链接文本下划线,因为这经常会使读者感到困惑。

【text-transform】字体变换

用于指定文本中的大写小写字母。

    text-transform:值;

【参数值】

【lowercase】字体变小
【uppercase】小写字母变成大写
【capitalize】英文首字母变大写

可用于将所有内容转换为大写小写字母,或将每个单词首字母大写

【text-shadow】文本阴影

    text-shadow:参数1 参数2 参数3 参数4

最简单的用法是只指定水平阴影参数1)和垂直阴影参数2

【参数值】

参数1 x轴偏移量  参数2 y轴偏移量  参数3 模糊程度 参数4 颜色

【text-indent】首行缩进

属性用于指定文本第一行缩进

    text-indent:值;

em一个中文字符大小

【word-spacing】词间距

用于指定文本单词之间的间距

【letter-spacing】字母之间的距离

用于指定文本字符之间的间距

【line-height】行高

字体行与行之间的距离 用于指定行之间的间距

【text-overflow】文本溢出变成省略号

需要使用 overflowwhite-space

【overflow】溢出隐藏

指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条

visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁,其余内容将不可见
scroll - 溢出被剪裁,同时添加滚动条以查看其余内容
auto - 与 scroll 类似,但仅在必要时添加滚动条

注释:overflow 属性仅适用于具有指定高度块元素

【overflow: visible】

默认情况下,溢出可见的(visible),这意味着它不会被裁剪,而是在元素框外渲染

【overflow: hidden】

如果使用 hidden 值,溢出被裁剪其余内容被隐藏

【overflow: scroll】

如果将值设置为 scroll,溢出将被裁剪,并添加滚动条以便在框内滚动。请注意,这将在水平垂直方向上添加一个滚动条(即使您不需要它)

【overflow: auto】

auto 值类似于 scroll,但是它仅在必要时添加滚动条

【overflow-x 和 overflow-y】

overflow-xoverflow-y 属性规定是仅水平还是垂直地(或同时更改内容的溢出

  • overflow-x 指定如何处理内容的左/右边缘

  • overflow-y 指定如何处理内容的上/下边缘

【white-space】文字不折行

指定元素内部空白处理方式

【unicode-bidi】重写文本

unicode-bidi 属性与 direction 属性一起使用,设置或返回是否应重写文本以支持同一文档中的多种语言

【参数值】 需要和【direction】一起使用

【rtl】从右到左 【ltr】默认,从左到右
【normal】默认值。元素不会打开额外的嵌入级别。(正常显示)
【embed】对于行内元素,此值将打开额外的嵌入级别。(正常显示)
【bidi-override】对于行内元素,该值会创建一个覆盖;(相反镜面效果)
对于块容器元素,该值将为不在另一个块容器元素内的行内级别的后代创建一个覆盖。
【isolate】该元素与其同胞隔离。

字体属性简写

font 属性是以下属性的简写属性

font-stylefont-variantfont-weightfont-size/line-heightfont-family

注意:font-sizefont-family必需的。如果缺少其他值之一,则会使用其默认值

    font:字体大小 字体类型 

字体图标(详见阿里矢量图和layui)

4.css表格

全宽表格

如果您需要一个可以覆盖整个屏幕全宽)的表格,请为 <table> 元素添加width: 100%;

【border-collapse】合并表格边框

设置是否将表格边框折叠为单一边框

为了实现斑马纹表格效果,请使用 nth-child() 选择器,并为所有偶数(或奇数)表行添加 background-color

【border-spacing】相邻单元格之间的边框的距离。

【参数值】

一个值:表示水平垂直间距 两个值水平间距 垂直间距

【caption-side】表格标题的位置。

【参数值】

top】默认值。把表格标题定位在表格之上。
【bottom】把表格标题定位在表格之下。

【empty-cells】是否在表格中的空白单元格上显示边框和背景。

empty-cells 属性设置是否显示表格中空单元格(仅用于“分离边框”模式)。

【参数值】

【hide】不在空单元格周围绘制边框。
【show】在空单元格周围绘制边框。默认。

【table-layout】用于表格的布局算法。

用来显示表格单元格算法规则

【参数值】

【automatic】默认。列宽度由单元格内容设定。
【fixed】列宽由表格宽度和列宽度设定。