web前端开发一些捡漏知识——table-layout 属性、＜col＞标签、地标角色、css选择器的特殊性、Media Queries媒体查询

最新推荐文章于 2023-12-11 16:39:02 发布

郁美人

最新推荐文章于 2023-12-11 16:39:02 发布

阅读量977

点赞数

分类专栏：前端开发文章标签： web css3

本文链接：https://blog.csdn.net/qq_43077362/article/details/105688737

版权

前端开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、CSS table-layout 属性

设置表格的布局算法：

table{table-layout:fixed;}

tableLayout 属性用来显示表格单元格、行、列的算法规则。固定表格布局(fixed)与自动表格布局(auto)相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。

2.HTML <col> 标签

定义和用法

<col> 标签为表格中一个或多个列定义属性值。

如需对全部列应用样式，<col> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。

您只能在 table 或 colgroup 元素中使用 <col> 标签。

col 元素为表格中的三个列规定了不同的对齐方式：

eg：

<html>
<body>

<table width="100%" border="1">
  <col align="left" />
  <col align="left" />
  <col align="right" />
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>

</body>
</html>

输出：

这是在w3cschool里的，为什么使用了col没有效果呢，把col删掉了也是一样的效果

3.HTML <colgroup> 标签

定义和用法

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。

如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。

<colgroup> 标签只能在 table 元素中使用。

eg:两个 colgroup 元素为表格中的三列规定了不同的对齐方式和样式（注意第一个 colgroup 元素横跨两列）：

<table width="100%" border="1">
  <colgroup span="2" align="left"></colgroup>
  <colgroup align="right" style="color:#0000FF;"></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

输出：同样也是没有效果，不知道那的问题，说是浏览器都支持，还是这个标签已经不适用了？

4.地标角色（landmark role）

　　地标角色可以帮助用户识别页面区域，从而让屏幕阅读器用户可以直接跳到这些区域。通常，对这些区域指定role属性就可以了。role属性的作用是告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色，主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。

html 里面的 role 本质上是增强语义性，当知现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常道这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。

role的作用是描述一个权非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button。

①<div role="img" aria-label="Description of the overall image">

②<div class="container">

③<header role="banner">　</header>

④<nav role="navigation"></nav>

⑤<div role="complementary">

⑥<main role="main"></main>

⑦<article></article>

⑧<div role=”contentinfo”> 在ARIA演示网站上，通常在页脚元素上添加role =“contentinfo”。

⑨<form role="search"></form> //The search landmark role is used to identify a section of the page used to search the page, site, or collection of sites.

等等，其他ARIA详见https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role

5.css选择器的特殊性（即优先级）

在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。计算规则可以看下面一张图：

我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
第一等：代表内联样式，如: style=””，权值为1000。加 1, 0, 0, 0。
第二等：代表ID选择器，如：#content，权值为100。加 0, 1, 0, 0。
第三等：代表类，伪类和属性选择器，如.content，权值为10。加 0, 0, 1, 0。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。加 0, 0, 0, 1。
注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。

注意： !important 标志超过了所有其他声明，优先级最高

实际上，特殊性值 0, 0, 1, 0 比值 0, 0, 0, 13更高。之所以会这样，是因为值是从左向右排序的。特殊性值 1, 0, 0, 0 大于以 0开头的所有特殊性值，而不论后面的数是什么。所以 0, 1, 0, 1 比 0, 0, 1, 7 高，因为前一个值中第二位上的 1 大于第二个值中第二位上的 0。

参考链接：https://blog.csdn.net/weixin_36210698/article/details/88407972

6.Media Queries媒体查询

Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：

1  <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
2  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
3  <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

或者这样的形式：

1  <style type="text/css" media="screen">
2     @import url("css/style.css");
3   </style>

CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。

现在最常见的一个例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，
让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。

eg首先来看一个简单的实例：

1   <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。

Media Queries可以通过设备宽度、高度、通过设备是否横置(横向landscape)或竖置（纵向portrait）、通过设备类型以及设备像素来过滤设备。

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

更多请查看：https://blog.csdn.net/sunforraining/article/details/79115055 介绍的很详细

参考链接：https://www.jianshu.com/p/b4cd4dea0489

来源：简书

郁美人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端开发一些捡漏知识——table-layout 属性、＜col＞标签、地标角色、css选择器的特殊性、Media Queries媒体查询

1、CSStable-layout属性设置表格的布局算法：table{table-layout:fixed;}tableLayout 属性用来显示表格单元格、行、列的算法规则。固定表格布局(fixed)与自动表格布局(auto)相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。在自动表格布局...
复制链接

扫一扫