常用css属性总结
边框修饰:
border------>top,bottom,left,right上下左右边框
分为:color,类型style{ groove,dashed,ridge,solid}
一个值------->四个边 二个值------->上下 左右 三个值------->上 左右 下 四个值-------->上 右 下 左(顺时针)
文本修饰:
1,文字修饰:font
{ color: red;/*字体颜色*/
font-size: 30px; /*字体大小 默认字体大小是16px*/
font-family: "微软雅黑"; /*字体*/
font-weight: bolder; /*字体粗细 lighter normal bold*/
font-style: italic; /*字体类型*/
2,文本修饰:text
text-align: center; /*文本对齐方式*/left、right
text-decoration: underline; /*文本描述*/
text-indent: 20px; /*em 字符单位 px像素单位*/首行缩进
text-indent: 2em; /*2em在默认情况下是32px*/
text-shadow: 5px 5px 2px yellow; /*文本投影*/
/*投影 水平距离 垂直 模糊程度 颜色*/
3. 多行文本溢出隐藏
overflow: hidden;------>/*溢出隐藏*/
text-overflow: ellipsis;------> *//*溢出内容以省略号的形式显示*/
display: -webkit-box;------>/ /*可伸缩的盒子*/
/*-webkit-line-clamp: 1;------>*/ /*省略号在第几行显示*/
/*-webkit-box-orient: vertical;*------>/ /*在垂直方向有溢出*/
4.一行文本的溢出
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;------> /*强制一行显示*/后面三行代码实现强制一行显示。
div里面title属性可以隐藏文本。word-break:break-word------>自动换行
height line-height------>文字垂直居中。只针对文字垂直居中
letter-spacing------>字间距。
text-align: justify;------>两端分散对齐。
text-align-last: justify;------>最后一行两端分散对齐。
/*css3*/
-webkit-column-count: 15;------>分栏15列
-webkit-column-rule: 1px red dashed;分栏线
word-break: break-word;
5.背景修饰:background
background-color: red;------>/*背景颜色 默认值 transparent*/
background-image:url(猫.jpg);------>/*背景图片 默认值none*/
/*背景图片优于背景颜色显示*/
background-repeat: no-repeat;------>/*定义背景图片是否重复 默认值repeat repeat-(x/y)*/
background-position:right 20px bottom 20px;------>/ /*写了一个方向的位置移动 另一个方向默认居中*/
background-position: center;------> /*背景图片位置 默认left top*/
background-attachment: fixed;------> /*定义背景图片是否随着滚动条的滚动而滚动 默认scroll fixed固定背景图片*/
background-size: 500px 500px;------> /*背景图片大小*/
6.盒子属性:margin值 盒子与盒子之间的距离
margin 0 auto水平居中 margin-top/bottom/right/left
padding值“设置内容与边框的距离”
一般*{
margin 0
padding 0重置盒子的自带属性值。
}
* 边界溢出 第一个子元素的上边界 最后一个的下边界 溢出父元素。
解决办法:
/*height: 500px;*/加高度第一种对象是父元素。
/*overflow: hidden;*/第二种
/*padding: 1px;*/第三种
上下边界合并 取大值。
7.两种盒子:
/*box-sizing: content-box;*/
/*盒子的实际大小 (内容+border+padding)*/
box-sizing: border-box;
/*盒子的实际大小(宽高) border+padding压缩内容的大小*/
8.背景负位置注意:
display: inline-block; /*元素转为行内块元素*/
vertical-align: middle; /*垂直对齐*/
9.颜色表示方法:
/*1/英文 不透明*/
/*background: red;*/
/*2/十六进制(兼容好) 不透明*/
/*background: #ff0000;*/
/*#+(0-9)(a-f)*/
/*3/rgba 透明*/
/*background: rgba(255,0,0,1);*/
/*r 红色 0-255
b 蓝色 0-255
g 绿色 0-255
a 透明度 0-1之间的小数*/
/*4/hsla 透明*/
background: hsla(90,50%,50%,1);
/*h 色相 0-360
s 饱和度,0-100%
l 明度,0-100%
a 透明度 0-1之间的小数*/
10.渐变背景:
/*css3新属性*/
background: linear-gradient(to left,red,blue); /*线性渐变*/
background: radial-gradient(red,blue); /*径向渐变*/
盒子自带属性:
span,i{ /*盒子属性失效 对行标签*/
display: block; /*行元素转换成块元素*/
11.浮动坍塌:解决:子元素浮动了就给父元素加上。
1.给父元素设置高度
2.overflow:hidden;
3.loat: left;
4.伪类解决
.clear:after{
content:"";
display:block;
clear: both;
12. display用法
1/垂直居中
2/隐藏元素
3/行块互转
4/做横向导航
/*display: none;*//*不占位隐藏*/
/*opacity: 0;*/ /*占位隐藏*/
visibility: hidden;/*占位隐藏*/
浏览器兼容问题:
1.标签自带的样式
2.浏览器解析标签的样式(最难的)
进阶:h5+框架
核心:js
基础:(html+js+css+html5)
布局:整体入手 局部分析 调整位置 添加样式
等宽:相对于父级的高度。最外面的div就是body
auto是给块级标签用的有个默认的属性:如(div display:block)
margin把行标签居中具备三个条件:margin 0 auto;display:block 给个宽度。
html不包括滚动条的。
注意:浮动过后行元素可以设置宽高了
注意:margin值不合并了
border-color: red; 四个边
border-color: red green; 上下 左右
border-color: red green blue; 上 左右 下
border-color: red green blue pink; 上 右 下 左(顺时针)
absolute:/*位移对象 不占位
浏览器窗口/body/html
已被定位的,最近的父元素
relative:位移对象:自身 占位
fixed: 参照物:浏览器窗口/body/html 不占位
常用css属性总结的更多相关文章
- 常用css属性
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal;字间距 letter-spacing: 数值 | inherit | nor ...
- css基础--常用css属性02
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...
- html5--6-59 其他常用CSS属性
html5--6-59 其他常用CSS属性 实例 学习要点 了解opacity属性:透明度设定 了解cursor属性:自定义鼠标样式 了解CSS新单位rem和em的区别 了解轮廓outline的设置 ...
- 常用css属性记录
CSS常用属性: 字体属性:(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style: ...
- 常用css属性拓展
text-overflow:clip | ellipsis(默认值:clip)clip:当内联内容溢出块容器时,将溢出部分裁切掉.ellipsis:当内联内容溢出块容器时,将溢出部分替换为(...). ...
- day 40 文本属性 常用css属性 定位
一. 浮动的特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"字围"效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中: ...
- 界面设计常用CSS属性
CSS常用属性整理: 1 字体属性 font-family 设置使用的字体 font-style 设置字体的样式,是否斜体 font-variant 设置字体的大小写 font-weight 设置字体 ...
- css基础--常用css属性01
1 背景相关 背景颜色 background-color = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...
- css属性(常用属性整理)
摘要:本文是我在学习前端的过程中整理的一些常用css属性,部分是css3新增的,因能力有限,文中如有错误,欢迎提出,我会及时修改.希望对大家有帮助! CSS属性 CSS属性 1 1. css颜色属性 ...
随机推荐
- php设计模式——模板模式
最近打算巩固,整理一下设计模式相关的内容.这篇是关于 ——模板模式! 原文:http://www.jb51.net/article/76052.htm ----------------------- ...
- (6)文本挖掘(三)——文本特征TFIDF权重计算及文本向量空间VSM表示
建立文本数据数学描写叙述的过程分为三个步骤:文本预处理.建立向量空间模型和优化文本向量. 文本预处理主要採用分词.停用词过滤等技术将原始的文本字符串转化为词条串或者特点的符号串.文本预处理之后,每个文 ...
- Redis学习笔记3-Redis5个可运行程序命令的使用
在redis安装文章中,说到安装好redis后,在/usr/local/bin下有5个关于redis的可运行程序.以下关于这5个可运行程序命令的具体说明. redis-server Redisserv ...
- IOS推断是否安装微信qq
BOOL weicaht = [[UIApplicationsharedApplication]canOpenURL:[NSURLURLWithString:@"mqqapi://" ...
- hdu 5386 Cover (暴力)
hdu 5386 Cover Description You have an matrix.Every grid has a color.Now there are two types of oper ...
- debug 和release 的区别
http://blog.csdn.net/h_wlyfw/article/details/26688677
- python的一些常用函数
1 filter(function, iterable) 等价于(item for item in iterable if function(item)) 就是说,filter会遍历iterable中 ...
- iOS 证书详解
引言 关于开发证书配置(Certificates & Identifiers & Provisioning Profiles),相信做iOS开发的同学没少被折腾.对于一个iOS开发小白 ...
- scapy基础-网络数据包结构
网络层次模型,数据包的组成是学习scapy的基础,下文主要关注模型中各个层次的用途,ethernet II和ip包数据结构. 1.五层模型简介 名称 作用 包含协议 应用层 面向程序对程序的传输 ...
- sparksql语句
(1)in 不支持子查询 eg. select * from src where key in(select key from test);支持查询个数 eg. select * from src w ...