第三周

最新推荐文章于 2022-01-16 21:18:31 发布

Venciki

最新推荐文章于 2022-01-16 21:18:31 发布

阅读量98

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/qq_33188421/article/details/85798002

版权

web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

css框模型

学习完字体及文本属性后，这里还有一个很重要的知识点等着我们去学习，那就是框模型啦。

基本框

我们都知道基本每一个css元素都有一个或多个框(称为盒子模型)（才有了我们说的padding margin-top margin-left）。如图所示：

Alt

这里解释一下：border（边框）margin（外边框）padding(内边距) height（高度）width（宽度）

一般的，一个元素的width被定义为从左内边界到右边界的距离，height则是从上内边界到下内边界的距离。（这些属性都可以应用到元素）。
不同的宽度丶高度丶内边距和外边距相结合，就可以确定文档的布局。在大多数情况下，文档的高度和宽度有浏览器自动确定，这要基于可用的显示区域和其他一些因素。当然在css下，可以更直接地控制元素的大小及显示方式。像这样：

.number1 img{
			height: 250px;
			width: 250px;
			border-radius: 125px;
			display: block;
		}

//这里我们将图片的高度设置为250px 宽度也设置为250px

我们可以看一个例子：

<body>
    <div>
        <p>这是一个例子！</p>
    </div>
</body>

在这个例子里面，p元素的包含块是div元素，因为作为块级元素或行内元素，这是最近的父元素。类似的，div的包含块是body。因此p的布局依赖于div的布局，而div的布局则依赖于body的布局。元素框的最内部部分是实际内容，直接保卫内容的是内边距。内边距呈现了元素的背景，内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距

也就是我们所说的css padding属性。这里说明一下（CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。）

如果您希望所有 a 元素的各边都有 10 像素的内边距，只需要这样:
eg1：

p{
	padding: 10px;
}

您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值:
eg：

p{
	h1 {padding: 5px 5em 5ex 5%;}
}

// 单位之前有解释过，这里说一下ex是是什么意思吧：ex是相当于在当前元素默认的英文字母“x”的高度，5ex就是5倍的英文字母“x”的高度(下同) //

单边内边距属性

也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

属性	描述
padding	各边的内边距
padding-top	设置上内边距
padding-right	设置右内边距
padding-bottom	设置下内边距
padding-left	设置左内边距

像这样：
eg：

p{
	 padding-top: 10px;
 	 padding-right: 10em;
  	 padding-bottom: 10ex;
 	 padding-left: 10%;
}

内边距的百分比数值

前面说过padding的值可以是百分数。这里有一个点要说下，在使用这个百分数值的时候，是按照其父元素（父元素在上面也有说过）的值计算的,像这样：

<div style="height: 200px;">
<p>父元素是200px，这时候如果你要对p元素弄百分值的时候就是在200px的基础上计算的</p>
</div> 
(
p{
height: 200px;
}
)

边框

我们用的是border这个属性
我们先看看border属性有哪些值和对应的什么作用：

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-color	设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-width	用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-bottom	用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

虽然属性有点多，但是都挺好记的因为英文翻译对应的汉语对应的作用，还有多用就能熟练掌握这些属性了。

边框样式

border-style属性，例如你想把一幅图片边框定义为outset，是指看上去像是“凸起按钮”：
eg：

.tupian img{
border-style: outset;
}
border属性也可以定义多样式，像这样：
```css
.tupian img{
	border-style: solid dotted dashed double;
}

上面这条规则为类名为 tupian 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

边框颜色

border-color属性(一次可以接受最多4个颜色值)。可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：
eg：

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

如果颜色值小于 4 个，值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色：（像这样）
eg：

p {
border-style: solid;
border-color: blue red;
}

透明边框

我们刚才讲过，如果边框没有样式，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。
css2就引入了一个新值transparent（这个值用于创建有宽度的不可见边框）
eg：

<html>
<head>

<style type="text/css">
a:link, a:visited {
border-style: solid;
border-width: 5px;
border-color: transparent;
}
a:hover {border-color: gray;}
</style>

</head>

<body>

<a href="#">hhhhhhhh</a>
<a href="#">jjjjjjjj</a>
<a href="#">kkkkkkkk</a>

</body>
</html>

这样写就回产生一个透明边框了
而鼠标放上面边框就会显示出来。

Venciki

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三周

css框模型学习完字体及文本属性后，这里还有一个很重要的知识点等着我们去学习，那就是框模型啦。基本框我们都知道基本每一个css元素都有一个或多个框(称为盒子模型)（才有了我们说的padding margin-top margin-left）。如图所示：这里解释一下：border（边框）margin（外边框）padding(内边距) height（高度）width（宽度）一般的，...
复制链接

扫一扫