1.浮动
1.什么是定位?
定位:页面上的元素,出现的位置
2.定位分类
1.普通流定位
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位
3.普通流定位
又称文档流定位,他是页面元素默认的定位方式
文档流的规范:
1.块级元素
从上往下排列,独占一行
2.行内元素
从左到右,多个元素在一行中显示,
如果显示不下,自动换行
4.浮动(重点,难点)
作用:能够让多个 (块级)元素在一行中显示
1.特点
1.脱离文档流,不占据页面空间
2.浮动元素,会停靠在父元素的左边或左边其它已经浮动的元素的边缘
2.语法:
float
取值:
none:无浮动,默认值
left:左浮动
right:右浮动
**:父元素高度会消失
练习:
新建多个div块元素,设置其浮动,flaot:left,float;right
新建多个行内元素,设置其宽高,背景色,然后再设浮动,看跟块级元素有什么区别?
10:37
3.背景
background:red;
background-color:red;
是指以背景色或背景图像的方式给元素设置背景
作用:
背景色:就是以单一的颜色作为背景进行填充
背景图像:以图片作为背景进行填充
1.背景色
语法:background-color:
取值:合法的颜色值 transparent(透明)
**:背景色和背景图片都从边框位置处开始填充
2.背景图像
语法:background-image background
取值:url(图片路径);
ex:background-image:url(images/a.jpg);
3.背景图像平铺
语法:background-repeat
取值:
repeat 默认值,水平和垂直方向同时平铺
no-repeat无平铺效果,只显示一次图片
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺
4.背景图片位置
什么是背景图像定位?
作用:改变背景图片在元素中默认的位置
语法:background-position
取值:
1.x y
x:背景图像在水平方向的偏移距离
取值为正,向右偏移
取值为负,向左偏移
y:背景图像在垂直方向的偏移距离
取值为正,向下偏移
取值为负,向上偏移
2.x% y%
0% 0% 原点,左上角
100% 100% 右下角
50% 50% 正中间
3.x:
left/center/right
y:
top/cneter/bottom
eg:
left top
right bottom
center center
5.背景图像的尺寸
语法:background-size
取值:
1.具体数值 v1 v2
v1表示图片的宽度
v2表示图片的高度
2.v1% v2%
3.cover
将背景图扩大到足够大,以使背景图能够完全覆盖到元素区域
4.contain
将背景图扩大,以至于背景图的宽度或高度有一个适应了元素区域即可。
ex:
background-size:20px 50px;
background-size:50% 50%;
background-size:cover;
backgorund-size:contain;
6.背景属性简写方式
语法:
background:color url() repeat postion; ???size
ex:
background:url(images/a.jpg) no-repeat -60px -50px;
pm:
<font></font>
1.文本格式化
1.字体属性
1.指定字体类型
语法:font-family
取值:字体1,字体2,字体3;
ex:
font-family:"微软雅黑",Arial,"黑体";
2.字体大小
语法:font-size
取值:数值 (px,pt为单位)
3.字体加粗
语法:font-weight
取值:
normal 正常,大部分标记的默认值
bold:加粗(h1-h6,b)
value:400-900整百倍数字
eg:
font-weight:400;
font-weight:600;
font-weight:900;
font-weight:1500; ????
4.字体样式
语法:font-style
取值:
normal 正常
italic 斜体,i标记
eg:
font-style:italic;
2.文本格式
1.文本颜色
语法:color
取值:合法的颜色
2.文本排列方式(水平方向)
语法:text-align
作用:控制文本在水平方向对齐
取值:left/center/right/ justify(调整版面) ????
3.文本修饰(线条修饰)
语法:text-decoration
取值:
none:无线条修饰
underline:下划线 <u></u>
overline:上划线
line-through:删除线 <s></s>
4.行高
作用:控制一行文本的高度,如果行高的高度高于字体本身大小,
那么该行文本将在指定的行高内呈现垂直居中的效果。
语法:line-height
取值:以px为单位的数值
练习:
当页面加载时a标记无下滑线并且颜色为黑色,当鼠标放到a标记上时,
文本颜色为红色,并且出现下滑线,同时有加粗和放大的效果。
2.显示方式
1.什么是显示方式?
决定页面上的元素到底以什么样的方式来进行显示(块级,行内,行内块)
2.如何修改显示方式?
语法:display
取值:
none 隐藏,让生成元素不显示,不占空间
block 让当前元素表现的和块级元素一致
inline 让当前元素表现的和行内元素一致
inline-block 让元素变成行内块
特点:摆放方式如同行内元素,但是具有块级元素的特征
练习:
新建5个A元素,分别设置他们为块级,行内,行内块,隐藏,正常
新建div元素隐藏,
3.列表
1.列表项标记
属性:list-style-type
取值:
none:不显示标识
disc:实心圆
circle:空心圆
square:实心方块
2.列表项图像
属性:list-style-image
取值:url(路径);
3.列表项位置
属性:list-style-position
取值:
outside:默认值,列表项标记显示在内容区域之外
inside:将标记显示在内容区域之内
4.列表项简写属性
属性:list-style:type url() position;
**:
常用的方式:list-style:none;
新建一个ul里面写8个li,里面的列表项图片换一下?
1.什么是定位?
定位:页面上的元素,出现的位置
2.定位分类
1.普通流定位
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位
3.普通流定位
又称文档流定位,他是页面元素默认的定位方式
文档流的规范:
1.块级元素
从上往下排列,独占一行
2.行内元素
从左到右,多个元素在一行中显示,
如果显示不下,自动换行
4.浮动(重点,难点)
作用:能够让多个 (块级)元素在一行中显示
1.特点
1.脱离文档流,不占据页面空间
2.浮动元素,会停靠在父元素的左边或左边其它已经浮动的元素的边缘
2.语法:
float
取值:
none:无浮动,默认值
left:左浮动
right:右浮动
**:父元素高度会消失
图文混排:
浮动,
文本、行内元素、行内块:采用环绕的方式来排列,不会被压在下面,会避开浮动元素
清除浮动带来的影响:
元素浮动以后,会对后面的元素带来位置的影响,如果后门的元素不想被影响,那就清除浮动
语法:
clear:
取值:none:默认值,不做任何清除浮动
left:清除当前元素左浮动带来的影响,即前面元素左浮动的话,当前元素不会上前占位;
right:清除当前元素右浮动带来的影响,即前面元素右浮动的话,当前元素不会上前占位;
both:清除所有浮动
练习:
新建多个div块元素,设置其浮动,flaot:left,float;right
新建多个行内元素,设置其宽高,背景色,然后再设浮动,看跟块级元素有什么区别?
10:37
3.背景
background:red;
background-color:red;
是指以背景色或背景图像的方式给元素设置背景
作用:
背景色:就是以单一的颜色作为背景进行填充
背景图像:以图片作为背景进行填充
1.背景色
语法:background-color:
取值:合法的颜色值 transparent(透明)
**:背景色和背景图片都从边框位置处开始填充
2.背景图像
语法:background-image background
取值:url(图片路径);
ex:background-image:url(images/a.jpg);
3.背景图像平铺
语法:background-repeat
取值:
repeat 默认值,水平和垂直方向同时平铺
no-repeat无平铺效果,只显示一次图片
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺
4.背景图片位置
什么是背景图像定位?
作用:改变背景图片在元素中默认的位置
语法:background-position
取值:
1.x y
x:背景图像在水平方向的偏移距离
取值为正,向右偏移
取值为负,向左偏移
y:背景图像在垂直方向的偏移距离
取值为正,向下偏移
取值为负,向上偏移
2.x% y%
0% 0% 原点,左上角
100% 100% 右下角
50% 50% 正中间
3.x:
left/center/right
y:
top/cneter/bottom
eg:
left top
right bottom
center center
5.背景图像的尺寸
语法:background-size
取值:
1.具体数值 v1 v2
v1表示图片的宽度
v2表示图片的高度
2.v1% v2%
3.cover
将背景图扩大到足够大,以使背景图能够完全覆盖到元素区域
4.contain
将背景图扩大,以至于背景图的宽度或高度有一个适应了元素区域即可。
ex:
background-size:20px 50px;
background-size:50% 50%;
background-size:cover;
backgorund-size:contain;
6.背景属性简写方式
语法:
background:color url() repeat postion; ???size
ex:
background:url(images/a.jpg) no-repeat -60px -50px;
pm:
<font></font>
1.文本格式化
1.字体属性
1.指定字体类型
语法:font-family
取值:字体1,字体2,字体3;
ex:
font-family:"微软雅黑",Arial,"黑体";
2.字体大小
语法:font-size
取值:数值 (px,pt为单位)
3.字体加粗
语法:font-weight
取值:
normal 正常,大部分标记的默认值
bold:加粗(h1-h6,b)
value:400-900整百倍数字
eg:
font-weight:400;
font-weight:600;
font-weight:900;
font-weight:1500; ????
4.字体样式
语法:font-style
取值:
normal 正常
italic 斜体,i标记
eg:
font-style:italic;
2.文本格式
1.文本颜色
语法:color
取值:合法的颜色
2.文本排列方式(水平方向)
语法:text-align
作用:控制文本在水平方向对齐
取值:left/center/right/ justify(调整版面) ????
3.文本修饰(线条修饰)
语法:text-decoration
取值:
none:无线条修饰
underline:下划线 <u></u>
overline:上划线
line-through:删除线 <s></s>
4.行高
作用:控制一行文本的高度,如果行高的高度高于字体本身大小,
那么该行文本将在指定的行高内呈现垂直居中的效果。
语法:line-height
取值:以px为单位的数值
练习:
当页面加载时a标记无下滑线并且颜色为黑色,当鼠标放到a标记上时,
文本颜色为红色,并且出现下滑线,同时有加粗和放大的效果。
2.显示方式
1.什么是显示方式?
决定页面上的元素到底以什么样的方式来进行显示(块级,行内,行内块)
2.如何修改显示方式?
语法:display
取值:
none 隐藏,让生成元素不显示,不占空间
block 让当前元素表现的和块级元素一致
inline 让当前元素表现的和行内元素一致
inline-block 让元素变成行内块
特点:摆放方式如同行内元素,但是具有块级元素的特征
练习:
新建5个A元素,分别设置他们为块级,行内,行内块,隐藏,正常
新建div元素隐藏,
3.列表
1.列表项标记
属性:list-style-type
取值:
none:不显示标识
disc:实心圆
circle:空心圆
square:实心方块
2.列表项图像
属性:list-style-image
取值:url(路径);
3.列表项位置
属性:list-style-position
取值:
outside:默认值,列表项标记显示在内容区域之外
inside:将标记显示在内容区域之内
4.列表项简写属性
属性:list-style:type url() position;
**:
常用的方式:list-style:none;
新建一个ul里面写8个li,里面的列表项图片换一下?