前端技术分享：盒模型的概念和文本溢出解决办法
前端开发中盒模型是所有元素的基础，如果弄不懂盒模型的概念就很难开发出好的页面，下面小千就来给大家介绍一下盒模型和解决前端文本溢出的代码。
盒模型
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。
PADDING的用法及值含义
MARGIN的用法及值含义
盒模型的大小计算方式
文本溢出
1.overflow
visible:默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承overflow属性的值。
2.white-space
normal：默认值，多余空白会被浏览器忽略只保留一个；
pre：空白会被浏览器保留；
pre-wrap：保留一部分空白符序列，但是正常的进行换行；
pre-line:合并空白符序列，但是保留换行符；
nowrap:文本不会换行，文本会在同一行上继续，直到遇到
标签为止;
3.text-overflow
clip：不显示省略号（…），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；
4.文本溢出变省略号设置
text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1）、容器宽度：width：value；（px、%，都可以）
2）、强制文本在一行内显示:white-space：nowrap;
3）、溢出内容为隐藏：overflow：hidden；
4）、溢出文本显示省略号：text-overflow：ellipsis;
注：必须是单行文本才能设置本文溢出！！！
以上就是盒模型和前端文本溢出的介绍了，同学们赶紧去自己实践一下吧。
本文来自千锋教育，转载请注明出处。
前端技术分享：盒模型的概念和文本溢出解决办法相关推荐
- 前端盒模型的概念和文本溢出解决办法
前端开发中盒模型是所有元素的基础,如果弄不懂盒模型的概念就很难开发出好的页面,下面小千就来给大家介绍一下盒模型和解决前端文本溢出的代码. 盒模型 盒模型是css布局的基石,它规定了网页元素如何显示以及 ...
- 从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- 前端技术分享之HTMLHTML5
前端技术分享之HTML&&HTML5 HTML 发展历史 HTML文档模式 标准模式 HTML 4.01 严格型 XHTML 1.0 严格型 HTML 5 准标准模式 HTML 4.0 ...
- 好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询 什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
- 前端面试查漏补缺--(三) 跨域及常见解决办法
前言 本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
- 计算机唤醒休眠蓝屏,分享win10睡眠唤醒就蓝屏的解决办法
内容来源:系统家园 今天来聊聊一篇关于分享win10睡眠唤醒就蓝屏的解决办法的文章,现在就为大家来简单介绍下分享win10睡眠唤醒就蓝屏的解决办法,希望对各位小伙伴们有所帮助. 方法一: 故障解决思路 ...
- 【深度学习】模型过拟合的原因以及解决办法
[深度学习]模型过拟合的原因以及解决办法 1.背景 2.模型拟合 3.简述原因 4.欠拟合解决办法 5.过拟合解决办法 1.背景 所谓模型过拟合现象: 在训练网络模型的时候,会发现模型在训练集上表现很 ...
- OpenFOAM修改湍流模型之后出现#duplicate entry的解决办法
OpenFOAM修改湍流模型之后出现#duplicate entry的解决办法 参考文章: OpenFOAM-Duplicate Entry 解决办法:link 如何在OF6中添加新的湍流模型? :l ...
- 分享导致网站被K的原因及解决办法
相信很多站长都遇到过这样的情况,某天自己网站关键词排名和收录突然暴跌,其实这时可能就要看看是不是网站被K了,判断方法可以看懒猫之前写的文章:南京seo:怎么看出网站首页是否被搜索引擎降权呢,如果被K了 ...
最新文章
- 华为聚焦AI基础平台，加速行业智能化落地
- [转] Node.js的线程和进程
- 微软发布ML.NET 1.0，可一键添加机器学习模型
- Matlab调制库函数fskmod参数及源代码详解
- Kubernetes 上调试 distroless 容器
- SLF4JLogFactory does not implement org.apache.commons.logging.LogFactory
- what's the difference between atime, ctime and mtime
- java中操作时间的常用工具类
- BootStrap中Model模态框点击除了×号和关闭按钮外的其他区域不消失
- 传感器的爆炸式增长下，隐私问题将重新定义？
- 屏蔽网页所有弹出广告的神器工具！Adblock插件
- miui怎么用第三方图标包_Burn安卓手机图标包 手机美化从图标开始
- vue实例的参数说明
- Matlab中textscan函数用法
- 最强大脑记忆曲线（5）——主程序设计
- 渐进式jpg转换成基线式 jpg
- java 订单支付_Java多订单多支付方式分配金额问题的解决
- 【YOLO】物体识别算法的核心思想
- linux手动焦距,摄影师必学！如何精准的手动对焦
- Armbian : sudo must be owned by uid 0 and have the setuid bit set错误处理