html-day03

样式层 CSS 层叠样式表
注释：/这是一个注释/
语法：
内联样式

背景样式：
background-color： 背景色（ logo一般用.png格式，透过背景色）
background-image： url(图片存储地址) 背景图
background-repeat： repeat-x/repeat-y/no-repeat; 背景图重复方式
background-position: cener center; 居中 背景定位
right bottom 右下
left top 左上
px px 水平方向距离左边 垂直方向距离顶端
% % 距离左边占整个的百分比 距离上边
background-attachment: fixed; 固定背景图片，防止滚动
文本样式：
Text-indent: 2em 首行缩进2个大小的字
Text-align: left/center/right/justify 水平对齐方式/两端对齐
Word-spacing; px 单词间的距离调整
Letter-spacing: em 字符间距离
Text-transform: uppercase/lowercase/capitalize;
字母转为大写/小写/首字母大写
Text-dacoration: overline/line-through/underline/none
修饰文本样式 上划线/中划线/下划线/无样式
Line-height: em 行间距（行高等于容器的高度px，单行文字实现垂直居中）

列表样式

设置列表项标志的类型 list-style-type：disc/circle/square

设置列表项标志的类型list-style-type： lower-alpha(小写字母)/upper-roman(罗马字符)/ 列表项的图像标记 list-style-image:url Ul{ List-style:none; 去掉系列标志 Background-image:url; 新标记图片路径 Background-repeat: no-repeat; 取消背景图片重复 Background-positon:left/px center/px 移动背景标记图片 Padding-left/right：px 填充，可移动列表内容 }

块级元素

• 1. 
     内联元素
     内联元素与块级元素
     块级元素可以设置宽度和高度，内联元素不行
     display：block; 内联元素转化为块级元素：
     display：inline; 块级元素转化为内联元素
     display ：Inline-block 转化为内联（同一行显示文字）
     和块级元素（可以设置宽度，高度）
     display： None 隐藏一个元素 ，同时占位消失
     display:block 显示隐藏的元素
     Visibility：hidden 隐藏一个元素，占用篇幅不消失
     

     这两个标签只能包含内联元素，不能包含块级元素
     鼠标经过显示图片Display:none; display:block
     Background-position:10px 10px 盒子大小，图片大于盒子高宽
     鼠标移动到，图片改变样式
     盒模型
     属性：
     内容：内容区（包含文字、图片、列表、表格等）

     内容

     
     Padding: px px px px 内边距（内填充） 顺序： 上/右/下/左
     Px px px 上值/ 左和右值 /下值
     Px px 上下值 左右值
     Px 上下左右值一样
     复合 padding-top/padding-right/padding-bottom/padding-left
     Border: px solid red 边框
     border-top/ right / left /bottom -width粗细:px
     border-style虚、实线：dotted(点线) solid double(双线)dashed(虚线)
     border-color颜色
     border-radius圆角弧度 px
     border-bottom-right-radius: px
     复合 border-top/border-right/border-left/border-bottom
     Margin: px px px px 外边距（外填充）上/右/下/左
     Px px px 上值/ 左和右值 /下值
     Px px 上下值 左右值 Px 上下左右值一样
     Margin-top/margin-right/margin-left/margin-bottom
     解决边框塌陷：1、父盒子加一个边框值2、父盒子加一个内容
     Margin:重叠 取大值
     padding&margin 的赋值顺序是按照 上、右、下、左 顺时针的顺序
     浮动
     Float：left/right/px
     最长的元素底边对齐（五个box都设置了左浮动）,红盒子，同一行放不下，会转到下一行，以紧挨着的box为基准，向左排
     正常标准文档流box在这些浮动box（脱离文档流）的下面

嵌套浮动
父盒子不设置高度，根据子盒子内容变化而变化
文字环绕：不会因为浮动，脱离标准文档流，制作

清除浮动 （设置高度）清除浮动带来的影响，布局问题
在父盒子里加一个空的

.clear{ clear：“both”； }
父盒子加 .类名{ overflow:hidden/auto; 或者 display:table; }
父盒子定义伪类
父类名:after{ content:””; display:block; clear:both; height:0px; vistbility:hidden }

在一行显示，需要用浮动

导航条制作
可以用列表

• ，清除类别前面的标志，再进行浮动，设置距离

鼠标经过，一个链接，在上面显示，图片和下拉列表
应该用定位 position display:none;display:block;

定位
去掉页面边框白条
*{ margin:0px padding:0px; }
Position: fixed/absolute(绝对定位)/relative(相对定位)/static(取消定位)
.box{ Position:relative; 相对定位，原占用的位置仍保留
Left:100px 距离原来的位置向右移动100像素
top:100px 距离原来的位置向下移动100像素
}
后加元素的属性position，层级变高 ，后者居上
.box { Position：absolute; 绝对定位,脱离文档流，不占位置了
Left：10px; 距离页面左面10像素，左上角基准点
Top:10px; 距离页面上面10像素
}
.box { Position：fixed; 固定定位,
right：10px; 距离页面右面10像素，左上角基准点
bottom:10px; 距离页面下面10像素
}
不根据页面的翻转而改变盒子的位置
父盒子添加定位，子容器会找离他最近的祖辈盒子中的定位
父容器一般使用相对定位，relative
子容器一般使用绝对定位，absolute
定位的子元素会找离他最近的加了定位的元素，这个祖先元素我们一般会添加相对定位absolute,不占位置，方便布局

版心及布局
*{ margin：0px; padding:0px;
}
Div{ background-color: width:100%
Div{ margin:0px auto;
}
}
Div{ background-color: width:100%;
Div{ margin:0px auto;
}
}

布局常用
1、浮动 2、定位 3、版心
层叠性