工作生活

HTML 学习笔记

2019-07-04  本文已影响0人  Faith_K

1 常用的属性

width  宽度
height 高度
color 设置文颜色
font-size 字体大小
border-bottom
background-color 背景颜色
display inline 让块级标签->行内元素 block 让行内元素->块级标签 inline-block行内块级标签
margin 外边距
padding 内边距  padding-left padding-right...
border-radius 圆角 border-top-left-radius  border-top-right-radius...
float 浮动 left 左浮动 right右边浮动
 text-align 文本对齐 
position 是否开启位置改变  relative相对 absolute绝对 fixed 固定
line-height 设置行高
text-decoration  none去除下划线 如果去除不掉  text-decoration: none !important
list-style 设置列表风控
cursor 鼠标移动需要显示的类型
background: url("../images/desktop.png") 设置背景图片 background-repeat  no-repeat关闭平铺
background-size 背景大小
background-attachment 背景滚动 fixed
z-index 视图层级  1 2 3...
transform: scale(1.5) 图片放大一点五呗
transform-origin: bottom center 方向
box-sizing: border-box; 设置盒子伸缩 向内还是向外
vertical-align: middle 设置两个元素中间对齐
border: 1px solid #e0e0e0 设置边框宽度颜色
overflow: hidden  clear: both /*解决高度塌陷问题*/ .clearfix:before .clearfix:after

2 序号选择器

  不区分类型
            :first-child
                选中同级别中第一个标签
            :last-child
                选中同级别中最后一个标签
            :nth-last-child(n)
                选中同级别中倒数第n个标签
            :nth-child(n)
                选中同级别中第n个标签
            :only-child
                选中同级别中唯一子元素标签
 区分类型
            :first-of-type
                选中同级别中同类型第一个标签
            :last-of-type
                选中同级别中同类型最后一个标签
            :nth-of-type(n)
                选中同级别中同类型第n个标签
            :nth-last-of-type(n)
                选中同级别中同类型倒数第n个标签
            :only-of-type
                选中同级别中唯一同类型子元素标签
奇偶选择
            :nth-child(odd)
                选中级别中所有奇数
            :nth-child(even)
                选中同级别中所有的偶数
            :nth-child(xn+y)
                x,y是用户自定义的 n为计数器,从0开始递增选择,  到元素的总个数停止
上一篇下一篇

猜你喜欢

热点阅读