HTML基础(三)

目录

• HTML基础(三)
  • CSS属性相关
    • 宽和高
    • 字体属性
    • 文字属性
      • 文字对齐
      • 文字装饰
      • 背景属性
      • 边框
    • CSS盒子模型
      • float
      • 清除浮动
    • overflow溢出属性
    • 定位(position)
    • z-index
    • opacity

HTML基础(三)

CSS属性相关

宽和高

width属性可以为元素设置宽度

height属性可以为元素设置高度

块级标签才能设置宽度,内联标签的宽度由内容来决定

字体属性

#文字字体
font-family   可以把多个字体名称作为一个“回退”系统来保存
font-family: "Microsoft Yahei", "微软雅黑",sans-serif;
#字体大小
font-size: 14px;
#自重(粗细)
font-weight: bold;
    normal	默认值,标准粗细
    bold	粗体
    bolder	更粗
    lighter	更细
    100-900	设置具体粗细,400等同于normal,700等同于bold
#文本颜色
color: 'red';

文字属性

文字对齐

#文字对齐   text-align
text-align:left
text-align:right
text-align:center	
text-align:justify	两端对齐

文字装饰

text-decoration: none #默认,标准文本
text-decoration: underline #下划线
text-decoration: overline #上划线
text-decoration: line-through #穿过文本的一条线
#常用的为去掉a标签默认的自划线
a {
  text-decoration: none;
}
#将段落的第一行缩进 32像素
p {
  text-indent: 32px;
}

背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

边框

# 边框属性
#i1 {
  border- 2px;			#i1 {
  border-style: solid; ----->		border: 2px solid red;
  border-color: red;				}
}
# 边框样式
none 无边框    dotted 点状虚线边框
dashed 矩形虚线边框  solid 实线边框
#border-radius 设置半径
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
border-radius:50%;
#display 用于控制HTML元素的显示效果
display: none HTML文档中元素存在，但是在浏览器中不显示
display: block	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分
display: inline    按行内元素显示，此时再设置元素的width、height、margin和float属性都不会有什么影响
display: inline-block    使元素同时具有行内元素和块级元素的特点

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS盒子模型

margin:        margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding:       用于控制内容与边框之间的距离；   
Border(边框):   围绕在内边距和内容外的边框。
Content(内容):  盒子的内容，显示文本和图像

/*margin: 15px;		  			#只写一个参数 上下左右全是
/*margin: 10px 20px;  			#第一个控制的上下  第二个是左右
/*margin: 10px 20px 30px;  		#第一个控制的上  第二个是左右 第三个是下
/*margin: 10px 20px 30px 40px;  #上  右   下  左

float

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三种取值:

left：向左浮动

right：向右浮动

none：默认值，不浮动

both : 在左右两侧均不允许浮动元素

清除浮动

主要有三种方式：

• 固定高度
• 伪元素清除法
• overflow:hidden

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

overflow溢出属性

overflow:visible	#默认值。内容不会被修剪，会呈现在元素框之外
overflow:hidden		#内容会被修剪，并且其余内容是不可见的
overflow:scroll		#内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
overflow:auto		#如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

定位(position)

所有的标签默认都是静态的 无法改变位置

position: static;

​ 必须将静态的状态修改成定位之后

relative : 相对定位(了解)

​ 相对于标签原来的位置 移动

absolute : 绝对定位

​ 相对于已经定位过(只要不是static都可以 relative)的父标签 再做定位

fixed : 固定定位(回到顶部)

​ 相对于浏览器窗口 固定在某个位置不动

#位置的辩护是否脱离文档流
1.不脱离文档流
	相对定位			
			
2.脱离文档流
	浮动的元素
	绝对定位
	固定定位

z-index

设置对象的层叠顺序。

1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明