web前端进阶_css布局_基础篇3

最新推荐文章于 2024-05-09 02:49:02 发布
最新推荐文章于 2024-05-09 02:49:02 发布
阅读量337 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17495489/article/details/107964622
版权

web前端css布局

一、标准流布局

1.标准流布局

标签在没有布局相关的属性的时候，默认的布局方式就是标准流布局。

标准流布局相关标签属性/特点举例
a.块级标签一个占一行；默认宽度是父标签的宽度，默认高度是内容的高度；设置宽高有效h1~h6、p、div、列表相关…
b.行内标签一行可以显示多个；默认大小是内容的大小；设置宽高度无效。a、span、label、font…
c.行内块标签一行可以显示多个；默认大小是内容的大小；设置宽高有效。img、输入框

2.display属性（css）

属性名称主要功能
block将标签修改成块级标签
inline将标签修改成行内标签
inline-block将标签修改成行内块
none隐藏标签

相关展示代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
        <h1>1.块级标签</h1>
        <h1 style="background-color: hotpink; width: 200px;">我是标题1</h1>
        <h2 style="background-color: salmon; width: 120px;">我是标题2</h2>
        <p style="background-color: skyblue;">我是段落1</p>
        <p>我是段落2</p>
        <div style="background-color: yellowgreen; height: 60px;">
            我是div1
        </div>
        <div id="">
            我是div2
        </div>
        
        <h1>2.行内标签</h1>
        <a href="" style="background-color: aquamarine; width: 300px; height: 100px;">我是超链接1</a>
        <a href="" style="background-color: sandybrown;">超链接2</a>
        <label style="background-color: skyblue; height: 60px;">我是lable1</label>
        <label>我是lable1</label>
        
        <h1>3.行内块标签</h1>
        <img style="background-color: sandybrown; width: 400px;" src="img/anchor.png" >
        <img src="img/ghost.png" >
        <input type="text" name="" id="" value="" />
        <input style="height: 60px;" type="text" name="" id="" value="" />
        
        <h1>display属性</h1>
        <div style="background-color: sandybrown; width: 200px; display: inline;">
            div3
        </div>
        <div style="background-color: skyblue; height: 100px; display: inline;">
            div4
        </div>
        
        <a style="width: 100px; height: 100px; background-color: deeppink; display: inline-block;">超链接3</a>
        <a style="background-color: salmon; display: block;">超链接4</a>
        <img style="display: none;" src="img/hat.png" >
        
 </body>
</html>

显示效果：
在这里插入图片描述

二、标准流网页布局

使用inline-block(行内块标签)进行布局时存在以下问题：

  1. 将两块区域内容放在同一行，中间会存在空隙
  2. 如果将两块的区域宽度加起来为100%，不能显示在一行，会出现换行，所以此种方式不太适合实现此种功能，如要实现此种功能，需要使用后面讲到的浮动功能
    第一种方式：width的和为100%（没显示在一行）
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
        <div style="height: 120px; background-color: sandybrown;"></div>
        <div style="width: 40%; height: 600px; background-color: skyblue; display: inline-block;"></div>
        <div style="width: 60%; height: 600px; background-color: pink; display: inline-block;"></div>
 </body>
</html>

在这里插入图片描述
第二种方式：width和小于100%（存在空隙）
在这里插入图片描述

三、浮动

1.脱流
让标签脱离标准流，不再按照标准流的方式进行布局。浮动和定位都可以让标签脱流。
所有的标签，只要脱离了标准流，布局的方式就只有一种：一行显示多个；默认大小是内容的大小；设置宽高有效

2.浮动 - float

浮动属性作用
left左浮动
right右浮动
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
        <h1>浮动可以脱流</h1>
        <div style="background-color: salmon; height: 100px; float: left;">
            div1
        </div>
        <div style="float: left; background-color: aquamarine;">
            div2
        </div>
        <a href="" style="background-color: pink; width: 100px; height: 100px; float: left;">我是超链接1</a>
        <a href="" style="background-color: azure;">我是超链接2</a>
        
        <h1>页面整体布局</h1>
        <div style="background-color: sandybrown; height: 120px; width: 100%; float: right;"></div>
        <div style="background-color: chartreuse; width: 40%; height: 600px; float: right;"></div>
        <div style="background-color: blueviolet; width: 60%; height: 600px; float: right;"></div>
        
        
 </body>
</html>

在这里插入图片描述

四、浮动原理

如果块标签不浮动，占水面和池底的空间，并且还带着玻璃砖。
浮动的标签，只占水面的空间
（注意：如果前面先添加浮动标签内容，后面如果来了块标签，块标签可能会和浮动标签产生重合区域）

五、浮动的应用

1.竖着显示的横着来（页面布局）
2.文字环绕: 被环绕的块浮动，文字块不浮动
展示代码如下所示：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
       <div style="float: left;">
           <img src="img/bucket.png" >   #图片浮动
       </div>
       <div style="width: 220px;">        #div标签中的内容不浮动
           asdhfkajshdfk 阿斯蒂芬卡萨丁加法和
           阿斯顿发数据库东方航空
           阿萨德发客户萨科技发的
           熬枯受淡房间卡是
           <a href="">超链接1</a>
           <a href="">超链接1</a>
           <a href="">超链接1</a>
           <a href="">超链接1</a>
           <a href="">超链接1</a>
           <a href="">超链接1</a>
           <a href="">超链接1</a>
           <a href="">超链接1</a>
           <a href="">超链接1</a>
           <a href="">超链接1</a>
           <a href="">超链接1</a>
           <a href="">超链接1</a>
           <a href="">超链接1</a>
           <a href="">超链接1</a>
       </div>
</body>
</html>

web显示效果如下所示：
在这里插入图片描述

六、清除浮动

清除浮动的原因：
清除因为浮动而产生的高度塌陷的问题

1)高度塌陷: 父标签不浮动并且没有设置高度，子标签浮动就可能产生高度塌陷(没有设置高度的父标签会塌陷)
2)清除浮动：

清除浮动的方法具体操作方式
a.空盒子法在高度会塌陷的标签的最后添加一个空的div，并且设置它的clear属性为both，<div style=“clear: both;”></div>
b.设置overflow设置高度会塌陷的标签的overflow属性为hidden
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
        <div style="height: 120px; background-color: pink;"></div>
        <div class="subside" style="background-color: greenyellow;">
            <div style="background-color: red; height: 100px; width: 100px;">
                
            </div>
            <div style="background-color: saddlebrown; height: 400px; width: 35%; float: left;"></div>
            <div style="background-color: skyblue; height: 1300px; width: 40%; float: right;"></div>
            
            <!-- 1.空盒子法 -->
            <!-- <div style="clear: both;"></div> -->
        </div>
        <div style="height: 80px; background-color: seagreen;"></div>
        
        <!-- 2.设置overflow -->
        <style type="text/css">
            .subside{
                overflow: hidden;
            }
        </style>
        
 </body>
</html>

在这里插入图片描述

七、定位

1.定位

定位的属性有四个：left、right、top、bottom

定位属性对应功能
left设置标签的左边到另外一个标签的左边距离
right设置标签的右边到另外一个标签的右边的距离
top设置标签顶部到另外一个标签的顶部的距离
bottom设置标签的底部到另外一个标签底部的距离

2.选择定位的参考对象：position

position可选择的属性对应功能
static/initial(默认值，body例外)不选参考对象，不定位（设置距离直接无效）
absolute（绝对定位）选择第一个非static/initial的父标签作为参考对象
relative（相对定位）相对当前标签在标准流中的位置定位（一般用于让自己成为子标签的参考对象的时候用）
fixed相对浏览器定位
sticky可以实现显示在最下面的一行内容，当其他内容在一页中显示不了时，当滑动右边网页时，其一直显示在最下方；如果其他内容很少，最下面一行也可以往网页上面的位置挪

举例展示代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
        <!-- <h1>1.直接设置定位的距离无效</h1>
        <style type="text/css">
            #div1{
                left: 300px;
                position: static;
            }
        </style>
        <div id="div1" style="background-color: red; width: 100px; height: 100px;"></div>
        
        <h1>2.绝对定位</h1>
        <div id="div2" style="background-color: green; width: 300px; height: 300px;">
            <div id="div3" style="background-color: yellow; width: 200px; height: 200px;">
                <div id="div4" style="background-color: blue; width: 100px; height: 100px;">
                    
                </div>
            </div>
        </div>
        <style type="text/css">
            #div2{
                /* 设置position是为了成为参考对象 */
                position: relative;
            }
            #div4{
                top: 10px;
                right: 50px;
                /* 设置position是为了能够让自己相对别人去定位（选定位的参考对象） */
                position: absolute;
            }
        </style> -->
        
        <!-- <h1>3.相对定位</h1>
        <div id="div5" style="background-color: red; width: 200px; height: 200px;"></div>
        <style type="text/css">
            #div5{
                bottom: 50px;
                /* 如果设置position为relative是把自己原来的位置作为参考对象，很少使用；一般设置
                 positio为relative是为了让自己成为别人的参考对象*/
                position: relative;
            }
        </style> -->
        
        <!-- <h1 id="top">相对浏览器定位</h1>
        <div style="height: 10000px;">
            <div id="div6" style="background-color: red; width: 100px; height: 50px;">
                <a href="#top">回到顶部</a>
            </div>
        </div>
        <p>我是底部</p>
        <style type="text/css">
            #div6{
                right: 40px;
                bottom: 30px;
                position: fixed;
            }
            
        </style> -->
        
        <h1>sticky</h1>
        <div id="" style="background-color: red; height: 2000px;">
            
        </div>
        <div id="div7" style="background-color: green; height: 100px;">
            
        </div>
        <style type="text/css">
            #div7{
                bottom: 0px;
                position: sticky;
            }
        </style>
        
        
 </body>
</html>

八、盒子模型

1.盒子模型

html中每一个可见的标签不管在任何情况下都是由4个部分组成：content、padding、border和margin

标签组成元素属性和功能
content可见的；设置背景会作用于content；设置标签的宽度和高度其实就是在设置conten的宽度和高度；标签内容和子标签都是添加到content上的
padding可见的；设置背景会作用于padding；padding有四个方向，每个方向可以单独控制
border可见的；border有四个方向，每个方向也可以单独控制
margin不可见但是占位置；有四个方向，每个方向也可以单独控制

代码举例展示：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body >
        
        <div id="div1" style=" background-color: greenyellow;"><img src="img/aaa.ico" >div1</div>
        <input type="text" style="padding-left: 10px;"/>
        
        <style type="text/css">
            #div1{
                /* 1.content */
                width: 100px; 
                height: 100px;
                
                /* 2.padding (可以让标签内容和标签的边框在某个方向上保持一个的距离)
                   1)同时设置4个方向的padding：paddidng:大小;
                   2）单独设置指定方向的padding: padding-left、padding-right、padding-top、padding-bottom
                */
               padding: 20px;
               
               /* 3.border
                  1)同时设置4个方向的border：
                  border:边框大小 边框样式 边框颜色;  (边框样式:solid-实线、dotted-点划线、dashed-虚线、double-双实线)
                  2)单独设置指定方向的border
                  border-left、border-right、border-top、border-bottom
                */
               /* border: 5px solid red; */
               border-left: 3px solid red;
               border-top: 5px dotted purple;
               border-bottom: 4px dashed seagreen;
               border-right: 3px double blue;
                
               /* 4.margin */
               /* margin: 100px; */
               margin-left: 50px;
            }
            
            
        </style>
        
            
        </div>
 </body>
</html>

web显示结果：
在这里插入图片描述

九、简单训练

实现功能如下：
在网页一块固定区域内显示多个相同的方框，整齐排列，当网页缩小或者变大，方框的排列也会跟着变化

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
        <div style="background-color: yellow; width: 50%; overflow: hidden; margin-top: 100px; margin-left: 200px; padding-bottom: 30px;">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div></div>
        </div>
       
        
        <style type="text/css">
            div>div{
                width: 100px;
                height: 100px;
                background-color: red;
                
                margin-left: 20px;
                margin-top: 20px;
                float: left;
            }
        </style>
 </body>
</html>

代码输出的效果图如下所示：
网页显示区域没有缩小时的显示效果：
在这里插入图片描述
网页缩小后的显示效果，方框自动变化：在这里插入图片描述

苏格尼塞
关注
【前端之旅】JavaScript进阶笔记
孙不坚1208
09-25 1353
JavaScript进阶笔记
web前端篇:css练习题
ITmiaomiao666的博客
06-12 4230
1.div和span标签在网页中的作用？ div将网站分割成独立的逻辑区域division分割 span:小区域标签，在不影响文本正常显示的情况下，单独设置对应的样式。 <style> span.active{ font-weight:bold; } </style> <p> <span>内容</span>...
前端布局进阶
万物皆可互联，一切均可编程
09-10 302
前言 文档流：没有其他布局则是符合文档流规则的 float：脱离文档流 position：有四种：static，relative，absolute，fixed。 float position static 默认为static，不脱离文档流，没有任何效果 relative 基于元素原来的位置产生了偏移，元素原来的位置还保留着，不脱离文档流 <!DOCTYPE HTML> &l...
Web前端最新css从入门到精通【超详细笔记】，阿里大神最佳总结Flutter进阶学习笔记
最新发布
2401_84619467的博客
05-09 856
浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。
CSS border dashed 虚线调整
蓝即正义
12-10 4829
拿到UI 给的原稿有很多虚线，咱也不敢说这好看不好看，反正咱就先直接给高精度还原了就完事了。 正常情况下我们虚线是使用 盒子的 border dashed 来实现的，利用盒子的边来完成。 此时会发现这种方法，提供的属性值只有三种，如下： 但是这三种值完全不能满足我们对虚线的“自定义要求”，所以推荐使用以下方法： 其本质是给边框加了渐变色，从而用长度，渐变的范围来实现虚线段内，没给虚线的长度和间距。 效果，高精度还原 ...
HTML CSS——margin和padding的学习
weixin_34097242的博客
01-08 158
  http://www.cnblogs.com/fengyv/p/3789333.html   你在学习margin和padding的时候是不是懵了，——什么他娘的内边距，什么他娘的外边距。呵呵呵，刚开始我也有点不理解，后来通过查资料学习总算弄明白了，现在我来谈一下自己对margin和padding的理解：         一、什么是边距         CSS中的边距...
【前端03_CSS】选择器、优先级及计算、文本、背景图、雪碧图、行级/块级/行内块
Lovely Ruby 的手账
07-24 998
前端学习总结（3） 样式Style分类： 样式分内部样式，行内样式 行内样式：写在标签里的Style，例子如下 <div style="width: 200px;height: 200px;background-color: skyblue"></div> 内部样式：写在head中style里的样式 <head> <!--内部样式：写在h...
HTML5+CSS3 Web前端设计基础教程-PPT.rar
06-22
这篇教程——"HTML5+CSS3 Web前端设计基础教程-PPT"，显然是一个旨在帮助初学者和进阶者理解这两种语言基本概念和实践应用的资源。 HTML5（超文本标记语言第五版）是网页内容的结构化标准，它增强了对多媒体的支持...
Web前端入门：HTML、CSS与基础配置教程
本篇web前端第一阶段视频教程详细介绍了初学者必备的基础知识，旨在帮助学习者快速入门web开发。教程首先从HTML部分开始，讲解了WebStorm这款流行的前端开发工具的常用配置和快捷键，这对于提高开发效率至关重要。...
前端开发核心知识进阶
GitChat
07-02 4348
前端部分基础习题
热门推荐
GZHGK的博客
11-19 7万+
一.HTML 1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。 !DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。 标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在
解决：消除html中body上面的空白
东天里的冬天
06-03 1万+
最近在自己写项目玩的时候在前端部分遇到个问题：在body上面一直有块空白区域无法清除， 即便是做了以下处理依旧无法消除 body{ margin: 0px; padding: 0px; } 后来在度娘上几经辗转才找到了正确答案，或许是下面用到了margin-top的缘故，因为本身就不是写前端的，所以具体原因暂不作深究 解决方案是加入如下CSS： * { mar
移动前端知识的一些总结
weixin_30678821的博客
06-11 5392
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 ?html 代码<met...
摘自w3school的HTML标签内容——基础标签
wzt2017l的博客
03-22 511
html标签功能排序： 1：         定义文档类型，必须是html文档第一行，声明并不是html标签，它指示web浏览器使用哪一个HTML版本进行编写的指令。 2：    定义html文档，即使 html 元素是文档的根元素，它也不包含 doctype 元素。doctype 元素必须位于 html 元素之前。                        属性：1:： xmlns
CSS（四）详解Grid布局
前端产品工程师
08-17 1330
这是一个系列的文章，你也可以查看其他文章： 0、CSS-预热篇 1、CSS（一）详解position 2、CSS（二）transform 3、CSS（三）flex布局（flex弹性布局详解） 4、CSS（四）详解Grid布局 5、CSS（五）CSS动画-transition简介 6、CSS（六）CSS动画-animation简介 7、CSS(七)两栏布局详解 Grid布局又叫做...
默认隐藏内容，点击标题显示内容。
web开发自学
09-08 703
&lt;!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;htmlxmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;runcod
91_css笔记7_css的布局方式 + 布局案例 + 书写形式概览
a_horse的博客
11-19 297
一，布局方式 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 display 属性（文档流布局），传统盒模型布局方式 按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行 display参数设置，来控制显示形式 display:none（内容和空间均隐藏）和visibility:hidden（内容隐藏，空间不隐藏）区别 display:block  --...
CSS学习2----padding/border/margin
weixin_34122548的博客
07-11 159
1.padding是内容和内容的边框之间的空间。 2.border是指画在方框的每一边的直线。可以是一边或者任何边的组合。 3.margin是指一个标签和另一个标签之间的间隔。 4.他们都有四个属性：margin-left,margin-right,margin-top,margin-bottom; padding-left,paddin...
【前端】dashed 间距
而我想……成为一个有趣的妞
03-20 1734
效果图 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> body{ background: #000; display: flex; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值