黑马程序员技术交流社区
标题: 【前端与移动开发】学习经历 [打印本页]
作者: 啊哈哈啧啧 时间: 2018-9-14 12:54
标题: 【前端与移动开发】学习经历
textarea控件(文本域)
- 语法：
<textarea >
文本内容
</textarea>
- 作用：
通过textarea控件可以轻松地创建多行文本输入框.
文本框和文本域的区别
文本框只能显示一行文本，通过value显示默认值，通常用于用户名、昵称、密码等场景
而文本域可以显示多行文本，默认值写到标签中间，通常用于留言板
表单标签， input一些文本框 select 下拉列表 textarea文本域。 text 是文本框属性
font:综合设置字体样式
基本语法格式如下：
选择器 { font: font-style font-weight font-size/line-height font-family;}
字体连写，连写的字体属性必须要有font-size和font-family，line-height行高不是必须的。Font-weight字体加粗 style字体倾斜 font-size和font-family先后顺序不可以调换
选择符优先级的计算公式
#ID > .class > 标签选择符 !important 优先级高
哪些 css 属性可以继承？
可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin
CSS中行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
块级元素(block)特性：
•总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
•宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
•和相邻的内联元素在同一行;
•宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），如<input> 、<img> 、<button> 、<textarea> 、<label>。
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认
的 display 值，比如 div 默认 display 属性值为“block”，成为“块级”元素；span 默认
display 属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul
ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：
<br><hr><img><input><link><meta>鲜为人知的是： <area><base><col><command>
<embed><keygen><param><source><track><wbr>
padding不影响盒子大小情况
如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
清除浮动的原因
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
有如下方法：
1.额外标签法
在浮动元素末尾添加一个空的标签例如 <div style=
”clear:both”></div>，或则其他标签br等亦可。 2.父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。不过内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3.使用after伪元素清除浮动
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
4.使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |