css学习笔记-盒子的样式
display的几种参数
1.inline和block
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>div{background-color: aqua;}span{background-color: crimson;}h1{background-color: yellow;}</style><title>display</title>
</head>
<body><div>div是block的</div><div>div是block的</div><span>span是inline的</span><span>span是inline的</span><h1>h1也是block的</h1><h1>h1也是block的</h1>
</body>
</html>
效果如下:
div{background-color: aqua;display: inline;}span{background-color: crimson;display: block;}h1{background-color: yellow;display:inline;}
那么得到的效果是这样的:
2.inline-block
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>span{display:inline-block;background-color: yellow;width: 200px;}</style><title>inline-bock</title>
</head>
<body><span>span是inline的1</span><span>span是inline的2</span><span>span是inline的3</span><span>span是inline的4</span>
</body>
</html>
效果如下:
3.inline-table
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>inline-table</title><style>span{background-color: aquamarine;}table{background-color: crimson;}</style>
</head>
<body>
<span>header</span>
<table><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
<span>footer</span>
</body>
</html>
效果如下:
table{display: inline-table;background-color: crimson;}
4.list-item
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>list-item</title><style>div{display: list-item;list-style-type: circle;margin-left: 30px;background-color: aqua;width: 300px;margin-bottom: 10px;padding: 5px;}</style>
</head>
<body>
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
</body>
</html>
效果:
1 display: list-item;2 list-style-type: circle;3 margin-left: 30px;
第1行和第2行必须同时出现,缺一个都不会有圆圈的效果
css学习笔记-盒子的样式相关推荐
- 【温故知新】CSS学习笔记(字体样式属性)附加篇
CSS字体样式属性 目录 CSS字体样式属性 一.font属性 二.color属性 三.line-height 行间距(行高) 四.text-align 水平对齐方式 五.text-indent 首行 ...
- 【温故知新】CSS学习笔记(字体样式属性)
CSS字体样式属性 一.font-size:字号大小 该属性可以使用相对长度单位(推荐),也可以使用绝对长度单位,推荐使用像素单位px. 相对长度单位 说明 em ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...
- CSS学习笔记——精灵图(sprite)
CSS学习笔记目录 一.什么是精灵图? 二.精灵图的优点 三.精灵图的基本用法 1.打开ps导入精灵图 2.测量字母的大小及坐标 3.效果图 4.代码实现 总结 一.什么是精灵图? 所谓精灵图就是图片 ...
- CSS学习笔记(详细,不定期更新)
CSS 学习笔记 CSS书写规范 顺序 布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
- CSS 学习笔记 - 网格布局(栅格系统)
CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式 基本概念 属性说明 容器属性 内容属性 效果展示 grid-template-rows.grid-template-columns 基本用法 ...
- CSS学习笔记(狂神-完整版)
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
- css中怎么加入立体模型,CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- CSS学习笔记(详细)- 基础
CSS学习笔记从零开始 代码风格 样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器 基础选择器 标签选择器 类选择器 - 开发最常用 多类名 i ...
最新文章
- Linux脚本点空格,linux – 在bash脚本中使用引号和空格的awk
- Git - 版本控制工具十分钟入门手册
- python的字符串定界符可以使用_使用Template格式化Python字符串的方法
- LeetCode2:Add Two Numbers
- 加载中_GIS地图在项目中的加载显示
- 【qduoj - 夏季学期创新题】矩形剖分(递归,dp)
- Linux学习笔记-Linux下的设备文件
- vmware给linux增加空间,vmware增加linux硬盘空间
- Mac下的浏览器速度比较,Chrome 得分最高
- Android攻略之入门
- linux开机启动mysql脚本,ubuntu linux下mysql开机自启动 - 心之所向,无惧无悔! - 博客频道 - CSDN.NET...
- 【递推】1193:吃糖果
- 使用Homebrew安装Git与Github在idea中的配置
- 【常用表】线性代数公式
- 佳佳mpg格式转换器免费版 v12.4.0.0
- 自强不息系列之Python 线性查找
- FTP 通过cmd命令上传下载文件
- Android 10.0 SystemUI状态栏显示和隐藏自定义图标
- 关于微信小程序进行数据统计以及分析问题
- Dedecms TAG中文标签改成英文+数字地址的方法