CSS 盒子模型 二
Sublime 快捷键：
文件保存后，输入 html:xt + tab ,补全html
html:xt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
</head>
<body> </body>
</html>
补全class
div.nav + tab =
<div class="nav"><div>
输入多行<a> 标签
a[#]*3 + tab
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
案例：
模仿新浪首页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.nav{
height: 40px;
background: #eee;
border-top: 3px solid orange;
border-bottom: 1px solid #aaa;
}
.nav-con{
width: 1000px;
height: 40px;
margin: auto; /*盒子居中对齐*/
/*line-height: 40px;*/
}
a{
font:12px/40px 微软雅黑;/* 文字大小 行高 */
color: #;
display: inline-block;
height: 40px;
text-decoration: none;
}
a:hover{
background: #;
}
</style> </head> <body>
<div class="nav">
<div class="nav-con">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
</div>
</div>
</body>
</html>
垂直方向外边距合并
垂直方向的两个盒子，如果都设置了垂直方向的外边距，取设置的较大的值。
外边距塌陷
嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距塌陷。
解决方法：
1.给父盒子设置边框；
2.给父盒子设置 overflow:hidden bfc 格式化上下文。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 500px;
height: 400px;
background: #;
border: 1px solid #;
}
.son{
width: 200px;
height: 200px;
background: #eee;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
CSS 盒子模型 二的更多相关文章
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- CSS 盒子模型概述
一.简介 CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成. 盒子模型,最里面的部分是实际内容:直接包围内 ...
- 几个容易出错的css盒子模型细节
css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...
- css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
- CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.一.css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) ,包含了元 ...
- [Web 前端] CSS 盒子模型，绝对定位和相对定位
cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...
- CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
- 前端之CSS——盒子模型和浮动
一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- CSS盒子模型（框模型）
一.如何理解盒子模型 盒子模型(框模型)是css部分非常重要的一部分知识,CSS在处理网页的时候,认为每个元素都处在一个不可见的盒子中.盒子模型的构想,把所有的元素都想象成盒子,那么对网页进行布局 ...
随机推荐
- [转]gluProject 和 gluUnproject 的详解
gluProject 和 gluUnproject 的详解 简介: 三维空间中,经常需要将 3D 空间中的点转换到 2D(屏幕坐标),或者将 2D 点转换到 3D 空间中.当你使用 OpenGL 的时 ...
- 如何破解银行O2O模式创新
文/赵志宏 摩 根大通的买房APP,使客户可根据自己的位置选择合适的贷款经理:华道数据提供的卡惠APP,使客户可随时查询自己周围信用卡刷卡打折的商户信息:民生银 行的微信预约叫号功能,使客户根据可自己 ...
- Python中dataframe数据框中选择某一列非空的行
利用pandas自带的函数notnull可以很容易判断某一列是否为null类型,但是如果这一列中某一格为空字符串"",此时notnull函数会返回True,而一般我们选择非空行并不 ...
- ios开发之--多个按钮单选效果
开发项目时,有很多场景需要用到按钮单选效果,例如充值页面,选择标签页面等,具体实现代码如下: 1,创建 -(UIView *)headerView { CGFloat width = (Kscreen ...
- 详解 Tomcat 的连接数与线程池（转）
很不错的文章 https://juejin.im/post/5a0bf917f265da432d27a215
- Selenium 管理 Cookies
使用 Selenium ,还可以方便地对 Cookies 进行操作,例如获取.添加 .删除 Cookies 等 from selenium import webdriver browser = web ...
- U3D的控制
做游戏少不了控制,但是一个成熟的游戏引擎,是不能简单仅仅获取键盘中或者遥感确定的按键来控制,要考虑到用户更改游戏按键的情况,当然也得考虑到不同设备的不通输入方式,比如U3D是可以运行在iphone上的 ...
- JLINK与JTAG的区别（转）
调试ARM,要遵循ARM的调试接口协议,JTAG就是其中的一种.当仿真时,IAR.KEIL.ADS等都有一个公共的调试接口,RDI就是其中的一种,那么我们如何完成RDI-->ARM调试协议(JT ...
- CentoOS6.6安装netcat
http://blog.csdn.net/u013673976/article/details/47084841 CentOS下安装netcat 使用zookeeper过程中,需要监控集群状态.在使用 ...
- php技能评测
以下摘抄自:https://www.viphper.com/?p=1236 公司出了一些自我评测的PHP题目,现将题目和答案记录于此,以方便记忆. 1. 魔术函数有哪些,分别在什么时候调用?__con ...