使段落文本两端对齐
text-justify: inter-ideograph;
text-align: justify;
标签的readonly和disabled属性的区别:
在表单元素中，readonly和disable有类似之处，因为它们都可以将一些表单元素设置为"不可用"状态，当然它们之间的区别是巨大的，下面就介绍一下这个两个属性有哪些区别，希望能够给需要的朋友带来一定的帮助。
两个属性不同点列举:
1.readonly属性只对表单元素的文本框、密码框和多行文本框有效，而disabled属性对所有的表单元素都会有效。
2.设置两个属性的外观不一样，这个自己可以观察一下。
3.设置readonly的表单元素value值依然会被提交，而设置disabled的表单元素值不会被提交。
DOM 节点数
页面上的 DOM 节点数绝对不能超过 5000 个，否则页面滚动的时候就会出现卡顿的情况，尤其是移动端
同步渲染还是异步加载
理论情况下最好做法是后端同步动态渲染页面，但是由于 Web 应用中很多功能都是用户行为驱动的。同步加载不可避免的消耗了后端服务资源。比如：非首屏模块（公共头尾、评价）、点击事件触发的 DOM 内容（异步 tab）
所以我的经验是：能放到后端做判断渲染的 DOM 就尽量放在后端（尤其是首屏）。这样做的好处有四点好处
后端渲染页面相对稳定，不像前端 JavaScript 动态渲染 DOM，可能因为脚本报错或者不可用造成模块都无法展示
可访问性、SEO 及用户体验也比较好。不会产生脚本的渲染抖动问题
一定程度上减少了前端渲染页面的复杂性，减少前端代码复杂度
逻辑统一到一个地方维护起来也方便，而且后端应该为业务逻辑负责，前端应该为展示UI 交互负责
对于异步渲染的模块来说，后端通常需要判断 「页面有什么元素」，以及元素之间的依赖对应关系；而前端需要专注于 「元素应该怎么展示」，UI 层面的交互以及模块与模块之前的逻辑关系
其实更多的时候 异步是一种没有办法的办法，也就是说异步是其它方案都解决不了的情况下才考虑的
伪类 伪类描述
:active 点按，向被激活的元素添加样式。
:focus 焦点输入，向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 链接未访问，向未被访问的链接添加样式。
:visited 链接已访问，向已被访问的链接添加样式。
单行文本溢出隐藏
p{
width：200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
指定行数、多行溢出隐藏（兼容ie7）
div {
line-height:20px;
heigh：60px; //这里是行高的倍数
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; // 这里写显示的行数
-webkit-box-orient: vertical;}
父元素的子元素的上边距margin-top如果碰不到有效的border或者padding，他们之前会共享（父元素会有margin-top）。所以会出如上的问题。同级的盒元素满足上面的条件也会出现这个情况。
解决方案：
1.为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题
2.子元素使用浮动或者绝对定位absolute
3.父级overflow:hidden（共享的意思是margin-top看上去父子都有，但其实还是在子上，overflow让子元素超出父元素部分隐藏即mrgin-top隐藏，但是达不到父元素与子元素分割开的效果，不推荐）
[option标签selected="selected"属性失效的问题]
要在select标签上面加上autocomplete="off"关闭自动完成，不然浏览器每次刷新后将自动选择上一次关闭时的option，这样默认属性selected="selected"就会失效啦
要记住每次遇到select标签时就最好要加上autocomplete="off"这一项
[html5 移动适配写法]
在pc版网页(http://pc_url) 上，添加：
<link rel="alternate" media="only screen and(max-width: 640px)" href="http://pc_url" >
在移动版网页(http://mobile_url) 上，所需的注释应为:
<link rel="canonical" href="http://mobile_url" >
之前的Meta标记（mobile agent）会继续沿用，但我们推荐使用HTMAL5语言制作的移动页面使用最新方案进行跳转适配，其它如xml语言的移动页跳转适配，需要继续使用之前的meta标记方式:
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=mobile_url">
html5新增的移动适配写法如上,这个主要是为了百度等搜索引擎抓取到网站的移动端网址是什么,不是自动当设备切换到手机时自动跳转的.若实现自动跳转还需要js.
1、鼠标移进网页里，不见了= =
*{
cursor: none!important;
}
2、简单的文字模糊效果
*{
color: transparent;
text-shadow: #111 0 0 5px;
}
3、多重边框
.div {
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
height: 200px;
margin: 50px auto;
width: 400px
}
5.实时编辑CSS
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
5、CSS中简单运算
.div{
width: calc(100% - 500px);
}
6.border-radius
终极黑科技是这样用的：
.div {
border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}
border-radius 它可以赋8个值：
斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，
各个数字就分别代表四个不一样的方向。
7、outline-offset
在input下写CSS的时候对下面的语句会很熟悉：
input {
outline : none;
}
input:focus {
outline : none;
}
这就是将input输入框去掉默认的蓝线框的方法。
CSS中还有一个outline-offset属性，在这个属性中，你可以设置默认线框的距离：
input {
outline-offset: 4px ;
}
<h3>响应式</h3>
2、弹性图片
弹性图片是指不给图片设置固定尺寸，而更具流体网格进行缩放来适应不同的尺寸。实现方法如下代码：
img{
max-width:100%;
}
3、CSS3 Media Queries
它是响应式设计最关键的一个应用，它可以根据浏览器窗口的大小、方向、屏幕规格选择对应的样式文件。
5、主要断点
断点是为min-width和max-width服务的。@media (min-width:320px){}
2、em在响应式设计中的运用
em和font-size优很大关系，它也是css的一个度量单位，不过它比px更适合响应式设计，他能让你的断点根据字号大小来调整其值。
20em = 20 * 16 = 320px
30em = 30 * 16 = 480px
@media only screen and (min-width : 20em) {}
@media only screen and (min-width : 30em) {}
3、常用css单位
常用有三种：px em %
px：浏览器的度量单位，相对于物理像素，1px在高清屏幕下可能占用2个物理像素、甚至3个物理像素。
em：相对于父元素的font-size，如父元素font-size设置为16px，子元素font-size设置为0.75em，那么转换为px就是0.75 * 16px = 12px;
%：相对于父元素的长度高度，position:fixed 、absolute 除外（fixed将相对于窗口、absolute相对于递归父元素知道 第一个设置了position的元素）
rem：相对于根节点(一般为html节点)的font-size，如果html节点设置font-size = 100px，那么文档中的元素设置为0.3rem，则计算为：0.3 * 100px = 30px
vh/vw：相对于设备的可视范围，在移动端中经常会用到，比如：设计师经常要求，banner占满首屏高度既：100vh。如iphone6 （375px * 677px）= (100vw * 100vh) ，而iphone6 plus （414px * 736px） = (100vw * 100vh) 两种屏幕下的vw、vh是不一样的。
clac：css3中的长度计算语法，支持+、-、*、/的计算。
基础一般会包括：头部、导航、内容、页脚。
第三步、媒体查询
1、一般用min-width和max-width来检查各种设备的分辨率大小
@media screen and (min-width : 768px) {}
@media screen and (max-width : 1024px) {}
@media screen and (min-width : 768px) and (max-width : 1024px) {}
2、设备宽度device-width主要用在苹果产品上
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
3、调用独立样式表
常用模板：
1024px显示屏：@media screen and (max-width : 1024px) {}
ipad横屏：@media screen and (max-device-width : 1024px) and (orientation:landscape) {}
ipad竖屏：@media screen and (max-device-width : 768px) and (orientation:portrait) {}
iphone和smartPhone:@media screen and (min-width : 320px) and (max-width : 480px) {}
大屏幕、中屏幕、小屏幕的划分：
小屏幕：<769px；@media only screen and (min-width : 769px) {}
中屏幕：769~1366px或者769~1440px；@media only screen and (min-width : 769px) and (max-width:1366px){}
大屏幕：1366~1920px；@media only screen and (min-width : 1367px) {}
百分比布局中的居中
百分比布局 垂直&水平居中的几种方法
1.以em/rem设置宽度和高度
父级设置 width:5rem; height:5rem; text-align:center;
子集设置 line-height:5rem;
2.利用trunsform
父级设置 width:5rem; height:5rem; position:relative
子集设置 position:absolute; top:50%;left50%; transform:translate(-50%,-50%);
3.高版本浏览器
父级设置 display-flex; justify-content:center; align-items:center;
设置图片居中
.Absolute-Center.is-Image {
height: auto;
}
.Absolute-Center.is-Image img {
width: 100%;
height: auto;
}
重绘居中
.Absolute-Center.is-Resizable {
min-width: 20%;
max-width: 80%;
min-height: 20%;
max-height: 80%;
resize: both;
overflow: auto;
}
负外边距(Negative Margins)居中
.is-Negative {
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%; left: 50%;
margin-left: -170px; /* (width + padding)/2 */
margin-top: -120px; /* (height + padding)/2 */
}
简单的居中
calc()可以计算宽度以后，居中显示的实现就可以有很多方法，padding或者margin，但它的原理都是一样的。
div{
padding: 0 calc((100% - 1024px)/2);
}
假设中间的内容是固定宽度1024px，那么获取父级的宽度或者窗口的宽度100%，然后减去内容的宽度后剩下的就是需要分配给内容左右两边的宽度，将它们一分为二（/2）就可以实现中间1024px宽度的内容一直居中了。
vertical-align:baseline(元素的基线与父元素的基线对齐)
vertical-align:sub(降低元素的基线到父元素合适的下标位置)
vertical-align:super(升高元素的基线到父元素合适的上标位置)
vertical-align:bottom(把对齐的子元素的底端与行框底端对齐)
vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)
vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)
vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)
vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)
vertical-align:(+-n)px(元素相对于基线上下偏移npx)
vertical-align:x%(相对于元素的line-height值)
vertical-align:inherit(从父元素继承vertical-align属性的值)
网友评论