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的动 ...
随机推荐
- 【linux】学习5
鸟哥那本书第11章的内容 管理整个计算机硬件的是操作系统的内核(kernel),内核是需要保护的,我们一般用户只能通过shell来跟内核通信.Shell是用户操作系统的接口 cat /etc/pas ...
- DropDownList如何添加一个空白的选项
ddl_class.Items.Insert(0,new ListItem("",""));
- linux rpm问题:怎样查看rpm安装包的安装路径
x rpm问题:怎样查看rpm安装包的安装路径 2010-07-12 21:19:15 标签:rpm linux 路径 休闲 职场 rpm -qpl xxxxxx.rpm 1.如何安装rpm软件包 ...
- checkbox复选框全选
HTML: <input type="checkbox" class="all"> <input type="checkbox&qu ...
- notifyDataSetInvalidated和notifyDataSetChanged有什么区别
notifyDataSetChanged方法通过一个外部的方法控制如果适配器的内容改变时需要强制调用getView来刷新每个Item的内容.public void notifyDataSetChang ...
- Bootstrap – 1.认识
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Unity依赖注入使用
构造器注入(Constructor Injection):IoC容器会智能地选择选择和调用适合的构造函数以创建依赖的对象.如果被选择的构造函数具有相应的参数,IoC容器在调用构造函数之前会自定义创建相 ...
- Python win32api提取exe图标icon
转载地址: http://blog.csdn.net/gumanren/article/details/6129416 代码如下: # -*- coding: utf-8 -*- import sys ...
- Spell checker
Spell checker Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Subm ...
- PostgreSQL简单介绍
自从MySQL被Oracle收购以后,PostgreSQL逐渐成为开源关系型数据库的首选. 本文介绍PostgreSQL的安装和基本用法,供初次使用者上手.以下内容基于Debian操作系统,其他操作系 ...