禅道博客

分享专业技术知识,文章内容干货满满

《CSS世界》读书笔记

2022-09-23 09:50:00
柴德庆
原创 38

1、ul下多个li一行排列

ul {
   margin-right: -20px;
}
ul > li {
   float: left;
   width: 100px;
   margin-right: 20px;
}
                

2、box-sizing

/* 
 * box-sizing含义指盒尺寸
 * box-sizing属性的作用是改变width的作用细节。
 */
.box {
    width: 100px;
    box-sizing: border-box;
    border: 1px solid
}
/*解决替换元素宽度自适应问题*/
input, textarea, img, video, object {
    box-sizing: border-box;
}
                

3、height: 100%

/*要满屏显示背景图*/
html, body {
    height: 100%;
}
div {
    width: 100%;
    height: 100%;
    background: url(bg.jpg);
}
                

4、展开收起动画

/*
 * 只需要设定为保证比展开内容高度大的值即可,因为max-height值比height计算值大的时候
 * 元素的高度就是height属性的计算高度,在本交互中,也就是height:auto时候的高度值。
 */
.element {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s;
}
.element:active {
    max-height: 666px;
}
                

5、透明图片占位

/* 
 * 图片img必须直接没有src属性,当图片src属性缺省的时候,图片不会有任何请求,是最高效的实现方式。
 * 但是在Firefox浏览器下会无效,需要设置display: inline-block
 */
img {
    visibility: hidden;
}
img[src] {
    visibility: visible;
}
                

6、元素尺寸

元素尺寸:在原生API中写作offsetWidth和offsetHeight,也称为“元素偏移尺寸”。

元素内部尺寸:在原生API中写作clientWidth和clientHeight,也称为“元素可视尺寸”。


7、margin:auto的填充规则如下。

如果一侧定值,一侧auto,则auto为剩余空间大小(margin-right: 80px;margin-left: auto,则表示margin-right为80px,剩下的为margin-left。如果不设置margin-left则margin-left为0,所有空间都是margin-right,所以会实现靠一侧例如居右这种)。

如果两侧均是auto,则平分剩余空间。

margin的’auto’是具有强烈的计算意味的关键字


8、border应用

/*上传图片+号背景图样式*/
.add {
    color: #ccc;
    border: 2px dashed;
}
.add:before {
    border-top: 10px splid;
}
.add:after {
    border-left:10px solid;
}
.add:hover {
    color: #26e;
}
/*三角图标(朝下三角)*/
div {
    width: 0;
    border: 10px splid;
    border-color: #f50 transparent transparent;
}
                

9、基线

line-height行高定义就是两基线的间距,vertical-align默认值就是基线

x-height指的就是小写字母x的高度,术语描述就是基线和等分线之间的距离


10、ex

/*
 * ex是CSS中的一个相对单位,指的小写字母x的高度
 * 不受字体和字号影响的内联元素的垂直居中的对齐效果。
 * 每页显示15▼
 * 借助ex单位,直接利用默认的baseline基线对齐就可以实现该效果。
 */
.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(arrow.png) no-repeat center;
}
                

11、line-height 有三种用法

line-height: 1.5 ,数值型,最终的值为乘以font-size的大小

line-height: 150% ,百分比型,最终的值为乘以font-size的大小

line-height: 24px ,长度值,一般为px或者em,其中em也是乘以font-size的大小

区别在于,数值型在子级继承line-height属性的时候,继承的为1.5,到了子级会重新按照子级的font-size重新计算,而百分比和长度值则是直接继承了父级的最终计算过的数值大小,所以一般使用数值型最好。

line-height值可以设置在1.6~1.8,如果使用的是长度值,我建议直接line-height:20px

无论内联元素line-height如何设置,最终父级元素的高度都是由数值大的那个line-height决定的,我称之为“内联元素line-height的大值特性”。


12、float

浮动的本质就是为了实现文字环绕效果。

特性:

包裹性;

块状化并格式化上下文;

破坏文档流;

没有任何margin合并。


13、阻止margin合并

那该如何阻止这里margin合并的发生呢?


对于margin-top合并,可以进行如下操作(满足一个条件即可):

  • 父元素设置为块状格式化上下文元素;

     父元素设置border-top值;

    父元素设置padding-top值;

    父元素和第一个子元素之间添加内联元素进行分隔。

  • 对于margin-bottom合并,可以进行如下操作(满足一个条件即可):

     父元素设置为块状格式化上下文元素;

    父元素设置border-bottom值;

    父元素设置padding-bottom值;

    父元素和最后一个子元素之间添加内联元素进行分隔;

    父元素设置height、min-height或max-height。

  • margin合并的计算规则

    两个正的margin值取最大的

    两个负的margin值取最小的

    正的和负的则直接相加


发表评论
评论通过审核后显示。