css基础2

css边框

1.行高的问题

1.行高的测量

如图：基线和基线之间的距离为行高；

小技巧：让文本在盒子中垂直居中的做法就是 使文字行高等于盒子的高度

2.css权重优先级

当同一个元素指定多个选择器，就会有优先级的产生。
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
！important >id > class > 标签

3.css背景

css可以添加背景颜色和背景图片，具体属性如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-seqpvUfr-1646637401445)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220228181613500.png)]

1.背景图片

语法：

background-image:none|url(url);

2.图片平铺

语法：

background-repeat:repeat(在纵向和横向上平铺)|no-repeat（不平铺）|repeat-x（背景横向上平铺）|repeat-y（背景纵向平铺）

3.背景位置

语法：

background-position：top|center|bottom|left|center|right

4.背景简写

background属性的值的书写顺序官方并没有强制标准。

建议如下写：

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

5.背景透明

css3支持背景半透明的写法语法格式：

background:rgba（0,0,0,0.3）;

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

4.盒子边框

1.盒子边框的写法：

border:border-width(边框的粗细)||border-style（边框样式）||border-color（边框颜色）;

2.边框样式

border-style：none|hidden|dotted|dashed|soild|double|groove|ridge|insrt|outset

3.表格的细线边框

边框合并：

border-collapse：collapse；

4.内边距

padding属性用于设置内边距。是只边框与内容之间的距离。

padding-top：上内边距；

padding-right：右内边距；

padding-bottom：下内边距；

padding-left：左内边距；

注:

例：padding:1px；时；上下左右都是1px；

​ padding：1px 2px时；上下为1px，左右为2px

​ padding：1px 2px 3px；时；上为1px，左右为2px，下为3px；

​ padding：1px 2px 3px 4px时；上为1px，右为2px，下为3px，左为4px；

1.外边距

1.盒子居中

满足条件：1.必须是块级元素。

2.盒子必须指定了宽度（width）

示例代码：

.header{width:960px;margin:0 auto;}

2.文字盒子居中图片和背景区别

1.文字水平居中是 text-align：cente

2.盒子水平居中 左右margin改为auto

3.清除元素的默认内外边距

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

4.外边距合并

1.相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素一下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是两者之和，而是两者中的较大的，这种现象称为外边距塌陷。

2.嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即父元素的上外边距为0，也会发生合并

解决方案：

1.可以为父元素定义1像素的上边框或上内边框。

2.可以为父元素添加overflow：hidden。

5.center宽度和高度

使用宽度属性width和高度属性height可以对盒子大小进行控制

注意：

1.width和height仅适用于块级元素，对行内元素无效（img和input标签除外）

2.如果一个盒子没有给定宽度/高度/或者继承父亲的宽度/高度，则padding不会影响盒子大小

6.盒子模型稳定性

width>padding>margin

原因：1.margin会有外边距合并

2.padding会影响盒子大小，需要进行加减计算其次使用；

7.圆角边框（css3）

语法格式：

border-radius：50%

8.盒子阴影

语法格式：

box-shadow：水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影

ps：1.前两个属性必须写 其余可以省略

2.外阴影（outset0）但是不能写默认 想要内阴影 inset

2.浮动

1.标准流

指网页内标签元素正常从上到下，从左到右顺序排列的意思。

（三种布局）

2.浮动

什么是浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

语法格式为：

选择器{float:属性值;}

浮动特性

浮动只有左右浮动，不占位置，会影响标准流。

总结：浮动的目的就是为了让多个块级元素同一行上显示。

3.版心和布局流程

1.版心

是指网页中主体内容所在的区域，一般在浏览器窗口中水平居中显示。

2.布局流程

1.确定页面的版心

2.分析页面的行模块，以及每个行模块中的列模块

3.制作html结构

4.css初始化，然后开始运用盒子模型的原理，通过div+css布局来控制网页的各个模块。

1.清除浮动

清除浮动主要为了解决父级元素因为子集浮动引起内部高度为0的问题。

清除浮动的方法

1.选择器{clear:属性值；}

属性的值如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1LVNRspj-1646637458511)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220302174625546.png)]

2.额外标签法

通过在浮动元素末尾添加一个空的标签如：<div style="clear:both"></div>,或其他标签br等

3.父级添加overflow属性方法

可以给父级添加：overflow：hidden|auto|scroll；

4.使用after伪元素清除浮动

：after方式为空元素的升级版，好处是不用单独加标签

使用方法：

.clearfix:after{ conter:"";display:block;heigt:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1}

2.定位

元素的定位属性

1.边偏移，如图：

2.定位模式（定位的分类）

在css中，position属性用于定义元素的定位模式，基本语法为：

选择器{position:属性值;}

position属性的常用值

静态定位（static）

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。

相对定位（relative）

相对定位是将元素相对于他在标准流中的位置进行定位。

注意：每次移动位置是以总结的左上角为基点移动。且移动之前的位置依旧占据。

绝对定位（absolute）

注意：1.若所有父元素没有定位，以当前浏览器屏幕为准对齐；

2.若父亲有定位，绝对定位是将元素依据最近的已经定位（绝对，固定或相对定位）的父元素进行定位。

ps：绝对定位的盒子水平/垂直居中

定位的盒子也可以水平或者垂直居中，方法：

1.首先left50%父盒子的一半大小；

2.然后走·自己外边距负的一半值就可以了 margin-left。

固定定位（fixed）

当对元素设置固定定位后，他将脱离文档流的控制，始终依据浏览器窗口来定义自己的显示位置，不管浏览器滚动条，也不管浏览器窗口大小如何变化，该元素都会显示在浏览器窗口的固定位置。

注意：1.固定定位的元素跟父亲没有任何关系，只认浏览器。

2.固定定位完全脱标，不占位置，不随着滚动。