腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

一个小程序员的成长笔记

专栏作者

47

文章

64523

阅读量

33

订阅数

CSS深入理解学习笔记之margin

1、margin与容器尺寸　　元素尺寸：①可视尺寸 clientWidth（标准）；②占据尺寸　　margin与可视尺寸：①适用于没有设定width/height的普通block元素；②只适用于水

就只是小茗

2018-03-07

1.1K0

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发生嵌套：祖先优先原则，前提是祖先的z-in

就只是小茗

2018-03-07

8910

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和层级　　提高元素的层叠上下文。

就只是小茗

2018-03-07

7150

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）

就只是小茗

2018-03-07

1.1K0

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。兼容性：　　

就只是小茗

2018-03-07

3.5K0

CSS深入理解学习笔记之absolute

1、absolute和float 　　拥有相同的特性表现：　　　　①包裹性（容器应用之后，可以包裹里面的内容）； 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>absolute的包裹性</title> 7 <style> 8 .box { 9 padding: 10px; 10

就只是小茗

2018-03-07

1K0

CSS深入理解学习笔记之float

1、float的历史　　float设计的初衷仅仅是为了文字环绕效果。　　示例代码： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-T

就只是小茗

2018-03-07

1.1K0

CSS3中的变形处理

变形分类缩放使用scale方法来实现文字或图像的缩放，在参数中指定缩放倍率。例如“scale（0.5）”，表示缩小50 倾斜使用skew方法来实现文字或图像的缩放，在参数中指定水平方向的倾斜角度与垂直方向的倾斜角度，若只有一个数值，则为水平方向的倾斜角度，单位为deg。注：rotate表示的是旋转，仅一个数值，表示水平方向的旋转角度。移动使用translate方法来实现文字或图像的移动，在参数中指定水平方向的移动与垂直方向的移动，若只有一个数值，则为水平方向的移动。对

就只是小茗

2018-03-07

6410

CSS3动画功能

1.transition功能 transition属性的使用方法：transition:property duration timing-function; 其中property表示对哪个属性进行平滑过渡，duration表示多长时间完成属性值的平滑过渡，timing-function表示通过什么方法来进行平滑过渡。多平滑过渡示例： 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta http-equiv="content-ty

就只是小茗

2018-03-07

9350

网页结构与表现原则

网页的结构与表现原则总的来说为：先按结构和语义编写代码然后进行CSS样式设置减少HTML与CSS契合度（精简页面结构）我们可以通过一个微博用户发言信息列表的制作案例来分析该原则。以下是该案例的

就只是小茗

2018-03-07

6790

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的一些有趣数

就只是小茗

2018-03-07

7240

CSS深入理解学习笔记之padding

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

就只是小茗

2018-03-07

8530

CSS3弹性盒布局

使用自适应的窗口弹性盒布局可以使div总宽度等于浏览器宽度，而且可以随着浏览器的改变而改变。 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name=

就只是小茗

2018-03-07

1.1K0

常用js，css文件统一加载方法，并在加载之后调用回调函数

jquery javascript css

为了方便资源管理和提升工作效率，常用的js和css文件的加载应该放在一个统一文件里面完成，也方便后续的资源维护。所以我用js写了以下方法，存放在“sourceController.js”文件内。 /** * Created by MingChen on 2016/11/3. */ function sourceController() { this.root = ""; this.callfunc = null; // 回调函数 this.css = []; thi

就只是小茗

2018-03-07

3.5K0

CSS样式声明顺序

来自Bootstrap中文网编程规范相关的属性声明应当归为一组，并按照下面的顺序排列： Positioning Box model Typographic Visual .declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ displa

就只是小茗

2018-03-07

1K0

没有更多了

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态