H5前端开发学习笔记——0x13盒子模型
2018-07-09 本文已影响0人
夜莺之刃
盒子模型
- 课时104 边框属性上(掌握)
- 课时105 边框属性下(掌握)
- 课时106 边框练习(理解)
- 课时107 内边距属性(掌握)
- 课时108 外边距属性(掌握)
- 课时109 外边距合并现象(掌握)
- 课时110 盒子模型(理解)
- 课时111 盒子宽度和高度(理解)
- 课时112 盒子宽度和高度练习1(理解)
- 课时113 盒子宽度和高度练习2(理解)
- 课时114 盒子box-sizing属性(理解)
- 课时115 盒子模型练习3(理解)
- 课时116 盒子居中和内容居中(理解)
- 课时117 清空默认边距(掌握)
- 课时118 行高和字号(掌握)
- 课时119 还原字体和字号(掌握)
- 课时120 文字界面(理解)
边框属性
什么是边框
环绕在标签宽度和高度周围的线条
边框属性格式
- 方向连写(同时设置四条边的边框)
- border:边框的宽度 边框的样式 边框的颜色;
- 注意点：
- 连写格式中颜色可以省略，默认黑色
- 连写格式中样式不可省略，否则看不到
- 连写格式中宽度可以省略，省略后可以看到边框
- 方向连写(分别设置四条边的边框)
- border-top:边框的宽度 边框的样式 边框的颜色;
- border-right:边框的宽度 边框的样式 边框的颜色;
- border-bottom:边框的宽度 边框的样式 边框的颜色;
- border-left:边框的宽度 边框的样式 边框的颜色;
- 注意点：
- 连写格式中颜色可以省略，默认黑色
- 连写格式中样式不可省略，否则看不到
- 连写格式中宽度可以省略，省略后可以看到边框
- 要素连写(分别设置四条边的边框)
border-width:上 右 下 左;
border-style:上 右 下 左;
border-color:上 右 下 左;- 注意点：
- 这三个属性的取值是按照顺时针赋值的，按照上右下左赋值的，并不是上下左右
- 这三个属性的取值省略时的规律：
- 上 右 下 左> 上 右 下 —— 左边的取值和右边一样
- 上 右 下 左> 上 右 —— 左边的取值和右边一样，下边的取值和上边一样
- 上 右 下 左> 上 —— 右下左的取值和上边一样
- 注意点：
- 方向加要素非连写(单独设置四条边的边框)
- border-top-width:10px;
- border-top-style:double;
- border-top-color: #000;
- 等等等等
- 企开中基本没用的。。。
内边距属性
边框到内容之间的距离就是内边距
格式
- 连写
- padding:上 右 下 左；
- 用法同border
- 非连写
- padding-top: ;
- padding-left: ;
- padding-bottom: ;
- padding-right: ;
- 注意点：
- 设置内边距后，标签占有的高度和宽度会跟着一块变
- 内边距也会有背景颜色
外边距属性
标签和标签之间的距离
格式
- 非连写
- margin-top: ;
- margin-left: ;
- margin-right: ;
- margin-bottom: ;
- 连写
- margin:上 右 下 左;
- 注意点：
- 这三个属性的取值是按照顺时针赋值的，按照上右下左赋值的，并不是上下左右
- 这三个属性的取值省略时的规律：
- 上 右 下 左> 上 右 下 —— 左边的取值和右边一样
- 上 右 下 左> 上 右 —— 左边的取值和右边一样，下边的取值和上边一样
- 上 右 下 左> 上 —— 右下左的取值和上边一样
注意点
外边距那一部分是没有背景颜色的
外边距合并现象(外边距塌陷现象)
在默认布局的垂直方向上，默认情况下外边距是不会叠加的，谁的外边距大，就听谁的.水平方向就不会发生塌陷，就垂直有。
CSS盒子模型
仅仅是一个形象的比喻，在HTML中所有标签都是一个盒子
结论
- 在HTML所有标签都可以设置：
- 宽度/高度 —— 指定可以存放内容的区域
- 内边距
- 外边距
- 边框
盒子的宽度和高度
1.内容的宽度和高度
通过标签的width和height设置的宽度和高度
2.元素的宽度和高度
- 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
- 高度 同理可得
3.元素空间的宽度和高度
- 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
- 高度 同理可得
盒子box-sizing属性
css3新增了box-sizing属性，这个属性可以保证我们给盒子新增padding和border之后黑子元素的宽度和高度不变
工作原理
增加padding和border之后，要想保障盒子元素的宽高不变，就要减去一部分内容的宽高
取值
- content-box
元素的宽高 = 边框 + 内边距 + 内容的宽高 - border-box
元素的宽高就会恒等于width
盒子模型练习
注意点
- 如果两个盒子是嵌套关系，那么设置里面一个盒子顶部的margin，外面的盒子也会被顶下来
- 若不想被顶下来，就可以给外面的盒子添加一个边框属性
- bd —— 加边框的快捷键
- 企开中，一般情况下，若需要控制嵌套关系盒子之间距离的话，要首先考虑padding，其次在考虑margin，因为后者本质上是用于控制兄弟之间关系的，padding才是控制父子之间关系的
margin: 0 auto;
在一个嵌套关系的盒子中，我们可以用
margin:0 auto;
的方式让里面的盒子在大盒子里面水平居中
注意
- 他只对水平方向有效，垂直方向无效，这是固定写法
- 垂直方向居中只能通过像素控制
盒子居中和内容居中
text-align:center和margin: 0 auto区别
- 前者的作用是设置盒子中储存的问题和图片水平居中
- 后者的作用是让盒子水平居中
清空默认边距
为啥要清空默认内外边距
企开中为了更好的控制盒子的宽高和计算盒子宽高，第一步需要做的就是清空默认的边距
怎样清空内外标签
* {
margin: 0;
padding: 0;
}
注意点
通配符选择器会遍历当前界面中的所有标签，所以性能不好，我们可以去百度个css reset自己加上
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
行高和字号
什么是行高
所有的行都有自己的行高
注意点
- 行高和盒子的高不是一个概念
- line-height: ;设置行高
- height设置盒子高
规律
- 文字在行高中默认是垂直居中的
- 企开中，我们经常把盒子的高度和行高设置的一样，这样就可以保证一行文字在盒子里是垂直居中的。也就是说，要想做到把一行文字在盒子里垂直居中显示，就把行高和盒子高度都设置成一样的高度就行
- 企开中，若一个盒子中有多行文字，2的方法就不好用了，只能用padding来让文字居中
还原字体和字号
自己拿着AI玩就行了
注意点
- 企开中，盒子里放的是文字的话，我们一般以盒子的左边的内边距为基准，而非右边距，因为右边有误差
- 因为右边放不下文字的话，就会换行显示，但那个距离还在那，那就是误差
- 顶部的内边距不是边框到文字的距离，而是边框到文字行高顶部的距离
文字界面
就目前我们的技术，做网页
- 先初始化格式
- 从外向内，从上到下便携
