注意点:

  文本居中: text-align:center;文本左右居中

       line-heigh:30px;  等于容器高度时,单行文本上下居中

       margin:0 auto; 浏览器居中

  清除margin和padding值:

       某些元素会自带margin和padding,例如 h1 标签,使用时不方便位置计算,需要清除margin和padding

       * {margin:0; padding:0;}

  相邻margin融合

       例如:上面的块元素margin-bottom:10px;下面的块元素margin-top:20px;

        则他俩之间显示距离为20px,只显示最大的距离。

  子级的margin值会传递给父

       子级设置的margin生效的在父级上

       解决方法:父级添加:overflow:hidden

  文本溢出处理

       {overflow:visible/hidden/scroll/auto/inherit}

          visible:默认值,超过后元素框外显示

          hidden:超出元素框后隐藏

          scroll:出现滚动条

          auto:如果内容被修建,则出现滚动条

          inherit:从父元素继承overfolw属性

      {text-overflow:clip/ellipsis}

          clip:超出后不显示省略号,进行裁剪

          ellipsis:显示省略号

      white-pace:nowrap;强制文本在一行显示

CSS-盒模型与文本溢出笔记的更多相关文章

  1. CSS盒模型和文本溢出

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

  2. 4、css盒模型和文本溢出

    4:css盒模型和文本溢出 学习目标 1.认识盒子模型 2.盒子模型的组成部分 3.学习盒子模型的相关元素 margin padding 4.文本溢出相关的属性 一.css属性和属性值的定义 盒模型是 ...

  3. css 盒模型、box-sizing 学习笔记

    默认情况下,给元素设置的高度和宽度是元素内容区的宽度和高度,给元素加padding 和 border ,元素的实际宽度和高度的计算方式是下面的两个公式: 元素的宽度= 元素的内容区宽度 + 内边距宽度 ...

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

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

  5. 前端笔记(关于css盒模型知识整理)

    我以前整理的文章可能也不是特别深入.所以现在开始尝试即使多花点时间收集整理,也不只发浅层知识,这样对技术的深入理解是很有帮助的. 废话不多说,我们现在开始. 说到css盒模型,这是大多面试基础中会经常 ...

  6. 7.css盒模型

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

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

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

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

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

  9. 详解CSS盒模型

    原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...

随机推荐

  1. javascript正则提取字母和数字小数

    var item = {name:"PM2.5"}; item.nameFirst = item.name.replace(/[^a-zA-Z]/g, ''); item.name ...

  2. 解决:Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceMode

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/Eric_K1m/article/deta ...

  3. 2019t1_sumdoc_list.txt aa.docx acc baidu v2 sbb.docx Acc jindon v2 sbb.docx assetsList.html Atiitt 日本刑法典读后笔记.docx Atiti 遇到说花心的时候赞美应对.docx Atitit lesson.docx Atitit malye主义、mzd思想和dsp理论的区别和联系.docx Ati

    2019t1_sumdoc_list.txtaa.docxacc baidu v2 sbb.docxAcc jindon v2 sbb.docxassetsList.htmlAtiitt 日本刑法典读 ...

  4. conda进行python环境隔离

    1.环境隔离的问题 在使用python时,常常遇到的问题: pip安装库A,依赖库B-2.1版本 pip安装库C,以来库B-3.1版本,安装会提示库B的版本冲突错误. 这种情况下就需要做环境隔离 co ...

  5. ABAP基础篇2 数据类型

    基本数据类型列表: 1.长度可变的内置类型(String.XString)1)string类型 在ABAP程序中,string类型是长度无限的字符型字段,可以和CHAR ,D,T ,I,N (F和P未 ...

  6. Mac mysql 忘记root密码的解决方法

    1.执行命令以安全模式启动MySQL cd /usr/local/mysql/bin sudo ./mysqld_safe --skip-grant-tables 2.同上面目录下执行 '\) whe ...

  7. [IISNode] 如何在IIS7/8下,配置一个可以通过IIS访问NodeJS的web项目

    参考了一下几篇很给力的文章,在每篇文章中,都学到了解决遇到的问题的答案: (1)用iisnode模块,让你的Node.js应用跑在Windows系统IIS中 (2)让IIS能够运行Nodejs (3) ...

  8. activiti学习3:流程引擎对象和流程引擎配置对象

    目录 activiti学习3:流程引擎对象和流程引擎配置对象 一.activiti的简单使用流程 二.流程引擎配置对象ProcessEngineConfiguration的介绍 三.activiti配 ...

  9. [bug]——vue 组件状态外置引发的一个 bug

    背景 在编写 .vue 组件时,可以将状态外置来获取一些额外的好处,譬如有这么一个组件(global-components.vue): <template> <div> < ...

  10. 在ensp上配置基于接口地址池的DHCP

    原理 实验模拟 实验拓扑 相关参数 开启dhcp服务 开启接口的dhcp服务功能,指定从接口地址池分配(接口1一样) 配置接口DHCP服务租期(租期默认是一天) 设置保留地址 设置dns 我们在pc1 ...