Html和Css学习笔记-css进阶-盒模型
此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签,元素,属性的具体意义。
这里所介绍的html和css的版本为html5与css3
Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言
Css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来html和xml等文件样式的计算机语言,CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
Html和Css验证工具的地址:http://validator.w3.org/
一.盒模型的概念
从css角度来看每个元素就是一个盒子,每个盒子由一个内容区以及可选内边距,边框和外边距组成,内容区包括内容(例如文本或图像),内容区被可选的透明内边距包围,内边距可能放置一个可选的边框,最后,有一个可选的透明外边距包围所有部分。
内容区:每个元素都会有一些内容,如文本或图像,这个内容会放在一个盒子里,这个盒子的大小正好能包含所有内容。注意,在内容区中,内容与盒子边缘之间没有空间
内边距:所有盒子在内容区周围可能有一层内边距。内边距是可选的,所以不一定有,不过通过使用内边距们可以在内容与盒子边框之间创建一些看得到的空间。内边距是透明的,没有颜色,也没有自己的装饰,通过css可以控制整个内容区周围内边距的宽度,甚至可以控制任意一边的内边距宽度。
边框:元素周围可以有一个可选的边框。这个边框会包围内边距,另外,因为它是围绕内容与同一页面上的其他元素隔开,边框可以有不同的宽度,颜色和样式。
外边距:外边距也是可选的,包围着边框。利用外边距,可以在同一页面上的不同元素之间增加空间。如果两个盒子紧挨着,外边距就相当于它们之间的空间,类似于内边距,外边距也是透明的,本身没有颜色或装饰。
二.新增css属性
1.line-height:xxx;设置行间距(大小单位可以使用百分比,em,px表示)
2.padding:xxx;设置内边距(大小单位可以使用百分比,em,px表示)
3.padding-left:xxx;设置左边增加内边距(大小单位可以使用百分比,em,px表示)
4.margin:xxx;设置外边距(大小单位可以使用百分比,em,px表示)
5.margin-right:xxx;设置右边增加外边距(大小单位可以使用百分比,em,px表示)
6.background-image: url(xxxx/xxxx);为某一个元素设置背景图像(url属性后面可以使相对路径,也可以是完整的url链接)
7.background-position:xxxx;设置图像位置
8.background-repeat:xxx;设置图像在水平或垂直方向上重复(repeat),不重复(no-repeat),repeat-x(图像只在水平方向上重复),repeat-y(图像只在垂直方向上重复),inherit(按父元素的设置来处理)
9.border-style:xxx;设置边框样式可选参数有:solid(实线),double(双线),groove(槽线),outset(外凸),dotted(虚线),dashed(破折线),inset(内凹),ridge(脊线)
10.border-width:xxx;设置边框宽度可使用关键字,像素来指定宽度。
11.border-color:xxx;设置边框颜色
12.border-top(可更改方向)-color(可更改颜色,样式,宽度)指定某一边的边框
13.border-radius:xxx;设置边框圆角(大小单位可以使用百分比,em,px表示)
14.border-top(可更改位置)-left(可更改方向)-radius:xxx;分别指定每一个角
三.id属性的使用
1.在html中加入id属性的格式,如下
<元素 id="id属性的名字"xxxxxxxxxxx>
2.在css中使用id的格式,如下
第一种:
#id属性的名字{
属性:参数;
属性:参数;
}
这会选择id属性名字的任意元素
第二种
元素#id属性的名字{
属性:参数;
属性:参数;
}
这会选择一个id为属性名字的元素
四.混合css样式表
1.在同一个页面中可以使用多个css样式表对不同的元素,id,类,字体,颜色等进行分别配置,具体设置如下
<link type="text/css" href="xxxx.css"rel="stylesheet">
<link type="text/css" href="xxxx.css"rel="stylesheet">
<link type="text/css" href="xxxx.css"rel="stylesheet">
多个样式表由上到下排列,最下面的样式表最优先
2.对css样式表指定设备,例如,笔记本电脑,手机,平板,都有其对应的css样式表
需要加入media参数,格式如下
<link type="text/css" href="xxxx.css"rel="stylesheet" media="screen and (max-device-width):xxx">
其中screen参数指定了有屏幕的设备,max-device-width指定屏幕宽度,还可以指定显示方向,使用orientation属性,横向(landscape),纵向(portrait)
还有一种指定打印设备,如下
<link type="text/css" href="xxxx.css"rel="stylesheet" media="print">
另外一种方法为css指定特殊属性的设备,写入css中,格式如下:
@media screen and (min-device-width:xxxx;){
属性:参数;
属性:参数;
属性:参数;
}
Html和Css学习笔记-css进阶-盒模型的更多相关文章
- css学习の第三弹—盒模型的创建和使用
一.css盒模型: 元素分类: 块状元素.内联元素(又叫行内元素)和内联块状元素. >>常用的块状元素有: <div>.<p>.<h1>...<h ...
- CSS学习笔记——CSS中定位的浮动float
昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...
- Html和Css学习笔记-html进阶-html5属性
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- Html和Css学习笔记-html进阶-div与span
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- Html和Css学习笔记-css基础知识
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- CSS学习笔记——CSS选择器样式总结
<style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left ...
- CSS 学习笔记——CSS Selector
CSS1 中定义的选择器 类型选择器 用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body { /*对 body 元素定义样式*/ } body,div { /*同时选 ...
- CSS学习(8)盒模型
box:盒子,每个元素在页面中都会生成一个矩形区域(盒子) 盒子类型: 1.行盒,display属性=inline的元素,不换行(默认值) 2.块盒,display属性=block的元素,换行 浏览器 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
随机推荐
- R语言之Apriori算法
---恢复内容开始--- 1.概念 关联分析:用于发现隐藏在大型数据集中的有意义的联系 项集:0或多个项的集合.例如:{啤酒,尿布,牛奶,花生} 是一个4-项集,意义想象成爸爸去超市买啤酒和花生,给儿 ...
- JS监听对象属性改变
设想这么一个需求: user.name = '张三' 对user数据进行操作的时候,同步的修改页面上的用户名为张三. 这就是个数据绑定的概念. 针对这类需求 ES5提供了Object.definePr ...
- vue组件的基本使用,以及组件之间的基本传值方式
组件(页面上的每一个部分都是组件) 1.三部分:结构(template),样式(style),逻辑(script) 2.组件的作用:复用 3.模块包含组件 4.组件创建: 1.全局组件:Vue ...
- 【Spark篇】---Spark中transformations算子二
一.前述 今天继续整理几个Transformation算子如下: mapPartitionWithIndex repartition coalesce groupByKey zip zipWithIn ...
- Unity 本地坐标到世界坐标,世界坐标到本地坐标
世界=>本地 public GameObject mTarget; public GameObject mPar; //这个注意一定要是mTarget的第一父物体. // Use this fo ...
- MacPro4,1升级到MacPro5,1
收了一台老MacPro,2009年版本,准确型号是"MacPro4,1".机器很好,美中不足的是,太老了.硬件还好说,很多部件都可以单独采购升级,特别是有了淘宝,几乎只要有的东西, ...
- Chapter 5 Blood Type——29
"We're meeting at my dad's store, at ten." “十点,我们在我爸的店见面.” His eyes flickered to Edward ag ...
- centos中安装虚拟机
我这里选用的虚拟机软件为virtualbox 下载wget http://download.virtualbox.org/virtualbox/5.2.2/VirtualBox-5.2-5.2.2_1 ...
- centos7安装xfce桌面
用了centos自带的gnome桌面 太重了 启动超慢 内存占用近2G 因此打算换一个轻量级的桌面xfce 先安装桌面协议yum groupinstall "X Window system& ...
- web前端安全
之前对web前端安全进行了总结,想给大家分享一下,有不对的地方,大家多多交流,由于写在了PPT上,只好给大家一张一张粘上来,希望大家不要在意,了解知识为主