码迷,mamicode.com
首页 > Web开发 > 详细

html.css

时间:2014-11-12 00:17:01      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:style   io   color   ar   os   java   sp   for   文件   

 

 

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) 边缘不会和浮动的盒子重叠

html.css

标签:style   io   color   ar   os   java   sp   for   文件   

原文地址:http://www.cnblogs.com/9192miss/p/4090877.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!