【CSS】行高、边框、外边距、内边距

一.行高line-height
- 1.概念
- 2.作用
- 3. 影响行高因素
- 4. 单位
二.边框border
- 1.属性
- 2.联写
- 3.扩展
三.内边距/内填充(padding)
- 1.概念
- 2. 联写
- 3. 盒子大小
- 4. 注意
- 5. 嵌套盒子中子盒子padding值对子盒子宽度的影响
四.外边距(margin)
- 1.概念
- 2.联写
- 3.注意
- 4.特殊情况
五.盒子组成模式box-sizing
- 1.介绍

一.行高line-height

1.概念

标准定义：两行文字基线中的距离
通俗概念：行高=文字大小+上间距+下间距

2.作用

设置文字垂直方向有距离
设置文字垂直居中

3. 影响行高因素

文字大小
文字字体

4. 单位

4.1如果单独给一个标签设置行高
- px：行高=设置的px值，跟文字大小无关
- em：行高=字体大小*em值
- 百分比：行高=字体大小*百分比
- 不带单位：行高=字体大小*数值

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style type="text/css">div {background-color: pink;font-size: 20px;/* 行高=30px *//*line-height: 30px;*//* 行高=2*字体大小=40px *//*line-height: 2em;*//*行高=300%*字体大小=60px*//*line-height: 300%;*//*行高=4*字体大小=80px*//*line-height: 4;*/}</style>
</head>
<body><div>文字</div>
</body>
</html>

4.2如果给父元素设置行高,子元素行高特点
- 父px：行高=父px值，跟文字大小无关
- 父em：行高=子元素字体大小*父em值
- 父百分比：行高=父元素字体大小*父百分比
- 父不带单位：行高=子元素字体大小*父数值

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box {background-color: pink;font-size: 16px;/*content的div行高=30px（继承父容器的行高）*//*line-height: 30px;*//*content的div行高=父元素行高*2=32px(先计算后继承)*//*line-height: 2em;*//*content的div行高=父元素行高*300%=48px(先计算后继承)*//*line-height: 300%;*//*content的div行高=子元素行高*4=80px(先继承后计算)*//*line-height: 4;*/}.content {font-size: 20px;}</style>
</head>
<body><div class="box"><div class="content">文字</div></div>
</body>
</html>

二.边框border

1.属性

border-style 边框样式
- none：默认值，无边框，跟border-width的值无关
- solid：实线
- dashed：虚线
- dotted：点线
border-color 边框颜色
border-width 边框宽度
- medium: 默认宽度（大概1.5px）,只有border-style设置了非none值默认宽度才有效
- 像素px：由浮点数字和单位标识符组成的长度值

2.联写

border-style、border-color、border-width没有顺序规定
- 除非是要去掉边框，否则都该设置非none值的border-style，否则看不到效果

border:10px solid green;

去掉边框

border:0 none;

3.扩展

去掉轮廓线
- 当标签聚焦时，会显示轮廓线

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">/*把边框和轮廓线都去掉,以自己的图片背景作为输入框*/input {border: 0 none; /* 去掉边框 */outline-style: none; /* 去掉轮廓线，输入框聚焦时就不会显示原本那个长方形的轮廓线 */width: 329px;height: 129px;font-size: 50px;padding-left: 90px;padding-top: 10px;background: url(1.png) no-repeat; /* 以自己的图片背景作为 输入框*/}</style>
</head>
<body><input>
</body>
</html>

合并表格边框
- 细线表格

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">table {/* 把相邻的边框合并为单一的边框 */border-collapse: collapse;}</style>
</head>
<body><table border="1" width="300" height="200"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>
</body>
</html>

三.内边距/内填充(padding)

1.概念

内容与边框的距离
只能移动内容的位置，不能移动盒子本身

2. 联写

10px：上下左右10px
10px 20px:上下10px,左右20px
10px 20px 30px：上10px,左右20px,下30px
10px 20px 30px 40px:上10px,右20px,下30px,左40px

3. 盒子大小

宽度=内容宽度+左右padding+左右border-width
高度=内容高度+上下padding+上下border-width

4. 注意

padding-top、padding-bottom对行内元素无效
padding-left、padding-right对行内元素有效

5. 嵌套盒子中子盒子padding值对子盒子宽度的影响

前提：两个盒子嵌套关系,子盒子没有设置宽度，根据块级元素的特点，子盒子宽度=父盒子宽度
情形1：当子盒子左右总padding值小于父盒子宽度时，子盒子宽度不会改变
情形2：当子盒子左右总padding值大于父盒子宽度时，子盒子会超出父盒子范围(溢出)

四.外边距(margin)

1.概念

边框与边框的距离
用于移动盒子，不能改变盒子大小

2.联写

10px：上下左右10px
10px 20px:上下10px,左右20px
10px 20px 30px：上10px,左右20px,下30px
10px 20px 30px 40px:上10px,右20px,下30px,左40px

3.注意

margin-top、margin-bottom对行内元素无效
margin-tleft、pmargin-right对行内元素有效

4.特殊情况

垂直外边距合并
- 条件：上方盒子(盒子1)的底部外边距与下方相邻盒子(盒子2)的顶部外边距都设置了值
- 结果：垂直相邻的盒子真正上下距离=盒子1的margin-bottom与盒子2margin-top中的最大值
- 举例：div1在div2的紧邻上方，div1的margin-bottom=50px,div2的margin-top=100px,最终上下距离是100px
垂直外边距塌陷
- 条件：两个盒子是嵌套关系，子盒子设置margin-top值(margin-left,margin-right,margin-bottom没效果)
- 结果：两个盒子的相对位置没变，只是两个盒子一起往下移动了margin-top的距离
- 解决方式
  - 给父盒子设置边框
  - 设置overflow:hidden(触发了bfc)
  - 子元素设置浮动float
网上资料
- 外边距特殊情况：http://blog.sina.com.cn/s/blog_601b97ee0101b8xe.html
- BFC详情: http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

五.盒子组成模式box-sizing

1.介绍

content-box
- 实际宽度=内容宽度width+左右padding值+边框宽度(实际高度计算同理)
border-box
- 实际宽度=内容宽度width
- 实际宽度与padding值和边框宽度无关

【CSS】行高、边框、外边距、内边距相关推荐

外边距+内边距+边框详解
外边距+内边距+边框详解外边距(margin) margin可以设置盒子和盒子之间的距离若想要盒子水平居中,则必须满足两个条件: (1).盒子必须设置宽度 (2).让左右外边距为auto(marg ...
【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
文章目录一.内边距 1.概念 2.内边距设置语法 3.内边距设置效果二.内边距代码示例 1.不设置边距的示例 2.设置边距的示例一.内边距 1.概念内边距是盒子的边框与内容之间的 ...
html中行高是指字的高度嘛,CSS行高line-height的理解
一.行高的字面意思 "行高"顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其 ...
【转】css行高line-height的一些深入理解及应用
一.前言前两天在腾讯ISD团队博客上看到一篇翻译的文章"深入理解css 行高",是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解 ...
css行高line-height的一些深入理解及应用
by zhangxinxu from http://www.zhangxinxu.com,原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.一些字面意 ...
css行高（line-height）及文本垂直居中原理
css行高(line-height)及文本垂直居中原理一.行高的定义标准定义:两行文字基线之间的距离. 那么什么是基线? 基线是在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有 ...
CSS行高等于盒子的高度，能让文字在盒子里面垂直居中的原理
CSS行高等于盒子的高度,能让文字在盒子里面垂直居中的原理:用pink老师的一张ppt就成让人一下子明白过来.
【html】盒模型div，边框border，内边距padding，外边距margin
初识盒模型要想学习盒模型,首先要知道什么是盒模型.顾名思义,每个div标签都是一个矩形,像一个盒子,所以HTML页面布局可以理解为多个盒子嵌套排列而成. 盒模型的组成盒模型包括:content(内 ...
【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )
文章目录一.内边距复合写法 1.语法 2.代码示例 - 设置 1 个值 3.代码示例 - 设置 2 个值 4.代码示例 - 设置 3 个值 5.代码示例 - 设置 4 个值一.内边距复合写法 1. ...
html padding如何设置内边距,内边距：padding - CSS | 绿叶学习网
内边距padding,又常常被称为"补白",它指的是内容区到边框之间的那一部分.内边距都是在边框内部的. 一.padding局部样式从CSS盒子模型中我们可以看出,内边距分为4个 ...

【CSS】行高、边框、外边距、内边距

一.行高line-height

1.概念

2.作用

3. 影响行高因素

4. 单位

二.边框border

1.属性

2.联写

3.扩展

三.内边距/内填充(padding)

1.概念

2. 联写

3. 盒子大小

4. 注意

5. 嵌套盒子中子盒子padding值对子盒子宽度的影响

四.外边距(margin)

1.概念

2.联写

3.注意

4.特殊情况

五.盒子组成模式box-sizing

1.介绍

【CSS】行高、边框、外边距、内边距相关推荐

最新文章

热门文章