HTML进阶：通过DIV+CSS进行布局

最新推荐文章于 2023-07-15 23:02:26 发布

sinat_33010325

最新推荐文章于 2023-07-15 23:02:26 发布

阅读量711

点赞数 3

分类专栏：前端文章标签：前端 HTML CSS 布局

本文链接：https://blog.csdn.net/sinat_33010325/article/details/80518170

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

为什么要使用这种布局？

传统表格的布局缺陷布局固定不够灵活。

什么是Div？

它是一个html标签，一个块级元素（单独显示一行，即如果后面还有元素，将会在下一行显示）。主要用途是结合CSS实现页面的布局。

什么是Span？

它是一个html标签，一个内联元素（显示一行，即如果后面还有元素，则显示在同一行上）。主要用途是结合CSS对括起来的内容进行样式的修饰。

CSS的作用是什么？

HTML构成了整个网站的骨架，CSS则是对其中的内容进行修饰和美化。

CSS的语法规范：

选择器{

属性名1：属性值1；

属性名2：属性值2；

属性名3：属性值3；

}

注：选择器的作用是快速查找需要设置样式的元素

三种基本选择器模式：

1.元素选择器

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>元素选择器</title>
            <style>
                  div{
                        font-size: 30px;
                        color: red;
                  }
            </style>
      </head>
      <body>
            <div>
                  选中1
            </div>
            <div>
                  选中2
            </div>
            <div>
                  选中3
            </div>
      </body>
</html>

2.类选择器（相比第一个它可以实现同类标签的不同选择）

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>类选择器</title>
            <style>
                  .div2{
                        font-size: 30;
                        color: blue;
                  }
            </style>
      </head>
      <body>
            <div>
                  选中1
            </div>
            <div class="div2">
                  选中2
            </div>
            <div>
                  选中3
            </div>
      </body>
</html>

3.id选择器（实现单个的选中）

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>id选择器</title>
            <style>
                  #div3{
                        font-size: 30px;
                        color: yellow;
                  }
            </style>
      </head>
      <body>
            <div>
                  选中1
            </div>
            <div class="div2">
                  选中2
            </div>
            
            <div id="div3">
                  选中3
            </div>
      </body>
</html>

两种其他选择器：

1.层级选择器

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>层级选择器</title>
            <style>
                  div p{
                        font-size: 30px;
                        color: green;
                  }
            </style>
      </head>
      <body>
            <div>
                  <p>
                        选中1
                  </p>
            </div>
      </body>
</html>

2.属性选择器

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>属性选择器</title>
            <style>
                  input[type="text"]{
                        background-color: gold;
                  }
            </style>
      </head>
      <body>
            用户名：<input type="text" name="username" /><br />
            密码：<input type="password" name="password" />
      </body>
</html>

三种CSS引入方式

作用：CSS样式的代码所写的位置

1.内部引入

即是将<style>样式部分写在<head>里，默认style中type="text/css"

2.行内引入

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>元素选择器</title>
            <style type="text/css">
                  div{
                        font-size: 30px;
                        color: red;
                  }
            </style>
      </head>
      <body>
            <div style="font-size: 20px;color: blueviolet;">
                  这是行内引入
            </div>
      </body>
</html>

注：style是任何标签都具有的属性。且style具有就近原则，选择最近的样式。
3.外部引入

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>元素选择器</title>

            <!--当使用外部引入是，需使用link标签，stylesheet代表层叠样式表，href代表外部引入的路径-->
            <link rel="stylesheet" href="style.css" type="text/css" />
      </head>
      <body>
            <div>
                  选中1
            </div>
            <div>
                  选中2
            </div>
      </body>
</html>

CSS浮动

目的：将多个<div>标签在一行显示

规则：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。所以一旦前面的框发生变化，后面的框可能也会发生相应的变化。考虑到浮动框不在文档的普通流（即不浮动的框）中，所以文档的普通流中的块框将视浮动框为不存在。

设置：float属性（取值可以是left，right，none）

注意：一旦最后一个浮动框在最后一个位置放不下时，就会跳到下一行；如果前面的浮动框过高，后面放不下的浮动框将会被卡在较高的浮动框处。

如果想让前面的浮动对后面没有影响，该怎样设置清除浮动？

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>CSS浮动</title>
            <style>
                  #one{
                        border: 1px solid red;
                        width:300px;
                        height: 150px;
                        float:left;
                  }
                  #two{
                        border: 1px solid black;
                        width:300px;
                        height: 150px;
                  }
                  #three{
                        border: 1px solid blue;
                        width:300px;
                        height: 150px;
                  }
                  /*清除浮动*/
                  #clear{
                        clear:both;
                  }
            </style>
      </head>
      <body>
            <div id="one">
                  
            </div>
            <div id="clear">
                        
                  </div>
            <div id="two">
                  
            </div>
            <div id="three">
                  
            </div>
      </body>
</html>

CSS的盒子模型

注：当整个需要显示的内容居中，可设置属性值为auto；当内容需要居中时，可通过text-align:center进行设置；如果只设置一个像素，表示各边都是相同的像素；如果设置四个像素，以此表示的是上，右，下，左各边的边距；当然也可以通过padding-top，padding-right，padding-bottom，padding-left进行分别设置。可通过浏览器中F12进行调试。

sinat_33010325

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML进阶：通过DIV+CSS进行布局

为什么要使用这种布局？传统表格的布局缺陷布局固定不够灵活。什么是Div？它是一个html标签，一个块级元素（单独显示一行，即如果后面还有元素，将会在下一行显示）。主要用途是结合CSS实现页面的布局。什么是Span？它是一个html标签，一个内联元素（显示一行，即如果后面还有元素，则显示在同一行上）。主要用途是结合CSS对括起来的内容进行样式的修饰。 CSS的...
复制链接

扫一扫