css 的包含块 、负外边距,字体,文本行高
一、包含块
目的:确定元素的位置和相对大小(%)
1.正常文档流元素和浮动元素 ---- 父元素的 content-box
2.绝对定位元素 ---- 父元素的 padding-box
3.固定定位元素 ---- 视口
二、负外边距
document.documentElement.clientWidth; 视口宽度
window.onresize 监控视口改变
三、字体
字体简写:
当 line-height 书写在 font 属性上 ,会覆盖 line-height 的值
字体大小:
默认是 16px
在Chrome 最小字体只能设置到 12px
字体族
衬线字体 笔画起始位置有修饰,横竖宽度不同
非衬线字体 笔画起始位置没有修饰,横竖宽度相同
四、文本
水平对齐(text-algin)
设置在块元素中(指定宽度)
让块元素中的文本,行内元素(内联元素 inline),行内块(inline-block ,img input)一行的水平方向对齐。
行高
设置在块元素中(指定宽度,高度)
当 行高 = 元素高度时,让块元素中的文本,行内元素(内联元素 inline) 在一行中的的垂直方向对齐。
行内块元素需要设置 垂直对齐 (vertical-align: middle )
行高计算:
当行高的值是 number(数字) 是基于元素的文本大小计算
行高对父元素高度的影响:
当父元素未指定高度,行高撑起父元素的高度。
垂直对齐 (vertical-align)
1、给行内块元素设置垂直对齐,设置在行内垂直方向的位置
2、给行内元素设置垂直对齐,设置在行内垂直方向的位置
3、给行<td>,或者 display: table-cell的元素设置垂直对齐,
让其文本内容,后代元素在元素自身的垂直方向对齐。
五、背景
区别背景的使用场景: 不重要的网站信息,图标。
css 的包含块 、负外边距,字体,文本行高的更多相关文章
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
- 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility
盒子模型 Box Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...
- CSS中包含块原理解析
CSS包含块原理解析 确定CSS中的包含块也确定就是元素的父元素.关键是:看元素是如何定位的.确定包含块很重要,比如设置百分比.另外也可以进行样式的继承等等. 分两个情况: 相对定位和静态定位 静态定 ...
- CSS min-height不能解决垂直外边距合并问题
垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...
- css盒子模型、垂直外边距合并
css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...
- css 初始包含块
continuous media ,paged media 关于continuous media[连续媒体]和paged media[分页媒体] 直白的讲,continuous和paged media ...
- * CSS 视觉格式化(基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框)
前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...
- css - 盒子内外边距
css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{ width:200px; ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
随机推荐
- 机器学习:保序回归(IsotonicRegression):一种可以使资源利用率最大化的算法
1.数学定义 保序回归是回归算法的一种,基本思想是:给定一个有限的实数集合,训练一个模型来最小化下列方程: 并且满足下列约束条件: 2.算法过程说明 从该序列的首元素往后观察,一旦出现乱序现象停止该轮 ...
- java面试基础题(三)
程序员面试之九阴真经 谈谈final, finally, finalize的区别: final:::修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此 ...
- go 接口案例,音乐播放器
manager.go //package main package mlib import "errors" type MusicEntry struct { Id string ...
- Cordova各个插件使用介绍系列(二)—$cordovaBarcodeScanner扫描二维码与生成二维码
详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/ 这是 ...
- Filter自动登录
Dao层略过 Domain略过 Service层过 Web层 Select逻辑 获取表单数据,Web-service--Dao返回用户信息 如果返回不为null否则,重定向到登录页面.则判断用户是否勾 ...
- C#中==运算符
在这篇博客中,我们将介绍如下内容: ==运算符与基元类型 ==运算符与引用类型 ==运算符与String类型 ==运算符与值类型 ==运算符与泛型 ==运算符与基元类型 我们分别用两种方式比较两个整数 ...
- A. Karen and Morning
A. Karen and Morning time limit per test 2 seconds memory limit per test 512 megabytes input standa ...
- 用JS来实现于截取中英文混合字符串方法(转载)
网站制作过程中,提示层文字超出,需要JS做字符串截取,但是呢,我们常常会烦恼文字中英文混合如何判断,因为我们知道在JS中 string.length这个值是不考虑中英文的,但是计算机对中英文的识别是 ...
- ES6中的export以及import的使用多样性
模块功能主要由两个命令构成:export和import.export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能. 一.export导出模块使用部分的几种方式 一个模块就是一 ...
- Kafka 源代码分析之MessageSet
这里分析MessageSet类 MessageSet是一个抽象类,定义了一条log的一些接口和常量,FileMessageSet就是MessageSet类的实现类.一条日志中存储的log完整格式如下 ...