全能网站建设教程,昆明做网站优化公司,深圳品牌手表,宁波网站优化方法CSS#xff1a;元素显示模式与背景 元素显示模式什么是元素显示模式块级元素 block行内元素 inline行内块元素 inline-block元素显示模式对比元素显示模式转换 display 背景背景颜色 background-color背景图片 background-image背景平铺 background-repeat背景图片位置 backgr… CSS元素显示模式与背景 元素显示模式什么是元素显示模式块级元素 block行内元素 inline行内块元素 inline-block元素显示模式对比元素显示模式转换 display 背景背景颜色 background-color背景图片 background-image背景平铺 background-repeat背景图片位置 background-position背景附着 background-attachment背景复合写法 background 元素显示模式
什么是元素显示模式
元素显示模式就是元素标签以上面方式进行显示比如div标签独占一行span标签可以在一行内与其他元素共存。 网页的标签非常多都有各自的布局特点但是总体而言它们被分为三大类行内元素块级元素以及行内块元素。 块级元素 block
常见的块级元素有h1 -- h6pulollidiv等其中div是最典型的块级元素。 块级元素的特点 1.独占一行 2.可以控制宽高内外边距 3.宽度默认值为父级元素的100% 4.内部可以放其它行内元素或块级元素 注意文字类的块级元素不能存放其它块级元素否则会发生错误。 示例 我们将一个div放在了p内部在显示上div独占一行把上下的文字挤到两边绿色的盒子是p红色的区域是div好像div在p的内部。 但是当我们打开调试会发现浏览器自动为你的代码添加了两个p标签即被我绿色框出来的p这样div就在p的外面了。 所以这种文字类的块级元素内部不能存放块级元素。 同理h1 - h6也不可以放块级元素。 行内元素 inline
常见的行内元素有astrongbemdelspan等其中span是最典型的行内元素。 行内元素的特点 1.一行内可以放下多个行内元素 2.无法设置宽高设置了也无效 3.宽高由其内容撑开 4.只能容纳文本或者其它行内元素 效果如下 蓝色区域就是这个行内元素span的宽高可以发现直接设置的宽高是无效的最终宽高由内容决定。
注意a标签内部不能放a标签但是a标签内可以放块级元素是特殊的行内元素。 行内块元素 inline-block
行内块元素是前两者的结合体常见的行内块元素有img/input/td等。
行内块元素特点 1.一行内可以有多个行内块元素 2.默认宽度是其本身宽度块级的默认快读是父亲的宽度 3.可以控制宽高和内外边距 但是行内块元素的在同一行显示和行内元素是略有区别的。 行内块元素在一行内时两个元素之间会有一点空隙而行内元素则是紧紧挨着的。 元素显示模式对比
元素模式元素排列设置样式默认宽度包含块级元素一行只能放一个块级元素可以设置宽高父级容器的100%可以包含任何标签行内元素一行可以放多个行内元素不可以直接设置宽高由内容撑开只能容纳文本或者其它行内元素行内块元素一行可以放多个行内块元素可以设置宽高由内容撑开---- 元素显示模式转换 display
CSS提供了一个属性display用于转换元素的显示模式
属性值对应元素block转化为块级元素inline转化为行内元素inline-block转化为行内块元素
示例 可以看到经过转化后span也可以独占一行了。 背景
背景颜色 background-color
background-color定义了元素的背景颜色其一般情况下是默认值background-color: transparent;此属性值代表透明。
属性值背景颜色的属性值有四种形式分别为关键字形式rgb形式rgba形式十六进制形式
表示方式属性值关键字red,green,blue等直接指定颜色rbgrgb(255,255,255) 或 rgb(100%,100%,100%)rbgargba(255,255,255,0.5)十六进制形式#ffaabb
rgb形式 此处的rgb分别代表redgreenblue三种颜色每个颜色的取值为0-255。然后将三种颜色按照比例混合就得到了你的目标颜色。比如rgb(50,100,150)就是将红色绿色蓝色按照50 100 150的比例混合得到的颜色。
rgba形式 相比于rgb形式rgba形式多了一个a属性这里的a代表透明度取值范围为0-1。当a取值为1代表不透明当取值为0代表完全透明。a值可以省略省略是就是rgb形式此时a默认值为1。
十六进制形式 16进制其实也是和rgb形式一致的十六进制的表示形式有六位值其中每两位表示一个颜色。比如#112233中11代表red的比例22代表green的比例33代表blue的比例。 为什么可以这样做呢在rgb形式中每个颜色的取值范围是0-255而两位16进制数字可以代表0-255的十进制数字所以从十六进制的00-ff刚好对应0-255。所以十六进制表示形式和rgb形式本质上是一致的。 背景图片 background-image
background-image属性描述了背景图像实际开发常见于logo或者一些装饰性的小图片以及超大的背景图片优点是非常便于控制位置而且不占用空间。 属性值
属性值作用none无背景图片url指定背景图片的路径 背景平铺 background-repeat
如果要在HTML页面上对背景图像进行平铺可以用background-repeat属性。 属性值
属性值作用repeat背景图片在横向和纵向平铺默认值no-repeat背景图像不平铺只显示一次repeat-x只在横向平铺repeat-y只在纵向平铺
示例 这是默认情况下在横向和纵向同时平铺 这是no-repeat情况下背景图片只重复一次 这是repeat-x只在横向平铺
这是repeat-y只在纵向平铺 背景图片位置 background-position
background-position可以改变图片在背景中的位置其有两种参数模式x轴和y轴的坐标方位名词。 方位名词包括centertopbottomleftright。
参数是方位名词情况下 1.如果设置一个方位名词则第二个方位默认居中 2.如果设置俩个方位名词则前后两个值的顺序无关比如left top和top left的含义相同 3.top和bottom最多设置一个left和right也最多显示一个 示例 如果参数是精确单位 1.如果参数是精确坐标第一个属性值一定是x坐标第二个一定是y坐标 2.如果只指定一个坐标值则该值默认为x坐标y值默认居中。 背景附着 background-attachment
background-attachment可以设置背景图像是否随着页面滚动。 属性值
属性值作用scroll背景图像随页面滚动fixed背景图像固定不随页面滚动
fixed的效果如下 背景复合写法 background
为了简化背景属性的代码我们可以将这些属性简写在同一个属性background上。 当使用简写属性时没有固定的顺序但是一般习惯约定顺序为 background: 背景颜色 背景图片 背景平铺 背景附着 背景位置;
