css常见样式

1.width: 宽度
2.height: 高度
3.border: 边框
border-width: 边框的宽度
border-style: 边框的线性
solid 实线
dashed 虚线
dotted 点画线
border-color: 边框的颜色
border-top: 上边框
border-bottom: 下边框
border-left: 左边框
border-right: 右边框
border-radius: 圆角(radius--半径)
transparent 透明
border-left:transparent; 左边框透明的
border的缩写:
border:边框的宽度 边框的线性 边框的颜色;
4.定位:
position:absolute; 绝对位置----------------------------
top:xxpx;
right:xxpx;
bottom:xxpx;
left:xxpx;
*会脱离文档流 会影响下面的标签
*相当于浮动的特性 行变块
*根据body定位
position:relative; 相对定位----------------------------
top:xxpx;
right:xxpx;
bottom:xxpx;
left:xxpx;
*本身的位置还在站位
*不会是浮动特性 行不变块
*根据本身原有位置定位
position:fixed; 固定定位----------------------------
绝对居中: position:absolute;
top:50%
left:50%
magin-top:-X (x为块高度的一半)
magin-left:-X (x为块宽度的一半)
5.背景:
background: 背景
background-color: 背景颜色
background-image: 背景图
background-repeat: 背景图平铺
-----no-repeat 不平铺
-----repeat-x x轴平铺
-----repeat-y y轴平铺
background-position: 背景图定位
x y;
Background-attachment: fixed; 背景图滚动
复合写法:
background: color image position repeat;
6.背景图透明:
opacity:xx; 透明程度
xx为0-1之间
filter:alpha(opacity=xx)兼容IE6
xx为0-100之间
7.浮动:
float: 浮动
left 左浮动
right 右浮动
清除浮动:
1-overflow:hidden; (溢出隐藏)清除浮动
2-.clearfix:after{ display:block; clear:both; content:"";}
.clearfix{ zoom:1;} 防止IE BUG
3-给想要浮动的同级加个块标签 然后给这个块标签加个clear:both
特性:
1.是一个有方向的;
2.变成了块;
3.并到了一排;
4.顶对齐;
5.宽度不够会掉下来;
6.脱离了文档流;
加上浮动的元素只会对下面的元素有影响
加浮动必须:
只要有一个标签加上了浮动,同级的标签都要加浮
加浮动就必须请浮动(只能写在父级)
尽量要设置宽度,不给宽度会是内容的宽度;
8.字体:
color: (文本颜色)
font-size (文字大小)
font-weight:bold (文字加粗)
normal---不加粗
font-style:italic (文字倾斜)
normal---不倾斜
font-family: (字体)
中文、英文、unicode
简写:
font:[style] [weight] size/line-height family
9.省略:
width:xxx px;
white-space:nowrap; (文字不换行)
overflow:hidden; (溢出隐藏)
text-overflow:ellipsis; (省略号)
缺一不可,而且要设置宽
10.文本:
text-align: center; 文本水平居中
right 文本水平向右
line-height: 文本的垂直居中(文字纵向居中)行高
写高度
text-indent:em (文本缩进)
11.划线:
text-decoration:none; (取消下划线)
underline (下划线)
overline (上划线)
line-through(中划线)
12.转化:
display:none 隐藏元素
display:block 转换成块
display:inline 转换成行000000000000000000000000
display:inline-block 转换成行内块(底对齐)
13.内外边距:
padding (内边距)
:边框到内容的距离
margin (外边距)
一个盒子到另一个盒子的距离
14.关于padding:
padding: 5px; 上 下 左 右
padding:100px 50px 上 下 左 右
padding:20px 60px 100px; 上 左 右 下
padding:20px 60px 80px 120px; 上 右 下 左
padding-top:50px; 每一个方向,只给一个单独的值
padding-left:50px;
padding-right:50px;
padding-bottom:50px;
*** 给了padding就要用宽高来减去这个padding 的距离
如果没有设置宽高就不需要减掉;
*** 行标签只可以给左右的padding
15.关于margin:
margin:5px; 上 下 左 右
margin:100px 50px 上 下 左 右
margin:20px 60px 100px; 上 左 右 下
margin:20px 60px 80px 120px; 上 右 下 左
margin负值:
left or right 不能设置宽
top or bottom 不能设置高
*** 行标签只可以给左右的margin
margin的BUG:
***拖拽父级(塌陷)
解决的办法如下所述:
overflow:hidden;
border:1px solid #000;
padding-top:50px;(推荐)
***margin合并
解决的办法如下所述:
给单一方向加上你想要的距离(取最大值)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,607评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,239评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,960评论 0 355
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,750评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,764评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,604评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,347评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,253评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,702评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,893评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,015评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,734评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,352评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,934评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,052评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,216评论 3 371
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,969评论 2 355

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,548评论 0 8
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,754评论 1 92
  • 1. 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级元素(block-level eleme...
    hui_mamba阅读 198评论 0 0
  • 放假前我给女儿买了三本书,«星球大战之公主,无赖和农场男孩»,«小妇人»,«马拉拉»。她最先抢看了«星球大战»,接...
    JinWang阅读 558评论 0 1
  • 最近的我疲惫感增强,可能是真的有点累,但更多的是心里作用,我知道我总是在给自己设想自自己一种怪圈的模式,这种模式很...
    逆光的傻瓜阅读 551评论 0 0