资讯专栏INFORMATION COLUMN

html/css元素

olle / 426人阅读

摘要:默认情况下,元素宽度自动填满其父元素宽度。块级元素即使设置了宽度仍然是独占一行。高度可控的管道符内联块元素内联块元素既具有的宽度高度特性又具有的同行特性。为内联块元素内联块元素之间有的留白不同浏览器不同,与父元素的底部有的留白。

块级元素

  • 会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
  • 可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  • 可以设置margin和padding属性。
  • text-align无效

内联元素

  • width,height无效
  • margin、padding的水平方向有边距效果
  • 垂直方向的行为表现完全受line-height 和 vertical-align的影响
  • padding垂直有效,但是对上下元素的原本布局却没有任何影响,仅仅是垂直方向发生了层叠

应用:

  1. 为链接扩大点击区域,并且不影响当前的内容布局。
  2. 高度可控的管道符
    a + a:before { content: ""; font-size: 0; padding: 10px 3px 1px; margin-left: 6px; border-left: 1px solid gray; }

    内联块元素

    既具有block的宽度高度特性又具有inline的同行特性。
    为内联块元素

内联块元素之间有6px的留白(不同浏览器不同),与父元素的底部有3px的留白。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1971.html

相关文章

  • [译]HTML&CSS Lesson1: 构建第一张页面

    摘要:元素是使用小于号和大于号包裹元素名来标示。一个结束标签表示元素的结束它由小于号元素名组成例如。和嵌套在内,它们页面中都是可视的。使用选择器类型选择器类型选择器也叫作元素选择器根据元素类型选择元素。 可以的话,请想象一下互联网没有发明之前的日子。网站还不存在,纸质的书本是我们主要的信息来源,而在书本中查询我们想要的资料会耗费相当多的精力和时间。 而如今,你打开个浏览器用搜索引擎搜索,任...

    X_AirDu 评论0 收藏0
  • [译]HTML&CSS Lesson1: 构建第一张页面

    摘要:元素是使用小于号和大于号包裹元素名来标示。一个结束标签表示元素的结束它由小于号元素名组成例如。和嵌套在内,它们页面中都是可视的。使用选择器类型选择器类型选择器也叫作元素选择器根据元素类型选择元素。 可以的话,请想象一下互联网没有发明之前的日子。网站还不存在,纸质的书本是我们主要的信息来源,而在书本中查询我们想要的资料会耗费相当多的精力和时间。 而如今,你打开个浏览器用搜索引擎搜索,任...

    LuDongWei 评论0 收藏0
  • 关于CSS Reset 那些事(四)之 构架CSS基础样式库

    摘要:现在回到我们这一章节的标题,将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节,我们都说了哪些内容: CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    mj 评论0 收藏0
  • 关于CSS Reset 那些事(四)之 构架CSS基础样式库

    摘要:现在回到我们这一章节的标题,将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节,我们都说了哪些内容: CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    Yu_Huang 评论0 收藏0
  • 如何写出高效率的HTML

    摘要:之所以写这篇文章,就是为了告诉你如何写出干净整洁的代码,能够让你的网页在许多设备上都能快速正常的加载运行。在这个过程中,你能够学会如何搭建易于维护和的网站以及。无论如何,尽量避免同时在和,或者和添加。 个人翻译,欢迎转载! 英文原文:https://samdutton.wordpress.com/2015/04/02/high-performance-html/ 第一次翻...

    lsxiao 评论0 收藏0

发表评论

0条评论

olle

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<