盒子总结
'''
block:
设置宽高
1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width)
2.没有设置高,高由内容撑开
设置了宽高
一定采用设置的宽高
显示宽高
border+padding+content
自身布局
margin-top | margin-left
兄弟布局
margin-bottom | margin-right
父级水平居中
margin:0 auto;
与inline相关的盒子
vertical-align
'''
文本属性操作
'''
字体设置:
颜色:color
字体大小:font-size
字重:font-weight:100~900(只能是100的倍数) | normal | lighter | bold
字族:可以设置备用字体,可以设置多个 font-family:"STSong","微软雅黑";
行高:line-height
文本垂直居中:将行高与盒子高度一致,这样文本就可以垂直居中
文本水平居中:text-align:center(right | center| left)
简写方式:
text-align:center
color:red
font:字重 大小/行高 字族 (顺序不能颠倒)
字体缩进:
text-indent:em是一个字的大小 rem(rootem):只与根有关系,及html的字体大小有关
子级的字体默认大小是继承及font-size:inherit
字体默认大小最小只能到12px,如果想要更小的话,只能改字族
reset操作
'''
清除系统默认样式操作
大多系统预定义标签, 有默认样式, 不满足实际开发需求, 反倒影响布局, 通常在开发前, 将需要用到的预定义标签的默认样式清除, 该操作就称之为 reset操作
body, h1,h2,h3,h4,h5, h6, p {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none; (清除列表前面的小点)
}
a {
text-decoration: none; (去掉了下滑线)
color: black;
}
'''
高级选择器
'''
1.群组选择器:同时控制多个选择器,选择器之间用逗号隔开,每一个选择器位均可以替换为任意基础选择器或高级选择器
div,p,a{
}
2.后代子代选择器
通过关系层控制一个目标选择器,>代表父子关系 | 空格代表后代关系
/*sub是sup1的子代*/
.sup1 > .sub {
color: orange;
}
/*sub是body的后代,但不是子代*/
body .sub {
color: pink;
}
3.相邻选择器,兄弟选择器
通过关系层次控制一个目标选择器
/* + 相邻关系 */
.div1 + .div2{
}
/* ~ 兄弟关系*/
.div1 ~ .div2{
}
4.伪类选择器-位置
what? 只要是以冒号开头的就是伪类选择器
li:nth-child(2n) {
}
5.多类名
.d.dd {
}
class="d dd"
6.交叉选择器
.d.dd#dd.ddd{
}
'''
高级选择器优先级
"""
优先级和个数(权重)相关
基础选择器优先级占主导: id 无限大于 class 无限大于 标签,只要有一个id出现就不管后面的,如果都有个数相互抵消
选择器优先级相同时, 和顺序有关
高级选择器类型不会影响优先级,优先级与个数相关
伪类选择器相当于class
"""
边界圆角(了解)
'''
/*左上为第一个角, 顺时针赋值, 不足找对角*/
/*border-radius: 30px 60px;*/
/*border-radius: 150px;*/
/*border-radius: 50%;*/ (如果超过盒子宽度的一半,就会平均分各取50%)
横纵向分离
/*横向第一个角50px, 第二个角10px, 不足找对角*/
/*纵向均是150px*/
border-radius: 50px 10px / 150px;
'''
a标签的四大伪类
'''
在a标签中通过color改变颜色
:link 链接初始状态
:hover 鼠标悬浮状态 ***** cousor改变悬浮上去游标的样式
:visited 链接访问后的状态
:active 鼠标按下时的状态 *** 要放到visited下面,要不就会受到影响
在其他标签中通过改变background-color改变背景的颜色
'''
背景图片操作
'''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片</title>
<style>
.div {
width: 500px;
height: 500px;
border: 1px solid black;
}
.div {
background-image: url("img/001.png");
/*平铺: repeat-x | repeat-y | repeat | no-repeat*/
background-repeat: no-repeat;
/*背景图片位置*/
/*水平: left|center|right 垂直:top|center|bottom*/
background-position: -200px 50px; 如果只设置一个值默认采用center
}
.div:hover {
transition: 2s; #过渡效果,2秒返回
background-position-x: center;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
'''
背景图片之精灵图
'''
div {
background: url("img/bg.png") no-repeat 10px 20px;
图片地址 不平铺 x轴偏移 y轴偏移
}
精灵图操作本质: 控制背景图片的位置
backgroud-position-x
backgroud-position-y
div:hover {
backgroud-position-y: -20px;
}
'''