100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 前端:CSS/13/HTML引入CSS的方法 CSS表格属性 盒子模型 上下外边距合并

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

时间:2021-09-08 20:03:37

相关推荐

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

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本身在各浏览器的兼容性不好)

@沉木

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。