常用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颜色属性 ...
随机推荐
- 《Java设计模式》之接口模式
-----------模式是思想的体现,而非详细的实现. 抽象的讲,类的接口是类同意其它类对象訪问的方法与字段集.接口通常代表一种承诺,即方法须要实现接口方法名表示的操作,遵循代码凝视和其它文档说明. ...
- 用Java开发50个棋类游戏
眼下已经开发完了两个 1A2B 24点 打算开发以下的.直接在QQ上玩. QQ机器人已经有了.我们直接写业务即可.有兴趣的參与.机器人婷婷体验群 Java技术交流 207224939 四棋 小枪大炮 ...
- php 获取今天,本周,本月,三个月内,半年内,今年的开始和结束时间
$now = time(); //今天 $today_audit_num = 0; $today_use_num = 0; $beginTim ...
- hdu 1258 Sum It Up (dfs+路径记录)
pid=1258">Sum It Up Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (J ...
- CSS和JS结合控制样式
CSS控制样式,毋庸置疑.但有时,仅靠CSS却很难控制好,比如说,页面在多种条件下进行不同的呈现:或者运行过程中,会发生变化,比如说,左侧的菜单栏收缩了,那么右侧的宽度就变大了. 就拿这个元素的wid ...
- Run bash script as daemon
linux - Run bash script as daemon - Stack Overflow https://stackoverflow.com/questions/19233529/run- ...
- mac 下idea光标问题
可以使用 fn + i 解决此问题
- luogu 2622 关灯问题II
题目大意: 有一些灯,有些开关可以控制这些灯,给出矩阵表示控制 对于矩阵中的a i j 表示第i个开关控制第j个灯的情况 若元素为1 表示当灯开着的时候,关掉灯 若元素为0 表示无操作 若元素为-1 ...
- AT2004 Anticube
https://www.zybuluo.com/ysner/note/1304774 题面 给定\(n\)个数\(s_i\),要求从中选出最多的数,满足任意两个数之积都不是完全立方数. \(n\leq ...
- gitlab调试
Bundle complete! 104 Gemfile dependencies, 161 gems now installed.Gems in the groups development, te ...