CSS传统布局所用的元素

最新推荐文章于 2024-07-24 13:45:34 发布
最新推荐文章于 2024-07-24 13:45:34 发布
阅读量176 收藏
点赞数 1
分类专栏： # HTML/CSS 正在路上的前端攻城狮的烂笔记 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45660621/article/details/120710152
版权

目录

CSS布局常见元素

display

display 属性规定元素应该生成的框的类型。
每个HTML元素都有属于自己的默认display属性值。
可以通过display去更改HTML 行内元素（inline element） 和 HTML 行内元素（inline element） 的默认值。 在我之前的HTML文档介绍中有解释两者的区别。

display:inline;

通过该属性值可以让块级元素以行内元素显示。

display:block;

通过该属性值可以让行内元素以块级元素显示。
例如：

 <style>
     div {
         display: inline;
         background-color:lightblue;
     }
     span{
         display:block;
         background-color:lightcoral;
         width: 150px;
         height: 150px;
     }
 </style>

<body>
    <div>div1:是块级元素，但是现在以行内元素显示</div>
    <div>div2:是块级元素，但是现在以行内元素显示</div>
    <hr>
    <span>span是行内元素，但是现在以块级元素显示</span>
</body>

在这里插入图片描述

行内元素：

  • 不可以设置宽高度

  • 不可以设置上下 margin

  • 可以设置左右 margin

但如果将行内元素设置为块级元素，上面的不可以就可以了。
display还有以下常用属性值

  • none 此元素不会被显示。
  • flex 此元素将显示为弹性盒容器。
  • grid 此元素将显示为栅格容器。
  • inline-block 此元素将显示为行内块元素。

使用inline-block需要注意的是

  • vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top

  • 需要设置每一列的宽度

  • 如果 HTML 源代码中元素之间有空格，那么列与列之间会产生空隙

flex和grid比较重要，后面再写，待续。

visibility

visibility 属性规定元素是否可见。
它有以下属性值

  • visible 默认值。元素是可见的。
  • hidden 元素是不可见的。

display:none 和 visibility:hidden都可以让元素不可见，但是是有区别的：

  • display:none 元素消失，在页面中不占据空间

  • visibility:hidden 元素消失，在页面中仍占据空间

    <div>
        <strong>给元素设置display:none样式</strong>
        <p>A元素</p>
        <p style='display:none;'>B元素</p>
        <p>C元素</p>
    </div>

    <div>
        <strong>给元素设置visibility:hidden样式</strong>
        <p>A元素</p>
        <p style='visibility:hidden;'>B元素</p>
        <p>C元素</p>
    </div>

在这里插入图片描述

float

浮动：元素脱离原有的标准文档流,移动到其父元素中指定的位置。
属性值有

  • none 默认值。元素不浮动。
  • left 元素向左浮动。
  • right 元素向右浮动。

常见的float浮动布局

  • 两列布局
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>双列布局</title>
    <style type="text/css">
        .left {
            width: 50%;
            background-color: pink;
            height: 400px;
            float: left;
            box-sizing: border-box;
            padding: 20px;
        }
        .right {
            width: 50%;
            background-color: lightblue;
            height: 400px;
            padding: 20px;
            float: left;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>

在这里插入图片描述

  • 三列布局
<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <title>双列布局</title>
   <style type="text/css">
       div {
           height: 300px;
       }

       .left {
           background-color: pink;
           width: 33.33%;
           float: left;
           padding: 20px;
           box-sizing: border-box;
       }
       .middle {
           background-color: cornsilk;
           width: 33.33%;
           float: left;
           padding: 20px;
           box-sizing: border-box;
       }
       .right {
           background-color: lightblue;
           width: 33.33%;
           float: right;
           padding: 20px;
           box-sizing: border-box;
       }
   </style>
</head>
<body>
   <div class="left">left</div>
   <div class="right">right</div>
   <div class="middle">middle</div>
</body>
</html>

在这里插入图片描述
其中浮动是讲究一个先来后到的顺序。

清除浮动clear属性

浮动的元素离开了原有的文档流,它会对页面中其他元素的排版产生影响。为了消除这种影响
可以使用clear属性消除浮动。

  • left：清除左侧的浮动影响
  • right：清除右侧的浮动影响
  • both：清除左右两侧的浮动影响

设置 float会影响其他相邻元素；

设置 clear 只会影响自身，不会对其他相邻元素造成影响。

定位postion属性

position 属性规定元素的定位类型。

position:static

static 是 position 属性的默认值。

  • static 定位所导致的元素位置，是浏览器自主决定的，所以这时 top、bottom、left、right 这四个属性无效。

position:relative

相对定位：元素以它所在的普通流中的位置为起始点进行定位(设置坐标)。

  • 搭配 top、bottom、left、right 这四个属性一起使用
 <style type="text/css">
    .top{
        background-color: lightblue;
        width: 100px;
        height: 100px;
    }
    .bottom{
        background-color: lawngreen;
        width: 150px;
        height: 150px;
        /* position: relative;
        top: 20px;
        left: 30px; */
    }
    </style>
<body>    
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</body>

在这里插入图片描述
当给代码添加定位代码时,效果为

		position: relative;
        top: 20px;
        left: 30px;

在这里插入图片描述

当给top元素加float:left;让top元素脱离正常文档流时，bottom就以正常的文档流位置进行定位偏移。

    .top{
        background-color: lightblue;
        width: 100px;
        height: 100px;
        float: left;
    }
    .bottom{
        background-color: lawngreen;
        width: 150px;
        height: 150px;
        position: relative;
        top: 20px;
        left: 30px; 
    }

在这里插入图片描述

position:absolute

absolute 表示，相对于上级元素（一般是父元素）进行偏移，定位基点是父元素。

重要的限制条件：
定位基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html

  • 搭配 top、bottom、left、right 这四个属性一起使用。
    修改上面的代码,去除top浮动属性，并且将bottom的position属性值由relative改成absolute。
    .top{
        background-color: lightblue;
        width: 100px;
        height: 100px;

    }
    .bottom{
        background-color: lawngreen;
        width: 150px;
        height: 150px;
        position: absolute;
        top: 20px;
        left: 30px; 
    }

效果为
在这里插入图片描述
absolute 定位的元素会被"正常页面流"忽略。

  • 在"正常页面流"中，该元素所占空间为零，周边元素不受影响。

  • 绝对定位的元素的位置是相对于最近的父元素而言的

  • 因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index 的值越高，它显示的越在上层

    • z-index属性默认值是0；

position:fixed

fixed 表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。
这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

position:sticky

sticky 跟前面四个属性值都不一样，它会产生动态效果。

  • 一些时候是 relative 定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是视口）。
  • 必须搭配top、bottom、left、right这四个属性一起使用，不能省略。
    可以用这个属性做到手机的电话簿字母处的效果。
    在这里插入图片描述

本章内容已经完结

附一张作业图效果：在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>驴妈妈旅游网</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <div class="one"><img src="img/1.jpg" alt=""></div>
        <div class="two">
            <div id="img1">
                <img src="img/3.png" alt="" height="60px">
                <img src="img/1.png" alt="" height="40px">
            </div>
            <div id="img2">
                <img src="img/10.png" alt="">
            </div>
        </div>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">出镜游</a></li>
            <li><a href="#">国内游</a></li>
            <li><a href="#">周边游</a></li>
            <li><a href="#">景点门票</a></li>
            <li><a href="#">度假酒店</a></li>
            <li><a href="#">自驾游</a></li>
            <li><a href="#">亲子游</a></li>
            <li><a href="#">邮轮</a></li>
            <li><a href="#">机票</a></li>
            <li><a href="#">机票</a></li>
            <li><a href="#">特卖会</a></li>
            <li><a href="#">定制游</a></li>
            <li><a href="#">金融</a></li>
            <li><a href="#">旅游攻略</a></li>
        </ul>
    </nav>
    <main>
        <div id="s1">
            <div id="aside">
                <div style="background-color: white;"><a href="" style="color: black; font-family: '宋体'">跟团游</a></div>
                <div><a href="">自由行</a></div>
                <div><a href="">景点门票</a></div>
                <div><a href="">度假酒店</a></div>
                <div><a href="">邮轮</a></div>
                <div style="border:none"><a href="">签证</a></div>
                </li>
                </ul>
            </div>
            <div id="left">
                <form action="">
                    <div id="search">
                        <div class="sear1">
                            <label for="chufa">出发地：</label>
                            <br>
                            <input type="text" name="chufa" id="" value="西安" size="11">
                        </div>
                        <div class="sear2">
                            <label for="mudi">目的地：</label>
                            <br>
                            <input type="search" name="mudi" size="25" placeholder="请输入目的地、主题、或关键词">
                        </div>
                    </div>
                    <div class="button1">
                        <button type="submit">&nbsp;&nbsp;搜索&nbsp;&nbsp;&nbsp;&nbsp;</button>
                    </div>
                </form>
                <div id="list1">

                    <div class="guonei1">国内热门</div>
                    <div class="guonei2">
                        <ul>
                            <li>华山</li>
                            <li>华清宫</li>
                            <li>云南</li>
                            <li>三亚</li>
                            <li>北京</li>
                            <li>九寨沟</li>
                            <li>张家界</li>
                            <li>桂林</li>
                            <li>厦门</li>
                            <li>东北</li>
                            <li>华东</li>
                        </ul>
                    </div>
                </div>
                <div id="list2">
                    <div class="zhuti1">热门主题</div>
                    <div class="zhuti2">
                        <ul>
                            <li>华山</li>
                            <li>华清宫</li>
                            <li>云南</li>
                            <li>三亚</li>
                            <li>北京</li>
                            <li>九寨沟</li>
                            <li>张家界</li>
                            <li>桂林</li>
                            <li>厦门</li>
                            <li>东北</li>
                            <li>华东</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    margin: auto;
    background-color: lightskyblue;
}

.one {
    height: auto;
    background-color: white;
}

.one>img {
    margin: 0 auto;
    width: 100%;
}

.two {
    height: 70px;
    background-color: white;
    margin: auto;
}

#img1 {
    width: 70%;
    height: 70px;
    float: left;
}

#img2 {
    height: 70px;
    width: 30%;
    margin-left: 70%;

}

#img2>img {
    height: 50px;
    margin: auto;
    margin-top: 10px;
}

nav {
    min-height: 40px;
    background-color: MediumVioletRed;
    clear: both;
    padding-left: 20px;
    line-height: 40px;
}

nav ul{
    display: inline-block;
    text-align: center;
}


nav li{
    display: inline-block;
    font-size: small;
    list-style: none;
    padding-right: 10px;
    width: 55px;
}
div li {
    display: inline-block;
    font-size: small;
    list-style: none;
    text-align: center;
}
div li {
    display: inline-block;
    font-size: small;
    list-style: none;
    padding-right: 10px;
    text-align: center;
}

a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    
}
nav> ul> li:hover{
    background-color: rgb(97, 14, 67);
}

main {
    background-image: url("../img/9.jpg");
    background-color: moccasin;
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 10px;
}

#s1 {
    margin-top: 10px;
    margin-left: 10px;
    background-color: white;
    max-width: 490px;
    max-height: 100%
}

#aside {
    width: 25%;
    max-height: 300px;
    background-color: #94937e;
    float: left;
}

#left {
    width: 75%;
    max-height: 300px;
    margin-left: 25%;
}

#aside>div {
    width: auto;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-bottom: 1px dotted gray;
    font-size: small;
}

#search {
    background-color: rgb(255, 255, 255);
    padding: 10px;
}

.sear1 {
    width: 40%;
    height: 50%;
    float: left;
    line-height: 25px;
    font-size: 5px;
    color: lightgrey;
    padding-top: 30px;
    box-sizing: border-box;
}

.sear2 {
    width: 60%;
    height: 50%;
    margin-left: 40%;
    line-height: 25px;
    font-size: 5px;
    color: lightgrey;
    padding-top: 28px;
    box-sizing: border-box;
}

.button1 {
    height: 30px;
    text-align: right;
    border-bottom: 1px solid lightgray;
    padding-right: 10px;
}

button {
    background-color: MediumVioletRed;
    color: white;
    border-radius: 5px;
    padding: 2px;
}

#list1,
#list2 {
    padding: 10px;
}

.guonei1,
.zhuti1 {
    width: 20%;
    height: 90px;
    float: left;
    color: lightgrey;
    font-size: 15px;
}

.guonei2,
.zhuti2 {
    width: 80%;
    height: 90px;
    margin-left: 20%;
    line-height: 20px;
    font-size: 15px;
}
1900's 88 keys
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML和CSS常用元素
mjkkhjl的博客
04-13 589
网页设计 网站制作到前端开发 Web 1.0时代指的的网站制作，那时候的页面主要是静态页面，仅供用户浏览，而无法提供用户进行交互（无法与服务器进行数据交互）。 而到了Web 2.0时代，已经从网页制作到了前端开发，以前的网页“三剑客”（Fw、Dw、Fl）已经满足不了我们的需求，所以我们要学习新的技术。 分别是：HTML、CSS、JavaScript也是新“三剑客”。 HTML:超文本标记语言，是一门描述型语言。 CSS：层叠样式表，是控制网页外观的一门技术。 JavaScript：是嵌入HTML的一种脚
css布局教程 — 这一篇足够了
qq_60754128的博客
11-11 3938
display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
CSS网页布局
微风洋洋的博客
02-10 7417
介绍一下CSS网页布局这个核心知识，大家一定要重视！
css的一些常用的元素
youknow156的博客
07-12 620
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。 CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离。 css基础
css布局之混合布局（用得最多）
staringOrz的博客
11-04 422
混合布局 body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .head,.main{ width:960px; margin:0 auto;} .head{ height
CSS+DIV三种布局方式
热门推荐
qq_34283987的博客
09-08 7万+
在学习了盒模型、块级元素和行内元素得到概念后，我们来说一下CSS的一个比较重要的用途：布局。以前我们学过表格可以起到布局页面的作用，比如布局表单，但实际工作表格的布局通常也仅仅是用来布局表单。绝大多数的模具工作是由CSS+DIV来完成的，因为表格布局 复杂页面时需要频繁的嵌套，代码比较复杂、难以维护，而使用CSS+DIV布局，内容和表现可以分离，代码干净整洁、可读性好、便于维护，并且样式代码可以复用
CSS网站布局与开发技巧
11-06
Flexbox（弹性盒模型）是现代CSS布局的一种方式，它解决了传统布局中的许多问题，如垂直居中、等宽/高列等。通过设置`display: flex`，可以轻松调整容器内子元素的排列、对齐和分配空间。 三、Grid布局 CSS Grid...
3d轮播.rar
08-15
HTML（超文本标记语言）是网页内容的基础结构，CSS3（层叠样式表）用于定义页面的样式和布局，而JavaScript则负责交互性和动态效果。在这个3D轮播中，HTML可能会包含轮播的各个元素，如图片或内容容器；CSS3将用于...
html5图片3d旋转幻灯片切换特效.rar
10-07
在这个3D旋转幻灯片中，CSS可能用于设定幻灯片的初始位置，动画效果，以及与页面其他元素的相对布局。CSS3引入了转换（transform）、过渡（transition）和动画（animation）等特性，可以轻松实现3D旋转和其他复杂的...
WYSIWYG_Web_Builde入门教程.pdf
09-27
最终，我们可以通过对象管理器查看整个布局所用的 Layer 对象以及层级关系，并最终布局效果图如下所示。 在放置元素和定义样式时，我们需要首先设置这个网页整体的背景，然后设置 header 容器的背景，让它透明。...
经典旅行社网页模板
01-22
在【描述】中提到的“经典”一词，意味着这些模板采用了经过时间检验的设计风格，既保留了传统的网站布局，又融入了现代的网页设计元素。这通常包括清晰的导航结构、吸引人的头部大图、易于浏览的旅游项目列表以及...
几种常见的 CSS 布局
前端大全
11-14 3万+
（给前端大全加星标，提升前端技能）作者：浪里行舟 （本文来自作者投稿，简介见末尾）本文概要本文将介绍如下几种常见的布局：单列布局两列自适应布局圣飞布局和双飞翼布局伪等高布...
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 342
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
css性能优化的方法
jht_520的博客
07-21 336
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
CSS相关记录
最新发布
oThrowsException的博客
07-24 606
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
CSS学习笔记[Web开发]
Jenlibein的博客
07-19 746
CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。CSS指的是层叠样式表* (CascadingStyleSheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在CSS 文件中***：**也称级联样式表。一张 HTML 页面 可以有 多个样式下面是一张提供了四个不同样式表的 HTML 页面。
CSS 创建：从入门到精通
wjs2024的博客
07-24 275
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
css上下动画 和淡化
ssorth的博客
07-24 365
上下动画
HOW - CSS 定义颜色值
weixin_58540586的博客
07-22 1186
使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */
CSS Grid布局详解与实例演示
CSS Grid布局是CSS3引入的一种二维布局系统，它允许开发者在网页设计中创建复杂的网格结构，从而更方便地控制元素的排列和对齐方式。相比传统的布局方式如float和display: inline-block，Grid布局提供了更为强大的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值