CSS基础(part10)–盒子模型之边框

学习笔记,仅供参考,有错必纠

参考自:某不知名网课

文章目录

盒子模型

盒子模型简介

盒子模型有元素的 内容(content)、 边框(border)、 内边距(padding)、和 外边距(margin)组成:

CSS基础(part10)--盒子模型之边框

比如,我们打开京东首页:

CSS基础(part10)--盒子模型之边框

查看中间月饼宣传图片的元素:

CSS基础(part10)--盒子模型之边框

可以看到,只有内容(content)部分显示为,其他部分都标识为 ​​ ​-​​​ ,这表示除了内容部分的大小为​ ​590*470​​以外,其他部分都不存在。

边框(border)

边框属性

属性

作用

border-width

定义边框粗细,单位是​ ​px​

border-style

边框的样式

border-color

边框颜色

  • border-width

语法:

order-width : medium | thin | thick | length

参数:

参数

含义

medium

默认宽度

thin

小于默认宽度

thick

大于默认宽度

length

由浮点数字和单位标识符组成的长度值,不可为负值。

  • border-style

语法:

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

常用参数:

参数

含义

none

无边框,与任何指定的border-width值无关

hidden

隐藏边框

dotted

点线

dashed

虚线

solid

实线边框

double

双线边框

  • border-color

语法:

border-color : color

参数color :指定颜色

举个例子

HTML代码:


<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子title>
<style>
div {
width: 300px;
height: 300px;
border-width: 10px;
border-style: dashed;
border-color: red;
}
style>
head>
<body>

<div>div>

body>
html>

页面:

CSS基础(part10)--盒子模型之边框

边框综合设置

我们可以按照​ &#x200B;&#x8FB9;&#x6846;&#x7C97;&#x7EC6;&#xFF0C;&#x8FB9;&#x6846;&#x6837;&#x5F0F;&#xFF0C;&#x8FB9;&#x6846;&#x989C;&#x8272;&#x200B;​的顺序简写边框的设置,如:


<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子title>
<style>
div {
width: 300px;
height: 300px;
border: 5px solid blue;
}
style>
head>
<body>

<div>div>

body>
html>

页面:

CSS基础(part10)--盒子模型之边框

盒子边框写法总结表

很多情况下,我们不需要指定4个边框,而是可以给4个边框分别进行指定:

上边框

下边框

左边框

右边框

border-top-style:样式;

border-bottom-style:样式;

border-left-style:样式;

border-right-style:样式;

border-top-width:宽度;

border- bottom-width:宽度;

border-left-width:宽度;

border-right-width:宽度;

border-top-color:颜色;

border- bottom-color:颜色;

border-left-color:颜色;

border-right-color:颜色;

border-top:宽度 样式 颜色;

border-bottom:宽度 样式 颜色;

border-left:宽度 样式 颜色;

border-right:宽度 样式 颜色;

  • 举个例子

HTML代码:


<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子title>
<style>
div {
width: 200px;
height: 200px;
border-top: 10px solid red;
border-left: 5px solid green;
border-right: 5px solid blue;
border-bottom: 5px solid pink;
}
input {
border: none;
border-bottom: 1px dashed red;

}
style>
head>
<body>
<div> div>
<br>
用户名: <input type="text" >
<br>
密码: <input type="text" >
body>
html>

页面:

CSS基础(part10)--盒子模型之边框

边框重叠设置

我们先举个例子,来看一看边框重叠会出现啥情况。

  • 举个例子

HTML代码:


<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子title>
<style>

td,
th {
border: 1px solid deeppink;

}
style>
head>
<body>
<table cellspacing="0" width="300" height="150" align="center">
<tr>
<th>姓名th>
<th>年龄th>
<th>故乡th>
tr>

<tr>
<td>王涛td>
<td>19td>
<td>南京td>
tr>
<tr>
<td>常江td>
<td>22td>
<td>北京td>
tr>
<tr>
<td>叶函td>
<td>25td>
<td>杭州td>
tr>

table>
body>
html>

注意,在表格中设置​ &#x200B;cellspacing="0"&#x200B;​,可以将单元格与单元格之间的距离设置为0。

页面:

CSS基础(part10)--盒子模型之边框

可以看到,表格内部的线较粗,表格外部的线较细,这是由于表格内部 线条重叠的结果。

现在,我们设置​ &#x200B;table&#x200B;​​标签的css属性为​ &#x200B;border-collapse:collapse;&#x200B;​,使线条合并:

<style>

td,
th {
border: 1px solid deeppink;
}

table {
border-collapse:collapse;
}
style>

页面:

CSS基础(part10)--盒子模型之边框

Very Well ~

Original: https://blog.51cto.com/u_15181342/5355716
Author: GoatGui
Title: CSS基础(part10)–盒子模型之边框

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/517608/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球