CSS部分内容

一.CSS部分内容

1. 引入:(1)行间样式 关键字style;
   (2)内嵌样式 关键字style;
   (3)外联样式 关键字 link;
2. 选择器: id选择器 #{};
   class选择器 .{};
   后代选择器 父元素 子元素{};
   子代选择器 父元素>子元素(多种){};
   组合选择器 元素1,元素2,…{};
   伪类选择器 元素:hover{属性值:}; 鼠标移动到元素上时的状态;
   元素:before{content:}; 文本增加在内容之前
   元素:after{content:} 文本添加在内容之后
3. 样式: width宽度 height 高度
   border:大小 线状 颜色; 设置边框;
   border-width 边框宽度;
   border-style :dotted solid double dashed; 点状 实线 双线
   border-color;边框颜色
   text-decoration:none;去掉下划线;
   list-style:none;去掉列表中的’点’
   text-indent:像素值; 首行缩进
   font-family:字体;
   font-size:像素值; 字体大小;
   color:字体颜色;
   font: 是否加粗(bold加粗/normal不加粗) 大小/行高 字体;
   background:图片/颜色;设置背景
   background-color;背景颜色
   background-image:url(图片地址);设置图片背景
   background-repeat:background-repeat;去掉图片重复
   background-position: top left;(水平位置 垂直位置) 设置图片位置
   background-size:高度 宽度;设置图片高度 注意:如果只设置一个值，则第二个值会被设置为 “auto”
   outline:颜色 样式 宽度;设置轮廓
   outline-style:dotted/dashed/solid; 点状/虚线/实线;
   outline:none:去掉轮廓
   盒子模型: margin; border; padding;
4. margin-top 塌陷:
   在两个盒子嵌套时候，内部的盒子设置的 margin-top 会加到外边 的盒子上，导致内部的盒子 margin-top 设置失败
   解决:(1)给父元素设置 overflow:hidden;
   (2)给父元素设置边框:boder:1px solid #000;
   (3)伪元素: 元素:before{ content:’ '; display:table;}
5. 解决内联元素的间隙方法:
   (1)设置margin-left为负值
   (2)去掉内联元素之间的换行
   (3)将内联元素的父级设置font-size为0,内联元素自身再设置font-size.
6. 内联块元素之间的转换:
   通过display属性来互相转化:
   display:none; 元素隐藏;
   display:inline; 内联元素
   display:block; 块元素
   display:inline-block 内联块元素
   注意:内联元素不可设置大小;
7. 元素溢出
   当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式
   通过overflow属性来设置解决:
   (1)visibke 默认值 内容不会被修改,会呈现在元素框之外
   (2)hidden 内容会被裁剪,并且其余内容是不可简单,超出父元素内容被隐藏 (此属性还有清除浮动,清除margin-top塌陷的功能)
   (3)scroll 内容会被修改,则浏览器会显示滚动条以便查看其余的内容 内容无论是否超出元素元素框 都会添加滚动条
   overflow-x:scroll 设置水平滚动条 overflow-y:scroll 设置垂直滚动条
   (4)auto 内容被修改,则浏览器会显示滚动条以便查看其余的内容
   (5) inherit 规定应该从父元素继承overflow属性的值
8. 清除浮动
   (1)父级上增加属性 overflow:hidden
   (2)在最后一个子元素的后面加一个空的div,给样式属性clear:both
   (3)使用成熟的清除浮动样式类 .clearfix:after,.clearfix:before {
   content:"";
   disply:table;}
9. 定位:
   使用position属性;
   position:relative;相对定位元素;
   positon:absolute;绝对定位元素;
   position:fixed; 固定定位元素;
   position:inlet;继承父级元素position属性
   绝对定位和固定定位的块元素和行内元素会自动转化为行内元素(子绝父相)
10. box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离/阴影的尺寸 阴影的颜色; 边框阴影