【CSS深入理解学习笔记之padding】的更多相关文章

CSS深入理解学习笔记之padding

1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为border-box,同时padding值没有暴走,不影响尺寸. 对于inline水平元素:水平padding影响尺寸,垂直padding不影响尺寸,但是影响背景色.当垂直padding大到超出父容器,会影响scrollHeight. 2.padding负值和百分比值 关于padding负值:padd…

CSS深入理解学习笔记之absolute

1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>absolute的包裹性</title>…

CSS深入理解学习笔记之float

1.float的历史 float设计的初衷仅仅是为了文字环绕效果. 示例代码: <!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"> <hea…

CSS深入理解学习笔记之vertical-align

1.vertical-align基本认识 支持的属性值: ①线类:baseline(默认),top,middle,bottom ②文本类:text-top,text-bottom ③上标下标类:sub,super ④数值百分比类: 数值和百分比的共性:ⅰ都带数字:ⅱ都支持负值:ⅲ行为表现一致(都是在baseline基础上上下偏移数值大小,百分比类以line-height计算,IE6/IE7下vertical-align百分比值不支持小数line-height). 2.vertical-align…

CSS深入理解学习笔记之margin

1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺寸 margin与占据尺寸:①block/inline-block水平元素均适用:②与有没有设定width/height无关:③适用于水平方向和垂直方向.可用于页面的上下留白(padding兼容性不好). 2.margin与百分比单位 普通元素的百分比:相对于容器宽度计算. 绝对定位元素的百分比:相…

CSS深入理解学习笔记之overflow

1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scroll:超出可滚动. auto:若超出才出现滚动条. inherit:继承.(IE8+) 注:overflow-x与overflow-y值不同,其中一个属性值被赋予visible,而另一个被赋值为hidden/scroll/auto,则visible会被重置为auto. 兼容性: ①滚动条外观不同: ②…

CSS深入理解学习笔记之line-height

1.line-height的定义 定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area),是一种围绕文字看不见的盒子,大小与font-size有关: ②内联盒子(inline boxes),不会让内容成块显示,而是排成一行.如果外部含inline水平标签,则属于内联盒子:如果是个光秃秃的文字,则属于"匿名内联盒子": ③行框盒子(line boxes),每一行就是一个行框盒子…

CSS深入理解学习笔记之relative

1.relative和absolute的相煎关系 限制作用:①限制left/top/right/bottom定位:②限制z-index层级:③限制在overflow下的嚣张气焰. relative和fixed限制作用:限制z-index层级. 2.relative和定位 特性:①相对自行进行定位:②无侵入,不影响其他元素布局. top/bottom和left/right对立属性同时存在时的表现:top>bottom left>right 3.relative和层级 提高元素的层叠上下文. 新建…

CSS深入理解学习笔记之z-index

1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index值:auto(默认值):integer(整数值):inherit(继承). z-index基本特性:①支持负值:②支持CSS3 animation动画:③在CSS2.1时代,需要和定位元素配合使用. 2.z-index与定位元素 z-index值越大越在上面. 如果定位元素z-index发生嵌套:祖先优先原则…

CSS深入理解学习笔记之border

1.border-width border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法. border-width支持关键字:thin.medium(默认).thick,其大小分别是1px.3px.5px(IE7除外). border-width默认值为何是medium(3px):因为border-style为double的情况下至少要3px才能看出效果. 2.border-style border-style为dashed的一些有趣数据:…