（四十二）HTML标签--3

1、标签嵌套规则

块级标签可以嵌套某些块级标签和内联标签(行内标签)

内联标签不能块级标签,只能嵌套内联标签

块级标签可以设置高度和宽度

内联标签不能设置,设置没有效果

2、Css样式

高度宽度:

Width:100px

Height:100px

字体:

Font-family:’宋体’

Font-size:10px; 默认大小是16px

Font-weight:bold;  自重 粗细 bold加粗

Color:red;rgb(255,255,255) rgba(255,255,255,0.3)  0.3是色彩透明度  两位重重复的可简写#ffffff ==> #fff  

文字对齐方式:

Text-align:center,right,left

 

文字装饰,

Text-decoration:none;//underline,line-through去除横线 多用于a标签

 

首行缩进

Text-indent:32px;缩进两个字符

背景属性

背景颜色

Background:url(‘路径’) no-repeat right top(200px,200px)

Display:

Display:none;隐藏标签

Visibility:hidden;隐藏标签,可是保留标签所占位置

Display:block;将内联标签改成块级标签

Display:inline;将块级标签改成内联标签

Display:inline-block;将块级标签或者内联标签,改为块级标签和内联标签的属性,也就是不独占一行,能够设置高度和宽度

 

Box-model:

Content： 里面的内容  高度宽度就是咱们设置width和height

Padding:内边距(内填充)

Padding-left

Padding-right

Padding-top

Padding-bottom

Border: 边框

border-bottom:1px solid blue;
border-right:1px solid orange;
border-top: 2px solid red;
border-left: 3px dashed orange;
/*border: 3px orange;*/

 

Margin  外边距,距离其余标签的距离,两个标签若是都设置了margin,那么两个标签之间的距离取最大的那个margin

Margin-left:距离左边边框
margin-top:距离上面边框

Margin-right:距离右侧边框

Margin-bottom:距离底部边框

 

 

标签占的宽度:content宽度+左右padding + 左右边框的距离