DAY05

DAY05
http://101.96.128.94:9999/ 学子商城网址
http://101.96.128.94:9999/dz 键速测试网址

回顾
一 框模型
凡是元素皆为框
框模型:计算元素占地面积的一种方式
计算方式：
实际的占地宽度=左右外边距+左右内边距+左右边框+元素宽度
实际占地高度=上下外边距+上下内边距+上下边框+元素高度

1.外边距
在边框外的空白间距，一般用于指元素与元素之间的间距
margin:以px为单位的数字或%
auto,自动(让块级元素在水平方向居中显示)
负数,相反方向移动
2.内边距
在边框和内容之间的间隙，扩大元素的边框
padding:以px为单位的数字或%
二 文本格式化样式
1.字体属性
1.指定字体类型
属性:font-family
取值:“黑体”,Arial,“microsfot yahei”…
2.字体大小
属性:font-size
取值:px单位的数字
3.字体加粗
属性:font-weight
取值:bold,加粗
normal,正常
4.字体样式
属性:font-style
取值：italic,斜体
normal,正常
2.文本格式化
1.文本颜色
color:颜色合法值
2.文本排列方式
属性:text-align
取值:left/right/center/justify(两端对齐)
3.文本线条修饰
属性:text-decoration
取值:none,无
underline,下划线
overline,上划线
line-through,删除线
4.行高
控制一行文本的高度，如果行高的高度大于等于元素height，文本垂直居中
属性：line-height
取值：以px为单位的数字

补充：css样式属性修改列表项标识
属性：list-style-type
      list-style
取值：none
      disc 实心圆
      circle 空心圆
      square 实心方块

练习：按照以下布局设置样式  01_text.html

====================================================================
今日目标
浮动定位
项目
数据库

一 定位
1.定位
页面上的元素，应该出现的位置 (改变元素的默认位置)
2.定位的分类
普通流定位
浮动定位
相对定位
绝对定位
固定定位
3.定位详解
1.普通流定位
又称文档流定位，它是页面元素的默认显示方式
文档流规范：
所有的元素一定是从父元素的左上角开始显示
如果是块级元素，从上往下排列，独占一行
如果是行内元素，从左到右排列，多个元素在一行中显示
2.浮动定位
解决问题：让多个块级元素在一行中显示。
属性：float
取值：left right none(无浮动)
left 左浮动，元素浮动起来后，停靠在父元素的左侧，或者往左挨着已浮动元素
right 右浮动，元素浮动起来后，停靠在父元素的右侧，或者往右挨着已浮动元素

浮动的特点：
1.元素一旦浮动起来将脱离文档流，不在占据页面空间，其它未浮动元素会上前补位
2.浮动元素会停靠在父元素的左边或右边或其它已浮动元素的左右的边缘
3.浮动解决多个块级元素在一行中显示的问题

浮动元素引发的特殊情况：
1.当父容器横向显示不下所有的浮动元素的时候，最后一个元素将换行显示
2.浮动对默认宽度的影响
1.块级元素不写宽度，默认是占父元素的100%，但是块级元素一旦浮动起来，宽度靠内容撑起(宽度自适应)
3.元素一旦浮动起来，就会变成块级元素，允许修改尺寸
4.文本，行内元素是不会被浮动元素压在下方的，而是会巧妙避开，环绕着浮动元素显示

清除浮动：
元素一旦浮动起来之后，会对后续的元素带来一定的影响，后续元素会上前补位；如果不希望后续元素上前补位，可以给后续元素添加清除浮动的属性

属性:clear
取值:left，清除左浮动元素对我带来影响
     right，清除右浮动元素对我带来的影响
     both，清除所有浮动元素对我的影响

相对定位
定义：相对于自己原来的位置，偏移到另外的位置
属性：position
取值：relative
使用场景：1.调整自身元素的位置(margin类似)
2.一般作为绝对定位元素的祖先元素
绝对定位
属性：position
取值：absolute
使用场景：控制元素在页面上的位置
注意：
1.绝对定位的元素，如果祖先级没有已定位元素(position),相对于body元素执行偏移
2.绝对定位的元素，会相对于离自己最近的祖先级元素并且是已定位的，执行偏移