css的三种布局方式:
1.标准流: 从上面往下面布局
2.浮动
3.定位
在标准流下,分为三种元素:
块级元素
行内元素
行内块元素
浮动的值:
float: left right
浮动的特点:
1.可以使元素排成一行
2.脱标: 脱离标准流(半脱标),不占位置
3.后面浮动的盒子应该排列在前面浮动盒子的后面
4.做文字环绕效果： 文字会环绕着浮动的盒子显示
5.使行内元素可以设置宽高
6.如果父盒子宽度不足以显示子盒子的内容,子盒子会往下面显示
总宽高: 502 290
左边盒子宽高: 302 290
右边上盒子: 190 140
右边下盒子: 190 140
--------------------------------------
清除浮动不是把浮动干掉,清除浮动带来的影响
浮动的影响: 使父盒子没有高度 (父盒子高度由子盒子高度撑起)
1.给父盒子设置高度 (一般不怎么使用)
2.给父盒子设置overflow: hidden;
(一般少用)
原理: 设置了overflow: hidden,触发bfc机制: block formatting context,块级排版上下文,划定一块区域,让该区域里面的所有的html元素按照一定的规则进行排列,不影响其他元素的布局(显示)
overflow: hidden; 超出父元素部分隐藏
auto; 超出父元素内容,出现滚动条
overflow:hidden;清除浮动,在有定位的时候不适合使用
3.在父元素里面添加一个空的块级子元素,并且设置clear:both; (left,right)
程序员修改代码结构 (一般不用)
4.本质上是第三种方法,不会修改结构
伪类选择器:
选择器名:hover {}
选择器名:after: 在选择器里面的最后面添加一项内容
IE低版本不支持:after
高级浏览器
.clear-fix:after {
content: "";
display: block;
clear: both;
}
低级浏览器
.clear-fix {
zoom: 1;
}
---------------------------------------
浮动元素不给宽度,默认宽度为内容的宽
浮动的三要素:
1.一般给宽度,不要给高度(一般由子元素撑起)
2.同级的元素,只要一个设置浮动,所有的都应该设置浮动
3.只要给子元素设置了浮动,那么父元素必须清除浮动
设置inline-block,空格,默认为与文字的基线对齐
vertival-align: top
1.标准流(文档流) : 从上往下布局
2.浮动
3.定位 : 设置标签元素的位置,结合四个方向属性来设置位置
top: 距离上方的位置
bottom: 距离下方的位置
left: 距离左边的位置
right: 距离右边的位置
设置定位: position
1.静态定位(static): 以前用的定位其实就是静态定位,在静态定位的时候,四个方向属性值是不起作用的
2.绝对定位(absolute)
3.相对定位(relative)
4.固定定位(fixed): 把一个标签元素固定在某一块位置
后面三种定位,方向属性值都是起作用的
绝对定位:
1.脱离标准流
2.可以使行内元素设置宽高
3.参考点:
a.祖宗盒子没有定位的情况下,以body,浏览器窗口的左上角作为参考点
b.如果盒子间发生嵌套关系,并且子盒子设置绝对定位,参考点就是具有定位的祖宗盒子;如果所有的祖宗盒子都没有定位,那么还是以body,浏览器的左上角作为参考点
相对定位:
1.不是脱离标准流
2.不可以使行内元素设置宽高
3.参考点,以元素的当前位置作为参考
作用:
a.元素位置的微调
b.父相子绝 (父盒子相对定位,子盒子绝对定位)
盒子的居中显示:
margin: 0 auto;
如果盒子设置为绝对定位,auto不起作用
margin的负边距布局
margin为正值的时候
margin-left: 盒子往右边跑
margin-top: 盒子往下边跑
margin为负值的时候
margin-left: 盒子往左边跑
margin-top: 盒子往上边跑
如果盒子有绝对定位,让盒子居中,一般就是给该盒子设置以下样式:
width: 200px;
heigth: 200px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
注: margin-left的值和margin-top值,为盒子宽高的一半
固定定位: fixed,将元素固定在网页的某个位置
1.脱离标准流
2.可以使行内元素设置宽高
3.参考点: 以body,浏览器左上角
z-index: 设置元素的堆叠顺序,值是一个数值,谁的值大,那么就显示在最上面
注意点:
1.如果要想使z-index值生效,必须设置定位(绝对,相对,固定定位)
2.z-index的比较,只在同级比较
A a,B b,如果A的z-index值大于B,那么无论b的z-index值是多少,都不可能显示在最上面
颜色:
1.单词,red,blue
2.十六进制
3.rgb()
4.rgba(r,g,b,a) : a透明度的意思 0-1,1代表不透明,0代表透明
rgba仅仅是颜色的透明度变化
opacity: 0-1 ,0 代表完全透明,1代表不透明
opacity的透明指的是元素所有的内容,包括内容,背景颜色
