LuckXinXin的博客

方案1.sub { height: calc(100%-100px); }方案2：.container { position:relative; }.sub { position: absolute; top: 100px; bottom: 0; }方案3：.container { display:flex; flex-direction:column; }.sub { flex:1; }

相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距非 inline-block 水平元素设置为 inline-block 也会有水平间距可以借助 vertical-align:top; 消除垂直间隙可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙把 li 标签写到同一行可以消除垂直间隙，但代码可读性差...

font-style: oblique; 使没有 italic 属性的文字实现倾斜

-webkit-font-smoothing: antialiased;

设置元素浮动后，该元素的 display 值自动变成 block

带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px百分比：将计算后的值传递给后代...

line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会.

$(document).ready(function(){ var stopScrolling = function(event) { event.preventDefault(); } document.addEventListener('touchstart', stopScrolling, false); document.addEventListener('touchmove', stopScrolling, false); .

<a href="logo.jpg" download>下载</a> <a href="logo.jpg" download="网站LOGO" >下载</a>

产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete="off"解决方案2：input:-webkit-autofill { background-color: transparent; }input [type=search] 搜索框右侧小图标如何美化？input[type="search"]::-webkit-search-cancel-but.

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法...

伪元素 – 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：p::before {content:"第一章：";}p::after {content:"Hot!";}p::first-line {background:red;}p::first-letter {font-size:30px;}伪类 – 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例.

link > visited > hover > activeL-V-H-A love hate 用喜欢和讨厌两个词来方便记忆

视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验一般把网页解剖为：背景层、内容层和悬浮层。当滚动鼠标滚轮时，各图层以不同速度移动，形成视差的实现原理以 “页面滚动条” 作为 “视差动画进度条”以 “滚轮刻度” 当作 “动画帧度” 去播放动画的监听 mousewheel 事件，事件被触发即播放动画，实现“翻页”效果...

响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容：$(window).resize(function () { screenRespond();});screenRespond();function screenRespond(){var screenWidth = $(window).width();if(screenWidth.

原理类似图片轮播原理，超出隐藏部分，滚动时显示可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;

元素竖向的百分比设定是相对于容器的宽度，而不是高度

CSS可以拆分成2部分：公共CSS 和 业务CSS：网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS...

需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin需要在border内测添加空白，且空白处需要背景（色）时，使用 padding

在网页中的应该使用“偶数”字体:偶数字号相对更容易和 web 设计的其他部分构成比例关系使用奇数号字体时文本段落无法对齐宋体的中文网页排布中使用最多的就是 12 和 14

浏览器解析 CSS 选择器的方式是从右到左

多个css合并，尽量减少HTTP请求将css文件放在页面最上面移除空的css规则避免使用CSS表达式选择器优化嵌套，尽量避免层级过深充分利用css继承属性，减少代码量抽象提取公共样式，减少代码量属性值为0时，不加单位属性值为小于1的小数时，省略小数点前面的0css雪碧图...

父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素会跟随其后

在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像模仿表格布局等高列效果：兼容性不好，在ie6-7无法正常运行css3 flexbox 布局： .container{display: flex; align-items: stretch;}...

当前样式：getComputedStyle(el, null) VS el.currentStyle事件对象：e VS window.event鼠标坐标：e.pageX, e.pageY VS window.event.x, window.event.y按键码：e.which VS event.keyCode文本节点：el.textContent VS el.innerText

Flexbox用于不同尺寸屏幕中创建可自动扩展和收缩布局

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在opacity: 0; CSS3属性，设置0可以使一个元素完全透明position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外display: none; 元素会变得不可见，并且不会再占用文档的空间。transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留<div hidden="hidden"&gt.

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了

**简单的方式： **上面的div宽100%，下面的两个div分别宽50%，然后用float或者inline使其不换行即可

/* 把上、左、右三条边隐藏掉（颜色设为 transparent） */#demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent;}

:root 选择文档的根元素，等同于 html 元素:empty 选择没有子元素的元素:target 选取当前活动的目标元素:not(selector) 选择除 selector 元素意外的元素:enabled 选择可用的表单元素:disabled 选择禁用的表单元素:checked 选择被选中的表单元素:after 在元素内部最前添加内容:before 在元素内部最后添加内容:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n:nth-last-child(n).

可继承的样式： font-size font-family color, UL LI DL DD DT不可继承的样式：border padding margin width height

id选择器（ # myid）类选择器（.myclassname）标签选择器（div, h1, p）相邻选择器（h1 + p）子选择器（ul > li）后代选择器（li a）通配符选择器（ * ）属性选择器（a[rel = "external"]）伪类选择器（a:hover, li:nth-child）...

**关于文字排版的属性如： **fontword-breakletter-spacingtext-aligntext-renderingword-spacingwhite-spacetext-indenttext-transformtext-shadowline-heightcolorvisibilitycursor

**毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠。规则如下： **两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠元素自身的margin-bottom和margin-top相邻时也会折...

原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack有属性hack选择器hackIE条件注释

transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;transform: scale(0.7);css的属性，可以缩放大小