css总结css三种引入方式行内样式内嵌式外引式css选择器并列选择器 后代选择器 空格子代选择器 兄弟选择器 (后面的兄弟元素)~后一个元素 相邻匹配规则选择器从左向右匹配css样式冲突优先级 !important行内样式id class伪类 伪元素tag *继承优先级 根据选择器的权重大小来判选择器组合使用时 权重值相加权重相加 不会超过他的数量级权重相同 就近原css三大特性层叠性给一个标签设置的样式发生冲突的时候几样是的覆盖浏览器的渲染机制时从上到下的 当有冲突的时候就采用最后的那个样式优先级: 根据全冲值 如果权重相同就近原则继承性: 一般时字体颜色 display float 等 不会继承盒模型盒模型 内容区 内边距 边框 外边距盒子的宽度 内容区宽度 内容区宽度 边框宽度怪异盒模型 内容区paddingbordermargin盒子宽度内容区paddingborder区别 标准盒模型 设置的 widthcontent 的宽度怪异盒模型 width contentpaddingborderbox-sizing:border-boxpadding 内边距设置一个值是 上下左右四个值 ;设置两个值是 上下和左右;设置三个值是 上 ,左右, 下;border 边框线参数一:边框宽度参数二:边框样式参数三:边框颜色border:1px solid #000;分别设置border-width:1px;border-style:solid;border-color:red;边框切角单位像素 或百分比border-radius:20px外边距margin-top:50px; (简写)上右下左两个值时 上下 左右三个值 上 左右 下四个值: 上 右 下 左外边距穿透1. 外边距穿透:1.上下方向2.父元素没有边框3. 如何解决:1 给父级加边框2 使用内边距不用外边距边框transparent:透明色给上边框设置颜色border-top-color:tellow;给四条边框分别设置颜色border-top:200px solid #000 ;border-right:100px solid green;border-left: 100px solid blue;border-bottom:100px solid red;伪类:hover 悬浮状态:active 激活状态:link 未访问:visited 访问过后input:focus 获取焦点伪元素伪元素:元素的特殊位置 使用双冒号伪元素必须要设置content 不然不会出现::after 最后位置::benfore 开始位置::first-letter 首字母::first-line 首行背景背景颜色:background-color:red;背景图片: background-imge-url(./icons);背景尺寸:background-size:100px 100px; 图片大显示左上角 图片小会平铺背景是否重复:background-repeat:no-repeat;背景位置:background-position:单位px 百分比 方位雪碧(精灵图)雪碧图是一种css合并技术 该方法将小图标合并在一张图片上,可以减少请求服务器的次数块的居中(安全区域)定宽居中 width margin:o auto;内敛元素(行元素 和行内块)在其父元素 设置 text-align:center元素内容溢出overflow:hidden visible scroll auto单行文字overflow :hidden;text-overflow:ellipsis;whit-space:nowrap;元素隐藏方式display:none;visibility:hidden;opactity:0-1;复习实体(转义字符)get; lit: nbsp; emp; 长表格三部分: thead tbody tfoot字体图标 以 font-awesome引入找到对应的class名 并添加 fa自定义字体font-face{font_family:“自定义名字”;src:url(“资源路径”)}浮动浮动分为左浮动 和右浮动为何使用浮动 将两个或多个块元素在同一行显示浮动对自身的影响会脱离文档流会覆盖其他的文档流中元素 但不会覆盖文字行元素和行内块元素 会变成块元素(默认高度撑开)浮动对兄弟元素之间的影响浮动元素上方有块元素 浮动元素会在块元素的下方浮动元素在上方 限免的块元素 可以通过清除浮动 保持位置 clear:both;浮动对父元素的影响会引起高度塌陷如何解决给父元素设置高度添加overflow:hidden;给父元素也设置浮动添加一个空的块级元素 并清除浮动统一写法 在开启浮动的父级元素添加clearfix .clearfix::after{content:“”;display:black;clear:both;}定位!-- position:static 默认定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位 --相对定位:相对定位 1. 参考点 文档流中自身的位置 2. 默认位置在原来文档流中 可以是 left top bottom right 3. 没有脱离文档流 4 .层级会提高 可以使用z-iindex 来调整层级 5. 使用场景 一般用于对元素位置微调绝对定位1 .参考点 对于最近的以定位祖先元素 如果元素没有已定位的祖先元素 那么它的位置相对于最初的包含块2. 默认位置在原来文档流中 可以是 left top bottom right3. 脱离文档流4 .层级会提高 可以使用z-iindex 来调整层级5.行元素和行内块元素会变成块元素 默认宽高内容撑开5. 使用场景 、一般是 子绝父相固定定位1 .参考点 浏览器窗口的可是区域 2. 默认位置在原来文档流中 可以是 left top bottom right 3. 脱离文档流 4 .层级会提高 可以使用z-iindex 来调整层级 5. 行元素和行内块元素 会变成块元素 默认宽高 内容撑开 6. 使用场景 想让元素相对于窗口进行定位侧边栏 小广告等粘性定位粘性定位:相对定位和固定定位的组合