WEBBASE篇： 第六篇， CSS知识4

CSS

1、框模型
    1、内边距
        属性：
            padding:value;
            padding-top / right / bottom / left:value;
    2、box-sizing
        作用：指定框模型的计算方式
        取值：
            1、content-box
                width 和 height 只表示内容区域的尺寸
            2、border-box
                width 和 height 会包含 内容区域的尺寸，内边距 以及 边框的宽度
2、背景属性
    1、背景颜色：background-color
    2、背景图片：background-image
    3、背景平铺：background-repeat
    4、背景尺寸：background-size
    5、背景位置：background-position
    6、背景属性：
        属性：background
        取值：color url repeat position
3、文本格式化
    1、字体属性
        1、指定字体：font-family
        2、字体大小：font-size
        3、字体加粗：font-weight : normal / bold / v
        4、字体样式：font-style:normal/italic
        5、小型大写字符：font-variant:normal/small-caps
        6、字体属性
            font:style variant weight size family;
            注意：family的值必须要指定

    2、文本属性
        1、文本颜色 ：color
        2、文本排列方式
            属性：text-align
            取值：left / center / right / justify
        3、文本修饰
            属性：text-decoration
            取值：none / underline / line-throught / overline
        4、行高
            属性：line-height
            取值：px / 无单位的数值
        5、首行文本缩进
            属性：text-indent
        6、文本阴影
            属性：text-shadow
            取值：h-shadow v-shadow blur color
4、表格
    特有属性：
        1、边框合并
            属性：border-collapse
            取值：separate / collapse
        2、边框边距
            属性：border-spacing
            取值：
                取值为1个数字 ：水平和垂直间距相同
                取值为2个数字 ：
                    第1个数字 ：水平间距
                    第2个数字 ：垂直间距
            注意：只有在border-collapse的值为separate时才有效
5、过渡
    1、属性
        1、指定过渡属性
            属性：transition-property
            取值：属性名称
        2、指定过渡时长
            属性：transition-duration
            取值：以 s 或 ms 为单位
        3、指定速度时间曲线函数
            属性：transition-timing-function
            取值：
                ease / linear / ease-in / ease-out / ease-in-out
        4、指定过渡延迟
            属性：transition-delay
            取值：以 s 或 ms 为单位的数值

一，定位（重点）

1，什么是定位？  表示元素在页面中的位置；

2，为什么需要定位？ 元素的默认位置无法满足页面的需求，所以需要通过定位改变元素默认的位置；

3，CSS中定位的分类：

（1）普通流定位（默认定位方式）

（2）浮动定位（重点）

（3）相对定位

（4）绝对定位（重点）

（5）固定定位

二，普通流定位：

概念：它又称为“文档流定位”，是页面中所有元素的默认定位方式。典型的“流式布局”；

特点：（1）每个元素在页面中都有自己的位置，并占据一定的页面空间；

（2）每个元素都是从其父元素的左上角开始排列的；

（3）每个元素基本上都是按照从上到下，从左到右的方式进行排列的；；

　　块级元素： 从上到下排列；

　　行内元素  &  行内块：从左到右排列，只有一行显示不下的时候，才换行；

问题： 如何能够让多个块级元素在一行显示呢？

三，浮动定位（重点）：

1，概念和特点：（1）浮动元素会被排除在文档流之外， 脱离文档流，那么元素将不再占据页面的空间；（2）为浮动的元素们会上前占位；

（3）浮动元素会停靠在父元素的左边和右边或其他已浮动元素的边缘上；

（4）浮动只能在当前行浮动；

（5）浮动解决的问题：？？让多个块级元素在一行内显示；

2，语法：属性：float

　　取值：（1）none  ；默认值，无任何浮动效果；

（2）left  ；浮动到父元素的左边，或停靠在左边已有浮动元素的边缘上 - 左浮动；

（3）right ； 浮动到父元素的右边，或停靠在右边已有浮动元素的边缘上 - 右浮动 ；

3，浮动引发的特殊效果：

（1）如果父元素中显示不下所有的已浮动元素的华，那么最后一个将换行显示，但有可能被卡住

（2）元素一旦浮动起来之后，都会变成块级元素；

　　　　行内元素们是允许修改尺寸的；

（3）元素一旦浮动起来之后，在未指定宽度的情况下，那么宽度将由内容来决定；

（4）文字，图片，行内元素是采用环绕的方式来排序的，是不能被浮动元素压在底下的；

4，清除浮动：

浮动带来的影响： （1）当前元素浮动，会影响后面元素的位置；

（2）如果后面元素不想受到当前元素浮动影响的话，则可以通过清除浮动的方式来 解决；

语法： 属性： clear

　　取值： （1）none ；  默认值；即不做任何清除浮动的操作；

　　（2）left ；清除前面元素左浮动所带来的影响；

　　（3）right ; 清除前面元素右浮动所带来的影响；

　　（4）both；清除前面元素任何一种浮动方式所带来的影响；

5，浮动元素对父元素高度的影响：

（1）父元素的高度是以未浮动的子元素的高度为准的；

（2）如果一个父元素中所有的子元素都是浮动的，那么它的高度将变成0；

　　解决方法：（1）为父元素增加overflow属性，取值为auto或hidden；

　　　　　　　　　有弊端，如果有溢出要显示的内容，也一同被隐藏了；

　　　　　　（2）在父元素的末尾处，增加一个空块级元素，并设置其clear为both ；

四，其他定位方式（相对，绝对，固定）

1，相关属性：

定位方式：

　　作用：改变元素默认的定位方式；

　　属性：position

　　取值：（1）static 静态的； （2）relative  相对定位；

　　（3）absolute 绝对定位； （4）fixed  固定定位；

注：将元素的position设置为relative /absolute/fixed任意一种的化，那么元素就称为“已定位元素”；

偏移属性（4个）：

　　作用：配合着“已定位元素”去实现位置的移动；

　　属性：（1）top： 以元素的上边为基准边去移动元素；

　　（2）bottom：以元素的下边为基准边去移动元素；

　　（3）left：：以元素的左边为基准边去移动元素；

　　（4）right：：以元素的右边为基准边去移动元素；

　　取值：以px为单位的数字；

　　注： 只有“已定位元素”才能使用偏移属性；

2，相对定位：

　　概念：元素会相对于它原来的位置偏移某个距离；

　　语法：属性：position

　　取值： relative

　　配合着 偏移属性 实现位置的移动；

3，绝对定位；

　　绝对定位&特定：（1）绝对定位的元素会脱离文档流---（不占据页面空间）；

　　（2）绝对定位的元素会相对于离他最近的，“已定位的”祖先元素 去实现位置的初始化；

　　（3）如果元素没有离它最近的，已定位的祖先元素的话，那么元素就会相对于body去实现位置的初始化；

　　语法：属性：position

　　取值：absolute

　　配合着 偏移属性 实现位置的变化；

4，堆叠顺序；

　　属性：z-index

　　取值：无单位的数字；

5，固定定位；

　　概念：将元素固定在浏览器窗口的某个位置处，不会随着滚动条而发生位置的变化；

　　语法：

属性：position
取值：fixed
配合着 偏移属性 实现位置的初始化
3、注意
固定定位的元素永远都是相对于body去实现位置的初始化的
3、显示
1、显示方式
1、作用
决定了元素以什么样的方式(块级，行内)显示在网页中
2、语法
属性:display
取值：
1、none
让元素不显示 - 隐藏
脱离文档流 - 不占据页面空间
2、block
块级
让元素显示的和块级元素一致
3、inline
行内
让元素显示的和行内元素一致
4、inline-block
行内块
让元素显示的和行内块元素一致
特点：
1、多个元素能够在一行内显示
2、每个元素是允许修改尺寸的
2、显示效果
1、visibility 属性
作用：控制元素的可见性
取值：
1、visible ：可见的，默认值
2、hidden ：隐藏
该隐藏方式并未脱离文档流，所以还占据页面空间

面试：display:none 和 visibility:hidden的区别
display:none 会脱离文档流 （关键点）
2、opacity 属性
作用：控制元素的透明度
取值：0(完全透明) ~ 1(完全不透明)之间的数字
3、vertical-align 属性
1、用在td中，设置td的内容的垂直对齐方式
2、用在图片 和 行内块元素上
设置图片和行内块两端的文本相对于图片和行内块元素的垂直对齐方式
取值：
1、top
2、middle
3、bottom
4、baseline - 基线对齐
3、光标