前端杂项

qsdnet我想学编程 2019-12-16

display: none | inline block | list-item | inline-block table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
默认值:inline

none: 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 
inline: 指定对象为内联元素。 
block: 指定对象为块元素。 
list-item: 指定对象为列表项目。 
inline-block: 指定对象为内联块元素。(CSS2) 
table: 指定对象作为块元素级的表格。类同于html标签<table>(CSS2) 
inline-table: 指定对象作为内联元素级的表格。类同于html标签<table>(CSS2) 
table-caption: 指定对象作为表格标题。类同于html标签<caption>(CSS2) 
table-cell: 指定对象作为表格单元格。类同于html标签<td>(CSS2) 
table-row: 指定对象作为表格行。类同于html标签<tr>(CSS2) 
table-row-group: 指定对象作为表格行组。类同于html标签<tbody>(CSS2) 
table-column: 指定对象作为表格列。类同于html标签<col>(CSS2) 
table-column-group: 指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2) 
table-header-group: 指定对象作为表格标题组。类同于html标签<thead>(CSS2) 
table-footer-group: 指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2) 
run-in: 根据上下文决定对象是内联对象还是块级对象。(CSS3) 
box: 将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3) 
inline-box: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3) 
flexbox: 将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3) 
inline-flexbox: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3) 
flex: 将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3) 
inline-flex: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

如何居中div, 如何居中一个浮动元素?

(1)、非浮动元素居中:可以设置 margin:0 auto 令其居中, 定位 ,父级元素text-align:center等等
(2)、浮动元素居中: 
方法一:设置当前div的宽度,然后设置margin-left:50%; position:relative; left:-250px;其中的left是宽度的一半。
方法二:父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对左移动-50%。
方法三:position定位等等。

你有哪些性能优化的方法?

回答一:

(1)、减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
(2)、前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(3)、用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
(4)、当需要设置的样式很多时设置className而不是直接操作style。
(5)、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6)、避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
(7)、图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

回答二:

(1)、减少HTTP请求次数 
(2)、使用CDN
(3)、避免空的src和href
(4)、为文件头指定Expires
(5)、使用gzip压缩内容
(6)、把CSS放到顶部
(7)、把JS放到底部
(8)、避 免使用CSS表达式 
(9)、将CSS和JS放到外部文件中 
(10)、避免跳转 
(11)、可缓存的AJAX 
(12)、使用GET来完成AJAX请求

解释下浮动和它的工作原理?清除浮动的技巧?
 

浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。 
(1)、使用空标签清除浮动。 
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
(2)、使用overflow。 
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
(3)、使用after伪对象清除浮动。 
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

在CSS中刻度是用于设置元素尺寸的单位。 
a、特殊值0可以省略单位。例如:margin:0px可以写成margin:0 
b、一些属性可能允许有负长度值,或者有一定的范围限制。如果不支持负长度值,那应该变换到能够被支持的最近的一个长度值。 
c、长度单位包括:相对单位和绝对单位。 
相对长度单位有: em, ex, ch, rem, vw, vh, vmax, vmin 
绝对长度单位有: cm, mm, q, in, pt, pc, px
绝对长度单位:1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
文本相对长度单位:em 
相对长度单位是相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
文本相对长度单位:rem 
rem是CSS3新增的一个相对单位(root em,根em),相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小 
浏览器的默认字体大小为16像素,浏览器默认样式也称为user agent stylesheet,就是所有浏览器内置的默认样式,多数是可以被修改的,但chrome不能直接修改,可以被用户样式覆盖。

相关推荐

pythonclass / 0评论 2019-12-29