核心知识
- 文档流/普通流(Normal Flow)
- 内联元素的宽高(高度是由行高决定的,宽度=内容+border+marging+padding)
- 块级元素的宽高(高度是内部文档流元素的高度总和,宽度默认适应父元素的宽度)
- 水平居中
- 垂直居中
- 文字溢出省略
- 盒模型
- 一比一的div(
<div style="padding-top=100%;border: 1px solid red;"></div>
) - outline
- border调试大法
- 一比一的div(
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合并问题呢 ?
- 父元素加
border
属性 - 父元素加
padding
属性 - 父元素加
overflow:hidden;
(不推荐使用,会有bug)
总结:div的高度是由什么决定?是由它文档流中元素的高度的总和。
什么是文档流(Normal Flow):指的是元素排版布局过程中,内联元素会默认自动从左往右,块级元素从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。
脱离文档流(常见)
float:left;
position: absolute;
position:fixed;
转载于:https://juejin.im/post/5cdf4d78e51d45105f4e34a2
CCS进阶——div的宽度和高度是由什么决定的?的更多相关文章
-
关于Div的宽度与高度的100%设定
http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...
-
Div的宽度与高度的100%设定
div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效. 举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的 ...
-
用伪类实现一个div的宽度和高度是固定百分比
遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用 ...
-
调用jquery的resize方法改变div的宽度和高度在IE中不变,在谷歌中可以正常显示
1.jquery代码: 1.1问题的版本: $(function() { haituheight(); $(window).resize(function(){ haituheight(); }); ...
-
关于div宽度和高度的100%设定
设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...
-
jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
-
jquery里面获取div区块的宽度与高度
https://blog.csdn.net/ll641058431/article/details/52768825 获取宽度 $('div').width(); 获取:区块的本身宽度 $(' ...
-
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
-
JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)
一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与 Margin 的宽度,四个加起来才是 di ...
随机推荐
-
Windows Server 2008 R2中的ASP.NET环境架设
.NET Framework的部分功能在Windows Server 2008 R2得到支持,包括:.NET 2/3/3.5的子集和ASP.NET.另外,PowerShell也在Server Core ...
-
PHP 多维数组 Key Value的使用
<?php $user["60"] = array("id" => "60", "num" => &q ...
-
GCC中文手册
GCC 1 NAME gcc,g++-GNU工程的C和C++编译器(egcs-1.1.2) 总览(SYNOPSIS) gcc[option|filename ]... g++[option|filen ...
-
Java最全文件操作实例汇总
本文实例汇总了Java文件操作.分享给大家供大家参考,具体如下: 1.创建文件夹 ? 1 2 3 4 5 6 7 8 9 10 11 //import java.io.*; File myFolder ...
-
SPFA,dijskra,prime,topu四种算法的模板
////#include<stdio.h> ////#include<string.h> ////#include<queue> ////#include<a ...
-
JavaScript 使用Document记录cookie
cookie对于我们使用者来说,有时帮助还是挺大的,比方对于一些不是特别重要的站点,比方公司的測试平台,每次登陆都要手动输入username和password 非常繁琐.所以为了更少的引入其他框架,就 ...
-
uwsgi常用配置
一.安装方式 1.wget 可以去官网:https://pypi.python.org/pypi/uWSGI/ 下载对应的版本 tar -xvf uwsgi-2.13.1.tar.gz cd uw ...
-
GitLab 社区版 11.0.2用户管理教程
Gitlab地址:http://xx.xx.xx.xx/users/sign_in 登录之后,主界面 右上角功能按钮,分别为管理区域.新建.问题.合并请求.待办事件.个人设置 选择管理区域按钮 可以根 ...
-
Qt + VS2013
参考文章: https://blog.csdn.net/u013447988/article/details/76170070
-
Eclipse启动错误JVM terminated. exit code 1解决方法
现象: 前一天eclipse还用得好好的,但今天就不能用了,怎么回事? 解决方案: 请先参考其它网络资料:http://www.baidu.com/s?wd=eclipse+jvm+terminate ...