html标签五

1、字体
font-size:一般我们常用的字体大小为12px 14px 16px,
【注】谷歌浏览器支持的最小字体只有12px。
color:字体颜色
font-weight:normal(默认正常) bold(加粗)
font-family: 字体
font-style:normal(默认正常) italic(斜体)
2、文本属性
text-indent:文本缩进
text-align:对齐方式, left center right
text-overflow(clip、ellipsis)
【注】这个属性需要配合overflow来使用,将overflow设置hidden
clip:直接截断
ellipsis:单行最后显示省略号
white-space:nowrap; 【了解】强制在一行显示所有文本

text-decoration(none、underline(下划线)、overline(上划线)、line-through(删除

线) )
text-shadow:给文本设置阴影效果
text-shadow:1px 1px 1px red;
值1:水平偏移值
值2:垂直偏移值
值3:阴影模糊度,一般取值1px 2px
值4:阴影颜色
line-height:行高
【注】将行高设置为和div高度一样,则文本就会垂直居中
vertical-align:由于很多浏览器不兼容这个属性,所以不推荐使用该属性。
当碰见图片和文字水平布局的时候,使用这个属性。
将文字行高设置和div高度一样,将图片设置为垂直居中。
3、背景
background-color:背景色
background-image:url(图片地址)
background-repeat:
repeat:重复背景(默认)
no-repeat:不重复背景图
repeat-x:水平方向重复背景图
repeat-y:垂直方向重复背景图
background-attachment
fixed:(了解)相对窗口固定,当显示该div的时候,背景图才显示出来
local:背景图会随着内容的滚动而滚动
scroll:默认属性,背景图不会随着内容的滚动而滚动
background-position(left、center、right、top、bottom、xy值)
x值:图片水平方向偏移的距离
y值:图片垂直方向偏移的距离,参考00点在div的左上角
简写形式:该简写形式没有顺序,中间以空格隔开
/简写形式为/
background:url(cjk.png) norepeat 50px 50px;
4、列表
list-style:none
list-style-image:自定义前面显示的图片
list-style-position:inside(小点在li里面) outside(默认,小点在li外面)
list-style-type:li前面小点的类型,见css手册
5、布局
float(left、right)
脱离文档流,在更高一层级来布局,不会影响原来的布局,但是会盖住父级上面的

其他内容
clear(left、right、both)
清楚浮动,如果上面有浮动的元素,那么下面布局其他元素的时候会被浮动的元素

盖住,这时候就需要清除浮动,从浮动元素的下面开始布局。
clear:both;
display(none、inline-block、block、inline)
inline-block:切换为行内块
block:切换为块
inline:切换为行内元素
none:让标签消失,位置也不再
visibility(visible、hidden):让标签消失,但是位置依然存在
overflow(visible、hidden、scroll、auto)
当内容超出div的宽度或者高度的时候,
visible:默认属性,显示出来
hidden:超出部分隐藏
scroll:显示滚动条,滚动显示
auto:自动显示滚动条
overflow-x:scroll
overflow-y:scroll
属性值和上面的一样,一个x方向的特点,一个是y方向的特点
white-space:nowrap在一行显示
6、定位
position(relative、absolute、static、fixed)
static:默认属性,这时候设置top right left bottom无效
fixed:相对于窗口的位置。脱离文档流
relative:相对定位,相对于自己原来的位置,不会脱离文档流。
absolute:绝对定位,会脱离文档流。原来的位置已经不在。
【注】如果想让子元素相对于父元素绝对定位,那么需要设置父元素为相

对定位,设置子元素为绝对定位即可。
z-index:这个属性的测试需要都为absolute或者fixed的才有效。数值越高,显示越靠前,

针对浮动无效。默认值为0

如下属性只有当定位是relative、absolute、fixed时有效
top
right
bottom
left

7、边框
border
border-width
border-style
dotted:点线
solid:实线
dashed:虚线
double:双线
border-color
/*
border-width:10px;
border-color:blue;
border-style:dotted; */
如下为简写形式
border: 10px solid #0000ff;

border-radius:边框圆角
box-shadow:
    box-shadow:2px 2px 2px yellow;  边框阴影

8、盒子模型(针对于块元素和行内块元素)
自动居中
简写形式
/*
margin-left:auto;
margin-right:auto;/
/
top right bottom left/
/
margin: 0 auto 0 auto;*/
margin:10px auto;

9、内外边距
padding
padding-top
padding-right
padding-bottom
padding-left

padding:10px 20px;

margin
margin-top
margin-right
margin-left
margin-bottom

margin重叠问题(了解)
    解决:只设置一个元素的margin,另一个设置为0
   行内元素没有宽高,也没有内边距,外边距

http://www.discuz.net

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,709评论 1 92
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,389评论 0 8
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,008评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,723评论 0 2
  • 上次简单的tabBarConroller底层原理实现是比较简单的,然后常用类似tabBarController的是...
    若素Smile阅读 548评论 2 4