学习笔记,仅供参考,有错必纠
参考自:某不知名网课
文章目录
盒子模型
盒子模型简介
盒子模型有元素的 内容(content)、 边框(border)、 内边距(padding)、和 外边距(margin)组成:
比如,我们打开京东首页:
查看中间月饼宣传图片的元素:
可以看到,只有内容(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>
页面:
边框综合设置
我们可以按照 ​边框粗细,边框样式,边框颜色​
的顺序简写边框的设置,如:
<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>
页面:
盒子边框写法总结表
很多情况下,我们不需要指定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>
页面:
边框重叠设置
我们先举个例子,来看一看边框重叠会出现啥情况。
- 举个例子
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>
注意,在表格中设置 ​cellspacing="0"​
,可以将单元格与单元格之间的距离设置为0。
页面:
可以看到,表格内部的线较粗,表格外部的线较细,这是由于表格内部 线条重叠的结果。
现在,我们设置 ​table​
标签的css属性为 ​border-collapse:collapse;​
,使线条合并:
<style>
td,
th {
border: 1px solid deeppink;
}
table {
border-collapse:collapse;
}
style>
页面:
Very Well ~
Original: https://blog.51cto.com/u_15181342/5355716
Author: GoatGui
Title: CSS基础(part10)–盒子模型之边框
原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/517608/
转载文章受原作者版权保护。转载请注明原作者出处!