HTML是什么的英文缩写?CSS是什么的英文缩写?
HTMLHyperTextMark-upLanguage(超文本标记语言或超文本链接标示语言)的简称,是WWW的描述语言.
CSS是Cascading Style Sheets(层叠样式表)的简称,是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
- google chrome字体小于12px的时候都以12px显示,但将google chrome的语言设置成英文就没这个问题,原因WebKit 核心的人性化考虑之一,小于 12 的中文字体通常看不清楚。(针对谷歌默认最小字体12px的正确解决方案 (css、html))
- 【body】
注意body元素默认高度是没有的,即0;默认宽度是页面的宽度,可以加border边框进行测试。 - 【input、button区别】
<input type="" value=""> type有多种
<button type="" value=""> type有三种 :button、reset、submit
value="" 为输入框中初始值
<button value="a">b</button>中初始值a会被b的值覆盖
<input type="button"/>与<button type="button"></button>作用相同 - 【inline、block、inline-block区别】
inline行内元素,无内容则不占空间
可设置padding,margin-left,margin-right
不可设置margin-top、margin-bottom
block块级元素,不管有没有内容,可设置padding、margin
inline-block,表现为行内,可像block一样设置 - 【a有哪些属性】
主要属性有href、target
href=“#”表示跳转到本页面
taget四种属性值:_black、_parent、_self、_top
- 【有些标签不能相互嵌套】
a标签不能嵌套a标签,p不能嵌套p标签,span中可以嵌套span
''' <a>
<a></a>
</a> '''
自动变为:
''' <a></a>
<a></a> ''' - 【css3中的rgba】通过rgba设置透明度,可防止子元素继承父元素的透明度
- display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法
- 【css边框重叠问题1px变2px】
表格可通过设置border-collapse:collapse;合并重叠边框
列表可通过设置li:last-child{border-botton:none}
普通自定义列表如div > a可通过设置a{margin-top:-1px;}
- 【height:auto/100%】
height:auto, 是指父元素 根据块内内容自动调节高度
height:100%,是指子元素 相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度
用处:
当容器的大小需要根据内容变化的时候用auto,比如你在一个div里面显示文字内容,可以设置div的高度auto,他的高度就根据你的文字内容变化。若设置固定高度,有可能出现空白或者滚动条 - 【min/max-height】
我们设置2个盒子一个限制最小高度,一个设置限制最大高度,
最小高度限制的对象
如果内容不多不会超出限制最小高度,此时对象会显示最小高度限制值,
如果内容多超过了最小高度限制,此时对象会自动增高。
最大高度限制的对象
如果内容少时候没有区别,
如果内容多超过了最大高度限制,此时对象本身还是最大高度,可使用css overflow属性隐藏溢出内容。
- 【table】
因为表格的特殊性。
table tr 的padding css 属性设置无效 ,tr、 td 的 margin 属性设置无效 ,td的padding有效
如果非要给tr加边框那必须先将table设置为边框分开显示
table{ border-collapse:collapse } 加上这个 你再设置tr{border:1px solid red} 试一试 - 【input样式】
去掉输入框的边框及改变背景色:
border:none;
background-color:blue;
去掉有焦点时候的边框:outline:none;
【textarea样式】
去掉边框右下角的小角:resize:none;
在textarea的placeholder中换行
可通过加入& #13;& #10;eg:placeholder="xxx& #13;& #10;xxx"(注:转义字符中无空格)
- 【box-sizing】
语法:box-sizing:content-box|border-box|inherit;
- content-box:W3C/标准盒模型
可以使设置的width和height值应用到元素的内容框。盒子的width只包含内容。 - border-box:IE盒模型
可以使设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
兼容性:
①非IE:默认是content-box
②IE:早期的IE(5.5版本)用的是IE盒模型,而从IE6开始,只要在文档中声明(添加doctype)则,兼容使用W3C盒模型。
如果IE678未添加doctype,即怪异模式,那么也是用IE模型。
从IE9以后,则不用填写声名也用的是W3C模型。
- 【display】
display有哪些属性?
除下图中的属性还有flex、inline-flex属性
详解:
- 【position】