后代选择器
子选择器 亲儿子
div>p 只选择儿子
链接伪类选择器
a:link 未访问的链接显示orange的颜色; a:visited 已访问的链接显示red的颜色; a:hover 鼠标挪动到链接上(重要)显示green的颜色; a:active 激活的链接(鼠标在链接上长按住未松开)显示blue的颜色;
顺序 l v h a
input:focus
获得焦点的表单元素
背景图片
background-image:url(img/log.png)
这样会平铺 铺满盒子
背景平铺
background-repeat: no-repeate
默默人是平铺的
repeate
no-repeate
repeate-x
repeate-y
背景图片会在背景颜色的上层
背景位置控制
background-position : x y
x y 100px 像素
top center left right
方位名词与顺序无关 center left
padding会撑大盒子 侧边栏 一般都使用padding-left 来控制 记得减去盒子的宽度-padding
padding不会撑大盒子 没有宽度
盒子模型 margin
让盒子水平居中 必须要有宽度 margin: 0 auto;
行内元素 行内块元素水平居中
让父元素text-align:center; padding:0 26px 上下 左右
如果盒子有高度和宽度 用margin font—weight:400 取消加粗
盒子阴影
box-shadow: h-shadow 水平 水平轴上移动 垂直 y 轴上移动 虚影 模糊距离 影子大小 color reb(0,0,0, 0.3) 一般用rgb 可以给透明度 默认是外阴影 不占用空间
flote 浮动
会贴着盒子显示一行内显示都是顶端对齐 屏幕变小会掉下来 浮动元素具有行内快元素的相似特性 有宽度高度
浮动元素经常搭配标准流的元素搭配
父元素控制上下 子元素控制左右
为什么 清除浮动
父元素不方便给高度和而宽度 让子元素撑开父元素 浮动不会占用原来的位置 此时父元素高度会变成0 下面的元素会被浮动的元素遮住
清除浮动
clear left right both 采用的是闭合浮动 只限制在父元素内浮动
额外标签发 w3c
在子元素末尾添加一个空标签 清楚浮动 必须是块级元素才可以
父元素添加overflow
精灵图 (小的背景图)
background-repeate 往左往右都是负值
用户界面
改变鼠标样式 cursor pointer 小手 move 移动 样式
表单轮廓线
outline:none/0
防止拖动 文本域变大
resize:none; 重置文本域
vertical-align
垂直对齐方式 针对于行内块元素 bootom 底线对齐 middle 中线对齐 top 顶部对齐
图片和文字子在一个盒子中 给图片加上 vertical-align