CSS的三种布局方式

前言
所谓布局，就是指定把一个盒子放在合适的位置称为“布局”
流式布局(最简单，盒子的默认布局)
百分比布局，通过盒子的宽度(百分比)来根据屏幕的宽带来进行收缩，不受固定像素的限制，内容向两侧填充(移动web端开发比较常见的布局方式)也就是说css单位全部换成百分比，缺点需要百分比的参数对象
浮动布局(PC端网页时，浮动布局还是主流，后面css还会学到flex布局)

float(none => 不浮动、left => 左浮动、right => 右浮动、inherit => 继承父元素浮动)
flex布局:弹性盒子模型_逸尘的博客-CSDN博客

层布局(定位)

position属性(配合left，right，top，bottom)

值	描述
static	静态定位的盒子是标准流状态，用于取消定位(position的默认值)。
inherit	表示会从父元素继承position的值。
fixed	固定定位。相对浏览器的窗口进行定位。
relative	相对定位。对于附加该属性值的定位，相对于该元素的正常位置进行定位。
absolute	相对于除了static以外的第一个父元素进行定位，如果没有，则相对于浏览器窗口定位。

CSS的三种布局方式相关推荐

CSS+DIV三种布局方式
在学习了盒模型.块级元素和行内元素得到概念后,我们来说一下CSS的一个比较重要的用途:布局.以前我们学过表格可以起到布局页面的作用,比如布局表单,但实际工作表格的布局通常也仅仅是用来布局表单.绝大多数 ...
CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
外部导入方式添加背景图_web前端基础：CSS的三种导入方式说明
随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能.但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿.于是css便诞生了. Web前端基础教程,Web ...
CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
CSS的三种引入方式：外部样式、内部样式和行内样式
CSS的三种引入方式:外部样式.内部样式和行内样式外部样式链接式:link标签导入式:@import 链接式与导入式的区别内部样式行内样式样式优先级外部样式即CSS代码保存在外部,HT ...
CSS的三种引入方式与JS的三种引入方式
CSS的三种引入方式前端三剑客分为html,css,js, html作为骨架,楼体是观看者看到的第一元素,而css和js是美化并增加功能的肉体羽毛或者楼体工装,肉体羽毛需要安装到骨架上,才能使整体完 ...
css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型
一.CSS简介 1.什么是css 重叠样式表主要是负责标签的样式美化页面一个网页分三大部分结构层: 主要由html负责负责页面的结构表现层: 主要由css负责页面的展示样式美化页面行 ...
Html CSS的三种链接方式
感谢原文:https://blog.csdn.net/abc5382334/article/details/24260817 感谢原文:https://blog.csdn.net/jiaqingge/ ...
简述css样式的三种引入html的方式,css-1,css的三种引入方式基本选择器
css三种引入方式和四种基本选择器 /*内接样式*/ /*1 选择器选中的是 '共性'*/span{color:green;font-size:30px; } /*组合选择器*/ul,ol{lis ...

CSS的三种布局方式

CSS的三种布局方式相关推荐

最新文章

热门文章