2024年9月cssheightfix（css语法规则望指教）

　　⑴cssheightfix（css语法规则望指教

　　⑵css语法规则望指教

　　⑶CSS的语法:CSS的定义是由三个部分构成:选择符(selector)，属性(properties)和属性的取值(value)。语法:selector{property:value}(选择符{属性:值})说明:·选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开:例子:body{color:black}，此例的效果是使页面中的文字为黑色。·如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合:例子:p{font-family:“sansserif“}(定义段落字体为sansserif)·如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开:例子:p{text-align:center;color:red}(段落居中排列;并且段落中的文字为红色).选择符组你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义:h,h,h,h,h,h{color:green}(这个组里包括所有的标题元素，每个标题元素的文字都为绿色)p,table{font-size:pt}(段落和表格里的文字尺寸为号字)效果完全等效于:p{font-size:pt}table{font-size:pt}.类选择符用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类:p.right{text-align:right}p.center{text-align:center}然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数:这个段落向右对齐的这个段落是居中排列的类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式:.center{text-align:center}(定义.center的类选择符为文字居中排列)这样的类可以被应用到任何元素上。下面我们使h元素(标题)和p元素(段落)都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符:《hclass=“center“》这个标题是居中排列的《/h》《pclass=“center“》这个段落也是居中排列的《/p》注意:这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。.ID选择符在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代:这个段落向右对齐定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=“intro“的元素:#intro{font-size:%;font-weight:bold;color:#ff;background-color:transparent}(字体尺寸为默认尺寸的%;粗体;蓝色;背景颜色透明)下面这个例子，ID属性只匹配id=“intro“的段落元素:p#intro{font-size:%;font-weight:bold;color:#ff;background-color:transparent}注意:ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。.包含选择符可以单独对某种元素包含关系定义的样式表，元素里包含元素，这种方式只对在元素里的元素定义，对单独的元素或元素无定义，例如:tablea{font-size:px}在表格内的链接改变了样式，文字大小为象素，而表格外的链接的文字仍为默认大小。.样式表的层叠性层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记:div{color:red;font-size:pt}……这个段落的文字为红色号字(P元素里的内容会继承DIV定义的属性)注意:有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色:div{color:red;font-size:pt}p{color:blue}……这个段落的文字为蓝色号字我们可以看到段落里的文字大小为号字是继承div属性的，而color属性则依照最后定义的。不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如:p{color:#FF!important}.blue{color:#FF}#id{color:#FFFF}我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。.注释:/*...*/你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以“/*“开头，以“*/“结尾，如下:/*定义段落样式表*/p{text-align:center;/*文本居中排列*/color:black;/*文字为黑色*/font-family:arial/*字体为arial*/}使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：颜色进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#可以缩写为#;#可以缩写为#;盒尺寸通常有下面四种书写方法:property:value;表示所有边都是一个值value；property:valuevalue;表示top和bottom的值是value,right和left的值是valueproperty:valuevaluevalue;表示top的值是value，right和left的值是value，bottom的值是valueproperty:valuevaluevaluevalue;四个值依次表示top,right,bottom,left方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：margin:emem.em;边框(border)边框的属性如下：border-width:px;border-style:solid;border-color:#;可以缩写为一句：border:pxsolid#;语法是border:widthstylecolor;背景(Backgrounds)背景的属性如下：background-color:#f;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:;可以缩写为一句：background:#furl(background.gif)no-repeatfixed;语法是background:colorimagerepeatattachmentposition;你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：color:transparentimage:nonerepeat:repeatattachment:scrollposition:%%字体(fonts)字体的属性如下：font-style:italic;font-variant:small-caps;font-weight:bold;font-size:em;line-height:%;font-family:“LucidaGrande“,sans-serif;可以缩写为一句：font:italicsmall-capsboldem/%“LucidaGrande“,sans-serif;注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。列表(lists)取消默认的圆点和序号可以这样写list-style:none;,list的属性如下:list-style-type:square;list-style-position:inside;list-style-image:url(image.gif);可以缩写为一句：list-style:squareinsideurl(image.gif);

　　⑷.clearfix{*zoom:;_height:px}CSS的这句声明的zoom前的*和height前的_起到什么作用

　　⑸这个是hack写法，用来识别不同版本的IE浏览器。*后面的属性IEIE能识别，IEIE……都不能识别；“_“后面的属性，只有IE能识别，解决方法如下：

　　⑹首先新建一个html文件，命名为test.html。

　　⑺在test.html文件中，分别给两个p标签设置class属性，分别为n，n。主要用于下面分别对p标签使用line-height和height样式，讲解它们的区别。

　　⑻为了展示明显的效果，在css标签内，使用css设置p标签的样式，定义p元素为px灰色边框，宽度为px，并使用margin-bottom设置两个p标签相隔px。

　　⑼在css标签内，通过class类名，分别使用line-height和heignt属性设置两个p标签的样式。

　　⑽最后在浏览器打开test.html文件，查看实现的效果。

　　⑾css如何清除浮动常用的方法有哪些

　　⑿最简单的是clear:both需要在浮动元素后边加个元素。有更好的方法也是我现在在用的.fix{*zoom:;}.fix:after{content:““;display:block;height:;clear:both;visibility:hidden;font-size:;}给浮动元素的附加加上fix这个类就好了

　　⒀css里面怎么用hack清楚浮动

　　⒁子任用的最多的一种clearfixhackviewsourceprint..clearfix:after{.display:block;.clear:both;.height:;.line-height:;.visibility:hidden;.content:“.“;.font-size:;.}..clearfix{.zoom:;.}、比较常见的另一种clearfixhackviewsourceprint..clearfix:after{.content:“.“;.display:block;.clear:both;.visibility:hidden;.line-height:;.height:;.}..clearfix{.display:inline-block;.}.html.clearfix{.display:block;.}.*html.clearfix{.height:%;.}最近比较火的一种clearfixhack作者博客：Anewmicroclearfixhackviewsourceprint..cf:before,..cf:after{.content:““;.display:table;.}..cf:after{.clear:both;.}..cf{.*zoom:;.}其他两种方法clearfixhack摘自：XHTMLfloatclearwithoutmarkuptest.clearfixwithIEviewsourceprint已测试版本:FF.,.,,...,.,CaminoIEPR,,,,.,.,IEMacOpera.,.,.ChromeSafari..(PC,shouldworkonMactoo)

　　⒂我在做移动端时遇见的css问题

　　⒃关于css常见问题，大多是移动端的。简单的排版规则：条目与条目之间空两行，每条内容部分分段空一行。标点符号全部用中文字符。css的标点用英文。条目编号后面紧跟英文字母的，要空一格，比如.css，“.”和“css”之间有一个空格。一、在做手机轮播图时，banner图的宽度是手机屏幕的宽度，轮播图加了左右切换按钮，按钮的position:absolute；定位的元素，定位的元素超出父容器时（超出了%，会出现滚动条。二、在移动端有种布局可选。.定位布局说明：头部、尾部是fixed定位。中间内容部分绝对定位，overflow-y:auto；.flex布局（朕极力推荐说明：这里写的简洁，没有写很多兼容，移动端兼容性比较好，安卓.以上都可以用。用的是较新的flex声明。（这个布局是抄袭手淘团队的。.普通的流式布局说明：头部和尾部依然是fixed定位，但是#content内容部分则是用padding-top和padding-bottom来支撑页面，这种布局相当垃圾，会带来各种页面上下莫名其妙的留白问题。三、css属性.word-wrap:break-word；word-break:break-all；让一行连续的数字或英文字母遇到边界自动换行。.-webkit-user-select:none|normal|text；这个属性是禁止用户选择、复制文字，同时还会使input框、select框不能获取焦点，导致无法输入或选择。所以在使用这个属性时，注意防止对input和select的污染。.css属性选择器。li，可以选中所有class中有‘act’的li元素。$(’li’).attr(’class’).indexOf(’act’);只是获取第一个li的class，然后判断是否有‘act’;通过for循环可以进一步操作，for(vari=;i《$(“li“).length;i++){$(“li...}.清除浮动，解决高度塌陷a.伪类(抄袭bootstrap的做法).clearfix{}.clearfix:after{display:table;content:’’;clear:both;}b.王妮的做法.box{clear:both;overflow:hidden;}c.对于子元素写margin-top把父级拖下来的情况（百度说是WC的标准，只要破坏了父级子级紧贴的结构就可以了给父级写border-top，或者给父级写padding-top。采用b方法也可以，a方法无效。.css高度单位和颜色单位height:calc（vh-px;目前来看，兼容性还不错。注意，减号两边是有空格的。background:rgba（，，，.;rgb颜色值和颜色透明度。.关于padding-top:%;padding-left:%;可以利用这两个属性做绝对正方形。比如微信朋友圈的照片宫格，qq空间的照片宫格，sina微博的照片宫格。屏幕宽度未知，一行排个，每个宽度都是.%，但是高度不能写百分比了。在每个宽度为.%的元素里再写一个div，这个div的默认宽度就是父级的.%，再用padding-top:%;把高度撑开，padding-top:%;就是根据已有宽度计算，padding-top:%;padding-top的px值就和宽度相同，这样，正方形就做出来了，在正方形里面position:absolute;一个div，width:%;height:%;然后在这个div里面布局就好。每个正方形的间距可以用qq空间的px的透明边框来做，也可以像sina微博一样，用左右padding和margin-bottom来做。一张图和四张图的时候，sina是另外写两个class来做的。qq空间是js插件写进去的，最大宽度是px，高度是根据最大宽度计算出来的。..px的线a.发现qq空间的细线，兼容倍屏和倍屏mediaonlyscreenand(-webkit-min-device-pixel-ratio:.),(min-resolution:dpi),(-ms-high-contrast:active),(-ms-high-contrast:none){.action.flex.dropdown-menu.btn:after,.action.flex:after,.action.flex:before,.feed.source:after,.min-ments.hr,.min-ments:nth-child():after{-webkit-transform:scaleY(.);-moz-transform:scaleY(.);-ms-transform:scaleY(.);-o-transform:scaleY(.);transform:scaleY(.)}.action.flex.dropdown-menu.btn:after,.action.flex:before,.min-ments:nth-child():after{-webkit-transform-origin:%;-moz-transform-origin:%;-ms-transform-origin:%;-o-transform-origin:%;transform-origin:%}.action.flex:after,.action.flex》.btn:after,.feed.source:after{-webkit-transform-origin:%;-moz-transform-origin:%;-ms-transform-origin:%;-o-transform-origin:%;transform-origin:%}}mediaonlyscreenand(-webkit-device-pixel-ratio:.){.action.flex.dropdown-menu.btn:after,.action.flex:after,.action.flex:before,.feed.source:after,.min-ments.hr,.min-ments:nth-child():after{-webkit-transform:scaleY(.);-moz-transform:scaleY(.);-ms-transform:scaleY(.);-o-transform:scaleY(.);transform:scaleY(.)}}mediaonlyscreenand(-webkit-device-pixel-ratio:){.action.flex.dropdown-menu.btn:after,.action.flex:after,.action.flex:before,.feed.source:after,.min-ments.hr,.min-ments:nth-child():after{-webkit-transform:scaleY(.);-moz-transform:scaleY(.);-ms-transform:scaleY(.);-o-transform:scaleY(.);transform:scaleY(.)}}b.weui的作法是.weui-cells:after{content:““;position:absolute;left:;bottom:;right:;height:px;border-bottom:pxsolid#eee;color:#eee;-webkit-transform-origin:%;transform-origin:%;-webkit-transform:scaleY(.);transform:scaleY(.);z-index:;}.背景图片尺寸background-size，img标签object-fit，object-position。background-size:contain|cover|auto%|%auto;这是以背景图的方式展示图片的，如果用img元素的话，object-fit:fill|contain|cover|none|scale-down;（和background-size效果类似object-position:center;和background-position的取值一样。这两个属性一起用的话，就能让img元素src的图片效果像背景图片的效果一样，不会因为图片尺寸不成比例而走形。但是兼容性不太好，目前只适合在移动端用。.阻止手机弹出默认菜单，长按img标签或者长按a标签会弹出系统默认菜单（ios上，安卓上没测。-webkit-touch-callout:none;.给文字写行高时，让文字垂直居中时，要把高度也一起写了，line-height:px;height:px;在用appcan做hybridapp时，发现在华为meta上，用ulli做九宫格，li浮动排在一行时，每个li有文字，高度用li的行高撑开的，没有文字的li和有文字的li的高度是不一样的。有的格子有文字有的没有文字，导致九个格子没有排在行，有格子掉下去了，排成了行。所以，在用行高让文字居中时，高度和行高要都写上。.text-align:justify;p标签内大段文字时，除了最后一行，其余的文字都是左对齐，导致段落文字距离右边间距明显大于左边。可以利用这个属性不处理最后一行的特性，做这种布局：上面这个布局有一点bug，最后一行是留白，把父级撑高了，原因是父级认为所有子代，包括空文本节点都是占据空间的，哪怕空格，也占据空间。可以给父级ul写font-size:；就能把底部留白去除了，然后给子代再写font-size:px;就可以了。但是，text-align:justify;毕竟是处理空格（拉伸空格来使内部元素水平分散，所以在html中，li要是连着写和分段写，表现结果是不一样的，所以这种奇妙的布局还是有些许不完美，甚至不能用。.去除-webkit-的滚动条#content::-webkit-scrollbar{display：none;}设置滚动条样式/*滚动条宽度*/#content::-webkit-scrollbar{width:px;}/*滚动条滑块*/#content::-webkit-scrollbar-thumb{background:rgba(,,,.);border-radius:px;}/*滚动条的整个背景*/#content::-webkit-scrollbar-track-piece{background:#eee;}TGuide/*scrollbar*/::-webkit-scrollbar{width:px;height:px}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-track{background-color:black}::-webkit-scrollbar-track-piece{background:#FFF}::-webkit-scrollbar-thumb{background-color:#EEE;border-radius:px}::-webkit-scrollbar-thumb:hover{background-color:#BBB}::-webkit-scrollbar-corner{background-color:#}/*::-webkit-scrollbar-resizer{background-color:#FFE}*/前面不加选择器表示，所有出现滚动条的元素。.设置placeholder的样式input::-webkit-input-placeholder{color:#;}input::-moz-input-placeholder{color:#;}input:-ms-input-placeholder{color:#;}注意-ms-前面是一个“：”。.移动端点击某一行:active时添加背景色，比如li:active{background:#eee;}时，要给body标签上写ontouchstart，否则没有效果。另一方面，给body添加，可以阻止图片被默认拖拽。百度的logo就可以被拖拽。.pageshow（和pagehide（方法。问题描述：A页面跳转到B页面，在B页面操作后，返回到A页面，A页面的ajax方法不能被再次触发。appcan里面从B页面返回A页面是直接关闭了B页面，微信里是从缓存里取。这两者都不能再次触发A页面的ajax。比如，修改姓名，修改性别。从A页面点击input跳转到B页面进行修改操作，修改完成之后返回A页面，发现信息没有刷新，此时需要主动触发。解决方法：可以监听pageshow方法，用addEventListener方法进行监听。pageshow（方法的触发条件是，只要页面被显示就触发，比如appcan里的B页面覆盖在A页面，把B页面关闭，A页面自然就展现出来了，那么A页面的pageshow方法就会触发；微信里，点击返回，虽然是从缓存里取页面，但也会触发pageshow方法。pagehide（顾名思义。.关于position。华为meta，安卓版本..，position:relative;的元素比position:absolute;的元素层级要高。百度新闻的导航效果，也是利用了这个。很奇怪。这种结构，i.line是absolute，每个div都是relative，安卓..上i.line会被父级的兄弟div遮挡住。解决办法是，把i.line拿出来，和div同级。.background:url()no-repeatcenter,url()no-repeatcenter;可以一次性放两个图片，中间用逗号隔开。.关于移动端软键盘弹起，盖住页面的问题。核心解决办法是利用document.activeElement.scrollIntoView(false);参数false，表示activeElement的元素与页面下边对齐，true表示activeElement的元素与页面上边对齐。这个方法兼容性很好。另一个方法与之类似document.activeElement.scrollIntoViewIfNeeded();这个方法效果不是很好，没有上面那个好用。.常见于小说、报纸排版的column布局。常用的个属性有个是知晓效果的：column-width:;每列的宽度。column-gap:;列与列之间的间距。column-fill:;不知有何软用。column-rule:;列与列直接的分割线，与border属性效果一样。column-count:;总共分多少列。（这个属性受column-width限制，当同时写上column-width和column-count时，以column-width优先，比如总宽度px，height:px;column-width:px;column-count:;显然，px最多只能分列，所以优先以column-width进行计算。小兼容：ios上，横向滚动overflow-x:auto;的容器不适合直接当成分栏布局的容器，应该在overflow-x的元素内嵌套一个div当做分栏布局的容器。否则会出现，分栏线，column-rule不跟随容器滚动的奇异现象。另外，column-gap不适合赋值，应当将column-gap写成，列与列之间的间距可以用分栏布局的子元素的左右padding来做。大段文字.box{width:px;height:em;overflow-x:auto;}/*滚动的容器*/.col{height:.em;text-align:justify;column-count:;column-gap:;}/*分栏的容器*/.col》p{padding:.em;line-height:.;}/*文字内容的容器，加左右padding以增加列与列之间的间距。*/四、貌似很多webapp都会写两个meta标签不确定是否支持进制的颜色值。（好像测试过，进制颜色没有效果。在appcan里也没有效果。五、一般不能上传相同图片可以用$(’input’).wrap(’’).closest(’form’).get().reset();重置后就可以了。六、在安卓上touchmove出现了神奇的bug，百度上说，安卓上touchmove的一瞬间就会触发touchcancel，touch事件就全部被取消了。IOS上是没有这个问题的。解决方法是：在touchmove里写e.preventDefault();即可。但是这样的话，手指滑动页面就不能scroll了。页面将无法滚动了。七、flex布局.年以后的版本给父级添加display:-webkit-flex;display:flex;flex盒子内子元素的排列方向称作主轴，与主轴垂直的称作交叉轴。flex盒子内的子元素可以被作项目。注意：设为flex后，其子元素的float、clear、vertical-align属性就会失效。a.作用于父级的个属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。//子元素的排列方向flex-direction:row（默认值，从左到右|row-reverse（从右到左|column（从上到下|column-reverse（从下到上;//子元素是否换行flex-wrap:nowrap（默认值，不换行|wrap（换行|wrap-reverse（换行，但第一行在下方;//子元素排列方向和子元素是否换行的简写flex-flow:rownowrap;（默认值，从左到右，不换行。//项目（子元素在主轴上的对齐方式justify-content:flex-start（默认值，以起点为始|flex-end（以终点为始|center（居中|space-between（首尾两个元素紧贴边界，其余元素之间间隔相等|space-around（每个项目的两侧间隔相等，相当于给每个项目加了margin，并且左右margin相等。所以首尾元素与边界都是有间距的。;//项目（子元素在交叉轴上的对齐方式align-items:flex-start（以起点为始|flex-end（以终点为始|center（居中|baseline（与项目的第一行文字的基线对齐|stretch（默认值，在交叉轴方向撑满父级;//多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。align-content:flex-start（与交叉轴的起点对齐|flex-end（与交叉轴的终点对齐|center（与交叉轴的中点对齐|space-between（与交叉轴两端对齐，轴线之间的间隔平均分布|space-around（每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍，第一行和最后一行不会紧贴边框|stretch（默认值，铺满整个交叉轴;（align-content：stretch;第一根轴线与边框对齐，其他轴线均分父级间隙。b.作用于项目（子元素的个属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。//子元素的排列顺序order:（默认值|||...//项目（子元素的放大比例flex-grow:（默认值，默认不放大，尽管有剩余空间|||...//项目的缩小比例flex-shrink:（默认值，当空间不足时，该项目将缩小|（不论如何，都不缩小;//项目占据的主轴空间flex-basis:auto（默认值，项目本来的大小|固定值（px，%，%...;//flex-grow，flex-shrink，flex-basis的简写flex：auto；flex:auto（默认值，有多余空间也不放大，但空间不足会缩小，默认占据空间就是自身大小;flex:auto;=》flex：auto;根据空间大小，可放大可缩小。（有兼容性问题，chrome可以正常解析flex：auto;--flex：auto;但IE就搞笑了，IE解析出来的flex：auto--flex：auto；只放大，不缩小。IE解析出来的flex：auto；和chrome一样，可放大可缩小。所以在用这个属性的时候，要写完整值，不要简写。flex:none；--flex：auto；不放大，也不缩小。//单个项目与其他项目不一样的对齐方式，会覆盖父级的align-items;align-self:auto（默认值，继承父级的align-items的值|flex-start|flex-end|center|baseline|stretch;除了auto，其他的与父级align-items属性一致。注意要活用align-self：stretch;和align-items：stretch;.年的版本目前新版本被支持的很好，所以旧版的直接写带前缀的。display:-webkit-box;display:-ms-flexbox;子元素如果有display：inline的，要把子元素写成display：block;年的版本不需要。a.父级的个属性。-webkit-box-pack，-webkit-box-align，-webkit-box-direction，-webkit-box-orient，-webkit-box-lines。//项目在主轴上的对齐方式-webkit-box-pack:start（默认值，从起点开始|end|center|justify;//项目在交叉轴上的对齐方式-webkit-box-align:stretch（默认值，交叉轴方向撑满父级|start|end|center|baseline;//项目的排列顺序-webkit-box-direction:normal（默认值，以起点为始|reverse（以终点为始;//主轴方向-webkit-box-orient:horizontal（默认值，水平方向|vertical（垂直方向|inline-axis（行内方式，映射为horizontal|block-axis（块方式排列，映射为vertical;//项目（子元素是否换行box-lines:single（默认值，不允许|multiple（允许;经测试，没有浏览器支持，这个属性不能用。b.子元素的个属性。box-flex，box-flex-group，box-ordinal-group。//是否缩放-webkit-box-flex:（默认值，不放大也不缩小|||...;//子元素排列次序-webkit-box-ordinal-group:||...从小到大排列。.对、的小结。年版本比年的版本主要多了两个属性，个是子元素是否换行，flex-wrap，年的box-lines不起作用。还有一个是子元素在主轴的对齐方式，年的justify-content:space-around;年的没有这个效果，但是可以通过加左右padding值的方式做到。如果要兼容年版本的盒子布局又想换行的，只能改用float布局。八、html结构嵌套问题p标签内不要嵌套块元素，其他的像h、p、dl...的块元素都会发生解析错误。可以嵌套行间元素。类似的，还有a标签里不能再出现a标签，嵌套多少层都不行。html标签嵌套要按照块元素包含行间元素的规则来写。九、标签让浏览器用最新内核渲染。十、form标签一点特性在移动端，input框获取焦点时，浏览器会弹出软键盘，想让软键盘的enter键变成搜索两个字，需要让这个input按照这种结构写：说明：onsubmit=’returnfalse’;阻止表单默认提交，便于自己操作。input的type必须是search。input的加了style=’position：relative;’，防止ios上点击搜索按钮会闪屏（白屏。十一、浏览器兼容.关于table表格的宽度设置问题。Firefox和chrome的解析方式是不一样的，chrome会把你写的table宽度全部转化成px。Firefox则不会，所以在td写行间样式宽度时，不能百分比和px混用，要统一，要么每个td都写百分比的宽，要么都写px的宽；不要这几个td写百分比，那几个td写px。.某些安卓不识别height:calc（;可以用flex布局代替。十二、KTV字幕效果实现方式：把文字写两遍，两个行间元素span，包裹相同的文字。首页首页或者首页首页实现原理是：让内部两个span宽度相等，其中一个设置width:%；overflow:hidden;然后用js动态控制width从%--%。实现方式：（张鑫旭说只适用于chrome，但是我测了下，好像firefox也是可以的。实现原理：background-image是覆盖在background-color上的，chrome有个私有属性-webkit-background-clip:text;意为背景裁切，以文字为裁切起止。效果就是背景图片只会展示文字的书写路径，除了文字的其他部分空间不展示背景图。再结合-webkit-text-fill-color:transparent;将文字渲染的颜色写为透明，这样，文字路径就透出了背景图。再改变背景图片的水平位置，就能露出文字和背景图片下的背景颜色，就做到KTV字母效果了。核心的css属性：background-image:url();/*纯色的背景图，用来渲染文字颜色，因为文字是透明的。*/background-repeat:no-repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-position:;↑改变他就可以了。关于实现方式的图示：

　　⒄css我定义了一个class，但我想他图片变大，怎么设置他的长度和宽度

　　⒅设置为float的div在ie下设置的margin会加倍。这是一个ie都存在的bug。解决方案是在这个div里面加上display:inline;/***************************这里细说一下block与inline两个元素**************************/：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);#box{display:block;//可以为内嵌元素模拟为块元素display:inline;//实现同一行排列的效果diplay:table;/******************************IE不认得min-这个定义***************************/，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#boxhtml》body#box、/*******************页面的最小宽度**************************************************/min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个《div》放到《body》标签下，然后为div指定一个类,然后CSS这样设计：#container第一个min-width是正常的；但第行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。/*************************.DIV浮动IE文本产生象素的bug*****************************/左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有px的间距.#box#left#right*html#left《divid=“box“》《divid=“left“》《/div》《divid=“right“》《/div》《/div》/*****************************.IE捉迷藏的问题**************************************/当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。/*****************.float的div闭合;清除浮动;自适应高度;***************************/①例如：《#divid=”floatA”》《#divid=”floatB”》《#divid=”NOTfloatC”》这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在《#divclass=”floatB”》《#divclass=”NOTfloatC”》之间加上《#divclass=”clear”》这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clear②作为外部wrapper的div不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden;当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:;可以做到，这样就达到了兼容.例如某一个wrapper如下定义:.colwrapper③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的floatdiv后面做一个统一的背景,譬如:《divid=”page”》《divid=”left”》《/div》《divid=”center”》《/div》《divid=”right”》《/div》《/div》比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着leftcenterright的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决《divid=”page”》《divid=”bg”style=”float:left;width:%”》《divid=”left”》《/div》《divid=”center”》《/div》《divid=”right”》《/div》《/div》《/div》再嵌入一个floatleft而宽度是%的DIV解决之④万能float闭合(非常重要!)关于clearfloat的原理可参见,将以下代码加入GlobalCSS中,给需要闭合的div加上class=“clearfix“即可,屡试不爽./*ClearFix*/.clearfix:after.clearfix/*HidefromIEMac*/.clearfix/*EndhidefromIEMac*//*endofclearfix*/或者这样设置：.hackbox/*******高度不能自适应*********************************/.高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin或paddign时。例：#box#boxp《divid=“box“》《p》p对象中的内容《/p》《/div》解决方法：在P对象上下各加个空的div对象CSS代码：.或者为DIV加上border属性。、/******IE下为什么图片下有空隙产生********************/解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top|bottom|middle|text-bottom都可以解决.如何对齐文本与文本输入框*************************/加上vertical-align:middle;《styletype=“text/css“》《!--input--》《/style》/*********************.web标准中定义id与class有什么区别**********************************/一.web标准中是不容许重复ID的,比如divid=“aa“不容许重复次,而class定义的是类,理论上可以无限重复,这样需要多次引用的定义便可以使用他.二.属性的优先级问题ID的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单./*************.LI中内容超过长度后以省略号显示的方法***************************/此方法适用与IE与OP浏览器《styletype=“text/css“》《!--li--》《/style》、滚动条颜色的设置问题/****************为什么web标准中IE无法设置滚动条颜色***************/解决办法是将body换成html《!DOCTYPEhtmlPUBLIC“-//WC//DTDXHTML.Strict//EN“““》《meta对IE和FF的兼容可以考虑以前的!important个人比较喜欢用另外,团IDC网上有许多产品团购,便宜有口碑

　　⒆用css如何设置页面居左

　　⒇用css设置页面居左，首先我们需要写好一个div然后设置好它的宽高，然后在使用margin来操作，使它距离浏览器的左边为就行了，marign的用法如图：

　　⒈添加一个border方便观察，具体看代码：

　　⒉height:px;

　　⒊font-size:px;

　　⒋border:pxsolid#f;

　　⒌margin:px;

　　⒍《divclass=’div’》

　　⒎《p》我是测试文字《/p》

　　⒏我给楼主看了一下```你要的效果没说清楚`如果想显示出下拉列表直接删掉#menulidd{}就可以了。如果想鼠标移动后，出现下拉列表，我没看到楼主定义这个类型，所以给楼主一个我以前写的，仅供参考。.imcmul,.imcmli,.imcmdiv,.imcmspan,.imcma{text-align:left;vertical-align:top;padding:px;margin:;list-style:noneoutsidenone;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcmliaimg{display:inline;border-width:px;}.imcmspan{display:inline;}.imcm.imclear,.imclear{clear:both;height:px;visibility:hidden;line-height:px;font-size:px;}.imcm.imsc{position:relative;}.imcm.imsubc{position:absolute;visibility:hidden;}.imcmli{list-style:none;font-size:px;float:left;}.imcmululli{width:;float:left!important;}.imcma{display:block;position:relative;}.imcmul.imsc,.imcmul.imsubc{z-index:;}.imcmulul.imsc,.imcmulul.imsubc{z-index:;}.imcmululul.imsc,.imcmululul.imsubc{z-index:;}.imdeulli:hover.imsubc{visibility:visible;}.imdeululli:hover.imsubc{visibility:visible;}.imdeulululli:hover.imsubc{visibility:visible;}.imdeli:hoverul.imsubc{visibility:hidden;}.imdeli:hoverulul.imsubc{visibility:hidden;}.imdeli:hoverululul.imsubc{visibility:hidden;}.imcm.imea{display:block;position:relative;left:px;font-size:px;line-height:px;height:px;width:px;float:right;}.imcm.imeaspan{display:block;position:relative;font-size:px;line-height:px;}.dvs,.dvm{border-width:px}/**//*/.imcm.imea{visibility:hidden;}/**/《/style》《!----》《!--end--》《!--***InfiniteMenuStyles:Keepthissectioninthedocumentheadforfullvalidation.--》《styletype=“text/css“》/*----*/#imenus.imeamspan,#imenus.imeamjspan{background-image:url(bg-daohangS.jpg);width:px;height:px;left:px;top:px;background-repeat:no-repeat;background-position:topleft;}#imenusli:hover.imeamspan,#imenuslia.iactive.imeamjspan{background-image:url(bg-daohangS.jpg);background-repeat:no-repeat;background-position:topleft;}/*----*/#imenusul.imeasspan,#imenusul.imeasjspan{background-image:url(stub_arrow_right.gif);width:px;height:px;left:px;top:px;background-repeat:no-repeat;background-position:topleft;}#imenusulli:hover.imeasspan,#imenusullia.iactive.imeasjspan{background-image:url(stub_arrow_right.gif);background-repeat:no-repeat;background-position:topleft;}/*----*/#imouter{background-color:#D;border-style:none;border-color:#;border-width:px;padding:px;margin:px;}/*----*/#imenusliul{background-color:#d;border-style:solid;border-color:#a;border-width:px;padding:pxpxpxpx;margin:px;}/*----*/#imenuslia,#imenus.imctitle{height:px;background-color:#D;color:#;text-align:left;font-family:Arial;font-size:px;font-weight:normal;text-decoration:none;padding:pxpxpx;margin:pxpxpxpx;}/*-ThesesettingsmustbeduplicatedforIEpatibility.*/#imenusli:hover》a{background-color:#B;text-decoration:none;}#imenuslia.ihover,.imdeimenusa:hover{background-color:#d;text-decoration:none;}/**/#imenuslia.iactive{}/*----*/#imenusula,#imenus.imsubcli.imctitle{height:auto;background-color:transparent;color:#;text-align:left;font-size:px;font-weight:normal;text-decoration:none;border-style:solid;border-color:#d;border-width:pxpx;padding:pxpx;margin:px;}/*-ThesesettingsmustbeduplicatedforIEptatibility.*/#imenusulli:hover》a{background-color:#B;text-decoration:none;border-color:#a;}#imenusullia.ihover{background-color:#B;text-decoration:none;border-color:#a;}/**/#imenusullia.iactive{}

　　⒐css中height出错

　　⒑除非你在box的父元素box加个明确的高度，否则是不可能实现的。

　　⒒《!doctype?html》《html》《head》《meta?charset=“utf-“》《title》无标题文档《/title》《style》.clearfix?{clear:?both;}.box?{border:?px?solid?blue;height:?px;}.box?{float:?left;background-color:?red;width:?px;height:?px;}.box?{float:?left;background-color:?orange;width:?%;height:?%;}《/style》《/head》《body》《div?class=’box’》《div?class=“box“》《/div》《div?class=“box“》《/div》《div?class=“clearfix“》《/div》《/div》《/body》《/html》