网页前端DIV定位笔记

矫情吗；* 2022-05-22 09:46 189阅读 0赞

从以前的Table做框架到现在最新的div定位，过程确实不是很适应，总怕出现不少的页面混乱。在转型过程中学习了不少东西，与大家共勉：

1、怎么让div居中

以前用Table的时候都是使用align，但现在很多浏览器都失效了。使用div+css，就很简单了，

给div加上margin:0 auto

0是指上下边距为0px，而auto就比较特别，他是使左右自动适应，就是居中的意思。这个对所有块元素都可以使用

而使块元素内文字、图片居中，就需要使用text-align：center了。text-align很特别，他不光针对text，还针对其他的块内容。

因为align已经被他替代了。

2、如何让div中内容贴近容器底部

如果是文字或者其他块级元素。使用定位的思想。position：absolute，然后boottom：0。

父元素注意要设置一下position：relative。因为绝对定位是相对于最近一个非static定位的元素的相对位置。

但是如果出现多个元素在同一父元素内 同时需要绝对定位移动位置，那么需要注意，如果直接这样做，

会造成那些元素重叠，而不是与float一样的正常排布，这是因为他们有相同的父元素，使用绝对定位之后就都会移动到父元素的左边，

而不是还处在原来的位置，为了解决这种情况，需要给那些需要移动位置的元素 嵌套一个父元素，让他们的父元素去定位，

给他们的父元素设置relative，这样原先的父元素就变成了爷元素。这样一来，再给他们设置完绝对定位加位置属性之后就不会出现重叠的效果，

因为他们都是在父元素的限度内去移动，再跑也跑不出来。这样就又不重叠，又能贴近底部，但是需要注意。新嵌套的父元素需要一个固定的高度，

高度要高于内部元素。不然他的高度就是被内部元素撑开的。

3、Box模型

![0b7b02087bf40ad147ed0e82542c11dfa9ecce42.jpg][]

要做出好看的框架，这个Box模型就需要好好的认清楚，设置的width和height只是设置了CONTENT的大小。

BOX的宽度=MARGIN\*2+BORDER\*2+Padding\*2+CONTENT（width）

BOX的高度=MARGIN\*2+BORDER\*2+Padding\*2+CONTENT（height）

[0b7b02087bf40ad147ed0e82542c11dfa9ecce42.jpg]: https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=157ad94e96cad1c8c4b6f4751e570c6c/0b7b02087bf40ad147ed0e82542c11dfa9ecce42.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，189人围观）

还没有评论，来说两句吧...

相关阅读

相关 div框架布局(div做网页框架)

div怎么布局 table布局是简单，但现在的页面都要符合W3C标准，所以都改成css+div；你如果想学css+div,；你到这个网址上去看看，有很详细的教程，我没事就

青旅半醒/ 2023年09月26日 11:56/ 0 赞/ 54 阅读

相关关于div内部绝对定位的div，位置并不根据父元素的来定位的笔记

今天遇到一个奇怪的现象，假如html body： <div id="div1"> <div id="div2"></div> </div> CS

r囧r小猫/ 2023年06月03日 11:52/ 0 赞/ 114 阅读

相关 12-DIV+CSS-定位

定位 1. 基本概念 CSS定位(positioning)属性允许你对元素进行定位. 定位的基本思想很简单,它允许你定义元素框相对于其正常位

冷不防/ 2022年09月18日 02:55/ 0 赞/ 106 阅读

相关 DIV+CSS定位position

position属性该属性是用于对元素进行定位。 css的三种定位机制普通流，浮动和绝对定位普通流：普通流中的元素的位置由元素在 (X)HTML 中的位置

╰+哭是因爲堅強的太久メ/ 2022年08月01日 01:26/ 0 赞/ 228 阅读

相关网页前端DIV定位笔记

从以前的Table做框架到现在最新的div定位，过程确实不是很适应，总怕出现不少的页面混乱。在转型过程中学习了不少东西，与大家共勉： 1、怎么让div居中以前用Table

矫情吗；*/ 2022年05月22日 09:46/ 0 赞/ 190 阅读

相关网页爬虫XPath 定位

网页爬虫XPath 定位 > 最近使用到了XPath进行爬虫标签的定位，就将常用的语法总结了一下，方便下次使用时做参考。 --------------------

た入场券/ 2022年05月22日 03:26/ 0 赞/ 261 阅读

相关 DIV+CSS绝对定位和相对定位详解

本文和大家重点讨论一下DIV+CSS之绝对定位和相对定位，在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位

￡神魔★判官ぃ/ 2022年04月21日 14:18/ 0 赞/ 353 阅读

相关网页前端div的高度设置

首先我们要区分关于CSS里height的一个误区，width：100%是保持和父块宽度一样，但是有的时候我们设置height:100%会无效，为什么呢因为我们在div设计

蔚落/ 2022年04月16日 05:56/ 0 赞/ 418 阅读

相关前端基础学习笔记定位

相对定位 CSS position属性用于指定一个元素在文档中的定位方式。 top ， right ， bottom 和 left 属性则决定了该元素的最终位置。

短命女/ 2022年04月13日 04:10/ 0 赞/ 205 阅读

相关网页定位导航

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页导航特...

红太狼/ 2021年05月03日 09:50/ 0 赞/ 541 阅读