目录
1.高度和宽度
<!DOCTYPE html> <html lang="en"head> Meta charset="UTF-8"title>Title</style> div{ height: 100px; width background-color pink; } span green} bodydiv> div1 span>span1> html>
效果如下图所示
宽度和高度除了可以用像素px单位,也可以使用百分比%
50%; /* 可以给宽度和高度设置百分比 */>
但是在设置百分比时,有些问题需要注意:
1.宽度和高度可以设置百分比,会按照父级标签的宽度和高度进行计算
2.但是如果想给高度设置百分比,必须要求父级标签有固定高度才行
2.字体相关
font-size 20px 字体大小 color red 字体颜色 font-family '楷体','宋体' 字体 font-weight 100 字体粗细 */ >窗前明月光>
效果如下图所示
要注意:
1.如果不写font-size,默认是16px
2.font-size:‘字体1’,'字体2'
如果系统找的到字体1,则优先选用字体1的字体
如果系统找不到字体1,则使用字体2的字体
3.font-weight的范围是100-900,默认是400
3.字体对齐
200px text-align center 水平居中 line-height 和height高度相同,标签文本垂直居中 九月一号星期二 >
效果如下图所示
要注意:
1.text-align的值有left,center,right
2.想垂直居中,必须要把line-height的值和height的值设置成一样的
4.颜色设置
英文单词 #7969d2 16进制数表示 rgb(92,187,138) rgb颜色表示方法 rgba(92,138,0.5) rgba加上透明度,透明度范围是0-1 purple opacity 0.2 整个标签设置透明度 */ >
效果如下图所示
5.背景
.c1 600px background-image url("1.jpg") 设置背景图片 background-repeat no-repeat 是否平铺整个标签 background-position center center 当前图所在整个标签的位置 50px 100px 当前图距离左上的位置 border 1px solid red 画一个边框 div class="c1"></>
效果如下所示
background也可以简写成一行
background green url("1.jpg") no-repeat center center>
6.边框
1px dashed red 边框线为虚线 边框线是实线 */ 也可以将一句话拆成三句话写 border-width 10px 线宽 border-style solid 线样式 border-color yellow 线颜色 也可以四个方向单独设置 border-left 10px solid yellow; 也可以单方向单参数设置 border-right-width>
7.盒子模型
4px solid red 边框 padding 7px 8px 9px 10px 内容到边框之间的距离 上右下左 margin11px 12px 13px 14px 距离其他标签或者自己父级标签的距离 上右下左 >我是最帅的!="c2">
盒子模型包含四部分:
1.content:内容部分,设置的width和height
3.border:边框
4.margin:外边距,距离其他标签或者自己父级标签的距离
盒子模型如下图所示:
还有几个需要知道的:
{ margin可以设置上 右 下 左格式 1px 2px 3px 4px; margin也可以设置上下 左右格式 15px 10px 也可以单独设置各个方向 margin-top padding可以设置上 右 下 左格式 padding也可以设置上下 左右格式 15px 10px padding-top} >
要注意的是:如果两个相邻标签都设置了margin两者之间的距离,那么不会累加,而是选最大值为两者的距离
8.display属性
display inline 将块级标签改为内联标签 inline-block 将标签改为具有内联标签和块级标签属性效果的标签 可以设置高度,而且不独占一行 none 隐藏标签 .c2 blue block 将内联标签改为块级标签 悟空 > span 八戒 >
9.伪元素选择器
效果如下图所示
10.伪类选择器
.c1:hover orange 触碰时变成橙色 cursor pointer 鼠标的小手效果 }
a标签未访问时设置样式 a:link gold} 点击按下去之后,抬起之前显示样式 a:active 网址被访问之后,显示样式 a:visited 鼠标悬浮时,设置样式 a:hover>小鸟伏特加a href="http://www.4399.com">点击进入花园宝宝乐园a>
11.浮动
.main-left float left .main-right right 浮动起来的元素,可以设置高度和宽度,并且不会独占一行 .content 100%="main"> ="main-left"="main-right"="content">
这样做,会造成父级标签塌陷问题
什么是父级标签塌陷?
如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零,也就是所谓的“高度塌陷”
在上面代码中,父元素为main,在main中只包含浮动元素main-left和main-right,并且没有给父元素main设置高度和宽度,所以会有父级塌陷
父级塌陷如图所示
正常非塌陷如图所示
如果想解决父级标签塌陷,有如下几种方法
1.给父级标签加高度(不常用)
/* 1.给父级标签加高度 */
.main{
height: 100px;
}
2.清除浮动
我content标签上面不能有浮动的元素盖着我
.content{
width: 100%;
height: 200px;
background-color: yellow;
clear: both; /* 2.清除浮动 */
3.最常用的方法
/* 3.最常用的方法 */ .clearfix:after{ content: ''; display: block; clear: both; } ="main clearfix"> <!-- class类值可以写多个 --> >
4.常用方法
/* 4.常用方法 */
.main{
overflow: hidden;
}
12.文字装饰
text-decoration line-through 文字被横线贯穿 overline 横线在文字上方 .c3 underline 横线在文字下方 a 去除a标签的下划线效果 >床前明月光>疑是地上霜="c3">举头望明月="">博伦>
实现效果如下图所示
13.相对定位和绝对定位
相对定位
body 让body标签紧贴左上,没有任何空隙 0 .c2 position relative left 30px 距离自己原来位置的左边有30px距离 .c4 .cc margin-left 带有cc类的整体偏移100px ="c4"="cc">
实现效果如图所示
绝对定位
absolute 绝对定位 >
实现效果如图所示
如果不对cc进行相对定位设置,效果如下图所示
关于相对定位和绝对定位,你需要注意的点:
相对定位:
1.相对定位可以使用top/bottom/left/right控制标签位置
2.是按照自己原来的位置进行移动的
3.标签还占据自己原来的位置
4.脱离正常文档流,所以可以覆盖别的标签
绝对定位:
1.并不占用自己原来的空间
2.如果父级标签或者祖先辈标签没有设置相对定位,那么绝对定位的元素会按照整个html文档的位置进行移动
3.如果父级标签或者祖先辈标签设置了相对定位,那么按照父级标签或者祖先辈标签的位置进行移动
14.固定定位
800px 相对于浏览器窗口来设置位置 fixed 40px bottom 60px 80px aqua border-radius 正方形的园度 .c3 a blackid="top">顶部位置="#top">回到顶部>
实现效果如下图所示