# 边框属性
# 内边距
# 外边距
# CSS盒子模型
# box-sizing
#清空默认边距
#行高(line-height)
什么是边框?
边框就是环绕在标签宽度和高度周围的线条
2.边框属性的格式
2.1 连写(同时设置四条边的边框)
border: 边框的宽度 边框的样式 边框的颜色;
快捷键:
bd+ + tab
2.2 连写(分别设置四条边框的宽度)
border-top: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
快捷键:
bt+ + tab
bl+ + tab
br+ + tab
bb+ + tab
边框样式:
dotted
dashed 虚线
solid 实线
double
groove
ridge
inset
注意点:
连写格式中边框的颜色可以省略,省略之后默认是黑色
连写格式中样式不能省略,省略之后就看不到边框了
连写格式中边框宽度可以省略,省略之后默认是1px
2.3 连写(分别设置四条边的边框)
border-width: 上 右 下 左
border-style: 上 右 下 左
border-color: 上 右 下 左
注意点:
1.赋值顺序是 上右下左
2.这三个属性省略时的规律
2.1 上右下左> 上右下 >左边的取值跟右边一样
2.2 上右下左> 上右 >左下边的取值跟上边的一样
2.3 上右下左 > 上 > 右下左的取值跟上边都一样
3.非连写(方向+要素)
border-top-width:
border-top-style:
border-top-color:
.
.
.
none代表不需要边框
-倒三角
1.什么是内边距?
边框和内容的距离就是内边距
2.格式
2.1非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
2.2 连写
padding: 上 右 下 左
注意点:
给标签设置内边距之后,标签占有的宽度和高度会发生变化
上右下左可以省略部分,规则跟边框一样
给标签设置颜色之后,内边距也会有背景颜色
1.什么是外边距?
标签和标签之前的距离就是外边距
2.格式
2.1 非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
2.2 连写
margin: 上 右 下 左;
注意点:
上右下左可以省略部分,规则跟边框一样
给标签设置颜色之后,外边距不会有背景颜色
给子元素添加margin-top之后会把父元素也一起顶下来,可以用overflow: hidden;清除
外边距的合并现象(外边距的塌陷现象)
-在默认布局的垂直方向上,默认情况下外边距是不会叠加的,会出现合并现象,谁比较大就听谁的
什么是CSS盒模型?
CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型
CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以HTML标签又叫做盒模型
1.内容的宽高
就是通过标签的width/height属性设置的宽度和高度
2.元素的宽高
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度 同理可证明
3.元素空间的宽高
宽度 = 左外边距 + 左边框 + 左内边距 + width +右内边距 + 右边框 +右外边距
高度 同理可证明
规律:
1.增加了padding/border之后,元素的宽高也会发生变化
2.如果增加了padding/border之后还想保持元素的宽高,那么必须调整内容的宽高
什么是box-sizing属性? CSS3
-这个属性可以保证我们给盒子新增padding和boder之后盒子元素的宽高不变
取值:
content-box
元素的宽高 = 边框 + 内边距 + 内容宽高
boder-box
元素的宽高 = width属性
嵌套盒子 水平/垂直方向padding
注意点:
1.如果两个盒子是嵌套关系,那么设置了一个盒子的顶部的外边距,外面一个盒子也会被顶下来
2.如果外面的盒子不想被一起被顶下来,那么只需要给外面的盒子设置一个边框属性
3.在企业开发中,一般情况下如果需要控制嵌套关系盒子之间的关系,应该首先考虑padding,其次再考虑margin
margin本质上是控制兄弟关系间的关系
嵌套盒子 水平方向居中
注意点:
1.在嵌套关系的盒子中,我们可以利用margin: 0 auto;的方式让里面的盒子在外面的盒子中水平居中
2.margin: 0 margin;只对水平方向有效,对垂直方向无效
text-align跟margin区别?
text-align: center;
-设置盒子中存储的文字/图片水平居中
margin: 0 auto;
-让盒子自己水平居中
1.为什么要清空默认边距
在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等,所以在企业开发中,编写代码之前第一件事情就是清空默认边距
如何清空默认的边距
简单格式(不推荐):
*{
margin: 0;
padding:0;
}
正式格式:
body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input{
margin:0;
padding:0;
}
3.注意点
通配符选择器会遍历当前界面中所有的标签,所以性能不好
(百度yui css reset)
企业开发中可以从这个网址中拷贝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
1.什么是行高?
在CSS中所有的行都有自己的行高
注意点:
行高和盒子的高度是不一样的概念
1.文字在行高中默认是垂直居中的
2.在企业开发中我们经常将盒子的高度和行高设置为一样,那么这样就可以保证一行文字在盒子的高度重视是垂直居中的
简而言之就是:要想一行文字在盒子中持之居中,那么只需要设置这行文字的行高等于盒子的高即可
3.在企业开发中如果一个盒子中有多行文字,想要他们在盒子中垂直居中,那么只能设置padding来设置
注意点:
1.在企业开发中,如果一个盒子中存储的是文字,那么一般情况下我们会以盒子左边的内边距为基准,不会以右边的内边距为基准,因为这个右边的内边距有误差
2.右边内边距的误差从何而来?因为右边如果放不下一个文字,那么文字就会换行显示,所以文字和内边距之间的距离就有了误差
3.顶部的内边距并不是边框到文字顶部的距离,而是边框到行高顶部的距离
—————
如何快速写多个以数字递增作为后缀的标签?
简写:
div.box$*数字
会自动生成数字序列
div.box${内容}*数字
会自动生成数字序列且带内容
——————
vertical-align: text-top;垂直对齐方式
清空默认边距
企业开发中可以从这个网址中拷贝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
/*
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}
网友评论