div+css布局注意点

客官°小女子只卖身不卖艺 2022-10-02 09:56 123阅读 0赞

**一 div居中**

\#container \{ margin:0 auto; \}

margin:1px 2px 3px 4px;其中四个值分别代表上右下左(顺时针)

margin:1px 2px;其中1px代表分别距浏览器上边和下边的距离，2px代表分别距左右的距离。

margin:0 auto; 0 代表距上下的距离，auto代表距左右的距离。当左右距离为auto的时候，浏览器自动测算时左右距离一致。

**二 绝对定位**

当某个div被设定为position:absolute，它本质上已经和其它对象分离开了，它的定位模式不影响其它对象，也不被其它对象影响。

\#sample\{  
postion:absolute;  
left:0;  
\}  
表示距左边距离为0px

例子:

\#left\{  
position:absolute;  
left:0;  
width:200px;  
\}

\#center\{  
margin-left:200px;  
margin-right:200px;

height:100px  
\}

\#right\{  
position:absolute;  
right:0;  
width:200px;  
\}

这样左右两边是宽度固定的两个div，中间的div距浏览器左右两边分别为200px，正好留出了左右div宽度的位置，并且中间div的宽度自适应。

**三 高度自适应**

有的人觉得很简单，直接设置height:100%即可，但是仅仅这样做是不够的。

**必须明白的一点是：一个对象的高度能否自适应，取决于它的父对象是否高度自适应。**

例子一:

<html>  
<body>  
<div id="content"></div>  
</body>  
</html>

要想让content的div高度自适应，必须这样设置

html,body\{ height:100%; \}

\#content\{ height:100%; \}

例子二:

<html>  
<body>  
<div id="content">  
<div id="left"></div>  
</div>  
</body>  
</html>

要想让left的div高度自适应，必须这样设置

html,body\{ height:100%; \}

\#content\{ height:100%; \}

\#left\{ height:100%; \}

也就是说要设置left的高度自适应，必须设该对象的父对象content高度自适应。

要设content高度自适应，也要设置其父对象的高度自适应。

转载于:https://blog.51cto.com/woshixy/1036018

发表评论取消回复

表情：

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

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

相关阅读

相关 DIVCSS使用要点是什么

css 兼容要点：doctYPe 影响 css 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, ie 不行 FF

爱被打了一巴掌/ 2024年04月03日 09:31/ 0 赞/ 115 阅读

相关关于divcss的使用详细介绍

第一步：先建立index.html和css.css两个文件。放在同一目录里 \[建议编辑工具用dreamweaver以后简称dw\] 第二步：在index.ht

红太狼/ 2024年04月03日 09:30/ 0 赞/ 119 阅读

相关 DIVCSS技术如何入门

css是cascading style sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助css的强大功能，网页

我会带着你远行/ 2024年04月03日 09:30/ 0 赞/ 106 阅读

相关 flex布局的相关注意事项

文献参考地址：[https://www.cnblogs.com/qcloud1001/p/9848619.html][https_www.cnblogs.com_qcloud1

﹏ヽ暗。殇╰゛Y/ 2023年08月17日 17:03/ 0 赞/ 119 阅读

相关 div+css布局注意点

一 div居中 \container \{ margin:0 auto; \} margin:1px 2px 3px 4px;其中四个值分别代表上右下左(顺时针

客官°小女子只卖身不卖艺/ 2022年10月02日 09:56/ 0 赞/ 124 阅读

相关 effectivC++ 注意点

1.size\_t只是一个typedef他，它用来表达字符串内字符个数或STL容器内的元素个数，它也是vector，deque和string内的operator\[\]函数接受

客官°小女子只卖身不卖艺/ 2022年08月11日 00:53/ 0 赞/ 278 阅读

相关语法分析注意点

一棵分析树可对应多个推导序列，但是分析树和最左（右）推导序列之间具有一一对应关系如果一个文法中存在某个句子有两棵分析树,那么该句子是二义性的。对于任意一个上下文无

男娘i/ 2022年06月14日 06:19/ 0 赞/ 266 阅读

相关 bootstrap复习注意点

1.bootstrap的是基于jQuery的，所以要在引入bootstrap之前引入jQuery 2.使用bootstrap，页面的内容需包含在`<div class="c

Dear 丶/ 2022年04月10日 02:56/ 0 赞/ 288 阅读

相关 ReactJs 注意点

注意点：1.在react创建之初，使用的是React.createClass方法来创建组件类，这种方式下，通过定义组件类的一个getInitialState方法来获取初始值，但

红太狼/ 2021年10月01日 03:24/ 0 赞/ 462 阅读

相关 yml文件注意点

1、在properties文件中是以”.”进行分割的，在yml中是用”:”进行分割; 2、yml的数据格式和json的格式很像，都是K-V格式，并且通过”:”进行赋值；

墨蓝/ 2021年09月27日 23:14/ 0 赞/ 391 阅读