display:通过显示方式来分类:
inline:同行显示,不支持宽高,宽高由内容决定
block:异行显示,支持所有css样式,设置宽高
inline-block:同行显示支持所有css样式
盒模型:
margin+border+padding+content,四个部分区域
margin-top:|margin-left:完成自身布局
margin-right|margin-bottom:影响兄弟布局
当兄弟的上下布局重叠,取大值,父级与子级top重叠,取大值;解决办法
给父级加padding-top或者父级加border-top
显示宽高:border+padding+content
自身布局:margin-top|margin-left
兄弟布局:margin-bottom|margin-right
父级水平居中:margin0 auto
与inline相关的盒子 vertical-align
屏幕水平居中:margin-left:calc((100% - 500px) / 2);
屏幕水平居右:margin-left:auto;
auto自适应父级可利用的剩余宽度
自适应水平居中:margin-left:auto;margin-right:auto;或者margin:0 auto;
字体设置
font-size:字体大小(参数也可以为inherit)继承父类
font-weight:bold;字重 (100-900)|normal|lighter|bold
font-family:"STSong","微软雅黑";第一个为默认属性,其他为当第一个属性不支持时的替代选项
line-height:npx;行高
text-align:center;水平居中方式
color:red,字体颜色
font:900 30px/120px "STSong";字重 大小/行高 字族
em(自身->父->html) | rem(html)(rem中的r为root表示纸盒html字体大小关联)
tent-indent:2em;(表示缩进)
最小字体为12px
字划线:
underline(下划线):|line-through(中划线)|overline(上划线)
text-decoration:overline;(上划线位置)
reset操作
太多系统预定义标签,有默认样式,但不满足实际开发需求,反倒影响布局,通常在开发前,将要用到的预定义标签的默认样式清除,该操作就称之为reset操作
如:
body,h1,h6,p{margin:0}
ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;color:black;}
高级选择器:
群组选择器:div,p,a{}(设置共同样式)
同时控制多个,选择器之间使用逗号分开,每一个选择器位均可以替换为任意基础选择器或高级选择器
后代:body div{}(中间使用空格分隔)(儿子可以使用>连接)通过关系层次控制一个目标选择器
兄弟:.div1 ~ .div2{}(使用~连接)+表示相邻通过关系层次控制一个目标选择器
位置:li:nth-child(n){}
多类:.div.div1{}
高级选择器优先级:
优先级和个数(权重)相关
基础选择器优先级占主导:id大于class大于标签
选择器优先级相同时,和顺序有关,高级选择器类型不会影响优先级
伪类选择器相当于class
边界圆角
左上为第一个角,顺时针赋值,不足找对角
border-radius:30px,40px;当像素为长度一半时是一个圆
a的四大伪类:
:link 链接初始状态
:hover 鼠标悬浮状态
:visited 链接访问后的状态
:active 鼠标按下时的状态
cursor:为鼠标样式参数有pointer,等
body {
margin: 0;
user-select: none;(禁止用户复制)
}
ul {
margin: 0;
padding: 0;
list-style: none;表示列表去除选项
}
border:参数为1px solid black;((宽度)像素 实线 颜色)
背景图片之精灵图:
div{
background:url("img/s.png") no-repeat 10px 20px;}
参数分别为 图片地址 不平铺 x轴偏移,y轴偏移
精灵图操作本质:控制背景图片的位置
background-position-x:x;
控制图片向右平移x像素
background-position-y:y;
控制图片向下平移y像素
div:hover{background-position-y:-20px;}
当鼠标移动到指定位置时,图片向上移动20像素
background-image:url("sb.png");设置背景图片
background-repeat:no-repeat;(禁止平铺) repeat-x|repeat-y|repeat分别为水平平铺,垂直平铺,全部平铺
background-position:位置npx mpx;
水平参数有left|center|right 垂直参数有:top|center|bottom
.div:hover {
transition: 2s; 表示延迟时间,默认为0,
background-position-x: center; 表示将背景图片位置水平方向移动到中央
}
cursor: pointer;鼠标指针显示状态