块属性标签
1.独占一行(上下排列)
2.支持设置宽高 不设置宽高情况下 高度内容撑开 宽度撑满父容器
标题标签 h1~h6
h1标签只能写一个
列表标签一般不单独使用
无序列表:<ul><li></li></ul>
有序列表:<ol><li></li></ol>
把标签转化为块属性:display: block;
把标签转化为行块属性:display: inline-block;
把标签转化为行属性:display: inline;
隐藏:display: none;
行块属性标签 既可以设置宽高 又排在一行(作用排列)
图片
src属性是图片的路径 可以是服务器地址 也可以是相对路径
alt属性:图片加载失败显示的内容
title属性:鼠标悬停后显示内容
标签选择器 选中页面中所有此类标签权重为1
id选择器
id名是唯一的 一个标签只能有一个id 不同标签id也不可以相同权重为100
class选择器
不同标签可以使用相同的class名
一个标签可以有多个class名
class选择器权重是10
让行属性元素支持宽高
display: inline-block;
浮动:left、right
让块属性元素排成一行的时候使用浮动
碰到父元素边缘会停下来
当父元素不设置高度 高度由子元素撑开的时候
一旦子元素浮动 就会脱离父元素 父元素就会失去高度 进而影响后面元素布局
解决:
1.给父元素设置overflow:hidden;
2.在父元素最后加一个设置了clear: both;块属性元素
透明度 0-1(默认是1)
透明度会继承给子元素
opacity: .5;
16进制
background-color: #00FFFF;
英文单词
background-color: aqua;
rgb值 每个值都在0-255之间
背景图片
background-image
背景图片大小
一个值 横向固定 纵向自适应
两个值 横向和纵向大小
cover 等比例平铺 会切掉一部分
contain 宽度或者高度等比例自适应 可能撑不满
背景是否重复
background-repeat: no-repeat;
背景图片位置
左上角是0,0点 x向右正方向 y向下正方向
两个值 x轴方向偏移量 y方向偏移量
x轴 left right center
y轴 top bottom center