黑马程序员技术交流社区

标题: 【前端与移动开发】学习经历 [打印本页]

作者: 啊哈哈啧啧    时间: 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-sizefont-familyline-height行高不是必须的。Font-weight字体加粗 style字体倾斜 font-sizefont-family先后顺序不可以调换
选择符优先级的计算公式
#ID > .class > 标签选择符 !important 优先级高
哪些 css 属性可以继承?
可继承: font-size font-family color, ul li dl dd dt;
不可继承 border padding margin
CSS中行内元素和块级元素的具体区别是什么?行内元素的paddingmargin可设置吗?
块级元素(block)特性:
•总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
•宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
•和相邻的内联元素在同一行;
•宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变(也就是paddingmarginleftright是可以设置的),就是里面文字或图片的大小。浏览器还有默认的天生inline-block元素(拥有内在尺寸,可设置高宽,但不会自动换行),如<input> <img> <button> <textarea> <label>
行内元素有哪些?块级元素有哪些? (void)元素有那些?
1CSS 规范规定,每个元素都有 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 h4p
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属性方法
        可以给父级添加: overflowhidden| auto| scroll  都可以实现。不过内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
3.使用after伪元素清除浮动
         .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
.clearfix {*zoom: 1;}   /* IE67 专有 */
4.使用双伪元素清除浮动
        .clearfix:before,.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
  *zoom:1;
}






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2