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元素,它包括:边距,边框,填充,和 ...
随机推荐
- 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 ...
- Ubuntu菜鸟入门(十八)————解决Ubuntu下Sublime Text 3无法输入中文
一.下载我们需要的文件,打开终端,输入: git clone https://github.com/lyfeyaj/sublime-text-imfix.git 二.将subl移动到/usr/bin/ ...
- --save与--save-dev的区别
--save安装的包会在生产和开发环境中都使用: --save-dev的包只在开发环境中使用,在生产环境中就不需要这个包了,不再打包:
- Smack类库详细介绍
原文地址:http://blog.csdn.net/xunshu/archive/2008/03/27/2223817.aspx Smack是一个为使用XMPP服务器聊天和发送即时消息交流而提供的库. ...
- 为11.2.0.2 Grid Infrastructure添加节点
转自:http://www.askmaclean.com/archives/add-node-to-11-2-0-2-grid-infrastructure.html 在之前的文章中我介绍了为10g ...
- c++对c的加强
1.register关键字的加强 register修饰符暗示编译程序相应的变量将被频繁地使用,如果可能的话,应将其保存在CPU的寄存器中,以加快其存储速度,这只是一种请求,编译器可以拒绝这种申请. ( ...
- EXP-00056: ORACLE error 12154 encountered
今天用EXP命令导Oracle数据库,出现如下错误信息: [oracle@yingxiang-testServer1 ~]$ exp imgpf/imgpf@orcl file=/prlife/db/ ...
- Laravel 的 Homestead 开发环境部署
---恢复内容开始--- Laravel 努力在整个PHP开发过程中提供令人愉快的开发体验,当然也包括本地的开发环境. 首先明白以下几个概念 VirtualBox -- Oracle 公司的虚拟机软件 ...
- 聊聊动态语言那些事(Python)
动态编程语言是高级程序设计语言的一个类别,在计算机科学领域已被广泛应用.它是一类在运行时可以改变其结构的语言:例如新的函数.对象.甚至代码可以被引进,已有的函数可以被删除或是其他结构上的变化.动态语言 ...
- debian/deepin 15.3 15.4安装jdk 1.7 (或jdk 7),配置默认环境
一.前言 Deepin 15.3是基于Debian开发的,安装jdk 1.7有所不同,默认是openjdk-8-jdk,而我们玩一些编译需要的是jdk 7. 所以本文给出安装JDK 7的教程. Dee ...