div css 学习，div-css

DIV+CSS

DIV+CSS是现代网页设计中广泛使用的一种布局方法，它将网页的结构和样式分离，使得网页设计更加灵活和高效。这种方法不同于传统的表格布局，能够提供更丰富的布局选项和更优的性能。

1.布局灵活

与使用表格布局不同，DIV+CSS可以通过flexox、grid等布局模型实现更灵活的页面设计。这种布局方式不仅能够适应不同屏幕尺寸的设备，还能够根据内容自动调整布局，从而提供更好的用户体验。

-Flexox布局：Flexox提供了一种更加灵活的方式来布局、对齐和分配容器内项目的空间，即使它们的大小是未知或动态的。 Grid布局：CSSGrid布局是一个二维布局系统，它允许开发者创建复杂的布局，通过定义行和列来控制元素的位置。

2.代码可维护性高

结构和样式分离是DIV+CSS的一个关键特性，这种分离减少了重复代码，使得代码更加简洁和易于维护。当需要修改网页的样式时，只需要调整CSS文件，而无需修改HTML结构代码，大大提高了开发效率。

3.提高网页加载速度

表格布局需要更多的HTML代码，而DIV+CSS的代码更加简洁，从而减少网页的大小，提高网页的加载速度。这对于用户体验和搜索引擎优化（SEO）都是非常重要的。

4.设置宽高

在DIV+CSS中，可以通过多种方式设置元素的宽度和高度。

-固定宽高：直接在CSS中设置div元素的宽度和高度，例如width:200x

height:100x

百分比设置宽高：使用百分比来设置宽度和高度，使得元素的大小相对于其父元素的尺寸来定义，例如width:50%

height:30%

媒体查询：通过媒体查询（MediaQueries）可以根据不同的屏幕尺寸调整元素的宽度和高度。

5.div元素居中

在DIV+CSS中，可以通过多种方法实现div元素的居中。

-水平居中：使用margin:0auto

或者text-align:center

垂直居中：使用dislay:flex

justify-content:center

align-items:center

6.DIV与CSS的结合

DIV是HTML中的一个容器标签，用于对页面进行分割和布局。CSS则是用于定义网页的外观和格式。DIV与CSS结合使用，可以实现复杂的页面布局。

-DIV的作用：在网页制作中，DIV是“区块”的意思，用于对页面进行分割和布局，可以包含文本、图片、表单等元素。 CSS的作用：CSS（层叠样式表）用于定义网页的样式，包括字体、颜色、布局等。

7.CSS层叠样式

CSS层叠样式指的是上级标签的样式会自动继承到其所有下级标签。例如，针对设置的标签选择器所设的字体样式会自动应用到下的中，除非重写了相关样式将其覆盖。

8.CSS语法

CSS语法包括选择器、属性和值。选择器用于指定要应用样式的HTML元素，属性定义了元素的样式，而值则是属性的取值。

-选择器：例如.class,#id,tag等。

属性：例如color,font-size,margin等。

值：例如red,12x,10x20x30x等。

通过以上内容，我们可以更好地理解和应用DIV+CSS，创造出更加美观和高效的网页设计。