一、css选择器 1.优先级：id>class>div(组件) 2.对所有元素赋值：*{color:red} 二、CSS优先级 style属性>id选择器>class>tag 三、盒子模型 标签元素排列规则是从左往右，从上往下排列蓝色部分：内部大小（真正可以写字的部分） padding:内边距 border:边框 mrgin:外边距 盒子模型的排列：左右排列会都隔出来外边距，上下排列会将重复的重叠
四、盒子样式 同一个标签下，同样的样式越下面优先级越高 border样式（边框） border:1px solid #red border-left:1px solid #red border-right:1px solid #red border-top:1px solid #red border-bottom:1px solid #red margin样式（外边距） margin:上 右 下 左（顺时针，从上开始，一般使用像素做单位） margin-top:10px margin-right:10px margin-bottom:10px margin-left:10px margin:100px------上下左右全是100px margin:100px auto------两个的是第一个是上下，第二个是左右 padding样式（内边距） padding:上 右 下 左（顺时针，从上开始，一般使用像素做单位） padding-top:10px padding-right:10px padding-bottom:10px padding-left:10px 五、文本样式 font:字体 颜色 大小 粗细 对齐 装饰 font-family:"微软雅黑"（引号可以省略） font-size:12px font-weight:bold text-align:left/center/right line-height:数值（一般用像素） text-decoration:none/underline/overline/line-through 六、背景样式 background:背景色 background-color:#fff background-image:url('1.jpg')背景图片 background-repeat:no-repeat---不允许重复（横向重复repeat-x，纵向重复repeat-y） background-position:top left（第一个是Y轴，第二个是X轴） background-position:100px 100px background-size:300px 300px(covercontain) 七、图片样式 vertical-align:top/middle/bottom 注意：此处的对齐方式并非图片相对于父元素的对齐，而是其他元素相对于图片的对齐方式 八、布局样式 文档流： 浮动：style="background-color: seagreen;float: left;" 停止浮动：style="clear: both;" float:left 人名币符号：¥999就是￥ 鼠标在上面的时候显示的颜色：li:hover{color:red} 鼠标在文字上变手指：cursor:pointer 定位： position:absolute/fixed/relative/static/sticky(h5) position需要与top/bottom/left/right连用 绝对定位absolute是以浏览器作为参考系，但是如果绝对定位的元素在非静态定位(static)的 元素中，即为那么就以这个元素为参考 fixed一般用在弹窗页面固定，网页广告和输入账号密码的情况 position：sticky;设置一个top=10px的话往下拉就是离顶部10像素的位置就不动了 盒子层次： z-index属性，数值越高，越在顶层 呈现形式： display::none/block/inline/inline-block inline:无法设置宽高 inline-block:不会独占一行，也可以设置宽高（跟float很像） block:块级标签，可设置宽高、元素独占一行 表格线框： border-collapse:separate（有空隙）/collapse（去掉空隙） border-spacing:10px 20px （水平和垂直的间隙）