盒模型应用

最新推荐文章于 2022-08-25 10:03:13 发布

时遇¥.¥..

最新推荐文章于 2022-08-25 10:03:13 发布

阅读量121

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_46544600/article/details/105047327

版权

笔记专栏收录该内容

51 篇文章 2 订阅

订阅专栏

概述:盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。

1.改变宽高范围

宽高衡量设计稿尺寸的时候往往使用的是**边框盒**,
但是默认情况下width和height则是设置的**内容盒** 
如果想改变宽高的影响范围可以用box-sizing 声明(属性)来定义

css3:box-sizing(在这之前只能精确计算)

	box-sizing:border-box;
	width:238px;
	height:56;
	padding-left:49px;
	color:#a7a7a7;
	background-color:#333;
	border:1px solid red;
	line-height:56px;

2.改变背景覆盖范围

默认情况下,背景覆盖边框盒
可以通过background-clip进行修改

3.溢出处理

 overflow:控制内容溢出边框的处理方式

4.断词规则

word-break:会影响文字在什么位置被截断换行
normal:普通.CJK字符文字位置截断,非CJK字符单词位置截断

5.空白处理

white-space:nowrap  -- 不换行
text-overflow:ellipsis; --溢出部分用原点表示

	<style>
        li{
            border-bottom: 1px dashed #ccc;
            line-height: 2;
            border-left: 3px solid #008c8c;
            padding-left: 10px;
            width: 400px;
            margin: 1em 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
<body>
    <ul>
        <li>Lorem ipsum dolor consectetur adipisicing.</li>
        <li>Sequi mollitia vol Harum, aperiam eligendi!</li>
        <li>Sunt porro molestias magni! Dicta, veniam.</li>
        <li>Beatae laborum nsunt, natus non?</li>
        <li>Illo amet molesti in porro doloremque?</li>
        <li>Ipsam, aspernatur res laboriosam delectus illum.</li>
    </ul>
</body>

时遇¥.¥..

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒模型应用

概述:盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。1.改变宽高范围宽高衡量设计稿尺寸的时候往往使用的是**边框盒**,但是默认情况下width和height则是设置的**内容盒** 如果想改变宽高的影响范围可以用box-sizing 声明(属性)来定义css3:box-sizing(在这之前只能精确计算) box-sizing:border-box; width...
复制链接

扫一扫

专栏目录