bootstraptableborder粗细_Bootstrap的重置样式
类来规范。。
额外的样式需要通过明确的.class类来规范
Bootstrap的重置表现为,去掉本⾝样式,然后给元素添加其它样式,额外的样式需要通过明确的
重置CSS的原因:
作为尺⼨规格单位,代替em⽤于指定可缩放的组件的间隔与缝隙。
重置浏览器默认值,使⽤rem作为尺⼨规格单位
避免使⽤margin-top,防⽌使⽤它造成的垂直外排版(边距)混乱所造成之意想不到结果。更重要的是,⼀个单⼀⽅向最⼤化避免使⽤
的margin是⼀个简单的构思模型。
的单位。
为了易于跨设备缩放,block块元素必须使⽤rem作为margin的单位
属性,不影响容器溢出。
保持font相关属性最⼩的声明,尽可能地使⽤
尽可能地使⽤inherit属性
重置CSS中选择覆盖和重定义了哪些元素?
1、table元素
原本样式:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>重置样式</title>
<style>
body {
padding-bottom: 1000px;
}
</style>
</head>
<body>
<table>
<tr>
<td>周⼀</td>
<td>周⼆</td>
<td>周三</td>
</tr>
</table>
</body>
borderbox
</html>
使⽤Bootstrap重置后的样式:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="stackpath.bootstrapcdn/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>重置样式</title>
<style>
body {
padding-bottom: 1000px;
}
</style>
</head>
<body>
<table>
<tr>
<td>周⼀</td>
<td>周⼆</td>
<td>周三</td>
</tr>
</table>
</body>
</html>
加上额外的样式后:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="stackpath.bootstrapcdn/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>重置样式</title>
<style>
body {
padding-bottom: 1000px;
}
</style>
</head>
<body>
<table class="table table-bordered">
<tr>
<td>周⼀</td>
<td>周⼆</td>
<td>周三</td>
</tr>
</table>
</body>
</html>
2、页⾯默认元素 html、body
为提供更好的页⾯展⽰效果,Bootstrap v4 更新了<html> and<body>元素的⼀些属性。
全局性地将每⼀个元素的box-sizing属性(包括*:before、*:after都设置border-box-以确保DIV元素⾃⾝定义的宽度不会因为border或padding⽽超过。
采⽤font-<html>根元素没有声明font-size属性,但被假定为16px⼤⼩(这是⽬前Chrome等浏览器默认值),然后在此基础上采⽤
size:1rem的⽐例应⽤于<body>上,使媒体查询能够轻松的实现缩放,最⼤程序保障⽤户偏好和易于访问。
<body>元素被赋予⼀个全局性的font-family和 line-height,其下⾯的诸多表单元素也继承此属性,以防⽌字体⼤⼩错位冲突。
为了安全起见,<body>的background-color的默认值赋为#fff。
html:
body:
根节点元素还被赋予了很多值:

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。