html.css
HTML元素分为两种类型: 1)块级元素:换行 div、p、form、blockquote、 2)行内元素:不换行 所有的表单子元素、a、span、img、........
所有元素在浏览器中都是一个盒子。块级元素的盒子要填满整行,所以块级元素是从上到下排列。 块级元素内部,可以嵌入块级元素以及行内元素。
行内元素是在一个 行内元素元素内部,不能包含块级元素,但是可以包含行内元素。
行内元素和块级元素是可以相互变换的,通过CSS来实现。
可替换元素: 元素的表现形式由元素的属性以及内容来决定的。 <img src=""> 不可替换元素:元素的表现形式是由元素的内容来决定的。 <p>.....</p 命名法则: 1)Pascal法则:EmployeeStudent() 2)Camel法则:getElementById() 3)匈牙利法则:txtUserName/strUserName/nAge/btnExit()
CSS层叠样式表
HTML是定义一个文档的结构; CSS就是定义如何让HTML文档在不同的设备上显示。文档的表现形式。
为什么要用CSS?
如何在HTML文档中引入CSS: 1)用html元素的style属性。(JavaScript编程时,会用到) 2) 用style元素内部样式表(自己调试代码的时候会用到) 3)用link元素引入一个外部的样式表。(正规做项目的时候,都是采用外部样式表)
层叠样式表: 继承:子元素继承父元素的一些CSS样式。 层叠:
CSS基础语法
DOM(document Object model,文档对象模型)
选择器的类型: 1)基本选择器 元素选择器(又称类型选择器): ID选择器 # : <p id="p1">Hello</p> 类选择器 . : <p class="p1 p2">hello</p> 通配符选择器 * 属性选择器
2)组合选择器 相邻兄弟选择器 通用兄弟选择器 子选择器 后代选择器
3)伪类选择器
4)伪元素选择器
盒模型(Box Model)
所谓盒模型,是指元素在浏览器中都是以盒子的形式存在。 <p>Hello</p> 内容部分:Hello Padding: 内边距 Border: 边框 Margin: 外边距 width: 宽度 height: 高度 方向:上、右、下、左,顺时针方向
W3C计算方式: 总宽度 = margin-left + margin-right + padding-left + padding-right + border-left + border-right + width 总高度 = margin-top + margin-bottom + padding-top + padding-bottm + border-top + border-bottom + height
font-family:设置字体家族 优先级:英文放在中文的前面,否则英文字为采用中文字体,这样就很不好看了。 要考虑操作系统的字体兼容性。
width/height一般只针对块级元素(除了行内元素img)。 max-width: min-width:
文档类型定义很重要,兼容性问题。
文档流 1)正常的文档流 块级元素从上到下一个一个排列 行内元素从左到右一个一个排列。 2)浮动 display: none、block、inline......... float: none、left、right 当一个元素的display属性设置为left、right,那么这个元素就成了块级元素。 一个元素的float属性为left或者right的时候,那么该元素就从正常文档流中脱离出来。 clear: 清除浮动的影响 3)定位属性 position: 静态定位:static,正常文档流。 绝对定位: absolute,完全脱离正常文档流,相对于父级容器移动。原来的位置不保留。 注意:绝对定位的起点位置是相对于它的第一个position值不为static的父元素而言。如果没有父元素满足条件,那么它就是相当于文档窗口来定位的!!!!!!! 相对定位:relative,脱离正常文档流,相对于自身以前的位置移动。原来的位置保留。 固定定位:fixed。相对于视口固定不变。原来的位置不保留。它实际上是绝对定位的一种。 示例: 典型的三行三栏布局 <div id="container"> <div id="header"></div> <div id="left"></div> <div id="content"></div> <div id="right"></div> <div id="footer"></div> </div> 1)用绝对定位布局 如果让container居中,会出什么问题? 解决方案: container的position: relative; why? 2)header固定,下面的可以滚动 header的position设置为fixed,z-index:1
1)深入盒模型 页面每一个元素实际上都是以盒子的形式存在。 内容box:width/height Padding box: 上、右、下、左, 缩写 Border box: 1px solid black,四个方向都可以设置 Margin Box: 四个方向。auto,还可以使负值。 background-color/background-image背景只是在Padding范围内。 Margin是透明的。 盒子类型: 1)块级盒 2)行内盒 2)深入float float:none/left/right; clear: both/left/right; 浮动的规则 1)浮动的元素要从正常文档流中删除,但是它会影响其他的元素,也就是说它会影响布局。 2)浮动的非替换元素必须要指定width,否则元素的宽度会趋于0,从而导致浮动元素不能完整显示。 3)如果设置了float属性left/right,那么该元素就成为了一个块级元素。 4)浮动的元素左右外边界不能超出包含块的左右内边界。(Containing Block) 5)浮动的元素永远不会重叠 6)浮动元素不会超过容器的上Padding。 7)后浮动的元素永远不会超过先浮动元素的顶端 8)浮动元素会尽可能高的放置,但是这个高要受制于前面两条6、7。 9)浮动元素的下边界没有要求,因此当容器容纳不下浮动元素的时候,它就会向下延伸。部分的浏览器会增大容器的高度以容纳下浮动元素。而符合CSS2.1规范的浏览器,要想让容器容下浮动元素,让容器也浮动起来。 10)浮动元素向下延伸的时候,不会影响正常文本的显示,但是文本会相对于浮动元素偏移,而且部分文本背景会被浮动元素遮住。 11)如果浮动的元素设置的负边距,那么就会破坏规则4/6/7。 12)当浮动元素的宽度小于容器的宽度时,浮动元素会超出容器的左右边界。 13)浮动重叠的规则: 行内盒与浮动元素重叠时,那么行内盒的边框、背景和内容都会位于浮动元素上面。 块级元素与浮动元素重叠时,边框、背景在浮动元素之下,而内容在浮动元素之上。 14)如果对每个元素应用了clear:left,那么这个元素的左边就不能有浮动元素。 15)clear不能用于行内元素。<br /> 16)如果对某个元素应用了clear来清除浮动,那么该元素上设置的上margin就会被忽略。但是,会有一个重新计算的上margin(有可能为0)。如果我们希望这个元素和浮动元素之间有一个明确的间隔,应该在浮动元素上设置下Margin。
3)继承、层叠、权重(特殊性)
继承:特定的CSS属性向下传递到子孙元素。 让开发者更轻松,否则我们就要对所有子孙元素指定属性。 CSS文件尺寸就会大大增加,难以维护、降低下载速度。 注意:并非所有属性都支持继承。 文本相关的属性 列表相关属性 颜色相关属性 特殊的font-size继承的是计算的值。 浏览器默认的font-size(假如是16px)和EM值(假如是.85em)被用来生成计算后的值(16px * .85 em=13.6px),此计算值被后代继承。 层叠: 不同的样式表会按照优先级层叠应用在页面元素上。 不同的样式规则会按照权重层叠应用在页面元素上。 优先级:(从低到高) 浏览器默认的样式声明 用户的普通样式声明 网站的普通样式声明 网站的!important声明 用户的!important声明 权重(特殊性) 1.style属性的内嵌样式表,权值为1000 2.ID选择器: 权值为100 3.类、伪类和属性选择器,权值为10 4.元素选择器和伪元素选择器,权值为1 其他选择器都是0,例如通用选择器等。
#nav .p1 > p > .p1 .asd .asdasdf #l1 a {} 100+10+1+10+10+10+100+1=242 .asdfas a {} 10+1=11
4)表单
5)表格
6)格式化上下文
块级格式化上下文(block Formatting Content, BFC) BFC是一个独立的布局环境,可以理解为一个箱子,箱子里面的元素的布局是不受外界影响的,也不会影响外界的元素。 触发条件: 1)float不等于none; 2) overflow不等于visible; 3)display为table-cell、table-caption、inline-block; 4)position为absolute和fixed 5)fieldset 有什么作用呢? 1)阻止margin重叠 2) 边缘不会和浮动的盒子重叠