相同: 它们都能让元素不可见
区别:
display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;
visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见
display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,
通过修改子孙节点属性无法显示;
visibility:hidden;是继承属性,子孙节点消失由于继承了 hidden,
通过设置 visibility: visible;可以让子孙节点显式
修改常规流中元素的 display 通常会造成文档重排。
修改 visibility 属性只会造成本元素的重绘
读屏器不会读取 display: none;元素内容;
会读取 visibility: hidden 元素内容
css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。
但盒子的大小由content+padding+border的这几部分决定。
box-sizing是一个CSS3属性,与盒子模型有着密切联系。即决定元素的宽高如何计算,box-sizing有三个属性:
box-sizing:content-box|border-box|inherit
•content-box:(默认模式)使得元素的宽高即为内容区的宽高
•border-box:计算content+padding+border=本身元素的大小,即缩小了content大小
•inherit:指定box-sizing属性的值,应该从父元素继承
浮动的元素是脱离文档标准流的,如果我们不清楚浮动,name就会造成父元素高度坍塌,影响页面布局
清除浮动的方式:3、4、5
1.直接给父元素添加一个高度;
弊端:不是每次都知道父元素的高度
2.给父元素设置浮动
弊端:不是任何时候父元素都需要浮动,而且一旦父元素浮动,会影响后续的效果
3.为父元素设置overflow
取值:hidden或auto
弊端:如果有内容溢出显示,也会被一同隐藏
4.在父元素中,追加一个空的子元素div,并设置其clear:both;
这种方式是通过空白来撑开父元素的高度,没有副作用,单页面中会出现多余的结果
5.伪元素-------给高度坍塌的盒子,添加一个clearfix的类
.clearfix:after{
content:""; //添加一个内容
display:block; //转化为一个块元素
clear:both; //清除两侧的浮动
}
.clearfix{ //兼容低版本浏览器
Zoom:1;
}
使用伪元素的好处:不增加冗余的DOM节点,符合语义化
overflow:hidden可以触发BFC机制。
BFC:块级格式化上下文,创建BFC的元素就是一个独立的盒子,它规定了内部如何布局,并且与这个独立盒子里的布局
不受外部影响,当然它也不会影响到外面的元素,计算BFC的高度时,浮动元素也参与计算
浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上
解决方法
1. 父级 div 定义伪类:after 和 zoom (推荐使用,建议定义公共类,以减少 CSS 代码)
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0}
.clearfloat{zoom:1}
2. 在结尾处添加空 div 标签 clear:both
Left
Right
3. 父级 div 定义 height
4. 父级 div 定义 overflow:auto
5. 父级 div 定义 overflow:hidden
6. 父级 div 也一起浮动
7. 父级 div 定义 display:table
8. 结尾处加 br 标签 clear:both
定位的方式
.father{
position:relative;
}
.son{
position:absolute;
top:0;right:0;
bottom:0;left:0;
margin:auto;
}
CSS3属性
.father{
position:relative;
}
.son{
position:absolute;
top:50%;left:50%;
transform:tranlate(-50%,-50%);
}
Flex布局
.father{
display:flex;
justify-content:center;
align-items:center;
}
px:像素,相对长度单位。像素px是相对于显示器屏幕分辨率而言的
em的值并不是固定的,会继承父级元素的字体大小,代表倍数 em = 像素值 / 父级 font-size
rem的值并不是固定的,始终是基于根元素的,也代表倍数
响应式设计就是网站能够兼容多个终端,而不是为每个终端做一个特定的版本
基本原理是利用 CSS3 媒体查询,为不同尺寸的设备适配不同样式
对于低版本的 IE,可采用 JS 获取屏幕宽度,然后通过 resize 方法来实现兼容:
$(window).resize(function () {
screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
$("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
$("body").attr("class", "w1400");
}
if(screenWidth > 1800){
$("body").attr("class", "");
}
}
因为浏览器兼容性问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异
初始化样式会对SEO(Search Engine Optimization,即搜索引擎优化)有一定的影响
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。伪元素由双冒号和伪元素名称组成,双冒号是在当前规范中引入的,用于区分伪类和伪元素
外边距重叠就是 margin-collapse
相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠,结合而成的外边距称为折叠外边距
折叠结果遵循下列计算规则:
p:first-of-type 选择属于其父元素的首个元素的每个
元素。
p:last-of-type 选择属于其父元素的最后元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled 选择器匹配每个已启用的元素(大多用在表单元素上)。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中
如果需要居中的元素为常规流中 inline 元素,为父元素设置 text-align: center;即可实现
如果需要居中的元素为常规流中 block 元素,1)为元素设置宽度,2)设置左右 margin 为 auto。3)IE6 下需在父元素上设置 text-align: center;,再给子元素恢复需要的值
如果需要居中的元素为绝对定位元素,1)为元素设置宽度,2)偏移量设置为 50%,3)偏移方向外边距设置为元素宽度一半乘以-1
如果需要居中的元素为绝对定位元素,1)为元素设置宽度,2)设置左右偏移量都为 0,3)设置左右外边距都为 auto
/* 把上、左、右三条边隐藏掉(颜色设为 transparent)*/
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
简单的方式:
行框的排列会受到中间空白(回车\空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为 0,就没有空格了
移除空格、使用 margin 负值、使用 font-size:0、letter-spacing、word-spacing
以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:
/*权重为1*/
div{ }
/*权重为10*/
.class1{ }
/*权重为100*/
#id1{ }
/*权重为100+1=101*/
#id1 div{ }
/*权重为10+1=11*/
.class1 div{ }
/*权重为10+10+1=21*/
.class1 .class2 div{ }
如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现。
content 属性专门应用在 before/after 伪元素上,用于插入额外内容或样式
Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局
要求:三列布局;中间主体内容前置,且宽度自适应;两边内容定宽
好处:重要的内容放在文档流前面可以优先渲染
原理:利用相对定位、浮动、负边距布局,而不添加额外标签
.container {
padding-left: 150px;
padding-right: 190px;
}
.main {
float: left;
width: 100%;
}
.left {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -150px;
}
.right {
float: left;
width: 190px;
margin-left: -190px;
position: relative;
right: -190px;
}
双飞翼布局:
对圣杯布局(使用相对定位,对以后布局有局限性)的改进,消除相对定位布局
原理:
主体元素上设置左右边距,预留两翼位置。左右两栏使用浮动和负边距归位,消除相对定位。
.container {
/*padding-left:150px;*/
/*padding-right:190px;*/
}
.main-wrap {
width: 100%;
float: left;
}
.main {
margin-left: 150px;
margin-right: 190px;
}
.left {
float: left;
width: 150px;
margin-left: -100%;
/*position: relative;*/
/*left:-150px;*/
}
.right {
float: left;
width: 190px;
margin-left: -190px;
/*position:relative;*/
/*right:-190px;*/
}
reset.css 意为重置默认样式。HTML 中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式
Eric Meyer(CSS Reset)推荐
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Normalize.css 只是一个很小的 css 文件,但它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 css reset,Normalize.css 是一种现代的,为 HTML5 准备的优质替代方案。
Normalize.css 是一种 CSS reset 的替代方案。经过@necolas 和@jon neal 花了几百个小时来努力研究不同浏览器的默认样式的差异,这个项目终于变成了现在这样。
我们创造 normalize.css 有下几个目的:
浏览器解析 CSS 选择器的方式是从右到左
在网页中的应该使用“偶数”字体:
CSS 可以拆分成 2 部分:公共 CSS 和 业务 CSS:
元素竖向的百分比设定是相对于容器的宽度,而不是高度
视差滚动是指多层背景以不同的速度移动,形成立体的运动效果,具有非常出色的视觉体验
一般把网页解剖为:背景层、内容层和悬浮层。当滚动鼠标滚轮时,各图层以不同速度移动,形成视差的
实现原理
以 “页面滚动条” 作为 “视差动画进度条”
以 “滚轮刻度” 当作 “动画帧度” 去播放动画的
监听 mousewheel 事件,事件被触发即播放动画,实现“翻页”效果
link > visited > hover > active
伪元素:
在内容元素的前后插入额外的元素或样式,但是这些元素实际上并不在文档中生成。它们只在外部显示可见,但不会在文档的源代码中找到它们,因此,称为“伪”元素。例如:
p::before {content:"第一章:";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
伪类:
将特殊的效果添加到特定选择器上。它是已有元素上添加类别的,不会产生新的元素。例如:
a:hover {color: #FF00FF}
p:first-child {color: red}
input [type=search] 搜索框右侧小图标如何美化?
input[type="search"]::-webkit-search-cancel-button{
-webkit-appearance: none;
height: 15px;
width: 15px;
border-radius: 8px;
background:url("images/searchicon.png") no-repeat 0 0;
background-size: 15px 15px;
}
下载 下载
###53.iOS safari 如何阻止“橡皮筋效果”?
$(document).ready(function(){
var stopScrolling = function(event) {
event.preventDefault();
}
document.addEventListener('touchstart', stopScrolling, false);
document.addEventListener('touchmove', stopScrolling, false);
});
设置元素浮动后,该元素的 display 值自动变成 block
.shrink{
-webkit-transform:scale(0.8);
-o-transform:scale(1);
display:inline-block;
}
-webkit-font-smoothing: antialiased;
font-style: oblique; 使没有 italic 属性的文字实现倾斜
16.7ms 多数显示器默认频率是 60Hz,即 1 秒刷新 60 次,所以理论上最小间隔: 1s / 60 * 1000 = 16.7ms
监听滚轮事件,然后滚动到一定距离时用 jquery 的 animate 实现平滑效果。
对于 CSS 而言,id 和 class 都是选择器,唯一不同的地方在于权重不同。
如果只说 CSS,上面那一句话就讲完了。
拓展出来,对于 html 而言,id 和 class 都是 dom 元素的属性值。
不同的地方在于 id 属性的值是唯一的,而 class 属性值可以重复。
id 还一个老特性是锚点功能,当浏览器地址栏有一个#xxx,页面会自动滚动到 id=xxx 的元素上面。
更直接的:id 给 js 用,class 给 css 用(趋势)
其中 media 指定的属性就是设备,显示器上就是 screen,打印机则是 print,电视是 tv,投影仪是 projection。
但打印样式表也应有些注意事项:
反之
下面的属性在 SVG 和 CSS 中是一样的,只是在 SVG 的 transformations 和 dimensions 中稍有区别:
font-family, font-size, font-style, font-variant 和 font-weight
width 和 height
scale, rotate, skew
###68.如果设计中使用了非标准的字体,你该如何去实现?
用图片代替
web fonts 在线字库
@font-face
原理:利用不同浏览器对 CSS 的支持和解析结果不一样编写针对特定浏览器样式。 常见的 hack 有
1)属性 hack。
2)选择器 hack。
3)IE 条件注释
属性 hack:不同浏览器解析 bug 或方法
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
选择器 hack:不同浏览器对选择器的支持不一样
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
IE 条件注释:适用于[IE5, IE9]常见格式如下
{ color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }