CSS三大特性
层叠性： 解决样式冲突，根据一定的规则（选择器优先级），进行样式的层叠（覆盖）
继承性：元素自动拥有其父元素、或其祖先元素上所设置的某些属性，优先继承离得近的
常见的可继承属性：text-??,font-??.color...
优先级： !important>行内>id选择器>类选择器>元素选择器>*>继承的样式
CSS常用的属性
文字属性
字体大小 font-size:
字体族 font-family: 可以设置多个字体（使用英文名兼容性更好），按照从左到右的顺序逐个查找，找到就使用，没有找到就使用后面的，通常在后面谢圣上serif（衬线字体）或sans-serif（非衬线字体），windows系统中，默认字体就是微软雅黑。
语法: div{
font-family:"Microsoft YaHei",sans-serif
}
字体风格（倾斜或者不倾斜） font-style: normal/italic（倾斜）/oblique（倾斜）
字体粗细 font-weight: lighter/normal/bold/bolder/100-10000
字体复合属性 font: 字体大侠、字体族必须都写上，字体族必须是最后一位，字体大小必须是倒数第二位
文本属性
文字间距 letter-spacing
单词间距 word-spacing 通过空格识别单词，一般对中文无效
属性值是像素px，正值让间距增大，负值让间距缩小
文本修饰 text-decoration: overline（上划线）/underline（下划线）/line-through（删除线）/none（没有线，超链接的下划线可通过text-decoration:none删除）dotted(虚线) 颜色
例： .at{
text-decoration: underline wavy green /*下划的绿色波浪线*/
}
文本缩进 text-indent:
文本对齐_水平 text-align:left/center/right
行高 line-height和height关系：设置了height，高度就是height的值。不设置height的时候，会根据line-height计算高度（line-height*行数）。
line-height应用场景：多行文字控制行与行之间的距离，单行文字让height=line-height可实现文字垂直居中。
文本对齐_垂直 用于指定同一行元素之间或表格单元格内文字的垂直对齐方式。vertical-line:middle（使元素的中部与父元素的基线加上父元素字母x的一半对齐）/top/bottom/baseline(使元素的基线和父元素的基线对齐) 不能直接控制元素，控制父元素的子元素。不能控制块元素。
列表相关属性
设置列表符号 list-style-type:none(不显示前面标识)/square(实心方块)/disc(圆形)/decimal(数字)等
列表符号的位置 list-style-position:inside/outside
自定义列表符号 list-style-image:url("xxxx")
复合属性 list-style: 没有数量、顺序要求
边框相关属性
border-width:
border-color:
border-style:
border复合属性 没有数量、顺序要求
表格独有属性
表格列宽 table-layout:auto/fixed(所有列宽相等)
单元格间距（生效前提是不合并边框） border-spacing:
合并相邻单元格边框 border-collapse:collapse(合并)/separate(不合并)
隐藏没有内容的单元格 （生效前提是不合并边框）empty-cells:show/hide
表格标题位置 caption-side:top/bottom
背景相关属性
背景颜色 background-color 默认是transparent
背景图片 background-image:url("");
背景图片重复方式 background-repeat
控制背景图片位置 background-position:水平(left/center/right/像素值) 垂直(top/center/bottom/像素值) 缺少的默认居中
复合属性 background:
鼠标相关属性
设置鼠标光标的样式 cursor:pointer(小手)/move(移动光标)/text(文字选择器)/url("") pointer等
各元素的显示模式
块元素
主体结构标签<html><body>
排版标签<h1>-<h6><div><hr><p><pre>
列表标签<ul><ol><li><dl><dt><dd>
表格相关标签<table><tbody><thead><tfoot><tr><caption>
<form><option>
行内元素
文本标签<br><em><strong>
<a><label>
行内块元素
图片<img>
单元格<td><th>
表单控件<input><textarea><select><button>
框架标签<iframe>
修改元素的显示模式
display:block（块）/inline（行内）/inline-block（行内块）/none(不显示)
CSS盒子模型
CSS长度单位
px：像素
em：相当元素font-size的倍数
rem：相当于根html标签字体大侠
%：相对父元素计算
盒子模型组成
margin(外边距)：盒子与外界的距离，影响盒子的位置，不影响盒子大小(默认宽度时有影响)
border(边框)：盒子的边距
padding(内边距)：紧贴内容的补白区域
content(内容)：元素中的文本或后代元素都是它的内容
盒子大小=content+左右padding+左右border
margin的值可以是auto,给一个块级元素左右margin设置auto可以实现该元素在其父元素内水平居中，行内元素不行。
margin塌陷问题：第一个子元素上margin作用在父元素上，最后一个子元素下margin作用在父元素上。解决：一、给父元素设置不为0的padding。二、给父元素设置宽度不为0的border。三、给父元素设置CSS样式overflow:hidden
margin合并问题：上面兄弟元素的下边距和下面兄弟元素的上边距会合并，取一个最大的值，而不是相加。
处理内容溢出
overflow:auto(自动，溢出加滚动条，不溢出没有滚动条)/hidden(溢出部分被截断)/scroll(不管是否溢出都加滚动条)
隐藏元素的方式
方法一：visibility:show/hidden，元素不见了，还占有原来的位置
方法二：display:none，彻底隐藏，不占用位置
CSS浮动
float:
浮动后特点：
1.脱离文档流
2.不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开，而且可以设置宽高
3.不会独占一行，可以与其他元素共用一行
4.不会与margin合并，也不会margin缺陷，能完美设置四个方向的margin和padding
5.不会像行内块一样被当作文本处理
解决浮动产生的影响
法一：在所有浮动元素的最后面，添加一个块元素，并且给块元素设置clear:both
法二：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动
.parent::after{
content:"";
display:block;
clear:both;
}
定位
相对定位
position:relative
四个属性：left top bottom right
相对自己原来的位置，可以超出父容器
作用：1.对自己的位置进行微调 2.和绝对定位配合
绝对定位
position:absolute
left top bottom right
参考点：包含块，对于没有脱离文档流的元素，包含块就是父元素；对于脱离文档流的元素，包含块是第一个拥有定位属性的祖先元素，如果所有祖先都没定位，那包含块就是整个页面。
绝对定位元素的特点：脱离文档流，对后面的兄弟元素、父元素有影响；left和right top和bottom不能一起设置；绝对定位和浮动不能同时设置，同时设浮动失效，以定位为主；无论什么元素（行内、块、行内块）设置绝对定位后，变成定位元素（默认宽高都被内容撑开，且能自由设置宽高）
固定定位
position:fixed
left top bottom right
参考：视口 对于PC浏览器来说，视口就是看网页的窗户
脱离文档流，设置固定定位后，变成了定位元素
粘性定位
position:sticky
参考点：离他最近的一个拥有滚动机制的祖先元素，即便这个祖先不是最近的真实可滚动祖先
不脱离文档流
定位层级
定位元素一定比普通元素的层级高 z-index越大 层级越高
扫一扫
1304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
