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

最新推荐文章于 2024-05-18 21:13:57 发布
最新推荐文章于 2024-05-18 21:13:57 发布
阅读量263 收藏
点赞数
文章标签： 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>

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

苏格尼塞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WEB前端学习:CSS学习_CSS布局
01-08
CSS布局 文章目录CSS布局一、display二、标准三、浮动四、多列浮动布局1....该篇讲的是CSS布局，主要用于确定CSS盒子的位置 一、display display: block; 值 意义 none 元素被清除，相当于不存在常用于隐藏元素
前端布局进阶
万物皆可互联，一切均可编程
09-10 252
前言 文档流：没有其他布局则是符合文档流规则的 float：脱离文档流 position：有四种：static，relative，absolute，fixed。 float position static 默认为static，不脱离文档流，没有任何效果 relative 基于元素原来的位置产生了偏移，元素原来的位置还保留着，不脱离文档流 <!DOCTYPE HTML> &l...
web前端进阶_CSS基础_基础篇2
qq_17495489的博客
08-12 275
web前端css内容 一、css基础 1. 什么是CSS（样式表） CSS(Cascading Style Sheets) - 层叠样式表 CSS是web标准中的表现标准，主要用来设置网页内容的样式和布局（给标签化妆） 2.CSS代码写在哪儿 位置 方法 内联样式表 将样式表(css代码)写在标签的style属性中(样式只能作用于一个标签) 内部样式表 将样式表写在style标签中（样式只能作用于当前html文件中的所有标签） 外部样式表 将样式表写在外部的css文件中，然后在htm
WEB开发基础篇 ---- 进阶篇CSS3学习
weixin_45040301的博客
02-13 237
此篇文章为进阶知识点HTML5的学习，为本人学习时的笔记记录，同时也适合初学者学习。喜欢的友友可以关注一下，后续会补充JavaScript，TypeScript，vue2.0，vue3.0以及uni框架等等一系列的前端学习文章。（强者不喜请绕道，本人内心脆弱，勿喷） 现在已经学习了HTML和CSS的我们做一个静态网页已经是没有问题的了，但是随着CSS3的出现现在可以将我们的静态页面更进一步的美化。本篇内容我们就来了解一下CSS3相较于CSS新增了哪些内容，并且将这些知识点一一讲解并学会如何使用。 1.
web前端css布局图,web前端之CSS 布局经典问题整理
weixin_36429576的博客
08-04 302
CSS 定位问题主要就是经典的绝对定位，相对定位问题。10个文档学布局：通过十个例子讲解布局，主要涉及相对布局，绝对布局，浮动。HTML和CSS高级指南之二——定位详解(译文)：介绍浮动的使用，详细介绍定位的技巧，包括如何准确的给元素在 X 轴、Y 轴和 Z 轴定位三栏式布局涉及浮动和清除浮动，主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适...
web_javaweb前端模版_javascript_web前端模板_css_web登录_
09-30
Javaweb前端模板，包含登录，管理页面等
web前端开发_css参考手册
05-07
web前端开发_css参考手册
HTML678day_htmlCSS_前端基础_
10-01
黑马前端课程第一阶段就业班学习资料，第6天-第8天内容
HTML绿色风格农业科技公司网站模板_html_CSS+js_web前端开发_
10-04
HTML绿色风格农业科技公司网站模板。Web前端。
前端三大件速成 03 CSS（2）常用属性、内外边距及定位布局
weixin_42830015的博客
05-18 990
前端三大件速成 03 CSS（2）常用属性、内外边距及定位布局
样式表单MIME 类型 “text/plain“ 不是 “text/css“问题处理
jkzyx123的博客
05-15 257
样式表单www.*.com/static/js/*.css未载入，因为它的 MIME 类型 "text/plain" 不是 "text/css"。
css笔记总结2
fishniu35的博客
05-15 443
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。3.id 选择器和类选择器最大的不同在于使用次数上。
error in ./src/assets/css/element-variables.scss
qq_46199553的博客
05-15 315
这通常发生在使用 Webpack 和相关的 loader（如 sass-loader 或者 css-loader）来构建项目时，文件中的内容不符合预期或者缺少必要的 loader 配置。这个错误表明你的项目中使用的sass-loader需要node-sass的版本至少为4，但是当前项目依赖中的node-sass版本低于4。如果你使用的是 Vue.js 或其他前端框架，确保 element-variables.scss 文件的引用路径是正确的，并且遵循了该框架的样式导入规则。打开终端（命令行）。
css画一个缺了右边三角形的长方形
weixin_39818813的博客
05-17 238
画一个缺了右边三角形的长方形。
前端已死? Bootstrap--CSS&组件
金灰的博客
05-14 909
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多。通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。(这里的屏幕大小 是为了在前端显示的时候更好看,显示的更全.)用的时候href引用一下就行(link标签)( - 后面可加数字,总共12份就行.)--分的份数加起来是12就行了.v5--里面的图标更多.
css单行文本省略号、多行文本省略号
dream_boy_的博客
05-14 118
【代码】css单行文本省略号、多行文本省略号。
css基础（第三天）
最新发布
hl826669的博客
05-18 1199
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有 上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
css制作瀑布流
xiaohua0708day的博客
05-17 482
注意，虽然 CSS3 的列布局为创建瀑布流布局提供了一种简单的方法，但它可能不适合所有情况。例如，如果你需要更复杂的布局控制，或者需要在不同屏幕大小下有不同的列数，那么可能需要使用 JavaScript 或更复杂的 CSS 技术。对于更复杂的瀑布流布局需求，如响应式设计、动态加载内容等，你可能需要使用 JavaScript 库，如 Masonry、Isotope 等。这些库提供了更多的功能和灵活性，可以满足更复杂的瀑布流布局需求。但是，这个属性可能在一些旧的或不支持的浏览器中不起作用。
web前端字体居中_css如何让文字水平居中显示？
05-25
可以使用CSS的text-align属性来实现文字水平居中显示。例如，如果你想让一个div中的文字水平居中，可以在该元素的样式中添加以下代码： ```css div { text-align: center; } ``` 这样，div中的文字就会自动水平...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值