css随堂笔记（三）

css随堂笔记（三）

1 关于背景图片

 

a 设置背景图片：background-image：url(“图片的路径”)；

 

b 背景图片位置： background-position：1 方位名词 背景位置：   

                                                                               1.如果只设置一个方位词，另外一个默认居中

                                                                               2.如果设置的值是两个方位词，与顺序无关

                                                                  2 数值：背景位置：

　　　　　　　　　　　　　　　　　　　　　　1.如果设置的值是数字：

                                                                                                     1.一个值得时候，表示水平方向的位移，垂直方向默认居中

                                                                                                     2.两个值得时候，第一个表示水平位移 第二个表示垂直方向的位移

 

c 背景图片是否平铺：background-repeat：1 no-repeat 背景图片不平铺

                                                                       2 repeat-x x轴平铺

                                                                       3 repeat-y y轴平铺

 

d背景附着：background-attachment：1 scroll（默认值。滚动）2 fixed（背景固定）

 

e 背景透明：rgba（n,n,n,m）n的取值：0-255； m的取值：0-1 a：代表的是alhpa

 

f 背景简写：background：url(“”) no-repeat position; 注意：背景简写的时候，background-image一定要有，其他可选，而且与顺序无关

 

2 盒子模型

 

a 页面布局的本质：就是摆放盒子模型

 

b 盒子模型的组成：

                            1.content：内容

                            2.padding：内边距 padding的值： 一个值：表示上右下左都是这内边距

两个值：第一个表示上下内边距，第二个表示左右内边距

三个值：第一个表示上内边距，第二个表示左右内边距，第三个表示下内边距

四个值：分别表示上 右 下 左

                            3.border：边框

                            4.margin：外边距 margin的值：    一个值：表示上右下左都是这外边距

两个值：第一个表示上下外边距，第二个表示左右外边距

三个值：第一个表示上外边距，第二个表示左右外边距，第三个表示下外边距

四个值：分别表示上 右 下 左

                                  margin’塌陷：垂直塌陷和包含垂直塌陷{

                                                                              1 垂直塌陷，没有解决方案，布局的时候尽可能去避免

                                                                              2 包含垂直塌陷     1  给父盒子添加个border

                                                                                                     　　2 给父盒子加overflow：hidden  触发了bfc  推荐使用

}

c 盒子模型的居中：margin: 0 auto;垂直方向加auto没有作用

 

d 影响盒子模型大小的因素： 1 padding

                                                2 border

计算盒子的大小： 盒子的真实宽度 = width + 左右padding + 左右border

盒子的真实高度 = height + 上下padding + 上下border

 

e 盒子阴影：box-shadow：h-shadow(水平阴影位置） v-shadow（垂直阴影位置） blur（模糊距离） spread（阴影大小） color（阴影颜色） outset（外阴影 默认） inset（内阴影）

　　　　　　注意：水平位置和垂直位置一定要写。。。盒子阴影默认是外阴影，不需要设置outset。设置反而是错误的

 

 

3 浮动

 

a 页面布局的三大机制：1 普通流，标准流  2 浮动  3 定位

 

b 浮动：

　　1 设置了浮动属性的元素会脱离标准流的控制

        2 浮动最初的目的：文字环绕图片

        3 浮动的特点：浮动的特点：

           1.脱标，不占原来的位置

           2.浮动的元素以顶部对齐

           3.浮动能改变元素的显示方式（呈现出行内块元素的特点）

           4.如果有包含关系，子元素浮动，不会跑出父元素，而且不占据父元素中的paddjing和border的位置

5.如果浮动的元素前面是标准流，那么浮动的元素跟在标准流的下面，如果浮动的元素前面也是浮动的元素。那么他们在一行显示（宽度要足够

 

c 清除浮动：1 清除浮动指的是清除浮动带来的影响

                2 清除浮动的方式：

                                  1.给父盒子加overflow：hidden

                                  2.使用额外标签法，在有浮动后面添加一个没有样式的空盒子，然后给clear属性（不建议）

                                  3.使用伪元素清除浮动（强烈推荐使用

ps：伪元素：::before   ::after

 

伪元素清除浮动.clearfix::after{

                                  content:''

                                  clear：both;  清除浮动

                                  display：block;  一定要块元素才能清除浮动，所以我们将伪元素转为块级元素

                                  visibility：hidden;  为了隐藏content中的.

                                  height：0;  为了消除content中的.撑出来的高度

                                  line-height: 0; 为了浏览器的兼容

                                  }

 

                 .clearfix {

                                 *zoom: 1;为了兼容ie6-7

}

为了解决低版本浏览器兼容问题，最起码都得加个点进去

 

双为元素清除浮动：.clearfix::before,.clearfix::after {

                                             content：'';

                                             display: table

                                       }

.clearfix::after {

                                  clear:both

}

.clearfix {

                                  *zoom: 1;

                                  }

d 关于常见的三种布局方式：  1 版心布局 版心：宽度占页面的一半，在浏览器中居中显示

                                               2 通栏布局 宽度和浏览器一样，高度不到页面一半

                                                  3 3.分栏布局（左右分栏）

 

 

4 定位

 

a 定位：定位=定位方式（定位模式） + 偏移量（边偏移），将盒子定位在某方位

      偏移量：偏移量：元素在页面移动的水平距离和垂直距离

       偏移量的表示：  top:

left:

right：

bottom：

top和left的级别比bottom和right高

 

b 定位模式：

 

1 静态定位 html标准流中的元素的定位模式就是静态定位

                             静态定位特点：1.不能设置有效偏移量，所以静态定位的元素遵循标准流

 

2 相对定位 相对定位：position：relative

                             特点：

1.元素不脱标。在占标准流中的位置

2.相对定位不能改变元素的显示方式

3.相对定位移动的是参照元素本身在标准流中的位置

3 绝对定位‘ 绝对定位：position：absolute；

                 特点：绝对定位要设置宽高，不然就没有宽高了

1.脱标，不占标准流中的位置

2.改变元素的显示方式

3.如果有包含关系，子元素绝对定位，父辈元素中所以的元素都是静态定位的元素，那么这个绝对定位的元素位置参照浏览器做位置移动，

4.如果父辈元素中有非静态定位的元素，那么这个绝对定位的元素参照这个非静态定位的父辈元素做位置的移动，如果父辈元素有多个非静态定位的元素，那么这个绝对定位元素参照离自身最近的父辈元素做位置的移动（就近元素）

4 固定定位 position:fixed;

                 特点：

1.固定定位的元素脱标，不占位置

2.能改变元素的显示方式

3.固定定位的元素始终都是参照浏览器的位置移动，与父辈元素的定位方式无关  

 

c 定位的布局方式：子绝父相的定位布局方式：子元素绝对定位，父元素相对定位

 

d 元素的层级： z-index:'' （0-无限）

                                       z-index层级只对非静态定位的元素有效；

对于非静态定位的元素，后面的元素的层级比前面的元素的层级高

费静态定位的元素的层级高静态定位的元素，如果非静态定位的元素不设置层级，默认是0

 

position:relative(定位都行）