回顾html和css

74 阅读2分钟

后代选择器

选则 ul 中的li 只要ul中的li # ul li 就可以 元素1 元素2

子选择器 亲儿子

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