合肥万户网站建设,八方资源网做网站优化怎么样,四川省建设工程质量监督总站网站,深圳网站建设公司佰达整个前端学习路线
以下路线为 CSDN C认提供#xff1a;
如果想 快点搞完 并且 就业 可以选择C认证#xff0c;C认证还可以 内推、招聘会 #xff0c;所以如果在校生想要稳一点#xff0c;就可以选择C认证或者超级实习生计划#xff0c;贼稳#xff01;
链接在这PC端
如果想 快点搞完 并且 就业 可以选择C认证C认证还可以 内推、招聘会 所以如果在校生想要稳一点就可以选择C认证或者超级实习生计划贼稳
链接在这PC端进入 手机移动端H5进入 手机二维码扫码也可以
合作的企业有这些
如果有疑惑可以问我如果报培训班我建议还是 CSDN 的靠谱找我看文末就可以了。
更多资料我放文末了想了解的可以看一下。
本系列文章持续更新点击专栏就可以看其他文章点击进入专栏
一、块元素、行内元素、行内块元素
在学习CSS时我们需要搞清楚HTML 标签的一些分类HTML 一般可分为块元素、行内元素以及行内块元素不同的种类在呈现上有着不同的表现形式。
1.1 块元素
块元素有比较多的特性例如在 HTML 页面中的呈现为独占一行例如标题标签 h1、h2、h3 这些当然也包括 li 标签元素这一类这一类标签在页面中独占一个行你在后面所编写的内容将会自动换行显示。例如如下代码即时你并排显示也会进行自动换行因为 h 标题标签属于块元素 并且这些块元素的高度、内外边距都可以控制宽度默认情况下是父容器包裹这个块元素的容器的整行宽100%。
例如咱们使用 div 进行说明div 咱们可以理解为是一个容器并且 div 也是一个块元素咱们可以通过 div 对其内部元素进行统一的编排布局使整个页面布局合理更加美观div 的使用在之前的内容中已经讲解过下面是一个示例 以上代码通过设置宽度和背景色改变了其 div 的一些属性但是我们还是可以发现这个div 即使 更改了其宽度也是独占一行。
在块元素中还可以包含 块元素、行内元素、行内块元素但是文字类型的元素内不能包含块元素例如 h 、p 标签。
一般常见的块元素有标题标签 h、p、 div、有无序列表li与ol 等。
1.2 行内元素
我们可以理解行内元素即为同一行内可以显示的元素当然这一个“同一行”的意思指的是宽度未大于最大行宽时则在同一行中进行显示并且该元素宽度等于其内容宽度。常见的这类标签有 a、span、i、s 等标签这一类标签直接设置宽度是无效的并且在其内部是无法使用块元素的。
我们查看以下案例可知设置宽度并无用处
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title02 css 1_bit 的前端课/titlestylespan{background-color: blue;}/style
/head
bodyspan stylewidth: 70%;这是个span/spani这个是 i/i
/body
/html1.3 具有行内元素及块元素特点的元素
行内块元素一般可以设置宽高、并且一行可显示多个例如 img input 以及 td 元素。以下为 input 示例设置其宽高
bodyinput stylebackground-color:blueviolet; / input stylebackground-color: blue; /
/body二、显示模式转换
2.1 显示模式
显示模式则是刚刚我们所了解的元素显示形式我们可以通过显示模式的转换使得一种类型元素拥有其他类型元素的显示形式。
2.1 显示模式转化
一般情况下直接给行内元素设置其对应的宽高是不会生效 的如下代码所示
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title02 css 1_bit 的前端课/titlestylea{width: 50%;height:30px;background-color: aqua;}/style
/head
bodyaa链接块级元素/a
/body想让其生效需要将a标签转化为块元素在css中添加如下修饰 最后显示如下 此时若你在已经转换为块级元素的a标签后添加行内元素 span
span将会换行显示因为块元素特性独占一行。
当然块级元素也可以转化为行内元例如如下代码 此时只需要给予对应标签的 display 修饰为 inline 就好了那么此时 div 将会变成行内元素进行显示。 当然行内块元素也可以进行转换接下来咱们可以把span 元素转为行内块元素代码如下 我们只需要把display设置成 inline-block 即可显示如下
更多资料
