3 显示

约 5082 字大约 17 分钟

2025-06-18

垂直居中

css中并没有提供垂直居中的方法,可以使用line-height和height等高进行实现

a {
    display: block;
    width: 230px;
    height: 40px;
    background-color: rgb(80, 80, 80);
    line-height: 40px;

}

行高的上空隙和下空隙把文字挤到中间了.是如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下

背景图片

none : 无背景图(默认)
path : 要插入的背景图片地址

background-image:url(path)

示例

background-image:url("image/logo.png")

背景平铺

如果给出的背景图片与包含它的盒子的区域大小不同就会出现不同的现象若盒子区域大,背景图片小就会重复多次显示背景图片占满区域图片大,区域小就会裁剪

默认是平铺的,可以使用background-repeat属性进行设置

参数值	作用
repeat	背景图像在纵向和横向上平铺(默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

背景图片位置

利用background-position: x y属性可以改变图片在背景中的位置。需要指定两个参数分别对应x和y轴值

参数值	说明
length	百分数\|由浮点数字和单位标识符组成的长度值
position	top丨center丨bottom丨left丨center \| right方位名词

背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

背景复合写法

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background：背景颜色 背景图片 地址背景 平铺背景 图像滚动 背景图片位置

背景色半透明

CSS3新增属性，是IE9+版本浏览器才支持的

最后一个参数是alpha透明度，取值范围在0~1之间

background: rgba(0，0，0，0.3);

背景半透明是指盒子背景半透明，盒子里面的内容不受影响小数点前面的0可以省略可以直接写.3

盒子模型

边框

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色
边框的复合属性没有顺序

border:1px solid red;

单独设置四个方向的边框

border-top : 上边框
border-bottom : 下边框
border-left : 左边框
border-right : 右边框

每个方向的边框本质上都是一个小三角,如果盒子内没有内容,并把不同方向的边框改成不同颜色即可显示出

表格细线边框

可以直接更改表格标签的属性,但表格标签只包括外边框,因此若想要改变内边框需要设置单元格td的边框属性

默认情况下单元格紧凑排列,中间没有间距,而两个单元格的边框并在一起所以会看着内边框比外边框粗

可以使用: border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

collapse单词是合并的意思相邻边框合并在一起

border-collapse:collapse;

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

测量盒子大小的时候，不量边框
如果测量的时候包含了边框，则需要width/height减去边框宽度边框有分左右因此减时减双倍

内边距

padding属性用于设置内边距，即边框与内容之间的距离。内边距会影响盒子大小如果盒子不指定盒子的高度和宽度,那么内边距就不会影响盒子的大小

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

1个值，代表上下左右都有指定像素内边距； 2个值，代表上下内边距是第一个值的像素,左右内边距是第二个值的像素； 3个值，代表上内边距第一个值,左右内边距第二个值,下内边距第三个值； 4个值，上右下左顺时针

外边距

margin用于设计外边距,即盒子与盒子之间的距离 margin-left左外边距,其他相同

盒子水平居中

让ehzi水平居中必须指定了宽度且盒子的左右外边距都设置为auto

让行内元素或行内块元素水平居中可以给它的父亲添加text-align:center

嵌套块元素垂直外边距的塌陷 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

*{
	padding:0;    //清除内边距
	margin:0;    //清除外边距
}

圆角边框

radius半径（圆的半径)原理：(椭)圆与边框的交集形成圆角效果

设置的是切角圆形的半径 border-radius属性用于设置元素的外边框圆角

border-radius:10px;

也可以使用百分比,百分比表示的是切角圆半径与边框宽高的比例,如50%就是半径为边框宽高的一半

也可以对四个角单独设置,如果简写的话就是从左上角开始顺时针方向取值分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radiusR

盒子阴影

使用box-shadow属性为盒子添加阴影。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅CSS颜色值。
inset	可选。将外部阴影(outset)改为内部阴影。默认是outset,但是不能写outset要修改只能写inset

文字阴影

使用text-shadow属性将阴影应用于文本。与盒子阴影不同,文字阴影只有四个值:

h-shadow
v-shadow
blur
color

浮动

传统网页布局的三种方式

网页布局的本质--用CSS来摆放盒子。把盒子摆放到相应位置CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）：

普通流（标准流）
浮动
定位

标准流（普通流/文档流）

所谓的标准流：就是标签按照规定好默认方式排列.

块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

标准流的盒子只会按照默认的方式排列,如果需要盒子不换行将其转换成行内块元素其盒子与盒子之间会有缝隙

浮动可以跟随页面的滚动而滚动,且可以实现盒子之间的对齐

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动

选择器{ float:属性值;}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动特性

加了浮动之后的元素，会具有很多特性

浮动元素会脱离标准流（脱标),浮动的盒子不再保留原先的位置浮动相当于多加了一个z轴(图层),浮动的盒子在图层的顶端后面添加的盒子填上浮动盒子原先的位置
浮动的元素互相贴靠如果有多个浮动的元素，那么会相互贴靠，如果宽度不够，会重启一行。
浮动的元素会一行内显示并且元素顶部对齐浮动都是上边缘对齐浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
浮动的元素会具有行内块元素的特性任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

浮动元素经常和标准流的父元素搭配使用 为了约束浮动元素位置,我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置.符合网页布局第一准侧

标准流独占一行,若后面的盒子浮动了它只会压着后面的标准流,而不会压着前面的标准流

如果想要让父元素的高度根据它里面的浮动元素的数量来调节高度不可以将父元素的高度设为0,因为浮动不占有位置,当设为0时只出现了浮动的子盒子,父盒子变为0

清除浮动

清除浮动主要是清除浮动带来的副作用

清除浮动的本质是清除浮动元素造成的影响如果父盒子本身有高度，则不需要清除浮动清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素 (清除左侧浮动的影响)
right	不允许右侧有浮动元素 (清除右侧浮动的影响)
both	同时清除左右两侧浮动的影响

我们实际工作中，几乎只用clear:both; 清除浮动的策略是：闭合浮动

额外标签法

额外标签法也称为隔墙法，是W3C推荐的做法。额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=”clear:both”></div>，或者其他标签（如
等）。

在设置过浮动的盒子后面添加一个额外的标签,并在额外的标签中添加清除浮动,这样就将浮动的盒子与后面的盒子隔开了

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差

[!warning] 注意要求这个新的空标签必须是块级元素

父级添加overflow

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。都可以

优点：代码简洁
缺点：无法显示溢出的部分

:after伪元素法

:after方式是额外标签法的升级版,给父元素添加

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /*IE6、7专有*/
    *zoom: 1;
}

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器

双伪元素清除浮动

给父元素添加

.clearfix:before,.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom:1;
}

优点：代码更简洁
缺点：照顾低版本浏览器

定位

定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移。定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

边偏移

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left和right 4 个属性。

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom:80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left:80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式

通过CSS的position属性来设置

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

静态定位

静态定位是元素的默认定位方式，无定位的意思

选择器{position:static;}

静态定位按照标准流特性摆放位置，它没有边偏移

相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

选择器{position:relative;}

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）

绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

选择器position: absolute;

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

选择器{position: fixed;}

以浏览器的可视窗口为参照点移动元素跟父元素没有任何关系不随滚动条滚动
固定定位不在占有原先的位置固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

附着版心

普通的固定定位只会显示在窗口固定的位置

也可以将固定定位固定在版心旁边,当版心缩放时它也紧挨着版心缩放

让固定定位的盒子let:50%.走到浏览器可视区（也可以看做版心）的一半位置。
让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。Sticky粘性的

选择器{position:sticky;top:10px;}

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加top、left、right、bottom其中一个才有效跟页面滚动搭配使用。兼容性较差，IE不支持。一般使用js实现

定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）

选择器{z-index:1;}

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上如果属性值相同，则按照书写顺序，后来居上数字后面不能加单位只有定位的盒子才有z-index属性

浮动和定位的拓展

绝对定位（固定定位）会完全压住盒子浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有的内容。

因为浮动最开始是做文字环绕效果的

定位的方式

static静态定位
relotive 相对定位
obsolute绝对定位
fixed固定定位
sticky粘性定位

静态定位

所谓静态定位，就是标准流。在标准流里面，块级元素独占一行，内嵌元素共享一行。静态定位是H7ML元素的默认值，静态定位的元素不会受到gop，bottomleft，right的影响。

相对定位

相对自己原来的位置进行定位。相对定位的最大特点是不脱离标准流，相对于自己原来的位置上进行一定的偏移。

使用相对定位的作用主要有两个：

微调元素
做绝对定位的参考，子绝父相

父元素的overflow必须是visible，不能是hidden或者outo，因为父节点定位设置为overflowhidden则父容器无法进行滚动。
父元素的高度不能低于sticky元素的高度。
如果父元素没有设置定位（pasitionrelative|absolute|fixed），则相对于viewpror进行定位，否则以定位的父元素为参考点。
设置阀值：需要指定top、right、bottom或lejt四个阅值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。并且tog和bottom同时设置时，top生效的优先级高；left和right同时设置时，left的优先级高。

如果粘性定位的元素在视口中那么就会在正常的位置上显示，但如果粘性定位的盒子的位置不在视口显示范围，元素就会盒子离开视口的那个边缘