CSS总结1
新增:修改placeholder样式
::-moz-placeholder{color:red;} //ff19+
:-moz-placeholder{color:red} //ff18-
::-webkit-input-placeholder{color:red;} //chrome,safari
:-ms-input-placeholder{color:red;} //ie10
1、内联元素,定义上下边界不会影响到行高
2、只有普通文档流中块框的垂直空白变才会发生空白边叠加,行内框、浮动框或者定位框之间的空白框是不会叠加的
3、居中布局设计:
方式1:margin:0 auto;
方式2:使用定位和负值空白边让设计居中
/*将容器的左边缘定位到页面的中间*/
#box{
width: 720px;
position: relative;
left: 50%;
border: 1px solid;
}
/*让容器的中间居中*/
#box{
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
border:1px solid;
}
4、两列右侧宽度自适应布局:设置左侧宽度,右栏不设置任何宽度值
5、三列布局中间列宽度自适应布局
#left{
width: 220px;
height: 200px;
background-color: #09f;
border:2px solid #06f;
position: absolute;
top:0;
left: 0;
}
#right{
width: 200px;
height: 200px;
background-color: #09f;
border:2px solid #06f;
position: absolute;
top:0;
right: 0;
}
#mian{
height: 200px;
background-color: #09f;
border:2px solid #06f;
margin:0 204px 0 204px;
}
6、两列宽度自适应布局(注意要将整体设置为100%)
#left{
width: 20%;
height: 200px;
float: left;
}
#right{
width: 70%;
height: 200px;
float: left;
}
7、overflow:visible | auto | hidden | scroll
visible :不剪切内容也不添加滚动条
auto:该属性值为body对象以及textarea的默认值,在需要时剪切内容并添加滚动条
hidden:不显示超过对象尺寸的内容
scroll:总是显示滚动条
overflow-x以及overflow-y分别设置当前对象的内容超过其指定的宽度时、高度时的处理
8、背景控制:
- background-origin:border | padding | content
border:从border区域开始显示背景
padding :从padding区域开始显示背景
content:从content区域开始显示背景
- background-clip:border-box | padding-box | content-box | no-clip
border-box:从border区域向外剪裁背景图像
padding-box:从padding区域向外剪裁背景图像
content-box:从content区域向外剪裁背景图像
no-clip:从border区域向外剪裁背景图像,与border-box的属性值一致
- background-size:设置背景图片大小
length: 第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为 "auto"
percentage : 以父元素的百分比来设置背景图像的宽度和高度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为 "auto"
cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中
contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
9、字体样式控制:
- font-style:italic(斜体) | oblique(偏斜体) | normal(正常)
- text-transform:capitalize(单词首字母大写) | uppercase(单词全部大写) | lowercase(单词全部小写)
- 段落垂直对齐:vertical-align:top(段落顶端对齐) | middle(段落垂直居中对齐) | bottom(段落底端对齐)
- 字间距:letter-spacing:1em;
- text-shadow: h-shadow v-shadow blur color
- text-overflow:设置是否使用一个省略标记(…)标示对象内的文本溢出
text-overflow: clip(不显示,就是简单的裁切) | ellipsis(使用)
使用省略号掩藏的时候还需要另外设置white-space:nowrap ; overflow:hidden
(white-space: pre 空白会被浏览器保留;nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止;pre-wrap 保留空白符序列,但是正常 地进行换行;pre-line 合并空白符序列,但是保留换行符; normal 默认。空白会被浏览器忽略)
- word-wrap:用于设置当前行超过指定容器的边界时候是否断开转行
normal:控制连续文本换行
break-word:内容将在边界内换行,如果需要,词内换行也会发生
10、图片对齐方式:
- 图片的水平对齐设置:利用text-align属性设置,但其需要通过为其父元素设置定义的text-align样式来达到效果
- 图片的垂直对齐,vertical-align
11、表单图像域:是指可以用在提交按钮上面的图片,该图片具有按钮的功能
<input type="image" name="image" src="">
12、用户界面resize:设置页面中元素的尺寸大小,用户可以进行调节
both:用户可以调节高度以及宽度
horizontal:用户可以调节元素的高度
vertical:用户可以调节元素的高度
13、css滤镜:filter:filter name(parameters)
.alpha{
filter: alpha(Opacity=opacity,Finishopacity= finishopacity)
}
14、columns : 宽度 || 栏目数
CSS总结1的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- 【leetcode】Largest Number ★
Given a list of non negative integers, arrange them such that they form the largest number. For exam ...
- spring bean中scope="prototype“的作用
今天写代码时,遇到个问题,问题大概如下:在写一个新增模块,当各文本框等输入值后,提交存入数据库,跳到其它页面,当再次进入该新增页面时,上次输入的数据还存在. 经过检查发现是,spring配置文件中,配 ...
- NIS 报错No such map passwd.byname. Reason: Can't bind to server which serves this domain
在NIS—client端使用命令:ypcat passwd ,把错如上题, 原因:client端ypbind服务未启动解决方法:当然是启动ypbind了,命令:service ypbind start ...
- 3ds max的动画输出
转自:http://zhidao.baidu.com/link?url=qc3vV2A9-ydb-YiVKoF7z_bIIRlmLSkyl8DcuWNYn8FaBxa2BDVLwuGPX_jYWxbw ...
- 通过NSString初始化OC类
NSString *className = self.classNames[indexPath.section][indexPath.row]; BaseMapViewController *s ...
- C语言字母频率统计
在进行密码破解时有时候需要得到字母出现的频率信息,下面我将简单的使用C语言来读取一个文件,然后统计该文件内的字母出现的频率. 1.在D盘下新建一个文本文件(文件名为"A.txt") ...
- LNMP平台搭建---Nginx安装篇
在上一篇博文<LNMP平台搭建---Linux系统安装篇>中,我们安装了CentOS版本的Linux操作系统,现在,我们来安装一个Web服务器,大标题写着LNMP,其中的N就是Nginx, ...
- struts2中一些常用的写法 记录
1.对日期进行处理 Date current = new Date(); java.text.SimpleDateFormat sdf = new java.text.SimpleDateFormat ...
- windows 远程桌面命令 mstsc
win+R------>mstsc: 弹出: 目标机必开远程
- web.config详解 -- asp.net夜话之十一
1.配置文件节点说明 1.1 <appSettings>节点 1.2 <connectionStrings>节点 1.3 <compilation> ...