浮动
-
如何设置浮动
float:left ight one -
设置浮动之后的特点
脱离文档流。 对父元素和后面元素的影响
块状元素，可以共享一行。多个元素浮动，宽度超过父元素会自动换行
元素一旦浮动，都变为块状。 浮动元素的默认宽度，被内容撑开
父元素的宽度仍然会对浮动的元素产生限制 -
消除浮动的影响
父元素：
设置overflow: auto/hidden
父元素也浮动
后面的元素 设置 css属性 `clear:both`
定位
相对定位
position:relative;
left
top
right
bottom
根据元素原先默认的位置去定位
不会脱离文档流，不影响别人
对绝对定位的子元素做限制
绝对定位
position: absolute;
left
top
bottom
right
根据第一个定位的祖先元素
脱离文档流
绝对定位之后，宽度默认值是被内容撑开， 影响后面的元素和没定位的父元素
相对定位和绝对定位的区别
相对定位根据自己原先默认位置定位； 绝对定位根据第一个定位的祖先元素
相对定位不脱离文档流； 绝对定位脱离文档流
day06
1 定位
1.1 相对定位
1.2 绝对定位
1.4 固定定位
position: fixed;
left/top/right/bottom: 长度单位；
-
根据屏幕进行定位
-
脱离文档流 （宽度默认变成内容撑开）
-
元素设置为
固定定位或绝对定位之后，会变为块状元素
1.5 元素的层级位置
z-index: number; 只能用于被定位的元素
2 布局知识点总结
元素垂直左右居中
position: absolute;
left: 50%;
top: 50%;
margin-top: -高的一半
margin-left: -宽的一半
元素水平居中
margin-left:auto;
margin-right: auto;
margin:0 auto;
text-align
-
让文字水平居中
-
内联元素(inline 和 inline-block)
line-height
-
让一行文字垂直居中。 line-height的值等于元素的高
-
内联元素(inline inline-block)
布局
1. CSS重置
-
reset.css 简单粗暴干掉 过去式 pc用 尽量不写H5标签
去掉所有元素的默认样式 各种元素的margin 段落间隙等 删除
也可以保证浏览器效果相同 -
normalize.css 重设 现在用的较多 手机用
重新设计了所有元素的默认样式 各种元素的margin 重设覆盖掉
保证所有浏览器效果相同
优点：
添加了H5新元素的样式重置
没有简单粗暴
2. 布局的H5新增标签(了解) 布局用
header
footer
main
aside
article
section
dialog
双标签，没有任何默认样式，跟div一样。 有语义