JavaWEB笔记02 CSS常用操作（1）

JavaWEB笔记02 CSS常用操作（1）

一.页面元素的定位：

页面中的原点位置在页面的左上角，第一个元素一定会去到原点所在的位置，在页面中的元素有两种定位：绝对定位和相对定位：

• 绝对定位： 所有元素参照位置都是原点位置
• 相对定位： 第一个元素参照原点位置，后面的元素参照上一个元素，页面中元素默认采取的定位方式是相对定位

在选择器中各个标签的position属性，即定位属性，默认都是relative（相对定位），可以在使用时将其改为absolute（绝对定位）；下面介绍的是在两种不同的定位中的间距问题：

• 绝对定位中的间距： 绝对定位直接对于所在的页面四周的边框基于原点使用top，left（常用前两个），right，bottom进行定位，在选择定位属性时选择一个上下属性，选择一个左右属性；
• 相对定位中的间距： 相对定位时选用margin来表示间距，一共有left，right，top，bottom四个方向，使用margin-left，margin-right，margin-top，margin-bottom可以分别表示相对于页面边框中对应方位上的距离；除此之外使用margin可以作为符合属性使用，其值分别依次接4个间距，分别表示四个方向上不同的间距；
• 局部的绝对定位： 即参照父类标签进行定位，这种局部绝对定位常使用在标签的嵌套中，在嵌套标签中，如果将内部标签改为绝对定位，在定位效果中就子依据的是外部标签的顶端（左上角）作为原点进行定位。注意声明时常将外层标签设为相对定位。

二.块标签，行标签，行内块标签的相互转换：

CSS中设置三种标签的转换的目的是基于其不同的特性，因此为了方便我们进行设计，CSS支持并提供标签之间的转换，首先是回顾每一类标签的独有特性：

• 行标签在CSS的上下间距时不起作用
• 块标签则设置上下左右位置都是可以生效的
• 行内块标签则上下左右位置均生效但是是在一行上的元素

在设计中往往布局使用的都是CSS+div这种模式，因此会存在许多对于div的局限性，比如设计一行中有多个元素这种情况，下面是CSS针对标签转换所提供的方式：

• 转换成块标签：display:block
• 转换成行标签：display:inline
• 转成行内块标签：display:inline-block 即可以将多个标签放在一行也可以控制上下距离

三.元素的隐藏：

元素的隐藏可以分为两种：透明化隐藏和消失化隐藏：

• 在选择器中使用display:none可以隐藏元素，隐藏之后该元素及标签将不占位置，即：消失化隐藏；
• 使用visibility:visible（默认显示元素），hidden（隐藏元素），但是隐藏之后占的位置还在，即：透明化隐藏；
• 元素隐藏的应用：鼠标悬浮时隐藏的动态效果的设计

四.块标签的浮动：

在CSS+div布局种可以使div通过块标签的浮动来使其位于一行：

• CSS种支持使用属性让块元素浮动一字排开：float:left（左浮动） 或 float:right（右浮动）
• 清除浮动时：使用clear:left 或 clear:right就可以清除浮动
  clear:both是左右浮动都清除

五.页面布局：

在html设计种，常采用div+CSS来进行布局：

• 在布局时margin和width都可以使用%来表示屏幕占比；
• 使用右浮动进行右对齐时可以使用margin-right为一个负值来进行对齐；
• 布局种如果出现不想要的像素细缝等情况，要善于使用负值灵活布局；
• 使用div的嵌套有助于布局逻辑更加清晰，层次划分更加明显

六.插入背景图片：

CSS在插入背景图片时通常使用对于background这一属性的相关调整来实现：

• background-image:url(“图片文件路径/图片文件名”) 用来选择对应图片（文件路径可以是绝对路径也可以是相对路径，但是通常情况下将html文件与图片文件夹放在同一目录下，并命名为img，这样方便查找）
• 如果想让上下左右都占满，使用background-size:100% 100%；第一个控制横向铺背景占比，第二个控制纵向铺背景占比；
• 如果图片较小，图片就会出现重复，即多个图片进行背景铺满，使用background-repeat:no-repeat可以防止图片进行重复

七.居中:

• 在CSS种的文本内容进行左右居中：text-align:center，如果想完成上下左右的居中，将上面的样式结合line-height=对应div块的height就可以实现上下左右均居中
• 后期CSS深度学习中可以使用flex模型进行布局：display:flex
  flex模型下的上下居中：align-items:center
  flex模型下的左右居中并等距分散：justify-content:space-around
  （flex模型的更多知识会在后面进行介绍）

八.简单特效：

在CSS中设计div块时可以使用简单特效来辅助视觉效果：

• 去掉边框：border:none 常用在去除button标签自带的边框属性
• 使用边框圆角做圆形：border-radius:div边的一半
• 边框弧度：border-radius:弧度像素（也可以使用百分比）
• 阴影效果：box-shadow:左右 上下 阴影发光范围 阴影颜色 ，阴影效果常添加在使用hover时出发的点触动效中