【HTML5学习笔记】22：CSS盒模型下

来源：互联网发布：哈登什么水平知乎编辑：程序博客网时间：2024/06/05 19:07

本节学习元素的可见性、盒子的各种类型、浮动问题。

元素可见性
visibility的三种属性：①visible即默认可见。②hidden隐藏。③collapse隐藏表格的行与列(有的浏览器不支持)。

*测试代码

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS盒模型 下</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <div>我是HTML5</div>    111111111111<br>    <table border="1">        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td>4</td>            <td>5</td>            <td>6</td>        </tr>    </table></body></html>

@charset "utf-8";div{    background: silver;    width: 200px;    height: 200px;    /*visibility: hidden;*/}table tr:first-child{    /*visibility: hidden;*/    visibility: collapse;}

运行结果：
这里写图片描述

元素盒类型
①块级元素(区块)
能够设置元素尺寸，且能隔离其它元素(换行)的元素，如div，p等文档元素。
②行内元素(内联)
不能设置元素尺寸，只能自适应内容，不能隔离其它元素(即不换行)，如span，b等文本元素。
③行内-块级元素(内联块)
能设置尺寸，但不能隔离其它元素(即不换行)，如img。
④隐藏元素
display: none;即可。

*测试代码

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS盒模型 下</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <div>我是块级元素</div>    前面是块级元素，可以设置背景长度高度，换行       <br>    <span>我是行内元素</span>    前面是行内元素，可以设置背景，尺寸只能自适应内容，不换行    <br>    <img src="img.png">    前面是行内-块元素，可以设置尺寸，但不换行</body></html>

@charset "utf-8";div{    background: silver;    width: 200px;    height: 200px;}span{    background: red;}img{    width: 200px;    height: 100px;}

运行结果：
这里写图片描述

用display转换
①inline行内元素。②block块级元素。③inline-block行内块元素。④none盒子不可见，不占位。

*测试代码

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS盒模型 下</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <div>我是块级元素，将要转成行内元素</div>    结尾测试    <br>    <span>我是行内元素，将要转成块级元素</span>    结尾测试    <br>    <p>我是块级元素，将要转成行内块元素</p>    结尾测试    <br></body></html>

@charset "utf-8";div{    background: silver;    width: 200px;    height: 200px;    display: inline;}span{    background: red;    width: 200px;    height: 200px;    display: block;}p{    background: green;    width: 200px;    height: 200px;    display: inline-block;}

运行结果：
这里写图片描述

用float浮动
①left浮动元素靠左。②right浮动元素靠右。③none禁用浮动。

当一个盒子被浮动后，下面的元素就会做堆叠处理，导致元素部分不可见，可以使用clear属性来处理。
用clear清理
①left不受左边浮动干扰。②right不受右边浮动干扰。③both不受两边浮动干扰。④none恢复默认。

*测试代码

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS盒模型 下</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <div id="a">我是a</div>    <div id="b">我是b</div>    <div id="c">我是c</div></body></html>

@charset "utf-8";div{    width: 200px;    height: 200px;}#a{    background: maroon;    float: left;}#b{    background: green;    clear: left;}#c{    background: blue;    float: right;}

运行结果：
这里写图片描述

阅读全文

0 0

【HTML5学习笔记】22：CSS盒模型 下

【HTML5学习笔记】22：CSS盒模型下