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盒模型和文本溢出的更多相关文章

  1. CSS盒模型和文本溢出

    CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一.认识盒子模型 盒模型是css布局的基石,它规定了网页元素 ...

  2. 7.css盒模型

    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...

  3. 第七十三节,css盒模型

    css盒模型 学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 CSS盒模型中 ...

  4. 每日分享!介绍Css 盒模型!

    如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...

  5. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  6. 第 16 章 CSS 盒模型[下]

    学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性 使用 vis ...

  7. 第 16 章 CSS 盒模型[上]

    学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 C ...

  8. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  9. css盒模型(Box Model)

    所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和 ...

随机推荐

  1. CentOS 安装 Hadoop 手记

    Download & Install   download hadoop from http://hadoop.apache.org/releases.html#Download downlo ...

  2. PHP中日志相关处理

    内置函数: 1.error_log() ,第三个参数不能是绝对路径,必须是相对路径.写入文件: error_log("warn:\nthis is a warn!\n",3,&qu ...

  3. Android 里的数据储存

    数据持久化 关于数据储存,这个话题已经被反复讨论过很多次了,我是不建议把网络存储这种方式纳入到数据储存的范围的,因为这个和Android没多少关系,因此就有如下的分类: 本地储存(也称之为数据持久化, ...

  4. tensorflow 中 reduce_sum 理解

    定义如下: reduce_sum( input_tensor, axis=None, keep_dims=False, name=None, reduction_indices=None ) redu ...

  5. 〖Android〗Android App项目资源字符串检查(检查是否缺少对应的翻译,导致系统切换语言后崩溃)

    Android项目开发过程中,容易出现缺少对应中英文翻译的情况,这个Python脚本是用于检查字符串是否缺少了对应的翻译 #!/usr/bin/env python # encoding: utf-8 ...

  6. vim 支持 nginx配置文件 语法高亮

    1.下载 nginx.vim 语法高亮文件 2.将文件复制到 /usr/share/vim/vim74/syntax 目录(也可以是 单用户目录 ~/.vim/syntax/) 3.修改 vim /u ...

  7. iOS 7设计备忘单

    With the release of iOS 7, app designers and developers will need to adjust their visual language to ...

  8. Mybatis3.3——源码阅读笔记

    目录 Mybatis--Source阅读笔记 兵马未动,日志先行 异常 缓存 回收机制适配器 回收机制优化缓存 事务缓存 调试型缓存--日志缓存 解析 类型处理器 IO VFS Resource Re ...

  9. 【Java】数组不能通过toString方法转为字符串

    java里,所有的类,不管是java库里面的类,或者是你自己创建的类,全部是从object这个类继承的.object里有一个方法就是toString(),那么所有的类创建的时候,都有一个toStrin ...

  10. Oracle之外键(Foreign Key)使用方法具体解释(二)- 级联删除(DELETE CASCADE)

    Oracle外键(Foreign Key)之级联删除(DELETE CASCADE) 目标 演示样例解说怎样在Oracle外键中使用级联删除 什么是级联删除(DELETE CASCADE)? 级联删除 ...