CCS进阶——div的宽度和高度是由什么决定的?

时间:2022-08-31 20:44:21

核心知识

  • 文档流/普通流(Normal Flow)
    1. 内联元素的宽高(高度是由行高决定的,宽度=内容+border+marging+padding)
    2. 块级元素的宽高(高度是内部文档流元素的高度总和,宽度默认适应父元素的宽度)
    3. 水平居中
    4. 垂直居中
    5. 文字溢出省略
  • 盒模型
    1. 一比一的div(<div style="padding-top=100%;border: 1px solid red;"></div>
    2. outline
    3. border调试大法

div的宽度

我们先来看一个例子。这个div的高度是多少呢?

当我们加上 font-size:20px,div的高度变成了28px,why?

思考:是 line-higth:normal影响的吗?normal这个值是多少呢

不是。 换个字体就不是了。默认是行高和字体设计有关系。

div的高度不确定。或者说div的高度等于line-height指定的高度。


文字垂直居中

让一个div高度是40px,不要写死height,而是要用padding去撑出高度

div{
background-color: grey;
line-height: 30px;
padding: 5px 0;
}
复制代码

文字垂直水平居中

再加上text-align:center;就可以实现文字垂直水平居中。

div{
background-color: grey;
line-height: 30px;
padding: 5px 0;
text-align: center
}
复制代码

margin合并

如何取消margin合并问题呢 ?

  1. 父元素加border属性
  2. 父元素加padding属性
  3. 父元素加overflow:hidden;(不推荐使用,会有bug)

总结:div的高度是由什么决定?是由它文档流中元素的高度的总和。

什么是文档流(Normal Flow):指的是元素排版布局过程中,内联元素会默认自动从左往右,块级元素从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。

脱离文档流(常见)

  1. float:left;
  2. position: absolute;
  3. position:fixed;

转载于:https://juejin.im/post/5cdf4d78e51d45105f4e34a2

CCS进阶——div的宽度和高度是由什么决定的?的更多相关文章

  1. 关于Div的宽度与高度的100&percnt;设定

    http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...

  2. Div的宽度与高度的100&percnt;设定

    div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效. 举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的 ...

  3. 用伪类实现一个div的宽度和高度是固定百分比

    遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用 ...

  4. 调用jquery的resize方法改变div的宽度和高度在IE中不变,在谷歌中可以正常显示

    1.jquery代码: 1.1问题的版本: $(function() { haituheight(); $(window).resize(function(){ haituheight(); }); ...

  5. 关于div宽度和高度的100&percnt;设定

    设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...

  6. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  7. jquery里面获取div区块的宽度与高度

    https://blog.csdn.net/ll641058431/article/details/52768825 获取宽度 $('div').width();     获取:区块的本身宽度 $(' ...

  8. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  9. JQUERY 获取 DIV 宽度与高度(width&comma;padding&comma;margin&comma;border)

    一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与  Margin 的宽度,四个加起来才是 di ...

随机推荐

  1. Windows Server 2008 R2中的ASP&period;NET环境架设

    .NET Framework的部分功能在Windows Server 2008 R2得到支持,包括:.NET 2/3/3.5的子集和ASP.NET.另外,PowerShell也在Server Core ...

  2. PHP 多维数组 Key Value的使用

    <?php $user["60"] = array("id" => "60", "num" => &q ...

  3. GCC中文手册

    GCC 1 NAME gcc,g++-GNU工程的C和C++编译器(egcs-1.1.2) 总览(SYNOPSIS) gcc[option|filename ]... g++[option|filen ...

  4. Java最全文件操作实例汇总

    本文实例汇总了Java文件操作.分享给大家供大家参考,具体如下: 1.创建文件夹 ? 1 2 3 4 5 6 7 8 9 10 11 //import java.io.*; File myFolder ...

  5. SPFA&comma;dijskra&comma;prime&comma;topu四种算法的模板

    ////#include<stdio.h> ////#include<string.h> ////#include<queue> ////#include<a ...

  6. JavaScript 使用Document记录cookie

    cookie对于我们使用者来说,有时帮助还是挺大的,比方对于一些不是特别重要的站点,比方公司的測试平台,每次登陆都要手动输入username和password 非常繁琐.所以为了更少的引入其他框架,就 ...

  7. uwsgi常用配置

    一.安装方式 1.wget 可以去官网:https://pypi.python.org/pypi/uWSGI/ 下载对应的版本   tar -xvf uwsgi-2.13.1.tar.gz cd uw ...

  8. GitLab 社区版 11&period;0&period;2用户管理教程

    Gitlab地址:http://xx.xx.xx.xx/users/sign_in 登录之后,主界面 右上角功能按钮,分别为管理区域.新建.问题.合并请求.待办事件.个人设置 选择管理区域按钮 可以根 ...

  9. Qt &plus; VS2013

    参考文章: https://blog.csdn.net/u013447988/article/details/76170070

  10. Eclipse启动错误JVM terminated&period; exit code 1解决方法

    现象: 前一天eclipse还用得好好的,但今天就不能用了,怎么回事? 解决方案: 请先参考其它网络资料:http://www.baidu.com/s?wd=eclipse+jvm+terminate ...