前端：CSS/13/HTML引入CSS的方法，CSS表格属性，盒子模型，上下外边距合并

最新推荐文章于 2024-09-14 17:04:32 发布

浅香沉木

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量191

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Java_53/article/details/105770351

版权

HTML引入CSS的方法

1，嵌入式
通过<style>标记，来引入CSS样式；
语法格式：<style type=“text/css”></style>
提示：<style>中CSS样式，只能给当前网页来使用；
同一个网页中，<style>标记可以写多个且没有先后之分，多个<style>标记之间为并列关系（同级）；
2，外联式
通过<link>标记，来引入一个外部的CSS文件（.css），这样的话，可以实现公共的CSS代码被多个网页共享；注意.css类型的文件不能再使用HTML标记,特别是<style>标记不能再写入,直接写CSS代码内容就行了;
<link rel=“stylesheet” type=“text/css” href=“css/public.css” />
<link>标记的常用属性：
rel:也就是引入的是什么类型的文件，取值：stylesheet;
type:内容类型；
href:引入的CSS文件路径或地址；
注意：<link>标记放在<head>标记中；
同一个网页可以使用多个<link>来链入多个外部样式文件；
3，行内式（在HTML标记中直接写一定量的CSS样式，此方式写的CSS样式优先级最高）
每个HTML标记，都有一些公共的属性，如：class,id,title,style,等等
例：<body style=“background-color:blue;font-size:24px;font-family:黑体;”>
<h1>南柯一梦 - 等什么君-辞九门回忆(弹鼓版)（南柯一梦 remix）</h1>
</body>

CSS表格属性

border-collapse :表格边框线合并

盒子模型

我们可以把每个HTML标记，都看成一个个“盒子”；
这些盒子有一些共同特征：内容的宽度或高度，边框线，内填充，外边距；
“盒子”的总宽度=内容的宽度+左边框宽度+左填充+左外边距+右边框宽度+右填充+右外边距

上下外边距合并–这是一种现象

上下两个相邻的块元素，两个元素都指定了四个外边距，那么上下相邻的外边距会自动合并，且是取的较大的那个外边距。
例：

如何实现上下两个<div>之间的距离为100px,该如何实现？
1，上下两个<div>其中上面那个指定margin-bottom:100px,而下面那个margin-top:0px，这样可以实现。
2，可以在上下两个<div>中间，添加一个空的<div>,并给空<div>指定高度为100px;(此方法兼容性较高，因为外边距margin本身在各浏览器的兼容性不好)