border属性介绍

  • border属性设置元素边框。
  • 边框3个要素如：粗细、线型、颜色。

边框线型属性值说明表如：

属性指 描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。

边框方向属性值说明表如：

属性 描述
border-top 设置元素上边框。
border-bottom 设置元素下边框。
border-left 设置元素左边框。
border-right 设置元素右边框。

边框实践

  • 实践代码：
<!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>边框</title>

  <style>

     .box{

        width: 200px;

        height: 100px;

        border: 1px solid red;

     }

  </style>

</head>

<body>

   <div class="box">

     微笑是最初的信仰

   </div>

</body>

</html>
  • 结果图

  • 注意：边框颜色可以省略不写，默认为黑色。如果其他2个属性不写就不会显示边框。

  • 设置元素边框方向实践

  • 代码块

<!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>边框</title>

  <style>

     .box{

        width: 200px;

        height: 100px;

        border-top: 2px double red;

        border-bottom: 2px ridge lawngreen;

        border-left: 2px  inset darkorange ;

        border-right:2px groove darkblue;

     }

  </style>

</head>

<body>

   <div class="box">

     微笑是最初的信仰

   </div>

</body>

</html>

  • 结果图

display属性介绍

  • display属性它是显示的意思，display属性可以将行内元素与块级元素之间相互转换，将隐藏的元素设置显示状态或将显示的元素设置隐藏状态。
  • display属性值说明表如下：
属性值 描述
inline 将块级元素转换为行内元素。
block 作用：1、将行内元素转换为块级元素。2、将隐藏的元素设置为显示状态。
none 将显示的元素设置为隐藏状态。

display属性实践

  • 使用display属性的属性值为block将span标签设置宽高度并且设置一个背景颜色。

  • 代码块

<!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>将span标签转换为块级元素</title>

  <style>

     .box{

        width: 200px;

        height: 100px;

        display: block;

        background-color: red;

     }

  </style>

</head>

<body>

   <span class="box">微笑是最初的信仰</span>

</body>

</html>

  • 结果图

  • 注意：如果行内元素使用了display: block;，就拥有了块级元素特点。

  • 使用display属性的属性值为inline将h1标签转换为行内元素。

  • 代码块

<!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>将h1标签转换为行内元素</title>

  <style>

     .box{

        width: 200px;

        height: 100px;

        display: inline;

        background-color: red;

     }

  </style>

</head>

<body>

   <h1 class="box">微笑是最初的信仰</h1>

</body>

</html>

  • 结果图

  • 注意：如果块级元素使用了display: inline;，就拥有了行内元素特点。

css中如何使用border属性与display属性的更多相关文章

  1. 盘点CSS中可以和不可以继承的属性

    CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定 ...

  2. CSS中padding、margin两个重要属性的详细介绍及举例说明

    http://www.x6x8.com/IT/199.html 本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, ...

  3. CSS 中区块的使用_宽高属性

    width 像素/百分比 区块的宽度 auto height 像素/百分比 区块的高度 auto min-height 像素像素/百分比 区块最小高度 auto max-height 像素像素/百分比 ...

  4. css常用属性之display属性

    1.dispaly属性之一:块级标签转行内便签display: inline(内容有多大,就展示多大(用F12看区别)) 2.display属性之二:行内便签转块级标签:diaplay: block ...

  5. 控制span的width属性及display属性值的选择

    给span设置width样式,会发现并没有改变它的宽度,但有时候我们需要给它设置固定的宽度,那么就可以设置它的display样式,改变span的显示模式就好了. span默认显示模式是inline,无 ...

  6. CSS中可以和不可以继承的属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

  7. 前端基础之--css中可被继承和不可被继承的属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性:vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shado ...

  8. CSS中可以继承和不能继承的属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

  9. CSS 颜色 字体 背景 文本 边框 列表 display属性

    1  颜色属性 <div style="color:blueviolet">ppppp</div> <div style="color:#f ...

随机推荐

  1. linux服务器之间互传文件

    1.传递单个文件 linux A 服务器 上的文件(假设文件为a.php) 复制到 linux B 服务器上(假设复制后的文件名为b.php) 格式为  scp 文件a的绝对路径  B服务器用户名@B ...

  2. npm学习（七）之如何发布包、更新发布包、删除发布包

    前言 我们经常使用npm来下载别人的模块或者说包,那么我们如何将自己写的模块上传到npm呢? 了解npm政策 在开始之前,最好回顾一下npm的政策,以防您对站点礼仪.命名.许可或其他指导原则有疑问. ...

  3. PDF转图片，在线PDF转JPG/PNG

    [在线DEMO](https://oktools.net/pdf2img) 原理 使用pdf.js预览图片,pdf.js将pdf通过canvas将每一页渲染出来,然后我们通过canvas的toData ...

  4. Vue 小实例 - 组件化 、cli 工程化

    1. 组件化  (父子组件通信: 父 - 子 :props 数组           子 - 父  :  子层触发事件,调用  $emit 触发父层对应自定义事件,可函数处理传参 / $event 获 ...

  5. pandas库

    pandas是基于NumPy数组构建的,特别是基于数组的函数和不使用for循环的数据处理.虽然pandas采用了大量的NumPy编码风格,但二者最大的不同是pandas是专门为处理表格和混杂数据设计的 ...

  6. 一、json数组的键和值

    一.json数组的键和值 https://blog.csdn.net/sinat_30224769/article/details/51702203 string test_json = " ...

  7. nova计算服务分布式

    控制节点 #第一步 控制节点下载nova-conpute包 #安装依赖包 #vim /etc/nova/nova.conf [DEFAULT] my_ip=#当前节点IP use_neutron = ...

  8. python中字符串格式化的两种方法

    知识点汇总;1-字符串格式化输出方法一: % 1-print('名字是 %s,年龄是%s' % (name ,age)) 2- %s ---字符串-----相当于执行了str() 3- (name , ...

  9. python内存相关以及深浅拷贝讲解

    3.9 内存相关 3.9.1 id,查看内存地址 >>> v1 = [11,22,33] >>> v2 = [11,22,33] >>> prin ...

  10. 【LuoguP5206】[WC2019] 数树

    题目链接 题意 定义 \(F(T_1,T_2)=y^{n-common}\) 其中 \(common\) 为两棵树 \(T_1,T_2\) 的公共边条数. 三种问题 1.给定 \(T_1,T_2\) ...