html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）
html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）
作者：王可利（Star·星星）
width 是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
Height 是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
Padding 是“内边距”的意思
Border 是“边框”
Margin 是“外边距”
真实占有的宽度 = 左边的border +左边的 padding + width +右边的border +右边的padding；
认识->padding padding
内边距，padding背景颜色一定和内容区域一样，background-color将填充border以内所有的区域
padding-right：10px；
padding-left：20px；
padding-top：30px；
padding-bottom：40px；
认识->margin
margin-left：100px；
margin-top：100px；
margin-right；100px；
margin-bottom：100px；注意：使用的时候与float会有相互的影响，可以使用clear：both，清除浮动
margin：0 auto 这个盒子居中，不是居中文本，必须是有明确width padding本质上指父子关系，margin是兄弟关系
border 边框的三要素：粗细。线性、颜色 dashed、dotted、solid、double、groove、ridge、inset、outset
浮动FLOAL
注意清楚float的方法：
1. clear：both（表示当前自己内部的元素不受其他盒子的影响）
2. overflow：hidden（超出范围内就隐藏）
3. 浮动的元素，只能被有高度的盒子高度，就是说，如果盒子内部有浮动，那么浮动就会在一定的范围内互相影响（加高方法）
html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）的更多相关文章
- css007 margin padding border
css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...
- CSS那些事儿-阅读随笔3（清除浮动）
浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both ...
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- css盒子布局,浮动布局以及显影与简单的动画
08.05自我总结 一.盒子布局 1.盒子布局的组成 margin border padding content 2.margin margin是外边距,控制盒子的显示位置相对于他的上一级 left. ...
- CSS -- 盒子模型 margin 的特点
margin在使用过程中具有如下的两个特点: 1.垂直外边距塌陷 --给子元素设置margin-top的时候,如果父元素也随着margin-top改变位置 解决方式: 给父元素设置边框 给父元素设置o ...
- css样式margin padding border
- margin padding border
Difference between margin and padding? Remember these 3 points: The Margin is the extra space around ...
- css系列教程--margin padding column(完结)
margin/margin-left/margin-right/margin-top/margin-bottom设置边距属性margin:0;--所有外边距0margin:0 1px;--margin ...
- 盒子布局、标签特性display、浮动、定位position
盒子模型布局: 盒子模型:每个标签都是一个盒子 盒子在页面显示在大小是:自身宽度+边框+边距(内边框+外边距) 如果一个盒子设置了边框,则边框需要被加两遍.若果设置了边距则内外边距根据设置情况要被加两 ...
随机推荐
- python学习笔记（递归函数）
博主看了看递归.说的简单点就是程序里面再调用程序本身,或者是方法里面再调研方法本身.或者是函数里面再调研函数本身 用于什么场景呢,博主这里是父子节点排序,父子节点的查询 直接上代码: #!/usr/b ...
- U盘无法拷贝超过4G的大文件
现在U盘的容量越来越大了,8G闪存满天飞,几乎已成“标配”,市面上再见难觅64M.128M等U盘的踪迹,可是细心的你也许已经发现,即使是8G或更大体积的U盘,仍然不能拷贝存储体积超过4G的大文件,这是 ...
- -(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
在有全屏侧滑的情况下,页面上有个slider需要左右滑动的时候,经常在滑动slider的时候页面也跟着滑动 解决办法一:关闭当前页面的全屏侧滑,开启系统侧滑 self ...
- Google Protocol Buffer 协议
1. Protocol Buffers 简介 Protocol Buffers (ProtocolBuffer/ protobuf )是Google公司开发的一种数据描述语言,类似于XML能够将结构化 ...
- django-ajax之post方式
post方式不同于get方式可以被django直接得到,因为django为post加入了csrf保护, 详细的文档地址https://docs.djangoproject.com/en/dev/re ...
- uinavigation样式
UINavigationController* pNav = [[UINavigationController alloc] initWithRootViewController:pView]; [p ...
- 【WCF 1】WCF框架宏观了解
导读:使用WCF框架爱开发项目也有很长一段时间了,最开始的时候,是理解的不深,所以不写博客进行总结.后来是项目赶,发现需要总结的有很多,一直没有把WCF排上日程,尤其是最近研究EF这一块,更是研究了一 ...
- 2016-03-10：libx265源码解析
单步跟踪执行流程 将cli设定为启动项目,在属性->调试->命令行参数中设置如下参数: --input E:\video\pedestrian_area.yuv --fps 24 --in ...
- ERS-2卫星
ERS-2卫星是欧洲空间局的第二颗资源遥感卫星,携带有雷达测高仪.综合孔径雷达等多种科学仪器,是一颗多任务.多学科的科学考察卫星.[1] ERS-1 ERS-2 欧空局分别于1991年和1995年发射 ...
- CentOS学习笔记--账号管理与权限配置
Linux 的账号管理与权限配置 管理员的工作中,相当重要的一环就是『管理账号』啦! 使用者标识符: UID 与 GID 虽然我们登陆 Linux 主机的时候,输入的是我们的账号,但是其实 Linux ...