html+css~基础篇(一)

标签分类和特性：

快元素：div、p、h1-h6、ul、ol、li 独占一行 能直接设置宽
行内元素：a、span、i、em *
可以和别的行内元素占一行、不能直接设置宽高，能设置水平margin,不能设置垂直 margin
行内块元素： img、input img、input

选择器：

id选择器、类选择器、后代选择器、子集选择器、标签选择器、并集选择器
!important ∞无穷大 > 内联样式 1000 > id选择器 100 > 类选择器 10 > 标签选择器 1 > 通配符优先级 0
CSS属性
文字属性 ：
font-family 设置字体 font-size 设置字体大小
color 设置字体颜色 font-weight 设置字体加粗
text-align:center 设置文本水平居中 line-height 设置单行文本垂直居中
mmargn:0 auto 设置标签水平居中
背景：
background-color 设置背景颜色
background-color:rgba() 设置背景透明度
background-image:url() 设置背景图片
background-repeat 设置背景图片是否重复
background-position 设置背景图片位置
边框：
border:2px solid #000; 设置边框粗细 类型 颜色
border-radius 设置边框圆角
box-shadow 设置边框阴影
盒模型：
padding:10px 代表上下左右都是10px
padding:10px 20px 上下是10px 左右是20px
padding:10px 20px 30px 代表上 左右 下
padding:10px 20px 30px 40px 代表上右下左
浮动：
float: left; 左浮动
float: right; 右浮动
float: none; 元素不浮动（默认值）
为什么要浮动？怎么清除浮动？
页面布局的时候子元素不浮动的时候会撑起父盒子的高度；
浮动后父盒子的高度为0，会对后面的页面布局造成影响，所以需要清 除浮动。
清除浮动的几种方式？
clear:both
overflow：hidden/ auto/ scro11
使用after伪元素清除浮动
定位方式？
绝对定位 position:absolute; 相对于有定位的最近的父元素定位
相对定位 position:relative; 相对于自身位置
固定定位 position:fixed; 相对于浏览器进行定位
display属性值？
display:none 隐藏但是不占位置 转换为块元素
visibility:hidden 隐藏但是占据位置
display:inline 转换成行内元素
display:inline-block 转换成行内块元素
伪类？
a:link 初始状态
a:visited 访问过后的
a:hover 鼠标经过
a:active 鼠标点击瞬间
文本下划线？
ul去除小圆点 list-style:none
a标签去除下划线 text-decoration:none
a标签横穿线 text-decoration:line-through
a标签添加下划线 text-decoration:underline