CSS层叠样式常见属性设置

昨日内容回顾

• form表单补充说明

  input标签的name与value视情况需要手动设置，缺少这两项属性的数据不会被发送。

  属性名与属性值一致时，可以直接用属性名代替。

  预设的选项添加checked/selected属性，多个选项需要添加multiple属性。

• CSS层叠样式表简介

  CSS主要为指定标签添加样式。添加样式最常使用的是引入CSS文件。

• 选择器分类

  • 根据标签与属性筛选
  • 组合筛选 空格/+/~/>
  • 分组与嵌套
  • 伪类与伪元素选择

• 背景样式常用设置

  颜色、图片、图片重复填充、位置

• 字体样式设置

  颜色、粗细、大小、对齐、装饰、缩进

今日内容概要

CSS样式属性

• 边框
• display
• 盒子模型
• 浮动
• 溢出
• 定位
• z-index

今日内容详细

边框(border)

边框属性对应关键字为border，边框需要设置的属性常见的有：

线的样式 dotted/dashed/solid/wave 粗细 top/bottom/left/right 像素值

颜色样式 与其他颜色设置规则一致

生成圆形边框 bottom-radius：50%

display

display主要改变标签的展示风格，常用的属性值有：

block 以块儿级标签的形式展示；none隐藏标签。

盒子模型

可以认为所有的标签都被封装了起来，由内而外依次为：content、padding、border、margin

padding与margin属性均是控制距离的属性，padding针对content与border之间，margin针对border与其他标签块之间，两者的使用方法一致。针对四个方向指定间隔像素值即可。

浮动(float)

默认情况下不同的块儿级标签占一整行，从上到下堆叠，使用浮动可使其从底层父标签剥离，并排展示。

浮动常用的属性值有：left/right/clear

实现标签浮动的广泛解决方案：

.clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
	谁塌陷了 就给谁添加clearfix样式类就可以了

溢出(overflow)

当标签内内容过多，标签指定的大小无法完全显示时，会出现溢出现象，针对溢出属性，一般直接使用hidden隐藏，同时对内容进行缩放，提升展示效果。

div {
            height: 150px;
            width: 150px;
            border: 5px solid greenyellow;
            border-radius: 50%;
            overflow: hidden;
        }
div img {
            max-width: 100%;
        }

定位(position)

默认情况下，标签的定位无法通过定位的参数修改。需要修改定位时，需要先修改其状态属性。

1. static 静态定位，即标签默认定位属性；
2. relative 相对定位，标签相对其生成时的位置进行移动；
3. absolute 绝对定位，仅拥有父标签时可设置，针对父标签所在定位移动；
4. fixed 固定定位，相对浏览器窗口定位不变。

z-index

z轴索引，即标签相对于最底层标签的偏移值。通过设置z-index值实现网页分层显示。

body {
            margin: 0;
        }
.cover {
            background-color: rgba(127,127,127,0.5);
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
            z-index: 100;
        }
.modal {
            height: 200px;
            width: 400px;
            background-color: white;
            z-index: 101;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -100px;
        }