CSS和AJAX阶段学习记录

1、AJAX的工作原理：

如图所示，工作原理可以分为以下几步：

    网页中发生一个事件（页面加载、按钮点击）

    由 JavaScript 创建 XMLHttpRequest 对象

    XMLHttpRequest 对象向 web 服务器发送请求

    服务器处理该请求

    服务器将响应发送回网页

    由 JavaScript 读取响应

由 JavaScript 执行正确的动作（比如更新页面）

2、AJAX（Asynchronous JavaScript And XML）的作用：

    不刷新页面更新网页

    在页面加载后从服务器请求数据

    在页面加载后从服务器接收数据

    在后台向服务器发送数据

3、CSS的三大特性：层叠性、继承性、优先级。

层叠性：主要用于解决样式冲突的问题，相同的选择器设置相同的样式，此时一个样式会覆盖（层叠）掉另一个冲突的样式。

继承性：子标签会继承父标签的某些样式，如文本颜色和字号。可以用于简化代码，降低CSS样式的复杂性。比如子元素可以继承父元素的样式(text– font- line– color)这些元素开头的属性可以继承。

优先级：同一个元素指定多个选择器，就会有优先级的问题，即权重。选择器相同，执行层叠性，选择不同则根据选择器权重执行。

选择器权重如下：

注意：

1. 权重有4位数字组成，但并不是二进制的，也不会有进位产生。
2. 类选择器的权重大于标签选择器，id选择器的权重大于类选择器。
3. 等级判断从左往右比较，如果相同，则比较下一位。
4. 继承的权重是0，如果该元素没有直接选中，不论父元素的权重多高，子元素得到的权重都是0.
5. 可以在一个属性值后面加一个!important，表示优先级最高。

4、网页布局的本质：

网页元素基本都是盒子模型，可以先利用CSS设置好盒子的样式，摆放在相应的位置。最后往盒子里边装内容即可。其本质就是利用CSS摆盒子。

5、盒子模型：

把HTML页面中的布局元素看作一个盒子，装元素的容器，CSS盒子模型本质上是一个盒子，将边框、外边距、内边距和实际内容封装在一起。

边框：border可以设置元素的边框  eg:border: 1px solid red;

相邻盒子的边框合并在一起。border–collapse:表示相邻边框合并在一起。注意边框会影响实际盒子的大小，边框会额外增加盒子的实际大小，因此在测量盒子大小的时候，不测量边框，如果测量的时候包含了边框，需要将width/height减去边框宽度。

内边距：padding属性用于设置内边距，即边框与内容之间的距离。设置好以后，内容与边框间有了距离，添加了内边距，并且影响了盒子的实际大小。

可以简写：

外边距：margin用于设置外边距，即盒子与盒子之间的距离。

让块级盒子水平居中的两个条件：盒子必须指定了宽度以及盒子左右的外边距都设置为了auto.

Margin:0 auto;

外边距合并：使用margin来定义块元素的垂直外边距时，可能会出现外边距的合并。在存在两个嵌套关系的块元素时，父元素有上外边距同时子元素也有上外边距，父元素会塌陷较大的外边距的值。

解决方案如下：

6、清除内外边距：

网页元素很多都带有默认的内外边距，不同的浏览器默认的也不一致，因此需要先清除网页元素的内外边距。

* {

Padding:0;

Margin:0

}

7、圆角边框：

border-radius属性用于设置元素的外边框圆角。

Border-radius:length;

8、盒子阴影：

使用box–shadow来添加阴影。

9、浮动(float)：

需要用标准流来将多个盒子水平排成一行。浮动的元素会脱离标准流，成为脱标。浮动的元素不再保留预先的位置，会一行内显示并且元素顶部对齐，具有行内块元素的特性。

标准流：标签按照规定好的默认方式排列。

块级元素会独占一行，从上往下来排列。行内元素会按照顺序，从左到右的顺序来排列，碰到父元素会自动换行。

10、浮动特性：

如果多个盒子都设置了浮动，会按照属性值一行内显示并且顶端对齐排列。若宽度达不到要求，则会另起一行对齐。

任何元素都可以浮动，如果没有对浮动的元素设置宽度，则默认为父亲盒子的宽度，在添加浮动以后，宽度则跟内容的大小来调整。浮动的盒子中间是没有空隙的，默认紧挨在一起的。

11、浮动元素经常与标准流父级元素搭配使用。先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。如果一个子盒子浮动了，那么其余的子盒子也应该浮动，否则会影响后面的标准流盒子的位置，但是不影响前面的标准流盒子的位置。

12、清除浮动的理由：由于父盒子在很多情况下不方便给高度，会随着放入的子盒子的数量会随时进行调整，此时，如果子盒子设置了浮动，那么父盒子的高度为0，这时会影响后面的标准流盒子的位置。因此需要清除浮动。其本质是清除浮动元素脱离标准流后带来的影响。

清除的方法：额外标签法，给父盒子设置overflow属性或者after伪属性，添加双伪元素。

代码007普通

打赏 收藏 海报 链接