html--基础-css

在页面设计时，我们都需要用到css样式表。我们在设计页面时，都需要一定的美学在里面。符合市场的需求和用户的习惯。现在的页面的设计是越来越讲究简洁，优雅，而富有动感。更加体贴用户的操作和上网操作。这是我们的设计理念。

在一个完整的网页设计中，我们需要先架设网页的结构。这是非常基础的。网页的结构是考验我们对盒模型的理解和掌握。还有对标签的语义化的理解。因为在html5中，我们的规范是我们的标签的使用和语义化。要符合标签的特性。这是，我们要注意的。一些标签的分类是很重要的，行内元素，块元素，行内块的元素。是我们元素的基本属性。我们要第一要明白的元素的特性。比如，mata标签是提示页面的关键信息和内容。a标签是导航的信息标签。b ，i标签是强调的信息等等。我们要语义化的使用标签。p标签是表示段落的标签。br标签是换行的作用。还有分组的行的标签。ul ol tr td  li   div dl dt dd  这些标签是表示分组的功能。可以模拟块状的概念，说明列表的 无序列表（ul） 有序列表（ol）（dl）表示定义一系列的术语和说明的列表。在分组的标签中，我们还是比较常见的。hr标签是表示段落的主题转换。div是盒模型，是我们页面结构的最基础的元素。

在划分内容方面，我们可以使用article元素，footer元素 header元素，nav元素，section元素，aside元素。这是我们在页面结构中，必须要用的元素。都是块级元素。结合我们其他的元素（表示文本的元素，表示分组的元素，表示制表的元素，表示创建表单的元素，盒模型的元素。）结合使用就可以我们的结构更加合理一些。我们可以考虑表格的用法。

在调试复杂的每个元素的距离时，我们可以多用盒模型来容纳起来，可以整体的来调试样式。通过盒模型的属性来进行设置每个元素的距离。还有注意的是权重的限制。在多嵌套的时候，我们要尽量写完整选择器，才能有效的避免权重的限制。在使用元素进行布局时，我们要注意是，元素的类型和特点。行内元素的 块状元素，行内块的元素的特点。是否独占一行，能不能和其他元素共享一行等。这是基础的东西。我们在设置元素结构的样式时，我们需要从外到内来进行一级一级的设置。不要东设西设，最忌讳这样设置css样式。我们在设置浮动的时候，我们要注意是浮动的特性。hover的特性。

在css中，我们学习的比较重要的是，定位。在今天的学习中，我们学习的是改变元素在容器块中的定位方式。position使用的是这个属性。在定位的方式是三个方面属性。position relative 相对定位 position absolute 是绝对对位。position fixed 是固定定位。还有设置定位元素相对于容器的边界的偏移量的属性。top left bottom right 属性。设置元素的层叠顺序。z-index 属性。可以设置定位的权限。防止定位的覆盖。如果发生定位的覆盖的话，我们可以在权限上去调式。用z-index去调。z-index属性是划分层叠的关系。是上下文的层叠关系。只限于定位元素。层叠的关系是内容，定位 浮动  block盒子 负z-index属性 层叠上下文。在嵌套多层定位时，我们要注意的是子集和父集之间的关系。position absolute的绝对定位的特性。是以离它最近的父集定位元素为基准。所以，我们要调好定位元素的父子集的关系。可以依次嵌套定位。也可以设置定位元素的重合。来进行滑动切换。通过显示和隐藏来进行滑动的切换。这是定位的妙用。因为定位的元素的位置是随机的，我们可以先将定位的元素的偏移量（top,left）为零。再来进行设置具体的偏移量。

需要注意的是：如果 元素，绝对定位后，会改变标签的display类型。成为块级元素。这个我们需要注意的是span标签和a标签绝对定位的时候，元素类型的改变。还有，在重置样式表中，@charset "utf-8"; 这个分号一定要加上。不然，下面的重置样式是无效的。

标签，我们会经常遇到标签与input标签的对齐来进行制作搜索框的实例。我们通过圆角的变化来进行设计搜索框的样式。一个完整的网站的需要不同的搜索框，来搜索内容。提交数据。在样式的变化上，我们一般会用到的input标签和form表单一起连用。数据的提交一般离不开不了form表单。向后台提交数据。在input和submit或者是button按钮的对齐方式上。我们经常会发现对不齐的现象。因为在行内块的元素的需要用到vertial-align的属性的。这个属性，可以用到行内块的元素的对齐方式的。比如像图片 input标签等等，我们都需要用到的属性的。在搜索框的对齐方式上，我们用到的是vertiacl-align:middle;这个方式来进行对齐input和submit的对齐方式的，在高度的上的对齐，button按钮，submit和input的高度是不一样的，因为两种方式是在所按的标准的不一样，也就是说，button和submit按钮是按照的是高度包含边框，而input标签是不包含这边框的。所以，我们要考虑的是边框的宽度。这是我们要经常用到的。还有各种竖杠，也是通过span标签来进行操作。通过高度，宽度，边框的宽度来进行操作的。我们可以通过各种方式来进行。注意：在行内块的元素是有3像素的间隔的。我们可以通过浮动来进行解决的。

在css样式中，我们要避免设置的是id样式。权重高，会对后面的元素造成影响的。这个是经验的。样式的设置要分析好结构的，通过类选择器的作用，我们可以一样的样式统一设置的。这样可以减少我们的工作量。