2016/12/8前端学习笔记CSS开始。

无序列表 ul>li:ul里只能有li,并且li里面可放元素却很多。li是容器级标签,什么都能放。

有序列表 ul>ol:一般不用 一般都是用ul>li

2 定义列表 dl:表示定义列表 dt定义标题 dd定义表述词儿(真实案例)京东下面购物指南。用什么标签不是根据样式决定 是根据语义

div容器级 span文本级(只能放文字图片表单元素)

4 表单:用于收集用户信息,用户填写的。

4.1 文本框:<input type=“text” value="默认有的值"/>

4.2 密码框:<input type="password"/>

4.3 单选按钮:<input type="radio" name="xingbie”/>男

<input type="radio" name="xingbie”/>女name相同是为了互斥

4.4 复选框:<input type="checkbox" name="aihao"/>睡觉

<input type="checkbox" name="aihao"/>吃饭

<input type="checkbox" name="aihao"/>玩儿

4.5 下拉列表

select>option

4.6 多行文本框

<textarea cols="30" rows="10"></textarea>

4.7 三种按钮

<input type="button" value="按钮上显示的值"

<input type="submit"/>按钮上自动生成提交两个字(相关面试题:submit按钮点击之后会发生什么?答:表单会提交到form标签的那个action属性的页面中去)

<input type="reset"/>重置按钮

总结上述input类型:text password radio checkbox button submit reset 7个

4.7 label标签为了与input关联起来

<input type="radio" name=‘sex" id="id1" /><lable for="id1">地址1</label>(相关面试题:lable的for对应着input的什么:答:id)

5 css : HTML 超文本标记语言 从语义的角度描述页面结构

CSS 层叠式样式表 从审美的角度负责页面样式

JS 从交互的角度描述页面行为

容易忘记的属性 :font-style:italic; font-syle:normal           text-decoration: underline; text-decotration:none;

6 选择器部分: 一个页面不允许出现相同的id. 类可以相同 拥有两个类的写法是class="class1 class2"

后代选择器: .div p{}

交集选择器:h3.special{}

并集选择期:h3,special{}

 7 兼容性选择器:IE7开始兼容,IE6不兼容。 div>p

IE7开始兼容,IE6不兼容。h3+p{} (下一个兄弟选择器) 

IE8开始兼容,IE6 IE7不兼容。选择第一个li:ul li:first-child 选择最后一个li: ul li:last-child(一般都是自己定义类名再选择)

8 css的继承性:可以继承的属性:color ,text-开头的,line-开头的,font-开头的关于文字样式的都可以继承。

不能继承的属性: 关于盒子的,定位的,布局的属性都不能继承。()此处引入原型继承面试题:这个问的是写一个代码实现原型继承。(面试太紧张忘了 本来就不熟)

9 关于层叠属性 :id  类  标签的数量

10 !important 属性 相当于权重无限大,但是无法提升继承的权重。比如div>p div{color;red !important;}p{color:white;} 听p的。p标签是实际选中的

11 什么叫盒子 略。border;上右下左。

12 块级元素和行内元素(面试有问到过)什么是块级与行内元素:答:块级元素 霸占一行,不与其它元素并列 可设宽高 如果未设将撑满父亲

行内元素 与其它行内元素并排 不能设置宽高。是文字的宽度。

为了方便记忆:可看为块级元素; help(h li p) 三弟(div dt dd)


13 相互转换display: block, inline 还要注意inline-block;

14 元素脱离标准文档流有三种方法: 14.1 浮动 14.2 绝对定位 14.3固定定位 脱标之后可设置宽高。不区分行内,块级。

15 

16  浮动起来的盒子 相对于不浮动的字 有字围效果。

17 清浮动 1 给浮动的元素祖先加高度。

     2 下盒子添加一个类box2{ clear:both;}(此时margin会失效)

      3两个盒子中间加一个div并添加上述clear: both类,并添加盒子中间空隙高度类

      4 父亲加 overflow:hidden; (偏方)

时间: 2024-08-02 11:04:27

2016/12/8前端学习笔记CSS开始。的相关文章

2016/12/10前端学习笔记CSS结束+JS开始。

18 浏览器兼容问题:IE6不支持小于12px的盒子,兼容方式: height:4px; _font-size:1px; IE6不支持overflow:hidden的方法清除浮动,所以,需要 用 : overflow: hidden; 与_zoom:1;两条代码做兼容处理 css属性之前加上下划线是IE6的专有属性 例如:_background-color:red; 19 margin的塌陷:在标准文档流中竖直方向的margin会有已较大margin 为准的塌陷现象.但是浮动后没有塌陷. 20

2016/12/11前端学习笔记JS结束Jquery开始。

35 offsetWidth 于offsetHeight都是指盒子的实际大小,不包含margin 包含 width/height+padding+border. offsetTop与offsetLeft是表示的相对于最近的父级元素的位置.若都没有 以body为准.上述四个返回的都是数值 36 offsetParent(返回带有定位的父级若没有返回body) 注意与parentNode区分. 37 box.style.left与box.offsetLeft的区别. 1 offsetLeft可返回未

web前端学习笔记(CSS固定宽度布局)

Posted on 2013-09-29 09:12 Stephen_Liu 阅读(2443) 评论(3) 编辑 收藏 一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定宽度布局</title> <style type="text/css"> #h

web前端学习笔记(CSS盒子的浮动)

Posted on 2013-09-18 09:00 Stephen_Liu 阅读(2205) 评论(6) 编辑 收藏 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里

web前端学习笔记(CSS变化宽度布局)

Posted on 2013-09-30 09:03 Stephen_Liu 阅读(2406) 评论(6) 编辑 收藏 一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按照一定的比例同时变化,还是一列固定,另一列变化.这两种都是很常用的布局方式.然而对于等比方式而言,相对比较简单,和我上一篇博客中1-2-1的布局方式非常类似,因此这里只是介绍一列固

前端学习笔记 - Css初级篇

有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可以知道的是,行内元素和块级元素之间是能够相互转换的.趋于对网页模块化的搭建,后期行内转换为块级的例子会很多很多. html中的块级元素列举如下: div(文档分区),article(文章内容), aside(伴随内容), audio(音频播放), blockquote(块引用), canvas(绘制

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意