设计师学习HTML/CSS之路-11
不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start!
第12章 CSS布局模型
11-1 元素分类
在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
常见的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
复制代码
常见的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
复制代码
常见的内联块状元素有:
<img>、<input>
复制代码
11-2 元素分类-块级元素
块级元素的特点:
- 每个快级元素都从新的一行开始,而且其他的元素也另起一行。(占满一行);
- 元素的高度、宽度、行高以及顶和底边距都可以设置;
- 元素宽度在不设置的情况下,是他本身父容器的100%。(和父元素的宽度一致)
设置display:block
就是将元素显示为块级元素。如将内联元素转换为块级元素:
span{display:block;}
复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>内联块状元素</title>
<style type="text/css">
div,p,h1{background:pink;}
div{display:block;}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<p>段落1段落1段落1段落1段落1</p>
<h1>asda </h1>
</body>
</html>
复制代码
11-3 元素分类-内联元素
内联元素(行内元素)inline
块状元素也可以通过代码display:inline
将元素设置为内联元素。
div{display:inline;}
复制代码
内联元素特点:
- 和其他元素都在一行上;
- 元素的高度、宽度以及顶部底部边距不可设置;
- 元素的宽度就是他包含的文字或图片的宽度,不可改变。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行内元素标签</title>
<style type="text/css">
a,span,em,p{background:pink;/*设置a、span、em标签背景颜色都为粉色*/
}
p{display:inline;}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span>33333</span>
<span>44444</span><em>555555</em>
<p>asldkj</p>
</body>
</html>
复制代码
11-4 元素分类-内联块状元素
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block
就是将元素设置为内联块状元素。<img>、<input>
标签就是这种内联块状标签。
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内联块状元素</title>
<style type="text/css">
a{display:inline-block;width:60px;/*在默认情况下宽度不起作用*/height:20px;/*在默认情况下高度不起作用*/background:pink;/*设置背景颜色为粉色*/text-align:center; /*设置文本居中显示*/
}
</style>
</head>
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</body>
</html>
复制代码
11-6 盒模型-边框(一)
盒子模型的边框(border)就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如:
p{border:2px dotted #ccc;}
复制代码
上面是 border 代码的缩写形式,可以分开写:
p{border-width:2px;border-style:dotted;border-color:#ccc;
}
复制代码
border-style常见样式有: dashed(虚线)| dotted(点线)| solid(实线)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>边框</title>
<style type="text/css">
p{border:2px dotted #ccc;}
</style>
</head>
<body><p>一个完整的调色板,应包含主色、辅助色和灰度色。主色一般选用App图标使用的品牌色,辅助色是指主色的近似色和对比色。</p><p>方法:先确定主色的HSB,近似色一般在色环中+-30至50的H值,对比色一般+-180至200的H值。</p>
</body>
</html>
复制代码
11-7 盒模型-边框(二)
css样式中允许只为一个方向的边框设置样式:
div{border-bottom:1px solid red;}
复制代码
同样可以使用下面代码实现其它三边(上、右、左)边框的设置:
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
复制代码
如:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>边框</title>
<style type="text/css">
li{border-bottom:1px dotted red;}
</style>
</head>
<body>
<ul><li>第一条内容</li><li>第二条内容</li><li>第三条内容</li>
</ul>
</body>
</html>
复制代码
11-8 盒模型-宽度和高度
一个元素的实际宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边界。
li{border-bottom:1px dotted #ccc;width:200px;height:30px;
}
复制代码
上段代码表示为列表设置宽度为200px,高为30px的下划线
补充:li是块状元素,块状元素有一个特点之一:在不设置宽度的情况下,显示为父容器的100%。
11-9 盒模型-填充
元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码
div{padding:20px 10px 15px 30px;}
复制代码
相当于以下代码:
div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px;
}
复制代码
如果上、右、下、左的填充都为10px;可以这么写:
div{padding:10px;}
复制代码
如果上下填充一样为10px,左右一样为20px,可以这么写:
div{padding:10px 20px;}
复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{width:100px;height:100px;padding:10px;border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
</body>
</html>
复制代码
11-10 盒模型-边界
元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:
div{margin:20px 10px 15px 30px;}
复制代码
也可以分开写:
div{margin-top:20px;margin-right:10px;margin-bottom:15px;margin-left:30px;
}
复制代码
如果上右下左的边界都为10px;可以这么写:
div{ margin:10px;}
复制代码
如果上下边界一样为10px,左右一样为20px,可以这么写:
div{ margin:10px 20px;}
复制代码
总结一下:padding和margin的区别,padding在边框里,margin在边框外。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>边距</title>
<style type="text/css">
div{width:300px;height:300px;border:1px solid red;
}
#box1{margin:30px;}
</style>
</head>
<body><div id="box1">box1</div><div id="box2">box2</div>
</body>
</html>
复制代码
设计师学习HTML/CSS之路-11相关推荐
- 设计师学习HTML/CSS之路-01
不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第1章 Html介绍 1-1 代码初体验,制作我的第一个网页 <html><head& ...
- 设计师学习HTML/CSS之路-13
不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第13章 CSS代码缩写 13-1 盒子型代码简写 1.如果top.right.bottom.left的 ...
- 设计师学习HTML/CSS之路-08
不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第8章 CSS选择器 8-1 什么是选择器 每一条css样式声明(定义)由两部分组成 选择器{样式 } ...
- 吴恩达Deeplearning.ai课程学习全体验:深度学习必备课程 By 路雪2017年8月14日 11:44 8 月 8 日,吴恩达正式发布了 Deepleanring.ai——基于 Cours
吴恩达Deeplearning.ai课程学习全体验:深度学习必备课程 By 路雪2017年8月14日 11:44 8 月 8 日,吴恩达正式发布了 Deepleanring.ai--基于 Course ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css(常用组件5)--评论列表Comment
amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...
- amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
- 【软考中级】软件设计师学习笔记
软件设计师学习笔记 计算机系统知识 程序语言设计 数据结构 操作系统 软件工程基础知识 结构化开发方法 创建型设计模式 行为型设计模式 结构型设计模式: 算法设计与分析 数据库技术基础 网络与信息安全 ...
最新文章
- SpringBoot在IDEA中实现热部署
- 20155313 2016-2017-2 《Java程序设计》第二周学习总结
- 权限操作-springSecurity快速入门-使用自定义页面
- 洛谷 P 4180 次小生成树
- Magicodes.IE.AspNetCore之一行代码多格式导出
- 揭开 Python 内存分配时的小秘密!
- Music 环形界面的算法记录
- _IO, _IOR, _IOW, _IOWR 宏的用法与解析
- jQuery UI 拖动(Draggable) - 还原位置
- 研磨设计模式-设计模式的基础-设计模式的学习【思路】
- 计算机电缆yjv,WDZN-YJV是什么电缆|yjv电缆
- arduino如何驱动1602显示器?(使用arduino内置LiquidCrystal库)
- 电脑连接android手机测试,Android系统手机通过USB连接电脑上网
- 谷歌搜索表单参数url参数详解
- python默认数据转换_Python之数据转换
- 熊猫人表情包python 代码_用Python爬取斗图网表情包
- 首域微交易分析师一对一服务
- python中使用requests库获取昵图网图片,且正则中re.S的用法
- gitgithub快速入门
- java 取款机_JAVA ATM提款机程序
热门文章
- Python 列表推导式 - Python零基础入门教程
- C语言优先队列作用,C语言实现优先队列(priority queue)
- 西南医科大学计算机应用基础历年真题,网络选修课-计算机应用基础-期末考.docx...
- docker kafka互通有问题_Docker搭建kafka集群
- java中堆栈的基本操作_玩儿转队列和栈的基本操作及其应用:Java 版
- java interface 实例_Java - Interface 接口的实现方式实例
- mysql主从复制 火墙_MySQL高级知识(十五)——主从复制
- shell脚本执行oracle删除表,shell脚本操作oracle删除表空间、创建表空间、删除用户...
- java string 包含http_Java中使用HttpPost上传文件以及HttpGet进行API请求(包含HttpPost上传文件)...
- 计算机加一块硬盘,老电脑卡顿不一定没救了 加一块SSD就能焕发新生