CSS知识点笔记

1，基本选择器
　　基本选择器：
　　　　1，ID选择器
　　　　2，类选择器
　　　　3，标签选择器
　　其他选择器：
　　　　classname空格div 当前元素所有后代子子孙孙
　　　　classname>div 当前元素下一级所有子元素，只有子代
　　　　classnameA~.classnameB当前节点A之后的元素B
　　伪类选择器
　　　　hover鼠标经过时设置其样式
　　　　active鼠标按下时设置其样式
2，CSS优先级
　　style属性>ID选择器>class选择器>标签
　　就近原则，同级别选择器取最新属性生效
3，盒子模型
　　盒子水平排列，margin无重合
　　盒子竖直排列，margin重合
　　盒子样式
　　　　border：1px dashed #red 边框
　　　　padding：1px 1px 1px 1px 顺时针方向，从上开始 内边距
　　　　margin：0 auto 外边距
4，样式
　　文本样式-font
　　　　font-family（字体样式），font-size（字体大小），font-weight（字体粗细）
　　　　text-align：left ，center，rigth （字体位置）
　　　　line-height：数值（一般用像素或者所在元素高度与字体大小的比值）例：高度为200px，字体为20px，若想居中展示 1，数值：line-heigth：200px； 2，比值：line-height：10；
　　背景样式-background
　　　　background-color：red；背景颜色
　　　　background-image：url（）；背景图片
　　　　background-repeat：no-repart/repart-x/repart-y（属性设置是否及如何重复背景图像）
　　　　background-position：（设置背景图片的位置）
　　　　　　top left（第一个值上中下，第二个值左中右）
　　　　　　x% y%（第一个水平位置，第二个垂直位置）左上角为0%，0%，右下角为100%，100%；只规定一个值，则另一个值为50%
　　　　　　Xpx Ypx
　　　　background-size：（指定背景图片的大小）
　　　　　　length：长度，如果只设置第一个值则第二个值会被设置为auto
　　　　　　percentage：百分比，如果只设置一个值，则第二个值会被设置为auto
　　　　　　cover：覆盖背景，保持纵横比例
　　　　　　contain：图片不能超出标签范围的情况下变成最大，且保持纵横比例
　　布局样式：
　　　　文档流，就是文档的排列方式：在同一平面从左到右，从上到下排列
　　　　脱离文档流 盒子模型脱离源文档的文档排列方式，从同一平面中浮起来，根据一定的要求排列
　　　　浮动
　　　　　　float
　　　　　　clear：both清除浮动
　　　　定位-position
　　　　　　position与top，bottom，left，right联用
　　　　　　absolute：绝对定位，相对于静态定位（static）以外的第一个父元素进行定位，若在非静态内则以该非静态元素为定位
　　　　　　fixed：绝对定位，是相对于浏览器窗口为进行定位的，即有滚动条时页面效果相对静止，类似登录弹框
　　　　　　relative：相对定位，相对于其原本自身正常位置进行定位，即left：20px会向元素的left位置添加20像素，以其本身原本的位置
　　　　　　static：默认值
　　　　　　Inherit：规定应该从父级元素继承position属性的值
　　　　　　sticky：h5-粘性定位，left，top不设置时不脱离文档流，设置后类似fixed效果
　　　　盒子层次z-index属性，数值越高越在顶层
　　　　呈现形式
　　　　　　block：块级标签-可设置宽高，元素独占一行
　　　　　　inline：行级标签-不可设置宽高，元素自适应内部内容
　　　　　　inline-block：介于前两者之间，可设置宽高，但不独占一行