背景颜色
取值: 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盒模型: 可以设置宽高/内边距/边框/外边距的标签
box-sizing属性
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: 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大谁盖住谁
本内容收集与网络,部分转载极客江南,并将内容提炼整理。