css中有哪些常见的布局方式

css中有哪些常见的布局方式

常见的几种布局方式

(推荐教程:css快速入门)

固定布局

流式布局(自适应布局)

弹性布局(伸缩布局)

立即学习“前端免费学习笔记(深入)”;

定位布局

浮动布局

响应式布局(媒体查询)

固定布局的固定说的是盒子的宽高都是固定的。margin,padding等。

流式布局的流式是指的盒子的宽高和margin,padding是百分比。所以也称为百分比布局。

(视频教程推荐:css快速入门)

有以下几点需要注意:

百分比是基于元素父级的大小计算得来的;

元素的水平或者竖直间距都是相对于父级的宽度计算的.(margin&padding)

边框不能用百分比设置

定位布局指的是,绝对定位和相对定位以及固定定位。

浮动定位是只float:left;和float:right;要记得清浮动。

以上就是css中有哪些常见的布局方式的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2885057.html

(0)
上一篇 2025年3月10日 20:35:09
下一篇 2025年2月25日 00:00:21

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css中的display属性有哪些值?各有什么作用?

    display属性值介绍: (推荐教程:css快速入门) none    此元素不会被显示。     block    此元素将显示为块级元素,此元素前后会带有换行符。     inline    默认。此元素会被显示为内联元素,元素前后没…

    2025年3月10日
    200
  • 前端常见css的面试题目

    随着疫情的不断好转,各地都开始逐步的复工,当然对我们来说,也马上迎来所谓的金三银四跳槽季。在此,分享自己在前端领域中积累的一些经验,供自己温故知新。   对于前端来说,涉及的知识面广,内容繁多,但是万变不离其宗,主要也就是围绕着html(5…

    2025年3月10日
    200
  • 谈谈CSS实现水平垂直居中布局的方法

    最近面试的时候,面试官问到了CSS水平垂直居中布局的方式,对于刚入前端没多久的我,无疑是一脸懵逼,闲了赶紧查阅资料分析一波,给各位分享一下,避免落坑。 首先先说明一下html和一些基础css样式,下面就不再赘述!html 垂直水平居中 登录…

    2025年3月10日
    200
  • 在html元素中设置css样式的方式是什么

    如果我们要在HTML元素中设置CSS样式,那么我们就需要在元素中设置”id” 和 “class”选择器。 (推荐教程:CSS教程) 下面我们来分别说一下id选择器和class选择器。 id选择…

    2025年3月10日
    200
  • css如何设置透明度不会影响子元素

    通过RGBA设置透明度,只有最新的浏览器支持,支持IE9+,可通过RGBA的alpha通道的方式设定。 (推荐教程:CSS教程)  显示文字   登录后复制 前三个值是rgb的颜色值,最后一个透明度的值,取值为0~1,值越小越透明。 兼容所…

    2025年3月10日
    200
  • css怎样实现DIV高度自适应

    可以添加表格特性。 (推荐教程:CSS教程) 父级元素添加属性  display: table; 子一级元素添加属性 display: table-cell; 立即学习“前端免费学习笔记(深入)”; 代码:          .div-ro…

    2025年3月10日
    200
  • 利用css实现鼠标悬停效果

    我们先来看下效果: (推荐教程:CSS教程) html代码: 立即学习“前端免费学习笔记(深入)”;                     这是是pic-1                                        这…

    2025年3月10日
    200
  • css如何实现按钮居中显示

    先来看下效果: (推荐教程:CSS教程) 通过简单的Css样式就可以实现 立即学习“前端免费学习笔记(深入)”; 登录后复制 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。 .styl…

    2025年3月10日
    200
  • CSS如何清除浮动?3种方法介绍

    css如何清除浮动?本篇文章给大家介绍一下使用css清除浮动的3种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 首先这里就不讲为什么我们要清楚浮动,反正不清除浮动事多多。 下面我就讲三种常用清除浮动的方法,够用了。…

    2025年3月10日 编程技术
    200
  • 如何利用css实现圆环效果

    css实现圆环效果有多种方法,这里为大家分享五种方法: (推荐教程:CSS教程) 首先我们来看一下实现效果: 立即学习“前端免费学习笔记(深入)”; 接下来为大家介绍方法: 1、两个标签的嵌套      登录后复制 .element1{  …

    2025年3月10日
    200

发表回复

登录后才能评论