如何写一个自己的网站,网站页面格式,枣庄seo技术培训,中国园林网元素类型 块元素#xff08;block#xff09; 独占一行#xff0c;排斥其他元素跟其位于同一行#xff0c;包括块元素和行内元素。块元素内部可以容纳其他块元素和行内元素。可以定义 width#xff0c;也可以定义 height。可以定义 4 个方向的 margin。 行内元素#xf…元素类型 块元素block 独占一行排斥其他元素跟其位于同一行包括块元素和行内元素。块元素内部可以容纳其他块元素和行内元素。可以定义 width也可以定义 height。可以定义 4 个方向的 margin。 行内元素inline 可以与其他行内元素位于同一行。行内元素内部可以容纳其他行内元素但不可以容纳块元素。无法定义 height也无法定义 width。可以定义 margin-left 和 margin-right无法定义 margin-top 和 margin-bottom。 行内块元素 inline-block 可以定义 width 和 height。可以与其他行内元素位于同一行。 表格table 以表格形式显示类似于 table 元素 表格行table-row 以表格行形式显示类似于 tr 元素 表格单元格table-cell 以表格单元格形式显示类似于 td 元素
元素类型转换
在 CSS 中我们可以使用 display 属性来改变元素的类型。
语法
元素{dispiay:取值} 属性值 说明 inline 转换为行内元素 block 转换为块元素 inline-block 转换为行内块元素 table 以表格形式显示类似于 table 元素 table-row 以表格行形式显示类似于 tr 元素 table-cell 以表格单元格形式显示类似于 td 元素 none 隐藏元素 拓展display:none 简介
在 CSS 中我们可以使用 display:none 来隐藏一个元素并且被隐藏的元素不再占据原来位置的空间。display:none 一般用来配合 JavaScript 动态隐藏元素被隐藏的元素不占据原来位置的空间。display:none 不推荐用来隐藏一些对 SEOSearch Engine Optimization搜索引擎优化关键的部分。因为对于搜索引擎来说它会直接忽略 display:none 隐藏的内容不会把display:none 隐藏的内容加入权重考虑。
display:none 和 visibility:hidden 的区别
在 CSS 中如果想要隐藏某一个元素可以使用 display:none 或者 visibility:hidden 来实现。虽然两种方式都可以隐藏元素但是它们之间有着本质的区别。 display:none 元素被隐藏之后不占据原来的位置也就是说元素“彻底地消失了看不见也摸不着。” visibility:hidden 元素被隐藏之后依然占据原来的位置也就是说元素“并没有彻底消失看不见但摸得着”。 拓展display:table-cell功能用途
图片垂直居中于元素
配合使用 display:table-cell 和 vertical-align:middle 来实现大小不固定的图片的垂直居中效果。
语法
父元素
{display:table-cell;vertical-align:middle;
}
子元素{vertical-align:middle;} 等高布局
语法
盒子1{display:table-cell;}
盒子2{display:table-cell;}
两个盒子都不定义高度时大小而是由盒子的内容撑开。分别给两个元素都转换成“table-cell”这时两个盒子高度相等并且高度由两者高度的最大值决定。这就是 “自适应等高布局。” 自动平均划分元素
当有多个元素横向排列时可以为每一个元素定义 display:table-cell它会自动平均划分元素并且使得它们在同一行显示。 语法
父元素{display:table;}
子元素1{display:table-cell;}
······
子元素n{display:table-cell;}
如果为父元素定义 display:table为子元素定义 display:table-cell然后为父元素定义一定的宽度那么此时子元素的宽度就会根据子元素的个数自动平均划分。 拓展 去除 inline-block 元素间距
inline-block 元素之间会有一定的间距这种间距有时会对布局产生影响。大多数时候为了不影响布局需要去除 inline-block 元素的间距。在 CSS 中可以为父元素定义一个“font-size:0;”来去除 inline-block 元素的间距。
语法
父元素{font-size:0;}
子元素{display:inline-block}
