1.水平居中: 更多的是指宽度的居中,margin: 0 auto; 2.垂直居中: 是指高度的居中 PS:这个两个慨念我老是搞混,今天记录一下,防止下次又忘了…

html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用.因为: 1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位:3. Firefox能够调整px和em…

这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用.因为: IE无法调整那些使用px作为单位的字体大小: 国外的大部分网站能够调整的原因在于其使用了em作为字体单位: Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pix…

css基本概念 css是什么?不需要了解太多文字类介绍,记住css是层叠样式表,HTML是页面结构,css负责页面样式,javascrt负责静态页面的交互.CSS 能够对网页中元素位置的排版进行像素级精确控制,拥有对网页对象和模型样式编辑的能力.详情参考css百度百科了解其发展历史,语言特点与语言基础等,也是有好处的. 标签的属性决定了静态页面的展示效果,在早期,标签属性过多,对于浏览器的识别过于麻烦,因为一修改标签,页面的版本什么都需要变动,可谓牵一发而动全身!除此之外,对于开发人员来说,代码…

之前有些过两篇关于字体的文章,是关于如何定义字体的: 你该知道的字体 font-family Web 字体 font-family 再探秘 本文将会和这篇 -- CSS 奇思妙想边框动画类似,讲一些文字效果,利用不同的属性搭配,实现各式各样的文字动效. Google Font 在写各种 DEMO 的时候,有的时候一些特殊的字体能更好的体现动画的效果.这里讲一个快速引入不同格式字体的小技巧. 就是 Google Font 这个网站,上面有非常多的不同的开源字体: 当我们相中了一个我们喜欢的字体,它…

css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justify : auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper 语法取值 auto :…

DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃.但DIVCSS5有2中方法对文字字体实现竖排显示,在接下来通过知识讲解与实例案例演示让大家中文让文字字体垂直竖排显示. 实际的文字垂直竖排显示截图 一.原始使用writing-mode属性-不推荐   -   TOP 语法:writing-mode:lr-tb或writing-mode:tb-rl…

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也…

说到CSS文字垂直居中,很多初学者都喜欢用调整行高等于div高度的方式来达到效果, div { height:30px; line-height:30px; } 但其实这么做会遇到一个问题:多行文本溢出父元素. 所以还是使用 div{ padding:8px 0; } 的方式比较稳妥…

CSS文字过多显示省略号 /*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/ .dot1{ width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:; overflow: hidden; } /*不支持多行文本溢出显示省略号*/ .dot2{ width: 100%; overflow: hidden; text-overflow: ellipsis; w…