span {
display: inline-block;
}
如何让文字垂直居中
《让文字行高等于盒子高度》
背景属性
背景颜色
background-color: transparent; 默认
背景图片
常用于logo、或是超大的背景图片,优点是非常便于控制位置
背景平铺
background-repeat: repeat;
背景图片的位置
background-position: x y;
例如: background-position: cneter top(方位名词)
background-position: 20px 50px;(精确移动)
背景图像固定(背景附着)
background-attachment: scroll (默认) | fixed
css三大特性:层叠性、继承性、优先级
层叠性:解决样式冲突问题
继承性:文字及文字属性会子继承父
优先级:如果是相同标签,则执行层叠性,否则,执行优先级(继承或者* < 元素选择器 < 类选择器、伪类选择器 < id选择器 < 行内样式style=“” < !important)
权重叠加
盒子模型
边框粗细 border-width
边框样式 border-style
border-collapse: collapse; 相邻边框合并
padding不会撑开盒子的情况
不给盒子设置weight或height就可,因为没写的值会继承父亲属性
外边距的经典应用
让块级盒子水平居中有两个条件:
1.要有宽度
2.左右外边距设为auto就可
行内元素和行内块元素水平居中:
给其父元素添加text-align:center
外边距塌陷问题:
解决办法:
1.给父盒子定义边框
2.给父盒子设置内边距
3.为父盒子加overflow:hidden(最优)
清除内外边距
* {
margin: 0px
padding: 0px;
}
去掉无序列表前的小圆点
list-style: none;
盒子阴影
box-shadow: x距离 y距离 模糊程度 大小
浮动
浮动最典型的应用是让一系列块元素在一行排列
第一准则:“网页中多个盒子排列找标准流,横向排列找浮动”
float: left right none
浮动特性:
1.浮动元素会脱离标准流
2.浮动元素会一行内显示并且顶部对齐
3.浮动元素具有行内块元素的特性
行内元素(例如 span)直接设置宽高不会做出任何改变,但是设置浮动之后就会具有行内块元素的性质
浮动元素经常配合父级元素来进行布局
清除浮动
清除浮动方法:
1.额外标签法(必须是块级元素)
在最后面添加
2.父级添加overflow属性
父级元素添加 overflow:hidden
3.父级添加after伪元素
.clearfix:after {
content: "";
display: block
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
4.父亲添加双伪元素
前后都添加伪元素
图片格式
jpg 适用于商品图,像素高,质量好的图片
gif可以保存透明背景和动画效果
png格式结合了以上两种图片格式的优势
定位
定位:将盒子定在某一位置,所以定位也是在摆放盒子,按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位模式: position: static 静态定位、relative 相对定位、absolute 绝对定位、fixed 固定定位
边偏移: top、 bottom、left、 right(只有定位可以使用)
相对定位:在元素移动位置的时候,是相对于他原来的位置来说的(自恋型)
特点:
1.他是相对于自己原来的位置移动的(移动位置的时候参照点是自己原来的位置)
2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)
典型应用是给绝对应用当爹
绝对定位:绝对定位是元素在移动位置的时候,相对于他的祖先元素来说的(拼爹型)
特点:
1.如果没有祖先元素或者祖先元素没有定位(是标准流或者浮动的盒子),则以浏览器为准定位
2.如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位的祖先元素为参考点移动位置
3.绝对定位不再占有原来的位置(脱离标准流)
子绝父相
子级是绝对的话,父亲要用相对定位
1.子级绝对定位,不会占有位置,可以放到父盒子的任何一个地方,不会影响其他兄弟盒子
固定定位fixed
元素固定到浏览器的可视区域的位置。主要使用场景:可以在浏览器页面滚动元素时候不改变
特点:
1.以浏览器的可视窗口作为参照移动位置(和父级元素没有任何关系,不随滚动条滚动)
2.不在占有原来位置(脱流)
固定定位小技巧: 固定在版心右侧位置
小算法: left: 50% margin-left: 版心一半
粘性定位
粘性定位可以被认为是相对定位和固定定位的混和。sticky粘性的。
粘性定位的特点:
1.以浏览器的可视窗口为参照点移动元素(固定定位的特点)
2.粘性定位占有原来的位置(相对定位的特点)
3.必须添加top、left、right、bottom其中一个才能有效
z-index
1.数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上
2.如果属性值相同,则按照书写顺序,后来居上
3.数字后面不能加单位
4.只有定位的盒子才有z-index属性
定位的拓展
1.绝对定位盒子居中
left: 50%; margin-left: 负的自己宽度的一半
2.行内元素添加绝对或固定定位,可以直接设置高度和宽度,块级元素添加绝对或固定定位,如果不给宽度或者高度,默认大小是内容的大小。
3.脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题。
4.浮动的元素不会压住下面标准流的文字,绝对定位(固定定位)会压住下面所有内容
元素的显示与隐藏
display属性
display: none; 隐藏对象
display: block; 显示元素,转换为块级元素
visibility属性
visibility: visible; 元素可视
visibility: hidden 元素隐藏
overflow属性(溢出部分做的处理)
overflow:visible;
overflow: auto;溢出显示滚动条
overflow: hidden;
overflow: scroll不溢出也显示滚动条