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的元素设置垂直对齐,

让其文本内容,后代元素在元素自身的垂直方向对齐。

五、背景

区别背景的使用场景: 不重要的网站信息,图标。

时间: 2024-10-03 14:42:02

css 的包含块 、负外边距,字体,文本行高的相关文章

css学习-理解负外边距

在css盒模型定义中,外边距指的是元素距离相邻元素的距离,也就是元素的边界.布局中,正的外边距能拉开元素之间的距离,这个很好理解,但是设置负的外边距会产生意想不到的渲染结果,一些理解笔记整理如下: 总的来说,从文档流位置的角度看,设置了负外边距的元素相当于边界往里缩,结果其相邻其他元素会沿着文档流的反方向流动.(这对于正常的文档流和浮动的元素影响是一样的) 设置负外边距可以增加元素的宽度,这个作用能实现的前提是该元素是一个包含在给定宽度的父元素但没有设定width属性的元素,下面是实例代码: <

css中的margin及外边距折叠

平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外界元素的重叠现象. 先了解几个概念:可替换元素.不可替换元素(non-replaced element).包含块(containing block).块级格式化上下文(BFC). 1.可替换元素与不可替换元素 根据css1 中所述:所谓可替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内

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

css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容区域的宽度后,再设置盒子的填充.边框.边距值,盒子在页面中实际占据的页面尺寸的计算是: 水平方向上::width+2*padding+2*border+2*border, 垂直方向上::height+2*padding+2*border+2*border, 不过需要注意的是行内元素,在不改变它的表现

css属性操作2(外边距与内边距&lt;盒子模型&gt;)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>外边距与内边距</title> <!--margin:用于控制元素与元素之间的距离:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的.--> <!--padding:用于控制内容与边框之间的距离: -->

理解CSS外边距margin

前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪的重叠特性.之前的博文中已经分别详细地介绍了margin的基础知识和负margin的详细用法.本文将详细介绍外边距margin的几个重点部分,包括重叠.auto和无效情况 重叠 [前提]   margin重叠又叫margin合并,发生这种情况有两个前提   1.只发生在block元素上(不包

css负边距之详解(子绝父相)

来源 | http://segmentfault.com 原文 |  The Definitive Guide to Using Negative Margins   自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就像是在线纹身-每个人都会做,但是没有人会谈论它.(It’s like an online taboo—everyone’s doin

(转)CSS布局-负边距-margin

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的.本文非常基础,老鸟可以略过. 负边距在普通文档流中的作用和效果 那些没有脱离文档流的元素(指不是浮动元素也不是绝对定位.固定定位的元素等),其在页面中的位置是跟随者文档流的变化而变化的.看下面这幅图: 负边距对这些由文档流控制的元素的作用是,会使它们在文档流中的位置发生偏移,但这种偏移不同于相对定位

css细节复习笔记——内边距、边框和外边距

一个元素的内边距.边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观. 高度和宽度 这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确定.正常流中的元素很少有设定的高度. 外边距和内边距 如果元素有背景,则会影响使用内边距和外边距,因为背景会延伸到内边距中,但不会延伸到外边距.为元素指定的内边距和外边距会影响元素的背景何时结束. 为内容区的个边增加10像素空白,margin:10px,类似于html的hspace和vspace,设

CSS布局奇淫巧计之-强大的负边距

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的.本文非常基础,老鸟可以略过. 负边距在普通文档流中的作用和效果 那些没有脱离文档流的元素(指不是浮动元素也不是绝对定位.固定定位的元素等),其在页面中的位置是跟随者文档流的变化而变化的.看下面这幅图: 负边距对这些由文档流控制的元素的作用是,会使它们在文档流中的位置发生偏移,但这种偏移不同于相对定位