border边框、padding内边框、margin外边框

一、border 边框

1.语法：

border:border-width
border:border-style
border:border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

2.常用边框样式

属性	作用
none	没有边框
solid	单实线
dashed	虚线
dotted	点线

3.指定边框

可以给四个边框单独指定

上边框	下边框	左边框	右边框
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:宽度样式颜色;

4.表格的细线边框

table{ border-collapse:collapse; }

border-collapse:collapse;

可以使相邻边框合并在一起。

<style>table {width: 500px;height: 300px;border: 1px solid red;}td {border: 1px solid red;text-align: center;}table, td {border-collapse: collapse;  /*合并相邻边框*/}
</style>

二、padding 内边框

padding属性用于设置内边距。是指边框与内容之间的距离。

1.设置

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

2.简写

值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距左右内边距；
3个值	padding：上内边距左右内边距下内边距；
4个值	padding: 上内边距右内边距下内边距左内边距；

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
内边距产生的问题
会撑大原来的盒子
解决方法：设置盒子宽高，减去相应的内边距的值，维持盒子原有的大小
如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子

三、margin 外边框

1.外边距

margin属性用于设置外边距。控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin值的简写与 padding 完全相同。

2.块级盒子如何水平居中？

盒子必须指定了宽度（width）
然后给左右的外边距都设置为auto

.header{ width:960px; margin:0 auto;}

常见的写法

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

3.文字居中和盒子居中区别

盒子内的文字水平居中是 text-align: center, 而且还可以让行内元素和行内块居中对齐
块级盒子水平居中左右margin 改为 auto

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */

4.插入图片和背景图片区别

插入图片 padding margin 更改大小用 width 和 height
插入背景图片 background-position 更改位置用 background-position

 img {  width: 200px;/* 插入图片更改大小 width 和 height */height: 210px;margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */margin-left: 50px; /* 插入当图片也是一个盒子 */}div {width: 400px;height: 400px;border: 1px solid purple;background: #fff url(images/sun.jpg) no-repeat;background-position: 30px 50px; /* 背景图片更改位置 用 background-position */}

5. 如何清除元素的默认内外边距⭐

代码：

* {padding:0;         /* 清除内边距 */margin:0;          /* 清除外边距 */
}

注意：

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

border边框、padding内边框、margin外边框相关推荐

宽php边框粗细_phpexcel导出excel外边框加粗，边框细线，合并单元格，换行，居中，上边距，左边距，打印设置...
外边框加粗: $styleArray2 = array( 'borders' => array( 'outline' => array( 'style' => PHPExcel_St ...
echarts图表增加外边框或者外阴影内边框或者内阴影
如果能给echarts图表增加阴影或者边框呢?效果如下图所示的浅蓝色区域具体的代码如下图所示 series: [{name: '费用类型分布统计',type: 'pie',center:['50%' ...
Android控件外边框自定义
1.在drawable里面新建自定义的资源文件shape <?xml version="1.0" encoding="utf-8"?> <sh ...
vue echarts 地图外边框阴影
这里部分写的假数据,根据需求修改 data() {return {myEcharts: null,scatterData: [{name: '广州市',value: [113.280637,23.12 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型
一.CSS简介 1.什么是css 重叠样式表主要是负责标签的样式美化页面一个网页分三大部分结构层: 主要由html负责负责页面的结构表现层: 主要由css负责页面的展示样式美化页面行 ...
边框,多层背景,内补白与外补白
边框边框线厚度 border-width边框线颜色 border-color边框线样式为虚线 border-style:dashed;边框圆角 border-radius总写 : box-shado ...
border 外边框
语法: border:<line-width> || <line-style> || <color> <line-width> = <length ...
Excel中设置内边框和外边框
1.新建一个Excel工作表,命名为"数据.xls" 2.选择需要设置内边框的表格,鼠标右键单击"设置单元格格式" 3.选择"边框中的内部" ...

border边框、padding内边框、margin外边框

一、border 边框

1.语法：

2.常用边框样式

3.指定边框

4.表格的细线边框

二、padding 内边框

1.设置

2.简写

三、margin 外边框

1.外边距

2.块级盒子如何水平居中？

3.文字居中和盒子居中区别

4.插入图片和背景图片区别

5. 如何清除元素的默认内外边距⭐

border边框、padding内边框、margin外边框相关推荐

最新文章

热门文章