border边框跟display块元素的使用

最新推荐文章于 2022-07-11 19:43:34 发布

远方0905

最新推荐文章于 2022-07-11 19:43:34 发布

阅读量971

点赞数

分类专栏： html5+css 文章标签：边框

本文链接：https://blog.csdn.net/qq_43198727/article/details/102909097

版权

html5+css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

border:边框
边框的三要素:粗细线性颜色
上边框为实线(红色1 像素) 右边框为点线示边框(蓝色1像素)
下边框为破折线式(绿色1像素) 左边框为实线(设置粗细为5像素黑色) 上面的需求以给出那么如何做出来呢？
先让我们看看语法格式：

粗细	线性	颜色
wight	1solid	rde;

border:粗细、线型、颜色

border:wight 1solid red; /边框设置为1像素实线颜色为红色/
这是设置边框的格式。
边框又有四个写法分为

border -top	上边框
border-right	右边框
border-bottom	下边框
border-left	左边框

边框的线型

线型	特点
none	没有边框，无论边框宽的设置为多大
dotted	点线式边框
dashed	破折线式边框
solid	直线式边框
doubule	双线式边框
groove	槽线式边框
ridge	脊线式边框
inset	内嵌效果的边框
outset	突起效果的边框

这些看了之后就可以写代码了，将上面的图片用代码写出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    .box{
	width:100px
	height:100px
	border-top:1px solid red; /*上边框线*/
	border-right: 1px dotted blue;/*右边框线*/
	boredr-bottom：10px dashed green;/*下边框线*/
	border:5px solid #0000000;/*左边框线*/
	
}
	<style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

执行就可以出现这个图在这里插入图片描述
border的边框就说完了
再来说以下display
display: 显示
含义 : 用来进行行内元素与块级元素之间的相互转换！将隐藏的属性显示出来，或者将显示的元素进行隐藏。
display 属性值
inline 行内
block 块级
none 无
将我们一个块儿元素的display属性的值设置为inline这个元素就会从块级元素转换为行内元素
注意
1、如果说行内元素转换为了块级元素，那么这个元素他就会拥有块级元素的特点
2、如果说将块级元素转换为行内元素，那么这个元素他就会拥有块级元素的特点。
display:none(将一个显示的元素进行隐藏)
display:bolck(将一个隐藏的元素显示出来)
在这里插入图片描述
这是行内元素，表达出来的如何将他转换为块级元素呢？给这个属性添加一个display:block就可以了
源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span{
            width:100px;
            height:100px;
            background-color: red;
            /*使用display 属性将行内元素转换为块级元素
            display: block;*/
            margin-bottom:20px;
        }
    </style>
</head>
<body>
    <span>看看</span>
    <span>看看</span>
</body>
</html>

这是没有添加display 属性，就会出来上面的图片
那么给他添加一下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span{
            width:100px;
            height:100px;
            background-color: red;
            /*使用display 属性将行内元素转换为块级元素*/
            display: block;
            margin-bottom:20px;
        }
    </style>
</head>
<body>
    <span>看看</span>
    <span>看看</span>
</body>
</html>

他就会成为这样
在这里插入图片描述
这是我今天学的内容。

远方0905

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
border边框跟display块元素的使用

border:边框边框的三要素:粗细线性颜色上边框为实线(红色1 像素) 右边框为点线示边框(蓝色1像素)下边框为破折线式(绿色1像素) 左边框为实线(设置粗细为5像素黑色) 上面的需求以给出那么如何做出来呢？先让我们看看语法格式：粗细线性颜色wight1solidrde;border:粗细、线型、颜色border:wight 1solid ...
复制链接

扫一扫