Html+Css笔记

在css的标准当中，css认为所有标签都是一个规则的矩形盒子；

【盒子模型】

盒子模型主要可以用来布局，或者处理网页制作中很麻烦的距离部分的工作；

（1）别管是内边距padding还是外边距margin；都是在原有尺寸上增加；

（2）内边距和外边的用法完全相同；所以只要理解其中一个即可；如果你希望观察到内边距和外边距的范围需要在火狐里面firebug中观察；

（3）在firebug中浅蓝色的范围表示的是实体范围=宽度和高度的范围；与它比较接近的颜色紫色表示内边距的范围；颜色上反差很大的黄色表示外边距的范围；

（4）盒子一共有两种尺寸，1 总尺寸， 2 实体范围

（5）盒子两种尺寸的计算方法；

1.实体高度 =盒子高度+上下内边距高度+边框线上下高度；

2.总高度 = 盒子高度+上下内边距高度+上下外边距高度+边框线上下高度；

换句话说内边距也算作实体的范围；

（6）padding的4种简写形式；

                 1. 一个值的时候表示上下左右都是相同的距离；

2. 两个值  表示 上下 和 左右的距离；

3.三个值 表示 上 左右 下；

4.四个值 表示 按顺时针进行设置 上 右 下 左；

特点：第二个值永远是设置的左右的距离；

设置盒子模型居中的方法： margin：0 auto；

但是要注意：盒子居中的条件；1.一定要有宽度；2.必须是块级元素；其他类型无效；

外边距塌陷规则；首先外边距塌陷是一个普遍存在的浏览器现象；

外边距 只会在垂直之间产生塌陷；水平之间不受影响；

垂直之间塌陷的原则是以两方最大的外边距为准；

（水平外边距是相加；而垂直外边距取最大值；）

list-style:none; 1默认disc黑点；2 circle 空心圆； 3 square 矩形方；none表示没有；

背景图本身是不占位置不占空间的，但是如果希望背景图片有自己独立的空间，必须给元素指定一个padding值；

tr主要属性；

valign表示垂直对齐方式；

td的主要属性一共是有4对

（1）width宽度 高度height

（2）align水平对齐，valign垂直对齐；

（3）bgcolor 背景色， background背景图；

        （4）***重点属性；colspan 跨列合并，rowspan跨行合并；

（注释，td是表格的核心标签，它是唯一一个同时具备水平和垂直对齐的属性；）

在table表格表中，td是表格的核心，td还有一个兄弟标签， th----th表示加粗并且居中显示文字的td； （而且在浏览器的抓取上 th比td的优先级更高；）

快捷键---------------------------------------

dw中ctrl+f激活查找和替换面板

对于文本编辑软件有一些共同的功能；其中shift肯定表示加选文本；另外，ctrl表示成词的去控制文本字段；（如果同时按住shift和ctrl表示成词加选文本；）

快捷键---------------------------------------

table标签中的特殊标记；首先他们都是无属性标记 主要是给后台人员提供方便用的；对数据进行分类；

（1）caption 标题 类似于h标记； 但是专属于表格；

        （2）thead 表格中的数据头标记；

        （3）tbody 表格中数据主体标记；

        （4）tfoot 表格中的数据尾标记；

【表单元素】

主要是后台人员用，是用来收集客户信息的；表单元素里面属 input元素最为重要，表单元素有一个最大的整体管理容器， form

        form标记；首先它表示一个表单元素的整体；只有有了这个form元素以后页面才存在发送数据的能力；

form的三个必要属性：（1）name="" 用于给form标签命名的；

                                           （2）method 表示表单发送数据时候有的方式；默认是显示发送默认值是get； 这个值一定要改成post；

   （3）action 这个属性的值是表单发送的地址；

input首先它是一个单标记；

它有3个原则性属性；

（1）type 表示input标签的类型，这个属性的值决定了input所代表的功能； 

        （2）name 用于区分input传送过去的键值对；

       （3）value  它主要可以设置input标签的一些默认值；

type属性的值；

【1】值：text 当type等于这个值的时候input是一个输入文本框；

【2】值：password input是一个输入密码框；

【3】值： radio 表示单选按钮；

【4】值： checkbox； 复选框；

表单元素中的下拉菜单<select></select> 它及其相似于ul无须列表 每一项用option表示；

option有一个可选属性 selected=“selected” 可以用于设置默认选项；

在这个下拉菜单标记中有一个可以成组管理option 的标签，他就是optgroup; 它有一个可选属性，label 可以用于设置组名称；

真正线上网页的正规书写顺序；

1.清除所有的默认边距和列表样式；注意不能使用通配符；

2.书写全局样式给body；无非是设置正文的文字三属性；

3.书写超链接的默认样式；

经验：如果要控制的文字是具有超链接的；那么需要在css中选中这个超链接给a写样式；

【浮动定位】

记住！学习浮动，浮动有一个主要的作用是可以让多个盒子水平排列，并且他是一种严格的对齐方式，强制性按照当前父容器的左上角对齐；浮动只有两种方式，要么 left 么要 right；

而且切记浮动以后的对象脱离标准流；（不完全脱离）

浮动定位指的就是

float：left或者right；

浮动是一个好东西，但是就有个毛病主要就是会影响标准流中的正常内容；

如何让浮动了元素不会影响正常标准流中的内容；、解决的方法 ----- 清除浮动

clear：left,right; both****;

清除浮动是给受了浮动影

的正常元素加的；而不是给浮动起来的元素加的；

溢出隐藏 ---overflow:hidden;

1.作用 可以修剪掉超出指定范围的内容部分；

2.作用 可以产生纵向滑动的下拉条；

3.技术性作用； 给父级元素加了overflow属性以后它可以检测内部浮动的对象；

在网页中盒子模型主要由3部分构成，1宽度和高度的尺寸；2内边距尺寸，3外边距尺寸；

我们一般称之为实体范围；宽高+padding；

在xhtml里面无论是换行还是空格都是站一个文本的； 但是浮动的对象它不认空格，也不认换行；

总结：最后一点浮动了的对象它的标签性质会转化为行内块；  经验：在脱离标准流的范畴内，是绝对不可能存在块；

超文本中的定位主要有两种；

1.相对定位；

2.绝对定位；

相对定位----position:relative; 首先它是脱离标准流的；但是他会占有标准

流当中的原有位置；我们用，四个属性来控制他的坐标变化，left，right，top，bottom； 它会相对于原有的位置产生偏移，偏移的距离由这四个属性的值决定；

绝对定位----position:absolute; 首先绝对定位是一种彻底脱离标准流的形式；它不会对标准流中的任何内容产生影响；我们同样是用四个方向去设置它的坐标位置； 但是它的0，0点是浏览器的左上角；

工作经验；

真正工作中直接使用相对定位和绝对定位的意义都不大；绝对定位的价值要远高

于相对定位；但是绝对定位的使用方法；

重点：子级绝对，父级一定要相对；并且是直接父级--------绝对定位的使用原则

word-wrap:break-word; 主要作用是可以断词换行；

css精灵图像的好处；

1.多张图像合成一张，所占的质量空间更小；

2.在访问网页的时候客户端请求服务器传送图片的次数和数量更少，也很重要；

3.可以节省一部分的css代码；