html css 布局知识概况

1、如果想设置页面居中，当设置margin属性为auto的时候，不能在设置浮动或绝对定位属性。并且一定要设置width为一个定值

2、盒子模型三维立体结构图

3、浮动布局利用浮动可以实现横向布局，通过float来实现（left--左浮动，right--右浮动，none--不浮动），特点是：元素会左移动，或右移动，直到触碰到容器为止。

当元素没有设置宽度值，而是设置了浮动属性，元素的宽度会随着内容的变化而变化。

当元素设置了浮动属性以后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。

清除浮动(一般是对收到浮动影响的元素)：1、clear属性--常用clear:both;clear:left;或者clear：right ； 2、设置width：100%（或是固定宽度）+overflow:hidden;

4、横向布局：主要用到的技能：float属性---使纵向排列的块级元素，横向排列，margin属性--设置两列之间的间距；

转载于:https://www.cnblogs.com/sunting1989/p/5660517.html

html css 布局知识概况相关推荐

一篇全面的CSS布局学习指南 [译]
本文来自SmashingMagazine上一篇非常不错的CSS布局综述类文章,汇总了各类CSS布局技术,并提供了这些技术深度阅读的链接.故而翻译过来和大家分享,原文链接在文末,感谢作者Rachel A ...
css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
恶补CSS的布局知识
光有CSS的基础是不够的,需要应用到网页的设计中. 先贴两个链接,好好学习下. 学习CSS布局:http://zh.learnlayout.com/display.html 英文原帖:http://w ...
css基础知识十：介绍一下CSS中的Grid网格布局?
一.是什么 Grid 布局即网格布局,是一个二维的布局方式,由纵横相交的两组网格线形成的框架性布局结构,能够同时处理行与列擅长将一个页面划分为几个主要区域,以及定义这些区域的大小.位置.层次等关系 ...
理解 CSS 布局和块级格式上下文
本文的目的是介绍一些概念来帮你增强 CSS 码力.如标题所示这篇文章主要是讲块级格式上下文BFCBlock Formatting Context.你可能没听过这个术语但只要你曾经使用过CSS 布局你 ...
CSS布局奇技淫巧：各种居中
CSS布局奇技淫巧:各种居中 2017-08-23 无双前端开发作者:无双链接:www.cnblogs.com/2050/p/3392803.html 居中是我们使用css来布局时常遇到的情况. ...
CSS布局最常用属性float（浮动）和position（定位）
在进行CSS网页布局时,对元素与容器进行布置与规划,最常用的两个属性就是浮动float和定位position.这两个属性的理解对CSS网页布局的学习非常重要.我们52CSS.com就这两个属性的相关知 ...
css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...

html css 布局知识概况

html css 布局知识概况相关推荐

最新文章

热门文章