一、边框属性
边框就是环绕在标签宽度和告诉周围的线条
1、连写
- 同时设置四条边:
border:(bd+ + tab) 边框的宽度 边框的样式 边框的颜色 - 分别设置边的属性:
border-top/right/bottom/left:(b t/r/b/f+ + tab) 边框的宽度 边框的样式 边框的颜色 - 根据一个属性设置四条边:
border-width/style/color: 上/右/下/左
2、非连写
分别设置每条边的每个属性:border-top/right/bottom/left-width/style/color:
3、用边框制作三角
将div宽高设置为0,再将对边设置为none,其他两条边的颜色变为透明.
注意:
- 连写格式中颜色可以省略,默认黑色
- 样式不能省略
- 宽度可以省略,默认3px
- 在连写模式下,如果省略一条边,该边的取值会和对边的取值一样,如果只设置了一条边,所有的边都会应用
- 改变边框的宽度会改变盒子的大小
二、内边距属性
边框与内容之间的距离就是内边距
1、连写
padding: top right bottom left一次性设置四边的内边距
2、非连写
padding-top/right/bottom/left:分别设置每边的内边距
注意:
- 在连写模式下,如果省略一边的内边距,该内边距的取值会和对边内边距的取值一样,如果只设置了一边的内边距,所有的内边距都会应用
- 改变内边距的大小会改变盒子的大小
三、外边距属性
标签与标签之间的距离就是外边距
1、连写
margin: top right bottom left一次性设置四边的外边距
2、非连写
margin-top/right/bottom/left:分别设置每边的外边距
注意:
margin合并现象:在垂直方向上有多个margin会发生合并,谁的值大听谁的
四、盒子模型
CSS盒子模型只是一个比喻,所有的标签都可以设置盒子模型
- 内容的宽度和高度就是通过标签属性设置的width和height
- 元素的宽度:border-left+padding-left+width+padding-right+border-right
高度同理 - 元素空间的宽度:margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
高度同理 - 当两个盒子嵌套时,由于会发生margin的塌陷(给大盒子设置border属性可避免),优先使用padding属性,margin属性本质是用来控制兄弟关系的,padding才是处理父子关系的
- margin:0 auto;用来让水平居中,垂直居中不能用,只适用于块级元素
五、box-sizing属性
CSS3中新增的属性,可以保证给一个盒子新增一个padding或者border时,盒子大小不变,其实是内容的大小变了.
取值:box-sizing="border-box",宽高为元素的宽高
默认值为:box-sizing="content-box",宽高为内容的宽高
六、css初始化
由于某些标签会有默认的属性和值,所以在开始做项目前应该初始化css样式.由于通配符的效果不好,所以可以在网上找现成的css清空代码.
*{
margin=0;
padding=0;
}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
七、行高和字号
在CSS中每行都有它自己的行高,默认情况下盒子高等于行高,文字在行高中垂直居中.
在企业开发中,为了能让一行文字能在盒子里垂直居中,就可以把行高设置为盒子的高度.但当文字有多行时,只能通过设置padding属性来让文字垂直居中
格式:line-height:
注意:在企业开发中,如果一个盒子中存储的是文字,那么一般情况下我们会以盒子左边的内边距为基准.右编剧的误差为剩余的空间量放不下一个文字时,文字会自动换行.
