目录
一、认识盒子模型
二、盒模型的组成部分
三、学习盒子模型的相关元素
四、文本溢出
一、认识盒子模型
1.1盒模型的概念
如果css对html文档元素生成了一个描述该元素在html文档布局中所占空间的矩形元素框(elementbox),那么我们可以形象地将其看作是一个盒子。
css围绕这些盒子产生了一种“盒子模型”概念,通过定义一系列与盒子相关的属性(内容、填充、边框、边界),可以控制各个盒子乃至整个html文档的表现效果和布局结构。
虽然css中没有盒子这个单独的属性对象,但它却是css中无处不在的一个重要组成部分。
二、盒模型的组成部分
2.1 css盒子模式的属性
内容(content)、填充(padding)、边框(border)、边界(margin)
2.2 说明
内容(content)盒子里装的东西
填充(padding)就是怕盒子里装的东西损坏而添加的泡沫或者其他抗震的辅料
边框(border)盒子本身
边界(margin)盒子与盒子之间的空隙,或者是大盒子与嵌套在里面的小盒子之间的空隙
三、盒模型的相关元素
3.1 border(边框)
3.1.1 语法
{border:边框宽度 边框颜色 边框风格}例如:{border:5px #f00 solid;}
3.1.2 说明
表框:border,网页中很多修饰性线条都是由边框来实现的。
边框宽度:border-width
边框颜色:border-color
边框样式:border-style:solid(实线)bashed(虚线)dotted(点划线)double(双线)
3.1.3 补充
也可单独设置一个方向的边框,如border-left border-right 等
border-style的值也很多除了以上四种还有:groove(槽边)ridge(岭边)inset(凹边)ouset(凸边)none(无边框,默认)hidden(无边框)
3.1.4 边框设置四种例子
同时设置4个边框
border:边框宽度 边框颜色 边框风格
单独设置下边框
border-bottom:边框宽度 边框颜色 边框风格
设置右边无边框
border:边框宽度 边框颜色 边框风格
border-right:none
设置上下无边框
border:边框宽度 边框颜色 边框风格
border-width:0 边框宽度
3.2 padding(填充)
3.2.1 padding结构
padding区域在border与content之间;背景色和背景图像会覆盖padding和content组成的区域
3.2.2 说明
padding(填充),在设定页面中一个元素内容(content)到元素的边缘(边框)之间的距离。也成补白
3.2.3 用法
用来调整内容在容器中的位置关系
用来调整子元素在父元素中的位置关系 padding属性需要添加在父元素上
padding值是额外加在元素原有大小之上的,如想保证元素大小不变,需从元素宽或高上减掉后添加的padding属性
3.2.4 属性值的4种方式
四个值:上 右 下 左{padding:value value value value;}value指属性值
三个值:上 左右 下{padding:value value value;}
两个值: 上下 左右{padding:value value;}
一个值:四个方向{padding:value;}
可以单独设置一个方向的padding值,如:padding-top padding-left 等
注意:padding不可以为负值
3.3 margin(边界)
3.3.1 margin结构
margin(边界)也叫外边距,在元素外边的空白区域,被称为边距。
margin区域不应用背景;css中margin默认值为0
3.3.2 属性值的4种方式
四个值:上 右 下 左 三个值:上 左右 下 两个值:上下 左右 一个值:四个方向
当给元素设置{margin:0 auto}时,元素会在浏览器中横向居中
可以单独设置一个方向的margin值,如:margin-top marging-left 等
块级元素的宽如果没有设置,其宽是从父级继承的宽度。系统会为某些元素设置默认的margin值或者padding值,这对于我们以后尺寸的计算有影响,所以在以后的开发过程中,首先清除掉所有元素的margin和padding值。 可以在 css界面首行代码敲: *{margin:0;padding:0;}
margin的坑点:
相邻兄弟元素在垂直方向上的margin值会出现融合的情况,融合后会去两个元素里较大的值作为融合后的值。 如何解决该问题:{display:inline-block}
当父级子级元素都设置了margin时,子级的margin值会传递到父级。解决方法: 给父级加一个边框、给父级使用overflow:hidden、给父级或子级或两者都加{display:inline-block}
四、文本溢出
4.1 溢出属性
4.1.1 语法
{overflow:visidle hidden scroll auto inherit;}
4.1.2 说明
visible(默认值)hidden(隐藏)scroll(隐藏并出现滚动条)auto(根据内容自动显示滚动条)inherit(继承父元素overflow值)
4.2 空白空间
4.2.1 语法
{white-space:normal pre nowarp pre-warp pre-line inherit}
该属性用来设置如何处理元素内的空白
4.2.2 说明
normal(常规)
pre(不合并文字间的空白距离,当文字超出边界时不换行)
pre-warp(不合并文字间的空白距离,当文字碰到边界时发生换行)
pre-line(保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行)
nowarp(强制在同一行内显示所有文本,直到文本结束或者遭遇br对象)
inherit(规定继承父元素white-space值)IE浏览器都不支持此属性值
4.3 文本溢出
4.3.1 语法
{text-overflow:clip ellipsis}
clip 不显示省略号,而是简单的裁切
ellipsis 当对象文本溢出时,显示省略号
4.3.2 说明
text-overflow属性仅是:当文本溢出时是否显示省略标记,并不具备其他的样式属性定义,要实现溢出时产生省略号的效果,还需要定义
1容器宽度
2强制文本在以行内显示:white-space:nowarp;
3溢出的内容为隐藏:overflow:hidden
4溢出的文本显示省略号:text-overflow:ellipsis
4.4 拓展内容
多行文本出现省略号
webkit浏览器或移动端的拓展css,只对webkit有效
js方案
:after选择器 p:after{content:“...”}
一个标记可以设置多个class名 如:<标记 class="名称1 名称2"></标记>