CSS-布局基础2

发表于   |   分类于

长度单位

绝对长度单位

in（英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）

相对长度单位

  • px 像素
  • em 是相对于文字大小的值，实际大小是受到字体尺寸影响的。例如：定义某个元素的文字大小为12pt，那么，对于这个元素来说1em就是12pt。
  • ex 和em类似，指的是相对于文本中字母x的高度，因为不同的字体的x的高度是不同的，所以ex的实际大小，受到字体和字体尺寸两个因素的影响。
  • % 相对于包含块的计量单位
  • vw 基于视窗宽度的大小，10vw表示视窗宽度的10%
  • vh 基于视窗高度的大小，10vh表示视窗高度的10%

替换元素和非替换元素

替换元素

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容，如<img>、<input>、<textarea>、<select>、<object>

非替换元素

大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来，如<p>

块级元素和行内元素

块级元素

最明显的特征就是独自占领一行，自动充满父级元素的内容区域，如div、p、form、header、footer、section
通过CSS设定了浮动（float）以及设定显示（display）属性为’block’或’list-item’的元素都是块级元素

行内元素

允许左右都可以有元素，最常见的就是
通过display:’inline’设置以后都会变成行内元素

浏览器的标准模式和怪异模式

  • 标准模式(strict mode)：浏览器按W3C标准解析执行代码

  • 怪异模式(quirks mode)：使用浏览器自己的方式解析执行代码

    浏览器解析时到底使用标准模式还是怪异模式，与网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

怪异模式

1
2
3
4
5
6
7
8
<html>
    <head>
        <title>重庆PHP</title>
    </head>
    <body>
        <h3>重庆PHP，最专业的PHP社区</h3>
    </body>
</html>

标准模式

1
2
3
4
5
6
7
8
9
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>重庆PHP</title>
    </head>
    <body>
        <h3>重庆PHP，最专业的PHP社区</h3>
    </body>
</html>

margin属性

1
2
3
4
margin:2cm 4cm 3cm 4cm;// 值分别代表上外边距、右外边距、下外边距、左外边距
margin:10px 5px 15px;// 值分别代表上外边距、右外和左外边距、下外边距
margin:10px 5px;// 值分别代表上外和下外边距、右外和左外边距
margin:10px;// 值代表四个外边据

可选的属性值如下：

auto: 浏览器计算外边距
length: 具体单位计的外边距值，比如px、cm等，默认值是 0px
%: 基于父元素的宽度的百分比
inherit: 从父元素继承

说明如下：

  • 块级元素的垂直相邻外边距会合并，由于块级元素独占一行，不考虑水平外边距
  • 行内元素实际上不占上下外边距，左右外边距不会合并
  • 浮动元素的外边距也不会合并
  • 允许指定负的外边距值，不过使用时要小心

设置块级元素的 width 可以阻止它从左到右撑满容器，再设置左右外边距为 auto 来使其水平居中。但是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。此时可以使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。

float属性

可选的属性值如下：

left: 元素向左浮动
right: 元素向右浮动
none(默认): 元素不浮动，并会显示在其在文本中出现的位置
inherit: 从父元素继承

说明如下：

  • 用来定义元素在哪个方向浮动，浮动元素会生成一个块级框，而不论它本身是何种元素
  • 这个属性总应用于图像，使文本围绕在图像周围
  • 如果浮动非替换元素，如div，则要指定一个明确的宽度；否则，它们会按元素内容尽可能地窄
  • 如果行内有极少的空间可供浮动元素，那么这个元素会跳至下一行，直到某一行拥有足够的空间为止
  • 如果浮动元素超出父容器，在父容器添加overflow:auto即可根据浮动的元素撑开容器
  • clear属性可清除浮动，值可为left或right，分别表示清除向左浮动或向右浮动
  • float只是脱离了文档流的dom空间但是还占据着文字空间

盒模型

W3C标准盒模型

1
2
3
4
5
6
外盒尺寸计算(元素空间尺寸)
element 空间高度 = 内容高度 + 内距 + 边框 + 外距
element 空间宽度 = 内容宽度 + 内距 + 边框 + 外距
内盒尺寸计算(元素大小)
element 高度 = 内容高度 + 内距 + 边框 （height为内容高度）
element 宽度 = 内容宽度 + 内距 + 边框 （width为内容宽度）

IE传统盒模型(IE6以下)

1
2
3
4
5
6
外盒尺寸计算(元素空间尺寸)
element 空间高度 = 内容高度 + 外距（height包含了元素内容高度、边框、内距）
element 空间宽度 = 内容宽度 + 外距（height包含了元素内容高度、边框、内距）
内盒尺寸计算(元素大小)
element 高度 = 内容高度（height包含了元素内容高度、边框、内距）
element 宽度 = 内容宽度（width包含了元素内容宽度、边框、内距）

边框和内距都包含在宽度或高度内！！！

box-sizing属性

可选的属性值如下：

content-box(默认): 维持W3C的标准盒模型
border-box: 维持IE的传统盒模型
padding-box(Firefox浏览器): 指定元素的宽度或高度包含内容的宽度或高度和内距
inherit: 从父元素继承

说明如下：

  • 定义盒模型的尺寸解析方式，主要目的是控制元素的总宽度

outline属性

  • 外轮廓outline的效果和边框border的效果极其相似，不同之处在于outline不占用网页布局空间，不一定是矩形，属于一种动态样式，可以向内扩展。

  • 将outline属性设置在:focus上，可以实现在元素获取到焦点或者被激活时呈现边框的效果。

  • 为了给元素添加边框效果又不影响页面布局，可以使用outline属性。

position属性

可选的属性值如下：

static(默认): 元素不会被特殊的定位，top, right, bottom, left 和 z-index 属性无效。
relative: 相对定位，相对于其在普通流中的正常位置进行定位，元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute: 绝对定位，不为元素预留空间。元素相对于最近的非static定位的祖先元素来定位。
fixed: 固定定位，不为元素预留空间。元素会相对于视窗来来定位，当出现滚动条时，对象不会随着滚动。
inherit: 从父元素继承。

说明如下：

position: sticky，类似relative和fixed的合体，当目标区域在屏幕中可见时，它的行为就像relative; 当页面滚动超出目标区域时，它的行为就像fixed，固定在目标位置。目前支持该属性的浏览器比较少。

top、right、bottom、left 属性

top、right、bottom、left 分别定义了定位元素上、右、下、左外边距边界与其包含块右边界之间的偏移。可选的取值如下：

auto(默认): 通过浏览器计算的位置
%: 设置以包含元素的百分比计的位置，可使用负值
length: 使用 px、cm 等单位设置元素的位置，可使用负值
inherit: 规定应该从父元素继承属性的值

说明如下：

对于 static 元素，为 auto。对于相对定义元素，如果 top 和 bottom 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数；当 left 和 right​ ​​​​​同时指定时，如果容器是从左到右时，left的值会被优先设定，如果容器是从右到左时，right的值会被优先设定。

overflow 属性

可选的属性值如下：

visible(默认): 内容不会被修剪，会呈现在元素框之外
hidden: 内容会被修剪，并且其余内容是不可见的
scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit: 从父元素继承

说明如下：

如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

clip 属性

用于裁剪绝对定位元素，可选的属性值如下：

auto(默认): 不应用任何剪裁
shape: 设置元素的形状，唯一合法的形状值是：rect(top, right, bottom, left)
inherit: 从父元素继承

z-index 属性

设置元素的堆叠顺序，仅能在定位元素上奏效，即 position 为 relative 或 absolute 的元素上。

vertical-align 属性

可选的属性值如下：

baseline(默认): 元素放置在父元素的基线上
sub: 垂直对齐文本的下标
super: 垂直对齐文本的上标
top: 把元素的顶端与行中最高元素的顶端对齐
text-top: 把元素的顶端与父元素字体的顶端对齐
middle: 把此元素放置在父元素的中部
bottom: 把元素的底端与行中最低的元素的底端对齐
text-bottom: 把元素的底端与父元素字体的底端对齐
lenght: 用长度值指定由基线算起的偏移量，允许使用负值
%: 使用 “line-height” 属性的百分比值来排列此元素，允许使用负值
inherit: 从父元素继承

说明如下：

vertical-align 影响 inline-level 元素，这些元素的 display 属性为 inline、inline-block、inline-table，基本的inline元素都是标签裹着文字。

inline 的元素在一行中一个挨着一个，当这些元素超出了他们的所在行，一个新行便会建立在它下方。这里的每一行就叫做line box。每一行不同尺寸的元素意味着 line box 不同的高度。在这些 line boxes 里面 vertical-align 属性负责摆放单独的元素。