一、包含块
目的:确定元素的位置和相对大小(%)

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 的包含块 、负外边距,字体,文本行高的更多相关文章

  1. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

  2. 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

    盒子模型 Box  Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...

  3. CSS中包含块原理解析

    CSS包含块原理解析 确定CSS中的包含块也确定就是元素的父元素.关键是:看元素是如何定位的.确定包含块很重要,比如设置百分比.另外也可以进行样式的继承等等. 分两个情况: 相对定位和静态定位 静态定 ...

  4. CSS min-height不能解决垂直外边距合并问题

    垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...

  5. css盒子模型、垂直外边距合并

    css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...

  6. css 初始包含块

    continuous media ,paged media 关于continuous media[连续媒体]和paged media[分页媒体] 直白的讲,continuous和paged media ...

  7. * CSS 视觉格式化(基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框)

    前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...

  8. css - 盒子内外边距

    css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{     width:200px; ...

  9. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

随机推荐

  1. CSDN删除上传资源的办法

    转自网友:http://blog.csdn.net/ssergsw/article/details/12489101 我按照下面的方法一试,果然成功了. 昨天晚上进行测试,上传了一个压缩包和大家分享, ...

  2. EF Core学习Code First

    下面通过实例来学习EF Core Code First,也就是通过EF Core迁移来完成从模型生成数据库. 本实例使用EntityFrameworkCore SQLite 数据库进行介绍,大家也可以 ...

  3. js实现点击copy,可兼容

    在实现功能时写的一个小demo,可以实现点击复制内容(任何你需要copy的文字内容data). 经测试,可兼容 chrome, edge, firefox, ie, opera, safari,至于版 ...

  4. AngularJS高级程序设计读书笔记 -- 模块篇

    一. 模块基础 1. 创建模块 <!DOCTYPE html> <html ng-app="exampleApp"> <head> <ti ...

  5. Owl Carousel幻灯片插件的使用

    Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 ...

  6. windows安装nvm管理node版本

    1.卸载原本系统里面的nodejs 2.下载nvm安装包:https://github.com/coreybutler/nvm-windows/releases ---->nvm-setup.z ...

  7. php产生随机字符串

    /** * 产生随机字符串 * * @param int $length 输出长度 * @param string $chars 可选的 ,默认为 0123456789 * @return strin ...

  8. Linux10分钟入门

    最近打算考红帽认证,将自己学习到的和工作中常用的一些命令进行总结,供初学者和一定基础的参考. 想系统性学习的话,还是建议看书(鸟哥的Linux私房菜)和看视频(基础版,推荐马哥和老男孩,不推荐**** ...

  9. Java 泛型在实际开发中的应用

    java泛型是对Java语言的类型系统的一种扩展,泛型的本质就是将所操作的数据类型参数化.下面我会由浅入深地介绍Java的泛型. 一:泛型出现的背景 在java代码里,你会经常发现类似下边的代码: p ...

  10. 设计模式 - 代理模式(jdk)

    定义:为另一个对象提供一个替身或占位符以控制对这个对象的访问. 一.静态代理 静态代理说白了就是把原先直接调用被代理类的方法放到代理类来调用,同时 我们可以在代理类额外的添加一些操作. 接口: pac ...