12.15知识点梳理

表格

边框

在css中设置表格边框，请使用border属性

宽度和高度：width，height

水平对齐

text-align属性设置<th><td>中内容的水平对齐方式（左，右，居中）

默认情况下，<th>元素的内容居中对齐，而<td>元素的内容左对齐

垂直对齐

vertical-align属性设置<th>或<td>中内容的垂直对齐方式（上，下，居中）

默认情况下，表中内容的垂直对齐是居中（<th>和<td>元素都是）

表格内边框

如果要控制边框和表格内容之间的间距，请在<th>和<td>元素上使用padding属性

水平分割线

向<th>和<td>添加border-bottom属性，以实现水平分割线

可悬停表格

在<tr>元素上使用：hover选择器，以突出显示鼠标悬停时的表格行

条纹表格

实现斑马纹表格效果就使用nth-child（）选择器并为所以偶数（或奇数）表行添加background-color

表格颜色

背景颜色：background-color

文本颜色：color

响应式表格

如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条。

在<table>元素周围添加带有overflow-x：auto；的容器元素（例如<div>），来实现响应式效果

表单

设置输入框的样式

使用width属性来确认输入框的宽度

如果只想设置特定输入类型的样式，则可以使用属性选择器

填充输入框

使用padding属性在文本字段内添加空间

box-sizing：border-box确保元素的总宽度和总高度中包括内边距（填充）和最终的边框。

若有很多输入，那么可能还需要添加外边框，以便在它们之外添加更多空间。

带边框的输入框

border-radius属性添加圆角，boder

border-bottom：下边框

彩色的输入框

background-color：添加背景色

color：更改字体颜色

获得焦点的输入框

某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。但可以使用nutline：none属性来消除此行为。

使用：focus选择器可以在输入字段获得焦点时为其设置样式。

带有图标/图像的输入框

background-image：在输入框包含图标

background-position：设置图片坐标

设置文本域的样式

resize属性：防止对textareas调整大小（禁用右下角的“抓取器”）

轮廓

轮廓是在元素周围绘制一条线，在边框之外，以凸显元素。

轮廓与边框不同，轮廓在元素边框之外绘制的，并且可能与其他内容重叠，轮廓也不是元素尺寸的一部分，元素的总宽度和高度不受轮廓线宽度的影响。

outline-style属性：指定轮廓的样式

dotted：点状轮廓

dashed：虚线轮廓

solid：实现轮廓

double：双线轮廓

groove：3D凹槽轮廓

ridge：3D凸槽轮廓

inset：3D凹边轮廓

outset：3D凸边轮廓

none：无轮廓

hidden隐藏轮廓

轮廓宽度

outline-width属性：指定轮廓的宽度

thin：通常为1px

medium：通常为3px

thick：通常为5px

特定尺寸：以px，pt，cm，em计

轮廓颜色

outline-color属性：设定轮廓的颜色

name：指定颜色名

HEX：指定十六进制值

RGB:指定RGB值

HSL:指定HSL值

invert：执行颜色反转（确保轮廓可见，无论是什么颜色背景）

invert参考值仅在IE及Opera下有效。

简写属性

outline属性：用于设置以下各个轮廓属性的简写属性

outline-width

outline-style（必需）

outline-color

outline属性可指定一个，两个或三个，值的顺序无关紧要。

轮廓偏移

outline-offset属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

尺寸

设置高度和宽度

height和width属性用于设置元素的高度和宽度。

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

高度和宽度值

height和width属性可设置如下：

auto：默认，浏览器计算高度和宽度。

lenght：以px、cm等定义高度/宽度。

%：以包含块的百分比定义高度/宽度。

initial：将高度/宽度设置为默认值。

设置max-width 最大宽度

max-width属性用于设置元素的最大宽度。

长度值：px、cm，包含块的百分比：%都能指定max-width，也可以将其设置为none（默认值）

如果浏览器窗口小鱼当前设置的元素宽度，浏览器会出现滚动条。

max-hight属性可以设置元素的最大高度。（最大高度）

设置min-width 最小宽度

min-width属性用于设置元素的最小宽度。

在制作响应式表格的时候，会使用min-width。

<style>

#th1{

min-width：60px；

}

#th2{

min-width：60px；

}

#th3{

min-width：60px；

}

</style>

<tr>

<th id="th1">部门</th>

<th id="th2">姓名</th>

<th id="th3">家庭地址</th>

min-height属性可以设置元素的最小高度。

媒体类型

css2引入了媒体类型

css2中引入了@media规则，它为了让不同媒体类型定义不同样式规则成为可能。

@media screen and（）{

}

css3引入了媒体类型

css3中的媒体查询扩展了css2媒体类型的概念：他们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例：

视口的宽度和高度

设备的宽度和高度

方向

分辨率

媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为true或false。

可以针对不同的媒体使用不同的样式表。

css媒体类型

all：用于所有媒体类型设备。

print：用于打印机。

screen：用于计算机屏幕，平板电脑，智能手机等等。

speech：用于大声“读出”页面的屏幕阅读器。

媒体查询的简单实例

使用媒体查询的一种方法是在样式表内有一个备用的css部分。

菜单的媒体查询

使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。

列的媒体查询

媒体查询的常见用法是创建弹性布局。

！important

用于增加样式的权重，它与优先级无关，但它与最终的结果直接相关。

id选择器和类选择器具有更高级的优先级。