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

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

常见的几种布局方式

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

固定布局

流式布局(自适应布局)

弹性布局(伸缩布局)

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

定位布局

浮动布局

响应式布局(媒体查询)

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

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

(视频教程推荐:css视频教程)

有以下几点需要注意:

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

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

边框不能用百分比设置

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

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

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

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 05:01:40
下一篇 2025年12月24日 05:01:48

相关推荐

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

    display属性值介绍: (推荐教程:css快速入门) none    此元素不会被显示。     block    此元素将显示为块级元素,此元素前后会带有换行符。     inline    默认。此元素会被显示为内联元素,元素前后没有换行符。     立即学习“前端免费学习笔记(深入)”; …

    2025年12月24日
    000
  • css如何实现圆角内凹效果

    实现思路: (推荐教程:css快速入门) 两个并排的div,在第二个div内定义一个2倍宽高的名为item,对item进行设置border-radius: 50%,再对其进行绝对定位。 代码实现: Title .box { width: 50px; height: 50px; overflow: h…

    2025年12月24日
    000
  • css如何实现蒙版效果

    重要知识点: (推荐教程:css快速入门) background-color:#fff;filter:Alpha(Opacity=60);opacity:0.6; 样式: .back {background:url(images/coupon-logo.gif) no-repeat;} .top {…

    2025年12月24日
    000
  • css中伪类和伪元素有什么区别

    一、定义区别 (推荐教程:css快速入门) 伪类 伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如 :visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:…

    2025年12月24日
    000
  • css清除浮动的原理介绍

    首先我们要知道clear:both是清除浮动的关键。 (推荐教程:css快速入门) clear是CSS中的定位属性,规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素。 clear属性只能在块级元素上其作用,这就是清除浮动样式中display:block的…

    2025年12月24日 好文分享
    000
  • CSS Flex 的用途详解

    一、可以利用flex来布局一个p在另一个p里面水平垂直居中 如:html代码:  css代码: .container{width:600px;height:400px;border:1px solid blue;display: flex;justify-content:center;align-i…

    2025年12月24日
    000
  • CSS 实现三栏自适应布局

    所谓三列自适应布局指的是两边定宽,中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现。 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,…

    2025年12月24日
    000
  • css中的伪元素有什么作用

    伪元素可以用来添加一些选择器的特殊效果。 (推荐教程:css快速入门) 语法: selector:pseudo-element {property:value;} 举例: 1、”first-line” 伪元素用于向文本的首行设置特殊样式。 立即学习“前端免费学习笔记(深入)”…

    2025年12月24日
    000
  • CSS 中 @ 用法详解

    at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么。这是一个通用的语法,尽管每个at-rule有其它语法变体。 常规规则 常规规则遵循下面的语法: 代码如下: 立即学习“前端免费学习笔记(深入)”; …

    2025年12月24日
    000
  • 如何建立纯css的滑块

    可以使用 max-height 属性来建立纯 css 的滑块。 (推荐教程:css快速入门) 属性介绍: max-height 属性设置元素的最大高度。max-height属性不包括填充,边框,或页边距! 代码实现: 立即学习“前端免费学习笔记(深入)”; .slider { max-height:…

    2025年12月24日
    000
  • CSS的三种样式形式?

    CSS的三种样式形式? 1、内联式,是把css代码直接写在现有的HTML标签中; 这里文字是红色。 2、嵌入式,是把css样式代码写在“style”标签之间; span{color:red;} 3、外联式,是把css代码写一个单独的外部文件中,通过“link”标签引入。 立即学习“前端免费学习笔记(…

    2025年12月24日
    000
  • 一分钟了解CSS的主要功能

    CSS主要功能及定义 主要功能:  1、可创建新模板,开始创建的新模板的CSS代码为“默认”模板的代码  2、可对您定义的模板CSS进行“编辑”、“重命名”、“删除”、“使用”等操作。  立即学习“前端免费学习笔记(深入)”; 3、在保存自定义CSS后系统会自动生成套入该CSS的空间主页截图,点击该…

    2025年12月24日
    000
  • CSS3如何实现图片滚动播放效果(附代码)

    CSS3实现图片滚轮效果 在平常我们使用一些滚动图片的效果,都是用javascript代码(JQuery)实现,但是在如今Html5和CSS3盛行的时代,可以替代javascript代码来实现一些常见的效果来提高网页的加载速度,对用户来说体验是更加友好的。 特别是现在微信平台开发比较火热的年代,同样…

    2025年12月24日
    000
  • css中标签嵌套规则有哪些

    嵌套规则介绍: (推荐教程:css快速入门) 1、body 可以直接包含块状元素、ins、del、script等不可以直接包含行内元素; 2、ins 和 del(行内元素)可以包含块状元素或者行内元素,其他任何行内元素都不允许包含块状元素; 3、p、h1-h6 可以直接包含行内元素和文本信息,但是不…

    2025年12月24日
    000
  • 两分钟带你了解在CSS中三种使图片居中的方法

    在做网页美化的时候,都会用到图片居中,那你知道在CSS中有哪三种使图片居中的方法吗?下面我们一起看看吧。 1.利用display:table-cell,具体代码如下: html代码如下:   @@##@@ css代码如下: .img_wrap{ width: 400px; height: 300px…

    2025年12月24日 好文分享
    000
  • css优化策略介绍

    css优化,提高性能的方法: (推荐教程:css快速入门) 避免过度约束 避免后代选择符 避免链式选择符 立即学习“前端免费学习笔记(深入)”; 使用紧凑的语法 避免不必要的命名空间 避免不必要的重复 最好使用表示语义的名字。一个好的类名应该是描述他是什么,而不是像什么 避免!important,可…

    2025年12月24日
    000
  • 手把手教你CSS如何实现毛玻璃效果

    今天在做一个登录界面的时候,由于视觉给的页面背景图片太鲜艳亮眼,导致页面中间的登录表单框很不显眼,效果很差。就想到了做成毛玻璃的效果,现在分享出来,大家一起看看吧。 页面结构如下: 由于之前用过CSS filter属性,在属性值中使用blur()函数可以起到毛玻璃效果,所以我有2个思路来实现突出登录…

    2025年12月24日
    000
  • 如何清理无用的CSS样式,你知道吗?

    我们在编写CSS样式的时候,往往或遭遇CSS样式的修改或者界面设计的变更,页面的CSS在经历几个版本的修改之后,可能有些样式已经用不到了,或许将某些样式更名了而原来的忘了删除,总之页面中可能存在着一些无用的样式。 这些无用的浪费了一些服务器空间和带宽消耗,也会增大我们的维护成本。那么有没有一些办法来…

    2025年12月24日 好文分享
    000
  • css中隐藏元素的方法有哪些?有什么区别?

    隐藏元素的方法: (推荐学习:css快速入门) display:none 隐藏对应元素,在文档流中不再给他分配空间,各边元素会合拢但是资源会加载,DOM可以访问。 visibility:hidden 隐藏对应元素,但是在文档流中保留原来的空间,资源会加载。 opacity:0 可以点击,占据空间,可…

    2025年12月24日
    000
  • 一分钟带你了解css兼容ie的写法

    许多同学都在问CSS如何兼容ie浏览器,下面我就来介绍一下css兼容ie的写法,大家一起来看看,如有错误和不足,欢迎指出。 width:auto;是宽度自动的意思。 9是hack css 的一种写法,这种在正常css代码后面加”9″的方式,只有IE浏览器才能识别,其他浏览器会…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信