CSS整理2

背景颜色

取值:   rgb,  rgba,  十六进制

背景图片

background-image: url();

存放本地地址或者网络地址， 默认平铺

如果网页上出现了图片, 浏览器会再次发送请求获取图片解析结果

背景平铺

如果是简单背景，可以通过平铺来降低图片的大小, 提升网页的访问速度

repeat 默认

no-repeat  不平铺

repeat-x  水平平铺

repeat-y  垂直平铺

注意点:   背景颜色和图片同时存在时，  图片会覆盖颜色

背景定位

background-position:  水平参数 垂直参数;    （图片较大的时, 可通过定位使图片居中）

水平: left center right

垂直：top center bottom

具体的像素 background-position: 100px 200px;  可以是负数

背景属性连写

background属性中， 任何一个属性都可以被省略

background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

background: #fff url() 0 0 no-repeat;

背景关联

默认背景图片会随着滚动条而滚动

修改方式: background-fixed

scroll 默认值

fixed 不会随着滚动条的滚动而滚动

插入图片和背景图片的区别

背景图片不会占用位置,  有定位,

插入图片会占用位置,  没有定位

如果你的图片想被搜索收录, 那么使用插入图片

css精灵

作用:   减少请求的次数, 降低服务器处理压力。

使用: 配合背景图片和背景定位来使用

工具:  

盒模型

边框属性

连写： border: 1px solid #000;

颜色属性可以省略, 省略后默认就是黑色

自定义设定 ：border-方向颜色宽度   

取值方向： 上 右 下 左

内边距属性

边框和内容的距离

padding: 上 右 下 左;

padding-方向      top,right,left,bottom

取值方向： 上 右 下 左 （后面的省略按照，按照前面的对应设置）  

外边距属性

标签和标签之间的距离

margin-方向      top,right,left,bottom

合并现象

垂直方向上外边距是不会叠加的, 水平方向会, 谁的大听谁的

margin-top问题

在嵌套关系中,  设置内部盒子top外边距, 外部盒子也会被顶下来，  解决方法给外部盒子添加一个border

嵌套盒子中, 首选padding, 其次margin

text-align:center;和margin:0 auto;区别

text-align: center;   盒子里的文字/图片水平居中

margin:0 auto;   盒子自己水平居中

盒模型

CSS盒模型:  可以设置宽高/内边距/边框/外边距的标签

是一个比喻，HTML中的标签都是盒模型

盒模型宽高:   width/height

元素的宽高:   边框 + 内边距 + width/height

元素空间的宽高： 外边距 + 边框 + 内边距 + width/height 

box-sizing属性

作用:  添加border 和padding 后大小不变   

border-box ： 保证盒模型大小 

content-box： 保证元素大小

网页的布局方式

浏览器如何对网页中的元素进行排版的

标准流

块级元素从上至下排版，   行内元素从左至右排版

浮动流

设置某个标签左对齐或者右对齐

不可以使用margin: 0 auto;

都可以设置宽高

浮动脱标 （浮动的标签脱离标准流）

前面标签浮动了, 而后面标签没有浮动 , 前面的就会盖住后面的

浮动元素排序规则 ： 

后浮动的贴靠先浮动的后面，  如果父标签宽度容不下浮动标签,  浮动标签会贴靠下一个 直到能容下

浮动标签字围现象

浮动标签不会挡住没有浮动标签的文本内容

清除浮动

在标准流中   内容的高度可以撑起盒子的高度

在浮动流中  内容的高不能撑起盒子的高度

清除浮动方式一

给父盒子添加高度  不常用

清除浮动方式二

clear:both;属性 

清除浮动方式三

外墙法:    在两个有浮动子元素的盒子之间添加一个的块级元素    不常用

内墙法：  在第一个浮动元素的盒子最后添加一个块级元素   不常用

注意点： 外墙可以使用margin-top  但是上面的浮动元素的盒子不能使用 margin-bottom，  内墙法都可以使用

内墙外墙法添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

清除浮动方式四

overflow

第一个浮动的盒子添加overflow:hidden属性

overflow:hidden可以撑起盒子的高度, 可以设置margin属性  包括嵌套盒子

IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;

同时可以减掉盒子里多出内容

清除浮动方式五

给前面的盒子添加伪元素来清除浮动   (最推荐)

标签:after {

    visibility: hidden;   //  使生成的内容不可见

  最后面添加clear: both

}

本质上和内墙法一样  ，伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性

伪元素和伪类不是同一个东西

清除浮动方式六

给前面的盒子添加双伪元素来清除浮动

.cf:before,.cf:after { 
          content:"";
         display:table;
         /*重点是这一句*/
         clear:both; } 

      } 

    .cf {         zoom:1;      }

相对定位

opsition: relative

不脱离标准流，  在标准流中占用一份空间，  区分块级元素/行内元素/行内块级元素

绝对定位

opsition: absolute

脱离标准流, 不会占标准流的位置，   不区分块级元素/行内元素/行内块级元素

相对于body或者某个定位流中的祖先元素来定位    (默认body,   如果祖先元素有定位以祖先作为参考点)

以首屏的宽度和高度作为参考点 

会随着页面的滚动而滚动

会忽略祖先元素的padding

绝对定位水平居中

当盒子绝对定位后不能使用margin: 0 auto;   可以使用left: 50%; margin-left:-元素宽度一半px;

子绝父相

解决了相对和绝对定位单独使用的缺陷  

用来做覆盖效果, 某个元素覆盖在另外一个元素上时, 就要想到子绝父相

固定定位

option: fixed

和背景关联background-attch很像, 背景关联让某个图片不随着滚动条滚动,

固定定位让某个盒子不随着滚动条而滚动

固定定位的元素是脱离标准流的, 不会占用标准流中的位置

静态定位

静态定位其实就是默认的标准流

默认position属性就等于static

应用场景:   配合JS清除定位属性

z-index属性

定定位的元素的覆盖关系

覆盖关系:

定位的盖住没有定位的

都定位了后写的的会盖主前面的

添加z-index值, 谁大谁就在前面

从父现象： 谁的父元素z-index大谁盖住谁

本内容收集与网络，部分转载极客江南，并将内容提炼整理。