css知识点总结

小程序1900 更新时间：2025-06-08 05:19:15

2023年6月20日发(作者：)

css知识点总结1、html 控制样式的弊端1、相同的样式效果，通过不同的属性或标记来完成的2、程序可维护性、可重⽤性不⾼2、通过 CSS 解决上述问题可以让各个元素都使⽤统⼀的样式声明从⽽提⾼程序的可重⽤性和可为维护性3、什么是CSSCSS ：Cascading Style Sheet ,层叠样式表、级联样式表，简称为样式表作⽤：为html元素去定义样式。1) 能够实现内容与表现相分离2) 提⾼代码的可重⽤性和可维护性重⽤性：可以让多个元素使⽤相同的样式维护性：⼀个元素的样式改变，其他元素也可以跟着变4、HTML 与 CSS 之间的关系：⼀个完整的页⾯ = HTML + CSS1）HTML 主要负责显⽰内容（搭建⽹页的结构）2）CSS 主要负责构建HTML样式的定义

HTML属性与CSS样式的使⽤原则：1）W3C建议尽量使⽤CSS样式取代 HTML 属性2）HTML中的专有属性，⽆法通过css取代的只能选择html属性(rowspan、colspan)5、CSS样式表的使⽤1、使⽤⽅式：1）内联⽅式，也称为：内联样式、⾏内样式。将样式属性定义在HTML元素中。特点：只能控制某⼀个元素的显⽰效果语法:<标记 style="样式属性:值;样式属性:值;">常⽤属性： color : ⽂本颜⾊，取值表⽰颜⾊的英⽂单词 style="color:red;"2）内部样式表：将“样式规则”放在元素内。中添加若⼲"样式规则"。样式规则：对⼀套样式的完整描述,主要包含两部分1、规范页⾯中哪些标记允许使⽤定义好的样式 - 选择器2、样式内容 - 若⼲样式声明样式规则语法：选择器{//样式声明样式属性:值;样式属性:值;...........}选择器：通过标记的名称来表⽰选择器，相当于定义该标记的样式div{color:red;font-size:48px;}特点：1、能够实现内容与表现相分离2、提升了样式的可重⽤性和可维护性3、只能在⼀个页⾯中做通⽤样式定义3）外部样式表将样式规则保存在独⽴的 css样式⽂件中，由页⾯对样式⽂件进⾏引⽤特点：1、实现内容与表现相分离2、将可重⽤性和可维护性体现的最完美(所有的页⾯都能⽤)3、可以在整个⽹站乃⾄于互联⽹中做通⽤的样式定义步骤：1、创建⼀个样式表⽂件，纯⽂本⽂件，以.css结尾。该⽂件中只能包含样式规则。2、在html页⾯中对样式表⽂件进⾏引⽤在中增加以下代码：2、CSS语法规范1、基本语法：样式声明：属性:值; 样式规则：选择器和样式声明2、CSS样式表特征1、继承性：⼤部分的CSS样式属性，是可以被继承的。继承：⼦级不⽤单独定义样式，可以直接使⽤⽗级的东西2、层叠性：为⼀个元素定义多个样式的时候，样式不冲突时，多个样式表中的样式可以层叠(合并)为⼀个3、优先级：样式冲突时，按照不同样式规则的优先级来应⽤样式优先级：1、浏览器缺省（默认）设置 (User Agent Style) ,级别最低；2、内部样式表或外部样式表,级别处于中间位置；就近原则（谁靠下，以谁为主）。

3、内联样式 ,级别最⾼(提⽰错误：Unknown property name : 样式属性名称写错了；Invalid property value : 样式属性值写错了)4、!important规则------------> 谨慎使⽤！可以通过 !important 显⽰调整样式优先级，!important优先级最⾼语法：样式属性:属性值 !important;3、选择器作⽤：规范了页⾯中的哪些元素能够使⽤定义好的样式。1.通⽤选择器作⽤：匹配页⾯中的任何⼀个元素语法：*{样式规则}2.元素选择器作⽤:匹配页⾯中的指定的元素；语法:元素名称作为选择器 body、p等。3.类选择器作⽤：定义公共的样式，由任意⼀个标签进⾏引⽤语法：.className{ : ; } 例：.red_back{} .red-back{}引⽤：在标签中，通过class属性对类选择器名称进⾏引⽤注意：在⼀个元素中，可以同时对多个类选择器进⾏引⽤。多个类选择器之间⽤空格隔开。4.类选择器-分类选择器作⽤：将类选择器和元素选择器结合起来使⽤，从⽽实现对某种元素不同样式的细分控制语法：元素选择器.className { } 例：_back{}选择器作⽤：通过元素的id值，来声明定义元素的相关样式属性语法：#idValue{}6.群组选择器作⽤：选择器声明，是以 , 隔开的选择器列表语法： selector1,selector2,{ } 例：div,p,.redback{color:red;}7.后代、⼦代选择器只存在⼀级的⽗⼦关系：可以称之为⼦代或者后代多于⼀级的嵌套关系：只能称之为后代后代语法：selector1 selector2{}例：div span{} /*匹配出所有div元素中的span元素*/ #content .redBack{}⼦代作⽤：只能匹配出⽗⼦关系的⼦级元素⽬的：不希望选择任意的后代元素，⽽是希望缩⼩范围，只选择某个具体的⼦元素时使⽤。语法：selector1>selector2{}8.伪类选择器作⽤：匹配元素的不同状态语法： :作为开始的分类：1）链接伪类作⽤：只匹配超链接的状态:link：适⽤于尚未访问的超链接 :visited：适⽤于访问过后的超链接2）动态伪类:hover：适⽤于⿏标悬停在html元素上的状态:active：适⽤于html元素被激活时:focus：适⽤于html元素获取焦点时的状态3）⽬标伪类4）元素状态伪类5）结构伪类6）否定伪类4、单位颜⾊单位： #rrggbb : 每⼀位取值 0-9 A-F 例：#012345 :#rgb : 缩写 #336699 --》 #369 #aabbcc --> #abc #aabcdd --> ⽆缩写5、尺⼨属性尺⼨：主要设置的是元素的宽度和⾼度；取值单位：像素或百分⽐1pt=1/72英；1in=2.45cm。宽度属性：Width--->max-width:限定元素宽度最⼤值；min-width:限定元素宽度最⼩值注意：width 与 max-width、min-width 相冲突⾼度属性：Height---> min-height；max-height注意：1、页⾯中，⾏内元素绝对不能修改宽和⾼2、块级元素、html元素本⾝就具备width和height属性的元素允许修改宽和⾼块级元素:div,p,h1,h2, ... ；本⾝具备width 和 height : table,input,img ...6、溢出处理使⽤尺⼨属性控制元素的⼤⼩时，如果内容所需控件⼤⼩元素本⾝的控件，会导致内容溢出属性: overflow -----> overflow-x : 横向溢出处理； overflow-y : 纵向溢出处理作⽤：当内容溢出元素时，如何处理取值： 1)visible : 默认值，溢出可见；2)hidden : 溢出隐藏；3)scroll : 滚动，在元素内部显⽰滚动条，内容溢出，滚动条可⽤，内容不溢出，滚动条不可⽤；4) auto : ⾃动，内容溢出则显⽰滚动条，内容不溢出，不显⽰滚动条7、边框属性1、简写⽅式： border:width style color; (四个⽅向)width:边框宽度；style:边框样式,实线(solid),虚线(dotted),虚线(dashed)；color:边框颜⾊,还可以取 transparent2、单边定义： border-left/right/top/bottom :width style color;border-⽅向:width style color;3、单属性定义： border-color : color; 四个边框的颜⾊4、单边框单属性定义： border-⽅向-属性:值;⽅向：top / bottom / left /right；属性：color / width / style

5、边框的组成：边框是由四个三⾓形(元素宽度和⾼度都为0) 或梯形组成(元素宽度和⾼度不为0)6、边框倒⾓：边框倒圆⾓，将直⾓转换成圆⾓的操作属性:border-radius；取值：具体数值或百分⽐数字取值数量：1个值：表⽰的是四个⾓圆⾓半径4个值：从左上⾓开始，顺时针⽅向的四个⾓的圆⾓半径单独定义:border-top-left-radius:左上⾓border-top-right-radius:右上⾓border-bottom-left-radius:左下⾓border-bottom-right-radius:右下⾓7、边框阴影：属性：box-shadow ；取值：多个属性值所组成的列表h-shadow：阴影的⽔平位置（⽔平位置偏移量），取值为正向右偏移；取值为负向左偏移。v-shadow：阴影的垂直位置（垂直位置偏移量），取值为正向下偏移；取值为负向上偏移。了解：1)blur：可选属性，阴影的模糊距离；2)spfread：可选，阴影尺⼨3)color：可选，阴影颜⾊；4)insert：可选，将外部阴影改为内部阴影例：box-shadow:h-shadow v-shadow blir color;0px 0px 1px red;8、轮廓：属性：outline 取值：width style color单属性：outline-width、 outline-style、 outline-color；常⽤模式：outline:0px;*******************************************************************************⼆、框模型1、框：框就是个容器，⽬的为了承装其他的东西；html中所有的元素都可以称之为元素框2、框模型(Box Model) : 也称为盒⼦模型、⽅框属性。定义了元素框处理元素内容尺⼨、内边距、边框和外边距的⽅式外边距：cellspacing ；内边距：cellpadding注意：当框模型(内边距，外边距，边框)介⼊到元素后，元素的内容区域尺⼨是不变的，但是会增加元素框的总尺⼨元素实际总宽度 = 左右外边距 + 左右边框 + 左右内边距 + width;元素实际总⾼度 = 上下外边距 + 上下边框 + 上下内边距 + height;3、外边距1、什么是外边距：围绕在元素边框周围的⼀些空⽩区域，这些区域是透明的，默认情况下，是不允许被其他元素所占据的。也可以表⽰为当前元素与其他元素之间的距离2、语法：margin:value; (四个⽅向的外边距)单边设置：margin-top : 上外边距； margin-right:右外边距margin-bottom:下外边距； margin-left:左外边距3、取值：单位: 1) px：具体像素值 margin:10px；2)%：⽗容器的宽和⾼的占⽐；3)auto : ⾃动，只对左右外边距有效,设置元素⽔平居中对齐；4)负值: ⽬的是为了向着相反的⽅向移动元素margin-left:取负值，为了向左移动元素；margin-top :取负值，为了向上移动元素取值为 auto ：由浏览器⾃⼰计算外边距。左右⽅向取值为 auto 时，会呈现出元素⽔平居中对齐显⽰⽅式（仅仅局限于块级元素，⽽且必须要设置宽度属性）

取值数量：margin:value; 四个⽅向外边距margin:v1 v2(auto); 上下左右margin:v1 v2 v3; 上左右下margin:v1 v2 v3 v4; 上右下左(从上开始顺时针⽅向)4、默认的外边距html元素⾥，有些元素默认具备外边距的。例： h1~h6；p；ul；body； dl、dd如果程序中，不想使⽤默认的外边距，可以通过css重写的⽅式设置为 05、外边距问题1、(垂直)外边距合并：当两个垂直外边距相遇时，它们将形成⼀个外边距，称为外边距合并；合并后的外边距的⾼度值为两个元素中外边距较⼤者的值。2、外边距溢出：⽗⼦元素中，如果设置⼦元素的上下外边距时，默认情况会被作⽤到⽗元素的外边距上。解决⽅式：1、可以为⽗元素增加边框，主要是上边框，解决⼦元素的上边距溢出问题。2、增加⽗元素的 padding-top、最好将⽗元素的⾼度相应的减少⼀部分数值。4、内边距1、什么是内边距：内容区域与边框之间的空间距离，注意：内边距会将元素边框撑⼤。2、属性：padding : value;单⽅向： padding-top: padding-bottom: padding-right: padding-left:3、取值：单位： px 、%数量：padding:value ; 上下左右padding:v1 v2 ; 上下左右padding:v1 v2 v3;上左右下padding:v1 v2 v3 v4;上右下左特殊使⽤场合：想扩⼤⾏内元素的宽度和⾼度的话，可以通过内边距来实现。三、背景1、背景颜⾊属性：background-color取值：可设置为合法的颜⾊单位值或 transparent注意：默认情况下，背景(颜⾊、图像)是从边框位置处就开始填充2、背景图⽚属性：background-image取值：url("图像URL")background-image:url("xxxx/");background-image:url('xxxx/');background-image:url(xxxx/);3、背景平铺（重复）属性：background-repeat取值：repeat : 即⽔平⽅向⼜垂直⽅向平铺(默认值)no-repeat : 没有平铺repeat-x : 仅⽔平⽅向平铺repeat-y : 仅垂直⽅向平铺

4、背景图⽚尺⼨属性：background-size取值：value1 value2 : 宽度⾼度value1% value2% : 当前元素的宽和⾼的占⽐cover : 覆盖，将背景图像扩展⾄⾜够⼤，直到背景图已经覆盖了元素的所有区域。有可能导致背景图不能完整的显⽰在元素中contain: 包含，将背景图扩⼤，直到背景图已经碰都某⼀个边缘位置（右、下）,背景图能够完完整整的显⽰在元素中，不⼀定能覆盖到所有的区域5、背景图⽚固定默认情况，背景图⽚会随着滚动条⽽发⽣滚动，可以通过背景图⽚固定的⽅式解决此问题，让背景图保持在⽹页的可视化窗⼝的某个固定为⽌处不随着滚动条发⽣位置变化。注意：尽量将背景图⽚加给body元素属性：background-attachment取值：scroll ：背景会随滚动条发⽣滚动（默认值）；fixed : 固定，背景不会随着内容⽽发⽣滚动。6、背景定位改变背景图⽚在元素中的位置属性：background-position取值：x y : x⽔平偏移位置,值为正向右移动，值为负，向左移动y垂直偏移位置,值为正向下移动，值为负，向上移动x% y% : 左上⾓ : 0% 0%；右下⾓ : 100% 100%；居中显⽰ : 50% 50%关键字： x : left,center,right ； y : top,center,bottomCSS Sprite : 将多个背景图合并到⼀张⾥⾯去，根据需求情况，通过背景定位对背景图⽚进⾏偏移，从⽽找到要显⽰的图像⽬的：减少对服务器的请求次数操作步骤：1.根据想要看的图像，在页⾯创建⼀个与它⼀模⼀样⼤⼩的元素2.通过background-position对⼤图进⾏位置的移动，正好将想要看到的⼩图放到创建好的元素中7、背景属性将以上⼏个属性全部综合到⼀起,通过⼀个属性描述所有的值属性:background取值：color url() repeat attachment position;常⽤值：background:url() repeat position;常⽤⽅式：background:url(Images/) no-repeat -120px -240px;四、渐变1、渐变语法：渐变：指的是两种或多种颜⾊之间的平滑过渡属性：background-image取值：linear-gradient() -- 线性渐变 repeating-linear-gradient() -- 重复线性渐变radial-gradient() -- 径向渐变 repeating-radial-gradient() -- 重复径向渐变例：background-image:linear-gradient(); -- 显⽰线性渐变颜⾊*2、线性渐变属性：background-image取值:linear-gradient(angle,color-point1,color-point2,...)angle:指定渐变的⽅向(⾓度)to top : 向上 --> 0deg to right : 向右 --> 90degto bottom : 向下 --> 180deg to left : 向左 --> 270degcolor-point :表⽰颜⾊的数值和位置例：red 0% 、red 10px；background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);3、径向渐变属性：background-image取值: radial-gradient();radial-gradient([size at position],color-point1,color-point2,....);size at postion :可以省略不写size : 标识的圆的半径以 px 为单位position : 圆⼼的位置：top,left,right,bottom,center、具体数值、百分⽐4、重复渐变repeating-linear-gradient(angle,color-point); repeating-radial-gradient();color-point: 位置取具体的数值或者不到100%的数字

5、浏览器兼容性对于不⽀持的浏览器版本，需要添加不同的浏览器前缀来解决渐变的问题Firefox ： -moz- ； chrome和Safari ： -webkit- ； opera ： -o-例：#d1{background-image:-moz-linear-gradient(to top,red 0%,green 50%,blue 100%);}五、⽂本格式化1、字体属性1、指定字体(⾮重要)font-family:value1,; 例：font-family:"微软雅⿊","宋体","Arial";2、字体⼤⼩(重要)font-size: 16px; 取值：px或pt作为单位的值3、字体加粗(⾮重要)相当于 : font-weight:normal/bold/⽆单位数字(400-900);⽆单位数字：400 - normal 900 - bold4、字体样式(⾮重要)相当于：功能：斜体显⽰⽂字 font-style : normal / italic;5、⼩型⼤写字母(⾮重要) font-variant:normal/small-caps;6、字体属性 font:font-style font-variant font-weight font-size font-family;常⽤设置⽅式：font:12px "微软雅⿊","Arial"; font:12px/24px(⾏⾼) "microsoft yahei";2、⽂本属性1、⽂本颜⾊ (重要) color:value;2、⽂本⽔平排列⽅式(重要) 相当于：html 属性中的 aligntext-align:left / right / center/justify（两边对齐）功能：能够控制当前元素内所有的⽂本、⾏内元素、⾏内块、⽔平对齐⽅式。3、⽂字线条修饰属性：text-decoration取值：none ⽆线条(重要)、underline 下划线(重要)、overline 上划线(⾮重点)line-through 删除线(⾮重点) --> 4、⾏⾼(重要)：⼀⾏⽂本所占据的⾼度是多少如果⾏⾼⼤于⽂本⼤⼩的话，那么这⾏⽂字将呈现出垂直居中的显⽰⽅式属性：line-height 取值：以 px 为单位的值5、⾸⾏⽂本缩进(⾮重要) 属性：text-indent 取值：以 px 为单位的值6、⽂本阴影(⾮重要) text-shadow:h-shadow v-shadow blur color;h-shadow:⽔平投射距离、v-shadow:垂直投射距离、blur:模糊距离、color:颜⾊六、表格属性1、表格常⽤属性(重点)：1、内边距 : padding；2、尺⼨属性：width,height；3、⽂本属性 : font-* , text-*；4、背景属性 : background-*；5、边框 : border /*只给表格设置边框，单元格没有*/ table{ border:1px solid red; }； /*单元格边框，与表格⽆关*/ td {border:1px solid red; }；6、vertical-align(垂直对齐⽅式 td的)，功能：控制单元格内容的垂直对齐⽅式；取值：top / middle / bottom2、表格特有属性注意：该组属性只能在 table 中使⽤1、边框合并(重要) 属性：border-collapse 功能：合并两个相邻的边框取值：separate : 默认值，分离边框 collapse : 边框合并2、边框边距(⾮重点) 相当于td的外边距，两个边框间的上下和左右的距离。注意：只有在 border-collapse:separate;即边框分离时才有效；该属性加在table中。属性：border-spacing取值：取⼀个值：每两个单元格之间的垂直和⽔平间距是⼀致的。取两个值：第⼀个值，指定的是⽔平间距，第⼆个值，指定的是垂直间距。两个值⽤空格隔开3、显⽰规则(⾮重点)：如何布局、显⽰、解析⼀个table，定义加载表格的算法。属性：table-layout取值： auto : 列宽度由单元格的内容来决定，默认值。⾃动表格布局fixed: 列宽度由设置的值（即表格宽和列宽⼀起）来决定。固定表格布局⾃动表格布局：单元格的⼤⼩会适应内容的⼤⼩；加载时较慢；适⽤于不确定每列⼤⼩时使⽤固定表格布局：，列宽度取决于设置好的相关属性值；与内容⽆关，会加速显⽰表格，每次加载表格时不⽤计算。⽐较：1）固定表格布局虽然速度较快，但是不够灵活，不能体现出表格的特点。2）⾃动表格布局，虽然算法较慢，但是能反映传统表格的特点。七、浮动定位1、定位：元素在⽹页中该出现的位置，元素框对于其正常位置应该出现的位置。2、定位属性：更改当前元素的定位⽅式。属性：position 取值：static / relative / absolute / fixed

3、偏移属性 top ：+- bottom ：+- left ：+- right ：+-top和bottom同时出现的话以top为主；left和right同时出现的话以left为主。该组属性能够帮助我们完成元素的位置移动4、堆叠顺序属性：z-index 取值：⽆单位的数字5、分类：1、普通流定位。流：排列元素的⼀种⽅式；⼜称为⽂档流定位，是页⾯默认排列元素的⼀种⽅式。页⾯中的块级元素：元素是从上到下的⽅式排列（每个元素独占⼀⾏）页⾯中的⾏内元素：元素是从左到右的⽅式排列（可以通过左右外边距调整位置或距离，上下外边距不⾏）弊端：块级元素⽆法在⼀⾏内显⽰多个，布局不好做。

*2、浮动定位解决问题：让多个块级元素能够在⼀⾏内显⽰1、什么是浮动定位1)将元素排除在⽂档流之外，即元素脱离⽂档流。不受默认排列⽅式(从上到下或从左到右)的控制2)元素将不再占⽤页⾯的空间，有可能会压住其他的元素3)元素会停靠在包含框的左边或右边，或者停靠在已经浮动的元素的左边或右边。4)元素⽆论怎么浮动，最终还是在包含框之内2、浮动属性（没有继承性）属性：float 取值：none / left / right;注意：1、块级元素浮动后，宽度会变成⾃适应2、⾏内元素浮动起来后，除具备以上特点外，它将变成块级元素3、浮动元素的外边缘不会超过其⽗元素的边缘4、已经浮动的元素不会相互重叠5、浮动元素只能向佐或向右，不能上下浮动6、当包含框的宽度不能承装下所有的浮动元素时，那么最后⼀个浮动元素会⾃动换⾏。3、清除浮动属性：clear 取值：left / right / both / none功能：清除当前元素的左边(上边) 或右边已浮动元素对它所带来的影响4、float 与 overflow浮动元素对⽗层元素所带来的影响如果⼀个元素中，包含了浮动元素的话，那么该元素得到的⾼度会被浮动元素所影响，如果该元素中都是浮动元素，那么该元素⾼度为0。⾏内元素浮动的话，将会变成块级元素，即允许设置宽和⾼。原因：浮动元素会对⽗元素的⾼度带来影响，⽗元素的⾼度，最终以没有浮动元素的⾼度为准。解决⽅案：1、⼿动设置元素的⾼度。弊端：⾃适应⾼度时⽆法使⽤2、通过 overflow 属性改变：overflow:hidden;放在包含浮动元素的⽗元素中，它会撑起当前元素的⾼度，变得⾃适应。弊端：（能够隐藏超出范围的元素）如果⽗层容器中包含允许溢出的元素的话，则不能使⽤。3、在⽗元素内最后位置处，追加⼀个（⼦元素 div）空的块级元素，增加clear:both;属性即可。3、相对定位：元素框会相对于它原来的位置偏移某个距离。要参考元素本⾝的位置然后去实现新的位置移动。1、属性和值 position:relative; 配合偏移属性⼀起使⽤改变当前元素的位置通过 top / left / bottom / right 属性值实现位置的微调2、注意： 1、相对定位不会改变元素的形状；2、元素原本所占的控件仍然会保留3、使⽤场合1、元素本⾝要进⾏位置的微调时，优先选择相对定位2、配合绝对定位⼀起使⽤(弹出菜单)3、要实现堆叠顺序的调整4、绝对定位1、绝对定位的元素会脱离⽂档流，不占据页⾯空间，即允许压住页⾯的其他的元素。2、绝对定位的初始化位置：1)相对于最近的已定位的祖先元素来实现位置的初始化；2)如果元素没有已定位的祖先元素，那么就相对于最初的包含块body实现位置的初始化已定位：position属性为relative/absolute/fixed当中的任何⼀种。3、属性和值 position:absolute; 通过top / left /bottom / right实现位置的初始化定位。4、使⽤场合：1、想实现元素堆叠的效果时使⽤(⼀个元素压住另外⼀个元素)；2、弹出菜单；5、堆叠顺序（重点）：控制元素的显⽰顺序。已经定位的元素（尤其是绝对定位）是允许出现堆叠效果的。默认的堆叠顺序：1、按元素出现的顺序，后来者居上(同级别)2、⼦元素永远都会压在⽗元素的上⾯(⽗⼦级,不可变)修改堆叠顺序: 属性：z-index 取值：⽆单位的数字，数字⼤者靠上注意：⽆法修改⽗⼦级元素的堆叠顺序。5、固定定位1、什么是固定定位：将元素固定在页⾯的某个位置处不动，会将元素脱离⽂档流，不占页⾯空间。2、属性和值 position:fixed; 通过 left / bottom / right / top 实现位置调整6、静态定位(了解) position:static; 默认定位⽅式。⼋、显⽰1.显⽰⽅式（⾏内元素、块级元素、⾏内块。。）1.什么是显⽰⽅式，即元素默认的显⽰⽅式块级（block）：div、p、h1-h6、dl...⾏内（inline）：span、a、s、b、s、i、u、sub、sup⾏内块（inline-block）：img、表格（table）：table功能：可以通过 display 属性修改元素框的默认显⽰⽅式属性：display取值：none : 让⽣成的元素没有框，让元素脱离⽂档流，在页⾯上不显⽰元素(隐藏)，并且不占据页⾯空间，（隐藏元素，并且不占据页⾯空间）。block : 让元素表现的像块级元素⼀样使⽤场合：1.将⾏内元素改变成块级元素，修改宽和⾼。2.将块级元素隐藏后，再显⽰出来inline : 让元素表现的像⾏内元素⼀样使⽤场合：将⾏内元素隐藏后，再显⽰出来。注意：不要将块级元素改成⾏内元素。inline-block : ⾏内块。按⾏内元素显⽰，具备块级元素的特点。本⾝是⾏内元素：⼀⾏内能够显⽰多个。具备块级元素特点：允许改宽和⾼。使⽤场合：1.将⾏内元素更改为⾏内块，以便修改宽和⾼table : 让元素显⽰的和 table ⼀样总结：display 常⽤⽅式：1、隐藏元素以及显⽰元素，可以通过 display:none的⽅式隐藏，如果需要显⽰的话，按照⾃⼰默认的⽅式显⽰出来即可。⽐如：div : display:block;2、如果程序中，想修改⾏内元素的尺⼨时使⽤：float:left / right; display:block / inline-block;2、显⽰效果1、可见性(⾮重点) 属性：visibility特点：元素可以隐藏，但是空间会保留，不允许被其他元素占据取值： visible : 默认值，元素可见的hidden : 元素不可见，依然占据页⾯空间collapse : ⽤在表格元素上，删除⼀⾏或⼀列时，不影响表格整体布局2、透明度(⾮重点) 属性：opacity

取值：0.0 - 1.0之间的⼩数(能取0{完全透明} 也可以取1)；值越⼩，越看不清。

3、垂直对齐⽅式属性：vertical-align使⽤场合： 1、在td中使⽤：设置内容的垂直对齐⽅式2、在 img中使⽤ : 控制图像两端的⽂本相对于图像的垂直对齐⽅式取值： top:顶部 middle:居中 bottom:底部baseline : 默认值，基线对齐，默认会将⽂本放在元素的基线上注意：通过修改图像的vertical-align 为⾮ baseline的值，取消默认底部的3px空⽩距离（不同浏览器底部默认空⽩距离不同）。3、光标(⾮重点) 属性：cursor

取值：default ：默认值 <- ； pointer : ⼩⼿(重点) ；crosshair : +text : I ； wait : 等待； help : ？帮助九、列表功能：灵活控制或修改列表项的显⽰标识1、列表项标志（list-style-type）：修改列表项前⾯的标识。属性：list-style-type取值：none ：⽆标记（重点）；disc : 实⼼圆；circle : 空⼼圆；square :实⼼⽅块lower-roman：⼩写罗马；decimal : 数字； ... ...2、列表项图像属性：list-style-image 取值：url(图像路径);功能：使⽤⾃定义图像，作为列表项的显⽰标识3、列表项位置属性:list-style-position取值：outside：列表项标识位于⽂本之外，默认值； inside：列表项标识更改在⽂本范围之内4、列表属性属性：list-style 取值：type url() position;功能：将以上三个属性值综合到⼀起。常⽤写法：list-style:none; (重点)。