学习笔记之CSS深入理解（慕课网张鑫旭主讲）

最新推荐文章于 2023-01-08 16:53:55 发布

皆凡人

最新推荐文章于 2023-01-08 16:53:55 发布

阅读量1.2k

点赞数 2

本文链接：https://blog.csdn.net/qq_37431724/article/details/80015916

版权

一、CSS深入理解之border

1. border-width不支持百分比

受语义和使用场景决定的，不会因为设备大而边框变大的

2. border-style属性

border-style:dotted;在Chrome/Firefox是方点，IE下是圆点

3. border-color

当没有指定border-color的时候，会使用color作为边框颜色

border与background定位局限，在CSS2.1中，background定位只能相对于左上角数值定位，不能相对于右下角

4. border与三角等图形的构建

4.1. 实现三角形

4.2. 实现梯形

4.3. 增加响应区域大小-复选框

4.4. 增加可使渲染区域

.icon{
    position:relative;
    left:-20px; //图标为20px*20px
    border-right:20px solid transparent;//透明边框border突破可视区域的限制
    filter: drop-shadow(20px 0 #ff0000); //利用此做一个颜色不同的原图标
    overflow:hidden; //隐藏原始图标
}

5. border与等高布局

比margin,padding实现的好处：

它们使用了很大的负值，当我们很负的元素有个锚点定位的时候，就会出现布局飞升的效果。

但是这样实现不支持百分比宽度。

二、CSS深入理解之padding

1. CSS padding与元素的尺寸

1.1. 对于block水平元素：

1) 当width:auto or box-sizing:border-box，padding值没有暴走，不影响尺寸。

2) padding值暴走，一定会影响尺寸。e.g.当padding大小超过宽高的时候，容器宽度改变，如中间有文字，那么文字以最小宽度显示。

3) width非auto，padding影响尺寸，容器扩大。

1.2. 对于inline水平元素：

水平padding影响尺寸，垂直padding不影响尺寸，但是会影响背景颜色（占据空间）。

1.3. 应用：高度可控的分割线

比如：实现注册 | 登录，中间的分割线

html：

注册<span></span>登录

CSS：

span{
    padding: 16px 6px 1px;
    margin-left: 12px;
    border-left: 2px solid;
    font-size:0;
}

2. CSS padding负值和百分比值

2.1. 利用padding制作正方形

.div{
    padding:50%;
}

2.2. 但是对于inline元素，垂直padding会让“struct（幽灵空白节点）”出现，所以改成

.inline_div{
    padding:50%;
    font-size:0;
}

3. CSS 标签元素的内置padding

3.1. button表单的padding

对于Firefox，设置padding:0左右依然有padding，所以需设为：

button::-moz-focus=inner{
    padding:0;
}

对于IE7，文字越多，左右padding逐渐变大，所以需设为：

button{
    overflow:visible;
}

padding与inline-height不兼容，所以个人技巧：

<button id="btn"></button>
<label for="btn">button</label>

然后设置label样式

label{
    display:inline-block;
    inline-height:20px;
    padding:10px;
}

4. padding与图形绘制

4.1. 实现三道杠：

<div class="line-tri"></div>

.line-tri{
    width:150px;
    height:30px;
    padding:15px 0;/*杠杠中间的空白部分*/
    border-top: 30px solid;/*第一道杠*/
    border-bottom:30px solid;/*第三道杠*/
    background-color:black;/*第二道杠*/
    background-clip:content-box;/*第二道杠，important*/
}

5. CSS padding与布局

5.1. 使用百分比单位构建固定比例布局结构（正方形）

.div{padding:50%;}

5.2. 配合margin等高布局

/*父盒子*/
.box{
   overflow: hidden;
   resize:vertical;
}

/*子盒子*/
.child-orange,.child-green{margin-bottom: -600px;padding-bottom: 600px;}

.child-orange{
   float: left;background: orange;
}

.child-green{
   float: left;background: green;
}

5.3. 两栏自适应布局

<div class="box">
   <img src="mm.jpg">
    words...
</div>

<div>
   <img src="mm.jpg">
   <div class="auto">words...</div>
</div>

/*padding在容器上*/
.box{
   padding-left: 120px;
}

.box img{
   float: left;
   margin-left: -120px;
}

/*padding在子元素上*/
img{
 float：left；
}


.auto{
 padding-left:120px;
}

三、CSS深入理解之margin

1. 正确看待CSS的margin重叠

1.1. 相邻兄弟margin重叠

1.2. 父子margin重叠其他条件

1.2.1. margin-top重叠父元素非块状格式化上下文元素

（resolution：父级元素设置overflow：hidden）

1.2.2. 父元素没有border-top设置

（resolution：父级元素设置border-top）

1.2.3. 父元素没有padding-top值

（resolution：父级元素设置padding-top）

1.2.4. 父元素和第一个子元素之间没有inline元素分隔

（resolution：父级元素与第一个子元素之间设置inline元素。 e.g. ）

1.3. margin-bottom重叠父元素非块状格式化

上下文元素父元素没有border-bottom设置

父元素没有padding-bottom值

父元素和第最后一个子元素之间没有inline元素分割

父元素没有height，min-height，max-height限制（resolution参考margin-top）

1.4. 空block元素margin重叠其他条件

元素没有border设置元素

没有padding设置

里面没有inline元素没有height，或者min-height（resolution参考margin-top）

1.5. margin重叠计算规则：

正正取大值

正负值相加

负负最负值

四、CSS深入理解之float

1. 浮动的原始意义

浮动出现的意义其实只是用来让文字环绕图片而已

2. 清除浮动的几个方法：

2.1. 投机取巧法

<div style="clear:both;"></div>

放到当作最后一个子标签放到父标签那。初学者专用，有时候一不留神中间多了个空格会产生一段空白高度的。

2.2. overflow+zoom

.fix{overflow:hidden; zoom:1;}

代码简洁，涵盖所有浏览器。但是如果里面的元素存在margin负值定位或是负的绝对定位，便会直接被裁掉了，所以此方法是有不小的局限性的。

2.3. after + zoom方法

.fix{

zoom:1;

}

.fix:after{

display:block;

content:'clear'; /*这里content里写什么都行*/

clear:both;

line-height:0;

visibility:hidden;

}

这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了，不会影响任何其他样式，通用性强，覆盖面广，推荐使用。

3. float与JavaScript

JavaScript可以改变CSS的属性，其他些属性还好，但是这个float值得一说，为何呢，因为float貌似是JavaScript中的一个关键字，不能使用obj.style.float="left";这样的句子。得使用其他写法。

IE浏览器：obj.style.styleFloat = "left";
其他浏览器：obj.style.cssFloat = "left";

4. float与流体布局

4.1. 浮动与两侧皆自适应的流体布局

.mib_head_a { float: left; margin-right: 20px; }

/* 下面这个是固定布局写法 */

.mib_cell { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }

4.2. 浮动与右侧尺寸固定的流体布局

要实现如下效果：

/* 下面这个是右浮动，改变DOM位置的流体布局写法 */

<div class=”.mib_head_r”></div>
<div class=”mib_feed_flow ”></div>

.mib_head_r { width: 56px; float: right; }
.mib_feed_flow { margin-right: 76px; }

/* 下面这个是左浮动，不改变DOM位置的流体布局写法 */

<div class=”mib_full_float”></div>
<div class=”mib_head_l”></div>

.mib_full_float { width: 100%; float: left; }
.mib_head_l { width: 50px; float: left; margin-left: -50px;}

4.3. 浮动与单侧尺寸固定的流体布局

.mib_head_a { width: 56px; float: left; }

/* 下面这个是固定布局写法 */

.mib_feed_fixed { width: 484px; float: right; }

/* 下面这个是流体布局写法 */

.mib_feed_flow { margin-left: 76px; }

4.4. float与IE7兼容性问题

含clear的浮动元素包裹不正确
浮动元素倒数第二个莫名垂直间距
浮动元素最后一个字符重复问题
浮动元素楼梯排列问题
浮动元素和文本不在同一行的问题

五、CSS深入理解之absolute

1. 图片图标绝对定位覆盖

.icon-recom { position: absolute; }

.icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; }

<a href="http://www.imooc.com/view/121" class="course-list">
    <div class="course-list-img">
        <span class="icon-recom">推荐</span>
        <img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img1.sycdn.imooc.com/53d74f960001ae9d06000338-300-170.jpg">
        <!--  -->
        <i class="icon-vip">vip</i>
    </div>
</a>

使用注释节点避免相邻节点间插入空格，保证相邻节点完美贴合。

2. 下拉框的绝对定位

<div class="course-sidebar-search">
    <ul id="result" class="course-sidebar-result">
        <li><a href="http://www.imooc.com/view/121">分享：CSS深入理解之float浮动</a></li>
        <li><a href="http://www.imooc.com/view/118">案例：CSS圆角进化论</a></li>
        <li><a href="http://www.imooc.com/view/93">案例：CSS Sprite雪碧图应用</a></li>
        <li><a href="http://www.imooc.com/view/77">案例：CSS3 3D 特效</a></li>
        <li><a href="http://www.imooc.com/view/57">案例：如何用CSS进行网页布局</a></li>
    </ul>
    <input class="course-search-input" placeholder="课程搜索">
    <a href="javascript:" class="course-search-btn">搜索</a>
</div>

.course-search-input { line-height: 18px; padding: 10px; float: left; }
.course-sidebar-result { position: absolute; width: 260px; margin: 39px 0 0 -1px; }

3. absolute实现居中、边缘定位

<div class="course-loading-x">
    <img src="http://img1.sycdn.imooc.com/5453077400015bba00010001.gif" class="course-loading" alt="加载中...">
</div>
<div class="course-fixed-x">
    <div class="course-fixed">
        <a href="http://www.imooc.com/activity/diaocha" class="goto_top_diaocha"></a>
        <a href="http://www.imooc.com/mobile/app" class="goto_top_app"></a>
        <a href="http://www.imooc.com/user/feedback" class="goto_top_feed"></a>
    </div>
</div>

.course-loading-x { text-align: center; }//使用center对 进行文本居中

.course-loading { position: absolute; margin-left: -26px; }//表示图标宽度为52px，-26px实现图标居中

.course-fixed-x { text-align: right; }//使用right对 进行靠右，使得fixed的对象初始位置在大框的右侧

.course-fixed { display: inline; position: fixed; margin-left: 20px; }

4. 文本图标对齐与定位

.regist-star { position: absolute; margin-left: -1em; }

<label class="regist-label"><span class="regist-star">*</span>登录邮箱</label>

5. 高度自适应的九宫格效果

<div class="page">
    <div class="list" data-index="1"></div>
    <div class="list" data-index="2"></div>
    <div class="list" data-index="3"></div>
    <div class="list" data-index="4"></div>
    <div class="list" data-index="5"></div>
    <div class="list" data-index="6"></div>
    <div class="list" data-index="7"></div>
    <div class="list" data-index="8"></div>
    <div class="list" data-index="9"></div>
</div>

.list {
    float: left;
    height: 33.3%; width: 33.3%;
    position: relative;
}

.list:before {
    content: '';
    position: absolute;
    left: 10px; right: 10px; top: 10px; bottom: 10px;
}

.list:after {
    position: absolute;
    height: 30px;
    left: 0; right: 0; top: 0; bottom: 0;
}

6. left/right拉伸和width同时存在

.image {
    position: absolute; 
    left: 0; 
    right: 0; 
    width: 50%; 
    margin:auto;
}

绝对定位的拉伸受限于父级，想要做到拉伸效果，必须给父级设置高度。

7. 使用绝对定位实现整体布局

header,footer{
    position:absolute;
    left: 0;
    right: 0;
}

header{
    height:48px;
    top:0;
}

footer{
    height:48px;
    bottom:0;
}

content{
    position:absolute;
    top:48px;
    bottom:48px;
    overflow:auto;
}

此时头部尾部都是fixed效果，不跟随滚动。避免了移动端position:fixed实现的诸多问题。

六、CSS深入理解之overflow

1. overflow基本属性

如果overflow-x和overflow-y二者的值相同，等同于overflow；如果二者值不同，其中一个被赋予visible；另一个被赋予auto，hidden，scroll，其中visible会被重置为auto。
宽度设计机制，IE7浏览器把100%宽度算成了外部容器的宽度，滚动条一出现整个容器的可利用面积是会被压缩的，外部容器的宽度减少，于是，在IE7上就出现了水平滚动条。此时应删除宽度100%；

2. overflow与滚动条

2.1. 默认滚动条

默认滚动条来自于<html>
IE7-浏览器默认：html{overflow-y:scroll;}
IE8+等浏览器：html{overflow:auto;}

2.2. js与滚动高度

chrome: document.body.scrollTop;

others: document.documentElement.scrollTop;

var st = document.body.scrollTop || document.documentElement.scrollTop;

2.3. overflow出现的问题

(1) overflow的padding-bottom缺失现象导致scrollHeight（元素内容高度）不一致。除chrome外其他浏览器均有此现象。

(2) 解决水平居中跳动问题的修复：

对于IE7-：

html{ overflow-y: scroll; }

对于其他：

.container{
    padding-left:calc(100vw - 100%);
}

100vw -浏览器宽度；

100% -可用内容宽度；

2.4. 自定义滚动条-webkit

::-webkit-scrollbar

::-webkit-scrollbar-thumb

::-webkit-scrollbar-track

3. overflow与BFC

overflow与BFC（block formatting context，块级格式化上下文，相当于页面之结界，内部元素再怎么翻云覆雨都不会影响外部）

overflow: visible不能触发BFC

3.1. 清除浮动影响

IE7+等使用.clearfix{ overflow:hidden; _zoom:1;}，但是副作用明显，无法广泛应用，于是，广为流传的是：

.clearfix{ *zoom:1;}

.clearfix:after{ content:’’; display:table; clear: both}

3.2. 避免margin穿透问题

div.outter>div.inner

在以上情况中，inner的margin-top会穿透inner，变成outter的margin-top。（margin-left则没有这个情况）

法一：outter加一个overflow:auto或hidden。

还可以利用边框、 padding、 margin元素自身BFC化

3.3. 实现俩栏自适应布局

左浮动，右overflow，推荐使用浮动元素撑开间距

.left{
    float:left;
    width:120px;
    margin-right:10px;
}

.right{
    min-height:200px;
    overflow:hidden;
    ……
}

3.4. overflow与absolute

3.4.1. overflow:hidden失效

失效原因：绝对定位元素不总是被父级overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候。（包含块是指“含position：relative/absolute/fixed声明的父级元素，没有则body元素。”）

e.g.

3.4.2.

如何避免失效

(1) overflow元素自身为包含块（自身增加包含块元素）

(2) overflow元素的子元素为包含块（子集增加包含块）

<div class=”overflow-hidden”>
    <div style=”position:relative”>
        <img src=”1.jpg” class=”absolute”/>
    </div>
</div>

(3) 任意合法transform声明当作包含块

overflow元素自身transform

√ IE9+/Firefox

× Chrome/Safari(win)/Opera

overflow子元素transform

√ IE9+/Firefox

√ Chrome/Safari(win)/Opera

4. 依赖overflow的样式表现

(1) resize声明起作用，要使用overflow元素，但是overflow的属性值不能是visible。

(2) resize文本域默认有overflow:auto

(3) text-overflow:ellipsis要与overflow:hidden同时使用

5. overflow与锚点技术

5.1. 锚点定位的本质：改变容器的滚动高度

(1) 容器可滚动

(2) 锚点元素在容器内

5.2. 锚点定位的触发：

(1) url地址中的锚链与锚点元素

(2) 可focus的锚点元素处于focus态

5.3. 锚点定位与选项卡技术

应用于：单页页面，兼容IE6,IE7

.box{overflow:hidden;}

<div class="box">
  <div class="list" id="one">1</div>
  <div class="list" id="two">2</div>
  <div class="list" id="three">3</div>
  <div class="list" id="four">4</div>
</div>

<div class="link">
  <a href="#one" class="click">1</a>
  <a href="#two" class="click">2</a>
  <a href="#three" class="click">3</a>
  <a href="#four" class="click">4</a>
</div>

七、CSS深入理解之relative

1. relative限制作用

(1) 限制left/top/right/bottom定位

(2) 限制z-index层级

<div class=”relative zindex3” id=”1”>
    <div class=”absolute zindex1”  id=”2”></div>
</div>

<div class=”relative zindex2” id=”3”>
    <div class=”absolute zindex2”  id=”4”></div>
</div>

此时，2，4div中的z-index不再起作用，以1，3中的为主

新建层叠上下文与层级控制

除IE6,IE7外，如果relative的z-index为auto，则不会限制内部absolute元素层叠问题。

(3) 限制overflow

见3.4.2（2）

2. relative与相对自身无侵入：

相对自身位置改变，不会影响其他元素的位置

top与bottom，left与right是斗争关系其中之一起作用另一个就无效

3. relative最小化原则

3.1. 尽量避免使用relative

absolute不依赖relative

3.2. relative最小化

将需要定位的元素独立出一个div，避免层级层叠问题

<div style="position:relative">
    <img src="123.jpg" style="position:absolute; top:0; right:0;"/>
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
    ……
</div>

八、CSS深入理解之z-index

1. 基本特性

支持负值

支持CSS3 animation动画

在CSS2.1时代，需要和定位元素（relative/absolute/fixed/sticky）配合使用

2. z-index与定位属性

2.1. 层叠上下文（stacking context）

层叠上下文（stacking context）是html元素中的三维概念，表示元素在z轴上有了“可以高人一等”。

(1) 页面根元素天生具有层叠上下文，称为“根层叠上下文”

(2) z-index值为数值的定位元素也具有层叠上下文

(3) 其他属性

2.2. 层叠水平（stacking level

层叠上下文中的每个元素都有一个层叠水平（stacking level），决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠准则。

层叠水平和z-index不是一个东西。普通元素也有层叠水平，但是只有定位元素才有z-index。

层叠上下文可以嵌套，组合成一个分层次的层叠上下文。每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染的时候，只需要考虑后代元素。

每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。

2.3. 层叠顺序：元素发生层叠时候有着特定的垂直显示顺序。

内容层叠顺序高于布局

2.4. 关于z-index与层叠上下文

(1) 定位元素默认z-index:auto可以看成是z-index:0

(2) z-index不为auto的定位元素会创建层叠上下文

(3) z-index层叠顺序的比较止步于父级层叠上下文

3. 其他属性与层叠上下文

(1) z-index值不为auto的flex项（父元素display:flex|inline-flex）

(2) 元素的opacity值不为1

(3) 元素的transform不是none

(4) 元素mix-blend-mode不是normal

(5) 元素的filter不是none

(6) 元素的isolation是isolate

(7) position:fixed声明

(8) will-chang指定的属性值为上面任意一个

(9) 元素的-webkit-overflow-scrolling为touch

他们之间的关系：

(1) 不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别

(2) 依赖z-index的层叠上下文元素的层叠顺序取决于z-index值

4. z-index相关实践分享

4.1. 最小化影响原则

4.2. 不犯二准则

目的：避免z-index混乱，一山比一山高的样式问题

做法：对于非浮层元素，避免设置z-index值，灵活运用后来居上，层叠上下文，层叠水平这些准测，z-index值不能超过2。

4.3. 组件层级计数器

目的：避免浮层组件因z-index被覆盖的问题

原因：

(1) 总会有意想不到的高层级元素

(2) 组建的覆盖规则具有动态性

(3) 做法：组件层级计数器（通过JS获得body下子元素的最大z-index）

4.4. 可访问性隐藏

九、CSS深入理解之line-height

1. 高度原理：

行高 = 内容区域高度 + 行间距, line-height = content area +vertical spacing

行高决定内联盒子高度；行间距墙头草，可大可小（甚至赋值），保证高度正好等同于行高。

2. 各属性值

line-height: normal，跟着用户的浏览器走，且与元素字体关联

line-height:<length>，具体数字如10em

line-height:<number>，根据当前字体大小计算。所有可继承元素根据font-size重计算行高。（推荐）

line-heigtht:<percent>，根据当前字体大小计算。当前元素根据font-size计算行高，继承给下面的元素。

line-heigtht:inhert，行高继承，如input等元素默认行高是normal，使用inhert可以让文本框样式可控性更强

body全局数值行高经验

body{ font-size:14px; line-height: }

重阅读如博客，推荐1.5，1.6

如果普通不重阅读的网站，匹配20像素的使用经验 inline-height:1.4286（20px/14px的意思）

3. 行高与图片

4. 实际应用

4.1. 图片水平垂直居中

4.2. 多行文本水平垂直居中

十、CSS深入理解之vertical-align

1. vertical-align：数值/百分比

数值：在baseline对其基础上上下偏移对应数值大小。

百分比：是相对于line-height计算的

2. vertical-align起作用的前提

只应用于inline水平元素和table-cell元素（默认状态下，图片、文字、按钮、单元格）

<div class=”test-list”>
    <span>文字</span>
    <img src=”pic.jpg”/>
</div>

.test-list > span{
    display: inline-block;
    width:200px;
    vertical-align:middle;
}

.test-list > img { vertical-align:middle; }

3. 隐匿文本节点

原CSS：vertical-align:baseline; line-height:1.5; font-size:24px

解决方案：

消灭vertical-align，改成display: block; margin: auto; //从inline水平改成块状水平

改变默认对齐方式，vertical-align: baseline，改成bottom、middle、top等

改变inline-height: 0或font-size: 0;

注意HTML要写成以下形式：

<p><img src=”pic.jpg”/><!-- 这里要折行或空格 -->
</p>

4. CSS2的可视化格式模型文档

The baseline of an “inline-block” is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ”overflow” property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

“inline-block” 的基线是正常流中的最后一个line box的基线，除非这个line box里面既没有line boxes或者本身”overflow”属性的计算值不是“visible”，这种情况下基线是margin底边缘。（line boxes是由一个一个inline boxes组成的）

inline boxes盒子1没有任何内容，此时本盒子的基线是底边缘

inline boxes盒子2有文字line box，此时这个inline-block盒子的基线就按照里面line box元素的基线作为它自己的基线，此时文字的基线是x-baseline的下边缘。两个基线对齐就产生了如图效果。

5. vertical-align:middle

定义：

inline/inline-block元素：元素的垂直中心点和父元素基线上1/2 x-height处对齐

table-cell元素：单元格填充盒子相对于外面的表格行居中对齐

所以设置行高大于图片高度，再设垂直居中的时候是近似的。

6. vertical-align: text-top/text-bottom

盒子的顶部/底部和父级的content area的顶部/底部对齐。

实际运用：主要用于表情图片（或原始尺寸背景图标）与文字的对齐效果。

使用基线图标片上，使用顶线/底线的问题在于受其他内联元素影响，造成巨大的定位偏差；使用中线需要恰好的字体大小以及兼容性要求不高；使用文本底部比较合适，不受行高以及其他内联元素影响；

7. vertical-align:super/sub

vertical-align:super提高盒子的基线到父级合适的上标基线位置。

vertical-align:sub降低盒子的基线到父级合适的下标基线位置。

8. vertical-align实际运用

8.1. 图标与文字对齐：vertical-align负值

8.2. 不定尺寸图片或多行文字的垂直居中

(1) 主体元素inline-block化

(2) 0宽度100%高度辅助元素

(3) vertical-align:middle;

皆凡人

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
学习笔记之CSS深入理解（慕课网张鑫旭主讲）

一、CSS深入理解之border1.border-width不支持百分比受语义和使用场景决定的，不会因为设备大而边框变大的2.border-style属性border-style:dotted;在Chrome/Firefox是方点，IE下是圆点3.border-color当没有指定border-color的时候，会使用color作为边框颜色bord...
复制链接

扫一扫