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;
}



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

相关文章推荐

HTML5基础学习笔记(六)

Day06 HTML页面元素属性 五、音频和视频 1.概述 1.1视频容器 音频文件或视频文件,都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其 他一些元数据。视频播放时...

HTML5新特性基础学习笔记上

1.HTML5音频视频 音频播放 1.Audio(音频) HTML5提供了播放音频文件的标准 2.control(控制器) control属性供添加播放,暂停和音量控件 3.标签: 定义声音 规定...

HTML5基础学习笔记(二)

六、文本格式化标记 标记 显示效果 和 文字以粗体方式显示(XHTML推荐使用strong) 和 文字以斜体方式...

HTML5基础学习笔记(三)

Day03 HTML页面元素属性 二、分组元素 1、为了页面的排版需要,HTML5 提供了几种语义的分组元素。 元素名称 说明 div ...

HTML5基础学习笔记(十九)

Day19 CSS边框与背景 一.声明边框 边框的声明有三个属性设置,样式表如下: 属性 值 说明 CSS 版本 border-width 长度值 设置边框的宽度,可选 1 border-styl...

HTML5基础学习笔记(四)

Day04 HTML页面元素属性 三、表格元素 1.表格元素汇总 元素名称 说明 table 表示表格 the...

HTML5基础学习笔记(十七)

Day17CSS盒模型 一、元素尺寸 //设置元素尺寸 div { width: 200px; height: 200px; } 解释:设置元素的固定尺寸...

HTML5基础知识学习笔记

1.Html5基础讲解1.1HTML5基础标签: head:头标签,一般会将一些网页的基本配置和文件引用在head中设置; body:内容标签,里面是整个网页要展示内容部分; 1.2HTML5标...

HTML5基础学习笔记(十)

Day10 HTML页面元素属性 七、全局属性 1.实体 HTML 实体就是将有特殊意义的字符通过实体代码显示出来。 显示结果 描述 实体名...

HTML5学习笔记 —— JavaScript基础知识

来源于我的HTML5学习笔记,通过它可以快速入门HTML5,同时可以作为工作中快速查找知识点的利器。 本文由浅入深地详解了JavaScript的各项基础知识点,通过本文你将会对JavaScript语...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5基础学习笔记(十八)
举报原因:
原因补充:

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