4、css盒模型和文本溢出
4:css盒模型和文本溢出
学习目标
- 1、认识盒子模型
- 2、盒子模型的组成部分
- 3、学习盒子模型的相关元素 margin padding
- 4、文本溢出相关的属性
一、css属性和属性值的定义
盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间,即都包含边框、边界、补白、内容区,这就是盒模型。
二、盒子模型的相关元素
- 1、padding的使用方法
说明:
填充:padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。
用法:
1)用来调整内容在容器中的位置关系
2)用来调整子元素在父元素中的位置关系。
注:padding属性需要添加在父元素上。
3)padding值是额外加在元素原有大小之上的,如想保证元素大小不变,需从元素宽或高上减掉后添加的padding属性值
属性值的4种方式:
四个值:上 右 下 左 {padding:0px 0px 0px 40px;}
三个值:上 左右 下 {padding:10px 20px 30px ;}
二个值:上下 左右 {padding:10px 20px ;}
一个值:四个方向 padding:2px;/*定义元素四周填充为2px*/
说明:可单独设置一方向填充,如:上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;
- 2、margin的使用方法
说明:
边界:margin,在元素外边的空白区域,被称为边距。
margin-left:左边界
margin-right:右边界
margin-top:上边界
margin-bottom:下边界
属性值的4种方式:
四个值:上 右 下 左
三个值:上 左右 下
二个值:上下 左右
一个值:四个方向 margin:2px;/*定义元素四边边界为2px*/
margin:0 auto;/*一个有宽度的元素在浏览器中横向居中。
定义元素上、下边界为2px,
说明:可单独设置一方向边界,如:margin-top:10px;
三、盒子的实际大小
宽 =左右margin+左右border+左右padding+width,
高 =上下margin+上下border+上下padding+height,
例如:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,
宽=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px,
高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px,
四、文本溢出相关的属性
- 1、溢出属性(容器的)
说明:
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值,内容不会被修剪,会成现在元素框之外;
hidden:内容会被修剪,并且其余内容是不可见的;
scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;
auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;
inherit:规定应该从父元素继承overflow属性的值。
- 2、空余空间
说明:
white-space:normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白;
normal:默认值,空白会被浏览器忽略,
nowrap:文本不会换行,文本会在同一行上继续,直到遇到
标签为止;pre:空白会被浏览器保留,其行为方式类似HTML中的pre标签;
pre-wrap:保留空白符序列,但是正常的进行换行;
pre-line:合并空白符序列,但是保留换行符;
inherit:规定应该从父元素继承White-space属性的值;(ie浏览器不支持此属性值)
- 3、省略号显示
说明:
ext-overflow:clip/ellipsis
clip:不显示省略号(...),而是简单的裁切;
ellipsis:当对象内文本溢出时,显示省略标记;
说明:
text-overflow属性仅是...,当单行文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:
1、容器宽度:width:value;
2、强制文本在一行内显示:white-space:nowrap;
3、溢出内容为隐藏:overflow:hidden;
4、溢出文本显示省略号:text-overflow:ellipsis;
> > < < © ©
4、css盒模型和文本溢出的更多相关文章
- CSS盒模型和文本溢出
CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一.认识盒子模型 盒模型是css布局的基石,它规定了网页元素 ...
- 7.css盒模型
所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...
- 第七十三节,css盒模型
css盒模型 学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 CSS盒模型中 ...
- 每日分享!介绍Css 盒模型!
如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- 第 16 章 CSS 盒模型[下]
学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性 使用 vis ...
- 第 16 章 CSS 盒模型[上]
学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 C ...
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
- css盒模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和 ...
随机推荐
- 用 Prettier 统一团队的代码风格~
使用 prettier 自動調整 JavaScript 樣式 GFM 格式说明 为什么你不能缺少Linter(以及代码美化工具) 使用 prettier 自動調整 JavaScript 樣式 Reac ...
- org.springframework.web.util.WebUtils.isSameOrigin(WebUtils.java:816)
Nginx反向代理WebSocket时报这个错,普通的http请求没问题,ws请求报错 可能原因: 1.你用了4.2.5.RELEASE版本或者4.2.6.RELEASE,升级到4.2.7.RELEA ...
- MDX Cookbook 08 - 基于集合上的迭代递归
递归的应用有时是非常重要的,特别在迭代一个集合的时候.为什么这么说呢?原因在于迭代在MDX中的使用是基于集合函数的,像 GENERATE() 它们都需要遍历整个集合.但是如果这个集合非常的庞大,我们仅 ...
- JAVA通过oshi获取系统和硬件信息
一.引入jar包 本项目主要使用第开源jar包:https://github.com/oshi/oshi <dependency> <groupId>junit</gro ...
- 四舍五入函数ROUND(x,y)
四舍五入函数ROUND(x,y) 参数: x:数据 y:需要保留的小数点位数 ROUND(x,y)函数返回最接近于参数x的数,其值保留到小数点后面y位,若y为负值,则将保留x值到小数点左边y位. my ...
- Rplidar学习(五)—— rplidar使用cartographer_ros进行地图云生成
一.Cartographer简介 Cartographer是google开源的通用2D和3D定位与地图同步构建的SLAM工具,并提供ROS接口.官网地址:https://github.com/goog ...
- 【Java】数组不能通过toString方法转为字符串
java里,所有的类,不管是java库里面的类,或者是你自己创建的类,全部是从object这个类继承的.object里有一个方法就是toString(),那么所有的类创建的时候,都有一个toStrin ...
- 关于c语言的左移运算
对于任意w位的二进制,进行k位的移动时,真实的位移量为k mod w 32bit的例子 1 << 1 结果2 1 mod 32 => 11 << 32 结果1 32 mo ...
- 【Jetty】Jetty 的工作原理以及与 Tomcat 的比较
Jetty 应该是目前最活跃也是很有前景的一个 Servlet 引擎.本文将介绍 Jetty 基本架构与基本的工作原理:您将了解到 Jetty 的基本体系结构:Jetty 的启动过程:Jetty 如何 ...
- oracle中decode的用法(例子)
使用结构: decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下: IF 条件=值1 THEN RETURN(翻译值1)ELSIF 条件=值2 THEN ...