div css模板(div css布局经典实例)

一、html怎么让浮动的div居中

1、首先打开SublimeText软件，新建一个HTML页面，

2、然后我们在html页面中加入div标签，并且在div标签中加入一些文字，

3、接下来我们给div标签编写CSS样式，这里主要是text-align和line-height两个属性，

4、最后我们运行页面程序，你就会在页面中看到div中的文字水平垂直都居中了。

二、div样式设置

具体操作方法步骤如下：

1.新建一个html文件,命名为test.html,用于讲解怎样用js修改div标签的样式。

2.在test.html文件内,使用div标签创建一个模块,并设置其样式,定义其宽度为150px,高度为150px,背景颜色为红色。

3.在test.html文件内,设置div标签的id为aadiv,用于获得div对象。

4.在test.html文件内,使用button标签创建一个按钮,给button按钮绑定onclick点击事件,当按钮被点击时,执行editDivCss()函数。

三、div css布局经典实例

经典实例有Flexbox布局和Grid布局。Flexbox布局：是一种一维的布局模式，通过给容器添加display:flex属性来创建一个flex容器，然后通过设置子元素的flex属性来控制子元素的位置和大小。Grid布局：是一种二维布局模式，可以定义在一个父类容器中将其分成一些行和列，再将其中的子元素放置在指定的位置。通常使用display:grid属性定义网格布局。这两种布局都能够快速易懂地实现响应式布局。