1 , 对 CSS2.1的支持从 IE8开始的。
2, 元素都有内外两个盒子。display: inline-block; 可以理解为有两个盒子,外面的盒子是inline(能和图文在一行显示),里面的盒子是 block (能设置width/height)。 所以 display:block;其实是 display: block-block;的 简写,display: table;可以看成 display: block-table;对于display:inline-table; 表示可以和文字在一行显示的表格。
3, 三无准则: 无宽度,无图片,无浮动。
4.<button>按钮</button> 和 <input type="button" value="按钮">
button按钮会自动换行,input默认white-space:pre是不会自动换行的,需要将pre值重置为normal
5.首选最小宽度。中文的最小宽度是每个汉字的宽度。 英文字符,会以 空格, 短横线,问号等作为最小宽度。
6.
“内在盒子”又分为 4个盒子: content box, padding box, border box, margin box. 这4个盒子有对应的名字: content-box, padding-box, border-box, 但 margin box没有对应的CSS名字(因为目前没有任何场景用到它)
7, 【宽度分离原则】
.box { width: 100px; padding:20px; border: 1px solid;}
原本想设置宽度为100px,结果却变成了 142px像素。使用宽度分离原则来写:
.father { width:100px; }
.son { padding: 20px; border: 1px solid;}
也就是说 html多一层 标签来设置 width。
不通过 多添加一层标签设置width的方法:box-sizing: border-box;,对于IE8需要添加前缀-ms-,box-sizing的作用就是改变width的作用细节。
box-sizing: content-box 是默认值
box-sizing: border-box 全部支持
但是,box-sizing不支持margin-box的,为什么呢?因为 margin 只有在 width:auto的时候才会改变元素的尺寸, 对于 width:100px;的元素再怎么设置margin,像素宽度都不会变的,但border和padding就会改变 offsetWidth的值了。
margin的背景永远是透明的
经常看到的写法:直接全局重置
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
会造成浪费,应该使用:
input, textarea, img, video, object {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
8, 注意: 单单使用div {height: 100%;}无效
,
要支持 height: 100%; 的话,必须父级要有固定高度。比如 html, body {height: 100%;}有效
, 但仅仅设置 body 是不行的,因为此时body没有具体的高度值 body {height: 100%;}无效
。
9, 为了避免移动端的图片展示过大的问题:常常写成如下方式:
img { max-width: 100%; height: auto!important;}
width 和 height 的初始值 是 auto,
min-width 和 min-height的初始值是 auto,
max-width 和 max-height的初始值是 none
超越!important: max-width会覆盖width , !important
的权重非常高,比style属性中设置CSS声明还要高,但 max-width 会超越 !important, 覆盖width。
如下 <img src="1.jpg" style="width:480px!important">其中CSS是: img {max-width: 256px;}
结果width是 256px .
假如
min-width: 1400px; 比max-width更大
max-width: 1200px;
则是 min-wdith活了下来,width变为了 1400px
- 盒尺寸四大家族 content, padding,border, margin这四个属性。
替换元素:内容外观不受CSS影响,有自己的尺寸,有默认的表现规则
content ,默认尺寸为300像素 * 150像素
<img src="1.jpg">
没有CSS尺寸和HTML尺寸,则固有尺寸为最终宽高(当前图片尺寸为 278 * 227)
<img src="1.jpg" width="128" height="96">
使用HTML尺寸错位最终宽高
img {width: 200px; height: 150px; } <img src="1.jpg" width="128" height="96">
三者同时存在,使用CSS尺寸作为最终宽高。
假如 img {width: 200px;} <img src="1.jpg">
虽然CSS仅仅设置了width,但图片这种“替换元素”具有特定的宽高比例,所以height会按照图片原有比例来计算,最终结果是 200像素 * 163.3像素(图片尺寸为278*227,结果为 200 * 227 / 278 = 163.3)
观点一: 替换元素 和 非替换元素 之间只隔了一个 src属性,没有src属性的 <img>
就是一个和<span>
类似的普通的内联标签(非替换元素)
观点二:替换元素和 非替换元素之间只隔了一个 content属性, img {content: url(1.jpg)} <img>
和 <img src="1.jpg">
是一模一样的效果。 使用 <img src="1.jpg"> img { content: url(2.jpg)}
此时显示的是 2.jpg ,但是右键保存这张图片是保存原来的src的图片1.jpg。所以content仅仅改变的视觉效果。
content属性生成的 对象就是 “替换元素”,也是如此, content属性生成的内容 和 普通元素内容才会有很多不同的特性:
(1)content生产的文本 无法选中无法复制,好像设置了 user-select:none 一般,但普通元素的文本可以被选中。注意,别用content生成重要的文本信息,只用content生成一些无关紧要的内容,如序号之类的,也不用担心原本重要的文字被content替换,因为content仅仅只是替换的视觉层。
(2)不能左右 :empty 伪类, 比如 <div></div>
使用 div:empty {border-style:dashed;}
, 此时使用 div:after {content: '生成内容'}
,看起来 div里面好像有内容了,但<div></div>
实际还是空的, div:empty对 它还是有作用。
content属性几乎都是用在 ::before
和::after
这两个伪元素中,IE8仅支持单冒号的伪元素,所以使用 单冒号 :before
-
content计数:
counter-reset: 计算器-重置(起名字,以及规定默认起始值(默认为0)) **
.xx{counter-reset: jishuqi 2;}表示该计数器的名称是 jishuqi, 默认起始值是 2
counter-reset 的值可以是 写成负数,小数,但IE和Firefox都认为这是不合法数值,当做默认值0,Chrome支持,但对任何小数都是向下取整**
可以同时为多个计数器命名:
.xxx {counter-reset: jishuqi001 2 jishuqi002 2;}
counter-increment 计数器每次递增的值,默认每次的递增值 是1
counter() 方法 取得 计数器的 值
counter(name) /*name是counter-reset的名称*/
counter(name,style) /**其中style的关键字是list-style-type, 因为递增递减的不一定是数字,也可以是英文字母或者罗马字母/
例如 counter(jishuqi, lower-roman);
<p class="test"></p>
.test {
/*给计数器命名为jishuqi,默认初始值是2*/
counter-reset: jishuqi 2;
/*在不同标签,没碰到一次counter-increment就递增一次*/
counter-increment: jishuqi 1;
}
.test:before {
counter-increment: jishuqi 5;
/*counter(计数器名称) 是用来显示 计数器的结果*/
content: counter(jishuqi);
}
/*如果一个test含有多个,选递增数 最高的那一个*/
.test:before {
counter-increment: jishuqi 5;
content: counter(jishuqi);
/*记过该递增是 6 不是2*/
counter-increment: jishuqi 6;
}
- padding属性
(内联元素)在不影响当前布局的情况下,优雅的增加点击区域的大小,比如浏览器高度是 1em, 换到移动端就很难点,此时可以使用a {padding: .25em 0}
来增加点击区域的大小,同时又不影响当前的布局。
块级元素 设置 padding-top: 50px; 会影响布局,但内联元素不会。
padding百分比,不能有负值,无论是水平方向还是垂直方向都是相对于宽度来计算的
–ol/ul 列表内置 paddin-left, 单位是 px 不是 em (当font-size是 12px至 14px时,22px是比较好的padding-left的设置值)
兼容效果好的写法:
<button id="btn"></button>
<label for="btn"></label>
button {
position: absolute;
clip: rect(0 0 0 0);
}
label {
display: inline-block;
line-height: 20px;
padding: 20px;
}
三条杠和 双层圆点
<i class="icon-menu"></i>
<i class="icon-dot"></i>
.icon-menu {
display: inline-block;
width: 140px; height: 10px;
padding: 35px 0;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: currentcolor;
background-clip: content-box;
}
.icon-dot {
display: inline-block;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid;
border-radius: 50%;
background-color: currentcolor;
background-clip: content-box;
}
display的默认属性inline。将元素显示为内联元素,元素前后没有换行符。我们知道内联元素是无法设置宽高的,所以一旦将元素的display 属性设为 inline, 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度(font-size)和padding。
- margin
clientWidth = width + padding offsetWidth = width + padding + border
元素尺寸: offsetWidth 和 offsetHeight 对应JQuery中的$().width()
和$().height()
方法
元素内部尺寸,对应JQuery的$().innerWidth()
和$().innerHeight()
, 可写做 clientWidth 和 clientHeight
元素外部尺寸,对应JQuery的$().outerWidth()
和$().outerHeight()
, 不仅包括 padding 和 border , 还包括 margin
margin合并: 块级元素的 margin-top和 margin-bottom有时会合并为单个外边距。(因为默认文档流是水平流,所以margin合并的就是垂直方向)
(1)相邻兄弟元素margin合并
p {margin: 1em 0;} <p>第一行</p><p>第二行</p>
第一行和第二行之间的间距还是1em
(2)父级和第一个子元素margin-top合并, 父级和最后一个子元素margin-bottom合并,例如
<div class="container">
<h2>CSS世界</h2>
</div>
.container {
max-width: 1920px;
height: 384px;
background: url(2.jpg) no-repeat left;
}
.container > h2 {
font-size: 60px;
margin-top: 100px; /*这里的原意是 标题 在图片中 下移100px,结果却变成了 图片 下移 100px*/
/* 也就是 虽然是在 子元素上设置的 margin-top, 但实际就等于是在 父元素上设置了 margin-top*/
color: #fff;
}
解决方法: 在 父元素添加:
.container {overflow: hidden;}
(3)空块级元素的margin合并
`
第一行
第二行
` CSS是 `p {margin: 1em 0;}` 结果 第一行和 第二行之间的 间隔不是 2em 而是 1em.这里发生了3次margin合并: div 和 第一行p 的margin-bottom合并,然后和第二行 p 的 margin-top 合并,这两次合并是相邻兄弟合并。由于自身是 **空**div,于是前两次合并的 margin-bottom和 margin-top再次合并,这次合并是 空块级元素合并,最终间距还是 1emmargin合并的计算规则: 正正取最大,正负值相加,负负取最小
浏览器默认的字号大小是 16像素, 设置为 1em 就当前像素的1倍
因为margin的合并,在写代码的时候建议保留上下maregin设置,例如 .list {margin-top: 15px; margin-bottom: 15px; }
而不是只写一个 .list {margin-top: 15px;}
margin: auto; : (1) 如果一侧定值,一侧auto,则auto为剩余空间大小。 (2)如果两侧均是auto,则平分剩余空间
.father { width: 300px;}
.son { width: 200px; margin-right: 80px; margin-left: auto;}
得到的结果是 左边距 20px,右边距80px.
将上面的margin-right去掉 .son {width: 200px; margin-left: auto; }
则实现的效果正好是块级元素右对齐效果。 所以,如果想让某块状元素右对齐,除了使用 float: right;
之外可以使用 margin-left:auto;
对应: margin-left:auto;
对应text-align: right
右对齐,
margin-right:auto
对应text-align:left;
左对齐
width: 200px; margin-left:auto; margin-right:auto;
对应text-align: center;
水平、垂直都居中对齐:
.father { width: 300px; height: 150px; position: relative; background-color: #FF8C00; } .son { position: absolute; top: 0;left: 0;right: 0;bottom: 0; width: 200px;height: 100px; margin: auto; background-color: #123456; }
14,border
border-width
: 不支持百分比。
border-width:thin
等同于 1px
border-width:medium
等同于3px (默认值)
border-width:thick
等同于 4px
border-style
border-style:none
默认值
重置边框样式
div { border: 1px solid; border-bottom: 0 none; //style设为none或者宽度设为0,两个同时写提高渲染性能。 }
border-style:solid
实线边框
border-style:dashed
虚线边框
border-style:dotted
虚点
CSS属性的border-radius从IE9浏览器才开始支持,要IE8浏览器支持圆角,可以使用dotted类型的边框,然后将另外三个给隐藏掉:
.box { width: 150px;height: 150px; overflow: hidden; } .dotted { width: 100%;height: 100%; border: 149px dotted #cd0000; }
border-style:double
双线边框
之前的 三条杠,可以写成:
.icon-menu { width: 120px; height: 20px; border-top: 60px double; border-bottom: 20px solid; }
border-color
当没有指定border-color的时候,会将当前的 color
值作为边框色
增加点击区域的大小: 使用 border-color: transparent
; 透明
.icon-clear { width: 16px; height: 16px; border: 11px solid transparent; /*此时点击区域从16*16变成了 38*38*/ }
###第5章,内联元素与流
小写字母x的下边线 就是我们的 基线 baseline , line-height
就是指的 两条基线之间的距离, vertical-align的默认值就是基线。vertical-align:middle
并不是绝对的垂直居中,middle指的是 基线往上 1/2 x-height的高度,可以理解为 小写字母x 交叉点的那个位置。
x-height
是指小写字母x的高度, ex是CSS中的一个相对单位,1ex 就表示 一个小写字母x的高度。
ex的作用在于:不受字体和字号影响的内联元素的垂直居中对齐效果。
默认<div>
高度是0,写上文字后就有了高度,<div>
的高度是由 line-height
决定的,而不是font-size
.
行距就是 line-height减去 font-size
使用 line-height 实现的单行文本垂直居中是**“近似处置居中”**
多行文本的垂直居中就需要 line-height和 vertical-align一起才行
* {
font-size: 14px;
}
body {
line-height: 1.5;
}
body {
line-height: 150%;
}
body {
line-height: 1.5em;
}
上面计算出来行高值都是 1.5 * 14px = 21px ,没有区别,但如果同时还有子元素,例如:
h3 {font-size: 32px;}
p { font-size: 20px;}
则 150% 和 1.5em的结果是:
而 1.5 的结果是:
原因在于, line-height: 150%; 和 line-height: 1.5em; 继承的是 计算值 21px; 考虑到 h3的font-size为 32px; 则半间距就是 (21px - 32px) / 2 = -5.5px; 所以“标题”和“内容”文字发生重叠。
而 line-height: 1.5; 继承的是属性值 1.5, 此时h3的行高是 1.5 * 32px = 48px; p的行高是 1.5 * 20px = 30px;
通常都是使用 line-height: 20px;
或者 line-height: 1.5;
vertical-align,如果是 数值,正值表示相对于基线 往上偏移, 负值表示相对于基线往下偏移。
vertical-align: 百分比 是相对于 line-height来设置的。
vertical-align起作用的前提:应用于 内联元素 以及display值为 table-cell的元素上。(也就是display为 inline, inline-block, inline-table, table-cell的元素)
。。。。剩下的太多文字看得好绕,先跳过。。
###第6章,流的破坏与保护
魔鬼属性float,浮动的本质是为了实现文字环绕效果(主要只文字环绕图片显示的效果)。
父级高度坍塌
<div class="father"><img src="me.jpg"></div>
<p class="animal">小猫1,小猫2,...</p>
受制与 父元素father的阻拦,无法和 animal相见
给图片img设置了 属性: float: left; 就会造成父元素高度坍塌,变成:
**float的克星 clear **
clear属性是让自身不能和前面的浮动元素相邻,对后面的浮动元素是不闻不问的, 因为clear属性对‘后面的”元素不管不问,那么 clear:left 和 clear:right的 写法其实就没有啥意义,直接用 clear:both
。