HTML5基础学习笔记(十八)

原创 2016年07月25日 16:05:34

Day18 CSS文本样式

一.元素可见性
使用 visibility 属性可以实现元素的可见性,这种样式一般可以配合JavaScript
来实现效果。样式表如下:


//设置元素隐藏,但占位
div {
visibility: hidden;
}
//隐藏表格的行或列,但不占位,ChromeOpera 不支持
table tr:first-child {
visibility: collapse;
};
二.元素盒类型
CSS 盒模型中的 display 属性, 可以更改元素本身盒类型。 那么元素有哪些盒类型呢?
主要有:1.块级元素(区块);2行内元素(内联);3行内-块级元素(内联块);4.
藏元素。
1.块级元素
所谓块级元素,就是能够设置元素尺寸、隔离其他元素功能的元素。比如:<div><p>
等文档元素。
2.行内元素
所谓行内元素,不能够设置元素尺寸,它只能自适应内容、无法隔离其他元素,其它元
素会紧跟其后。比如:<span><b>等文本元素。
3.行内-块元素
所谓行内-块元素,可以设置元素尺寸,但无法隔离其他元素的元素。比如<img>




//将行内元素转成块级元素
span {
background: silver;
width: 200px;
height: 200px;
display: block;
}
//将块级元素转换成行内元素
div {
background: silver;
width: 200px;
height: 200px;
display: inline;
}
//将块级元素转化成行内-块元素
div {
background: silver;
width: 200px;
height: 200px;
display: inline-block;
}
//将元素隐藏且不占位
div {
display: none;
}
display 属性还有非常多的值,有些后面部分讲解,而有些支持度不好或者尚不支持,
从而省略。有兴趣的,可以参考 CSS3 手册。
三.元素的浮动
CSS 盒模型有一种叫浮动盒,就是通过 float 属性建立盒子的浮动方向,样式表如下:




//实现联排效果
#a {
background: gray;
float: left;
}
#b {
background: maroon;
float: left;
}
#c {
background: navy;
float: left;
}
//实现元素右浮动
#c {
background: navy;
float: right;
}
//取消元素的浮动
#c {
background: navy;
float: none;
}
刚才的浮动有一个问题:当一个元素盒子被浮动后,下面的元素会自动堆叠处理,导致
元素不可见或部分不可见。我们可以使用 clear 属性来处理。
属性 值 说明 CSS 版本
float none 允许两边均可浮动 1
left 左边界不得浮动 1
right 右边界不得浮动 1
both 两边都不得浮动 1
//两边均不可浮动
#c {
background: navy;
clear: both;
}



版权声明:本文为博主原创文章,未经博主允许不得转载。

燕十八老师讲的js,自己做的笔记,有点乱。供以后学习使用。。。。

javascript
  • Hxn_Fight
  • Hxn_Fight
  • 2015年04月01日 14:36
  • 1772

10分钟HTML5入门基础知识(一)

毫无疑问,对于开发人员而言,HTML5已是一个热点话题。如果你需要快速了解HTML5的功能的基本原理,阅读本文是你最好的选择。 本文来自The Code Project的付费搜索位置,由Soluti...
  • chaishen10000
  • chaishen10000
  • 2016年05月27日 22:09
  • 7382

HTML5基础入门

HTML5基础入门 HTML是TypeTextMarkup Language(超文本标记语言)的缩写。 1.HTML的标记类型 1.容器标记(Container Tags)          ...
  • zheng__jun
  • zheng__jun
  • 2016年08月25日 16:33
  • 1149

html5 - 基础格式认识和标签用法(文本元素常用方法)

实例01 第一个实例的html5
  • li5685918
  • li5685918
  • 2015年12月06日 23:29
  • 1373

HTML5基础之代码入门

之前一直在修改现成的项目,学习的内容也是现学现用,没有很系统的学习,这次决定发一些时间,系统的学习,以便充实自己的前端知识,也想提升自己的前端技术。   今天总结的是HTML5基础的第一部分代码入门,...
  • u010297791
  • u010297791
  • 2016年11月12日 15:24
  • 2254

Html5学习之路 基础

对于我们刚开始学习html的学生来说 ,繁杂的标签是非常麻烦的  而且不好记,闲话少说,首先我推荐的编译器是Hbuider,作为我们中国人开发的第一个编译器,我们理所当然支持一下。不过个人使用的是PH...
  • qq_28292937
  • qq_28292937
  • 2016年05月27日 20:54
  • 1001

Sublime Text 2编辑器的妙用

Sublime Text 2 使用心得 一、 前言 作为一个前端,有一款好的开发利器是必不可少的,editplus、notepad++都是不错的工具,体积轻巧,启动迅速(dw太浮肿了)。最...
  • z10160
  • z10160
  • 2013年08月31日 09:49
  • 502

【基础html5 基础知识点】(全)

新增的结构标签 section元素  表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中……;HTML4中 ……...
  • kongjiea
  • kongjiea
  • 2014年08月16日 15:33
  • 12699

最全的MySQL基础【燕十八传世】

1.课前准备! 开启mysql服务:1).配置环境变量;2).net start mysql 将该sql文件导入到你的数据库中,以下所有操作都是基于该数据库表操作的!!! 【此笔记是本人看着...
  • qq_27229113
  • qq_27229113
  • 2017年07月16日 15:48
  • 488

HTML5基础之常用标签以及标签选择器

在html中,标签非常多,比如说列表,按钮,图片,文字等等,每一种标签都有自己的使用方法以及相关的约束条件。具体的标签可以直接到w3c的网站上查看,这里就简单了解一下html5的标签。 一、HTML5...
  • u010297791
  • u010297791
  • 2016年11月14日 20:23
  • 2126
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5基础学习笔记(十八)
举报原因:
原因补充:

(最多只允许输入30个字)