有找专业做淘宝网站的美工,wordpress 5编辑器使用教程,不一样维度的网站,PHP网站开发工程师招聘本帖开始介绍CSS中更复杂的内容
目录
一.显示模式
1.行内元素
2.块级元素
3.行内块元素
二.背景样式 一.显示模式
顾名思义#xff0c;在CSS中#xff0c;元素主要有3种显示模式#xff1a;行内元素、块级元素、行内块元素~ 所谓块级元素#xff0c;指的是该元素在…本帖开始介绍CSS中更复杂的内容
目录
一.显示模式
1.行内元素
2.块级元素
3.行内块元素
二.背景样式 一.显示模式
顾名思义在CSS中元素主要有3种显示模式行内元素、块级元素、行内块元素~ 所谓块级元素指的是该元素在页面中独自占用一行而行内元素则允许多个元素共处一行而行内块元素则兼具两者特点 1.行内元素
常见的行内元素如下 a - 锚点em - 强调br - 换行img - 图片font - 字体设定(不推荐)span - 常用内联容器定义文本内区块input - 输入框label - 表格标签select - 项目选择strong - 粗体强调textarea - 多行文本输入框 行内元素的特点 相邻行内元素在一行一行可以显示多个。 高度、宽度的设置无效只会被文字撑开。 默认宽度就是文本撑开的长度 行内元素只能容纳行内元素和文本 如下代码展示一下行内元素的效果 span classred我是第一个行内元素/spanspan classorange我是第二个行内元素/spanspan classred我是第三个行内元素/span div img src/小米图标.jpg classsmallimg src/小米图标.jpg classsmallimg src/小米图标.jpg classsmall/div 需要特别说明的是span与img均为行内元素理应归纳在同一行但由于此时三张小米的img标签均被包裹在了一个独立的div内div这种块级元素的存在使得三个图标必须换行 ~
2.块级元素
常用的块级元素 p - 标签定义段落h1 - 定义最大的标题h2 - 定义副标题h3 - 定义标题h4 - 定义标题h5 - 定义标题h6 - 定义最小的标题ul - 定义无序列表ol - 定义有序列表li - 标签定义列表项目dl - 定义列表dt - 定义列表中的项目dd - 定义列表中定义条目hr - 创建一条水平线div - 定义文档中的分区或节form - 创建 HTML 表单 块级元素的特点 自身独占一行 高度、宽度、内外边距都可以自定义宽度默认是父元素的100%块元素里可以放行内、行内块、块元素 div classpurple我是第一个块元素可以设置大小放置其他块元素和文字 a href#我是另一个元素/a/divdiv classskyblue我是第二个快元素/divdiv classpurple我是第三个块元素/div 如上的样例充分反应了块级元素与行内元素的主要区别可自定义自身的长宽亦或包含其他的块级元素等~
总的来说行内元素与块级元素的区别可以归纳如下 块级元素默认占一行高度默认情况下宽度自动填满其父元素宽度行内元素不会独占一行相邻的行内元素会排在同一行其宽度随内容的变化而变化。块级元素可以设置宽高行内元素不可以设置宽高。 3.行内块元素
顾名思义——兼具上两者的共同点~
常见的行内块元素如下 img /、input /、td 行内块元素的特点 和相邻的行内元素包含行内块在一行上它们直接会有空白缝隙一行可以显示多个行内元素特点默认宽度就是内容的宽度行内元素特点高度、宽度、内外边距都可以自定义块元素特点 span classskyblue change我是第一个转换型/spanspan classpurple change我是第二个转换型/spanspan classskyblue change我是第三个转换型/span 如上虽然span是行内元素但在change类选择器里面定义了让块级转化为块级的语法因此每个span会独占一行~ 4.转换方式 转换为块元素display:block;转换为行内元素display:inline;转换为行内块display: inline-block; 显示模式的熟练运用非常重要多加练习才能应对实际开发中的多种需求~
二.背景样式
css的背景所有background的默认值均为transparent~即透明
常用的两个属性 background-color: burlywood;background-image: url(img/拜仁.jpg); 分别以16进制颜色及背景图片作为底色 ~
如下为div的3个样例样式 .one{background-color: blueviolet;width: 250px;height: 250px;}.two{background-color: burlywood;width: 250px;height: 250px; }.three{ width: 250px;height: 250px;background-image: url(img/拜仁.jpg);} 当设置的长款大于图片本身的大小时通过如下的方式可以避免采用重复的图片补齐~ background-repeat: no-repeat; background-position属性用于设置背景图像的位置~ background-repeat: no-repeat; 如下的代码使得在屏幕滚动时背景不会随之移动即attachment body{background-image: url(../19号以后的图片/2.jpg);background-repeat: no-repeat;background-position: center top;background-attachment: fixed;} 如下在16rgb三色表达中多加一位用于控制透明度的程度——此处表示0.4 .hezi{background-color: rgba(255, 106, 0, 0.4);width: 300px;height: 300px;}
