菜鸟教程 -- 学的不仅是技术,更是梦想!

  • 首页
  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Bootstrap
  • Python3
  • Python2
  • Java
  • C
  • C++
  • C#
  • SQL
  • MySQL
  • PHP
  • 本地书签
  • 云服务器
  • 首页
  • HTML
  • CSS
  • JS
  • 本地书签
  • Search
CSS 教程
CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class选择器 CSS 创建 CSS Backgrounds(背景) CSS Text(文本) CSS Fonts(字体) CSS 链接(link) CSS 列表样式(ul) CSS Table(表格) CSS 盒子模型 CSS Border(边框) CSS 轮廓(outline)属性 CSS margin(外边距) CSS padding(填充) CSS 分组和嵌套 CSS 尺寸 (Dimension) CSS Display(显示) CSS Position(定位) CSS Overflow CSS Float(浮动) CSS 对齐 CSS 组合选择符 CSS 伪类 CSS 伪元素 CSS 导航栏 CSS 下拉菜单 CSS 提示工具 CSS 图片廊 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网页布局 CSS 总结 CSS 实例

CSS3 教程

CSS3 教程 CSS3 简介 CSS3 边框 CSS3 圆角 CSS3 背景 CSS3 渐变 CSS3 文本效果 CSS3 字体 CSS3 2D 转换 CSS3 3D 转换 CSS3 过渡 CSS3 动画 CSS3 多列 CSS3 用户界面 CSS3 图片 CSS3 按钮 CSS3 分页 CSS3 框大小 CSS3 弹性盒子 CSS3 多媒体查询 CSS3 多媒体查询实例

CSS 响应式设计

Viewport 网格视图 媒体查询 图片 视频(Video) 框架

CSS 参考手册

CSS 参考手册 CSS 选择器 CSS 语音参考 CSS Web安全字体 CSS 动画 CSS 单位 CSS 颜色 CSS 颜色值 CSS 颜色名 CSS 十六进制颜色
CSS 尺寸 (Dimension)
CSS Position(定位)
CSS 尺寸 (Dimension)
CSS Position(定位)

2 篇笔记 写笔记

  1. #2

       相信

      771***997@qq.com

      参考地址

    141

    块级元素(block)特性:

    • 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
    • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

    内联元素(inline)特性:

    • 和相邻的内联元素在同一行;
    • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;

    块级元素主要有:

    •  address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

    内联元素主要有:

    • a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

    可变元素(根据上下文关系确定该元素是块元素还是内联元素):

    • applet ,button ,del ,iframe , ins ,map ,object , script

    CSS中块级、内联元素的应用:

    利用CSS我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。

    主要用的CSS样式有以下三个:

    • display:block  -- 显示为块级元素
    • display:inline  -- 显示为内联元素
    • display:inline-block -- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性

    我们常将<ul>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。

    相信

       相信

      771***997@qq.com

      参考地址

    2年前 (2017-12-26)
  2. #1

       yapa

      152***35@qq.com

      参考地址

    74

    对于 CSS 里的 visibility 属性,通常其值被设置成 visible 或 hidden。

    visibility: hidden 相当于 display:none,能把元素隐藏起来,但两者的区别在于:

    • 1、display:none 元素不再占用空间。
    • 2、visibility: hidden 使元素在网页上不可见,但仍占用空间。

    然而,visibility 还可能取值为 collapse 。

    当设置元素 visibility: collapse 后,一般的元素的表现与 visibility: hidden 一样,也即其会占用空间。但如果该元素是与 table 相关的元素,例如 table row、table column、table column group、table column group 等,其表现却跟 display: none 一样,也即其占用的空间会释放。

    在不同浏览器下,对 visibility: collapse 的处理方式不同:

    • 1、visibility: collapse 的上述特性仅在 Firefox 下起作用。
    • 2、在 IE 即使设置了 visibility: collapse,还是会显示元素。
    • 3、在 Chrome 下,即使会将元素隐藏,但无论是否是与 table 相关的元素,visibility: collapse 与 visibility: hidden 没有什么区别,即仍会占用空间。
    yapa

       yapa

      152***35@qq.com

      参考地址

    2年前 (2018-07-25)

点我分享笔记

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 引用地址
分类导航
  • HTML / CSS
    • HTML 教程
    • HTML5 教程
    • CSS 教程
    • CSS3 教程
    • Bootstrap3 教程
    • Bootstrap4 教程
    • Font Awesome 教程
    • Foundation 教程
  • JavaScript
    • JavaScript 教程
    • HTML DOM 教程
    • jQuery 教程
    • AngularJS 教程
    • AngularJS2 教程
    • Vue.js 教程
    • React 教程
    • TypeScript 教程
    • jQuery UI 教程
    • jQuery EasyUI 教程
    • Node.js 教程
    • AJAX 教程
    • JSON 教程
    • Echarts 教程
    • Highcharts 教程
    • Google 地图 教程
  • 服务端
    • Python 教程
    • Python2.x 教程
    • Linux 教程
    • Docker 教程
    • Ruby 教程
    • Java 教程
    • C 教程
    • C++ 教程
    • Perl 教程
    • Servlet 教程
    • JSP 教程
    • Lua 教程
    • Scala 教程
    • Go 教程
    • PHP 教程
    • Django 教程
    • 设计模式
    • 正则表达式
    • Maven 教程
    • NumPy 教程
    • ASP 教程
    • AppML 教程
    • VBScript 教程
  • 数据库
    • SQL 教程
    • Mysql 教程
    • PostgreSQL 教程
    • SQLite 教程
    • MongoDB 教程
    • Redis 教程
    • Memcached 教程
  • 移动端
    • Android 教程
    • Swift 教程
    • jQuery Mobile 教程
    • ionic 教程
    • Kotlin 教程
  • XML 教程
    • XML 教程
    • DTD 教程
    • XML DOM 教程
    • XSLT 教程
    • XPath 教程
    • XQuery 教程
    • XLink 教程
    • XPointer 教程
    • XML Schema 教程
    • XSL-FO 教程
    • SVG 教程
  • ASP.NET
    • ASP.NET 教程
    • C# 教程
    • Web Pages 教程
    • Razor 教程
    • MVC 教程
    • Web Forms 教程
  • Web Service
    • Web Service 教程
    • WSDL 教程
    • SOAP 教程
    • RSS 教程
    • RDF 教程
  • 开发工具
    • Eclipse 教程
    • Git 教程
    • Svn 教程
    • Markdown 教程
  • 网站建设
    • HTTP 教程
    • 网站建设指南
    • 浏览器信息
    • 网站主机教程
    • TCP/IP 教程
    • W3C 教程
    • 网站品质

Advertisement
-->
在线实例
·HTML 实例
·CSS 实例
·JavaScript 实例
·Ajax 实例
·jQuery 实例
·XML 实例
·Java 实例
字符集&工具
· HTML 字符集设置
· HTML ASCII 字符集
· HTML ISO-8859-1
· HTML 实体符号
· HTML 拾色器
· JSON 格式化工具
最新更新
· C++ 怎样让函数...
· Python 动态变量...
· JSON vs XML
· SQL EXISTS 运算符
· HTML main 标签
· ECharts 旭日图
· ECharts 事件处理
站点信息
· 意见反馈
· 加入我们 岗位:技术类型自媒体
工作地点:厦门
具体联系邮箱:429240967@qq.com
· 免责声明
· 关于我们
· 文章归档
关注微信
Copyright © 2013-2020 菜鸟教程  runoob.com All Rights Reserved. 备案号:闽ICP备15012807号-1

微信关注

微信关注
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少
微信
支付宝

打开支付宝扫一扫,即可进行扫码打赏哦

点我查看本站打赏源码!

  • 用户登录
  • 注册新用户

忘记密码?

如何获取邀请码?

关闭