CSS-盒模型与文本溢出笔记
注意点:
文本居中: 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-盒模型与文本溢出笔记的更多相关文章
- CSS盒模型和文本溢出
CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一.认识盒子模型 盒模型是css布局的基石,它规定了网页元素 ...
- 4、css盒模型和文本溢出
4:css盒模型和文本溢出 学习目标 1.认识盒子模型 2.盒子模型的组成部分 3.学习盒子模型的相关元素 margin padding 4.文本溢出相关的属性 一.css属性和属性值的定义 盒模型是 ...
- css 盒模型、box-sizing 学习笔记
默认情况下,给元素设置的高度和宽度是元素内容区的宽度和高度,给元素加padding 和 border ,元素的实际宽度和高度的计算方式是下面的两个公式: 元素的宽度= 元素的内容区宽度 + 内边距宽度 ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- 前端笔记(关于css盒模型知识整理)
我以前整理的文章可能也不是特别深入.所以现在开始尝试即使多花点时间收集整理,也不只发浅层知识,这样对技术的深入理解是很有帮助的. 废话不多说,我们现在开始. 说到css盒模型,这是大多面试基础中会经常 ...
- 7.css盒模型
所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...
- 第七十三节,css盒模型
css盒模型 学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 CSS盒模型中 ...
- 每日分享!介绍Css 盒模型!
如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...
- 详解CSS盒模型
原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...
随机推荐
- RSA加密公钥系数获取结果多00
写在前面 本文是在解决加密和解密用的不是同一套密钥对时找到的一篇, 最后问题不在byte数组, 是自己工具类中生成密钥对的问题, 但是本文RSA加密中公钥指数和公钥系数的获取(byte[]部分)讲解比 ...
- vue路由的异步加载(懒加载)方法
vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router 阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果 ...
- [转]vscodesvn安装和使用
原文链接:https://blog.csdn.net/wzh66888/article/details/90145340 1.安装svn插件 2.安装成功后会出现这样的图标 如果没有安装之后不能使用, ...
- Java基础 awt Graphics2D 生成矩形图片并向其中画一条直线
JDK :OpenJDK-11 OS :CentOS 7.6.1810 IDE :Eclipse 2019‑03 typesetting :Markdown code ...
- Jenkins 发布项目到远程服务器上
最近公司弄一个项目,jenkins在本地服务器,需要打包发布到远程的阿里云服务器上,弄了好一阵子. 这里记录下中间的几个坑. 这个Remote DIrectory 很重要,到时候时候会拷贝到这个目录下 ...
- Windows上的那些效率神器,让你快到飞起
转自:https://zhuanlan.zhihu.com/p/41771626 本文为Windows上有哪些让你效率倍增的软件和小技巧系列第二篇,上一篇请点击蓝字查看:打造高逼格PC,让你的电脑好用 ...
- mp4文件转码为m3u8
https://bbs.csdn.net/topics/392046401 *********************************************** 转码完成,我直接播放m3u8 ...
- 【GMT43智能液晶模块】例程十八:LAN_HTTP实验——网页服务器
源代码下载链接: 链接:https://pan.baidu.com/s/1sr4a7TBPyvs18jTfCfVj8Q 提取码:jwfv 复制这段内容后打开百度网盘手机App,操作更方便哦 GMT43 ...
- SDN实验---Ryu的应用开发(三)流量监控
一:实现流量监控 (一)流量监控原理 其中控制器向交换机周期下发获取统计消息,请求交换机消息------是主动下发过程 流速公式:是(t1时刻的流量-t0时刻的流量)/(t1-t0) 剩余带宽公式:链 ...
- Qt编写安防视频监控系统16-设备播放
一.前言 设备播放模块是后面增加的,核心就是通过组合rtsp视频流地址来播放实时视频和历史视频,目前市面上很多厂家比如排第一的海康都是支持直接rtsp通过NVR来播放某个通道视频流和回放某个通道的视频 ...