3.23 边框

一、边框属性

边框就是环绕在标签宽度和告诉周围的线条

1、连写
  1. 同时设置四条边:border:(bd+ + tab) 边框的宽度 边框的样式 边框的颜色
  2. 分别设置边的属性:border-top/right/bottom/left:(b t/r/b/f+ + tab) 边框的宽度 边框的样式 边框的颜色
  3. 根据一个属性设置四条边:border-width/style/color: 上/右/下/左
2、非连写

分别设置每条边的每个属性:border-top/right/bottom/left-width/style/color:

3、用边框制作三角

将div宽高设置为0,再将对边设置为none,其他两条边的颜色变为透明.

注意:
  1. 连写格式中颜色可以省略,默认黑色
  2. 样式不能省略
  3. 宽度可以省略,默认3px
  4. 在连写模式下,如果省略一条边,该边的取值会和对边的取值一样,如果只设置了一条边,所有的边都会应用
  5. 改变边框的宽度会改变盒子的大小

二、内边距属性

边框与内容之间的距离就是内边距

1、连写

padding: top right bottom left一次性设置四边的内边距

2、非连写

padding-top/right/bottom/left:分别设置每边的内边距

注意:
  1. 在连写模式下,如果省略一边的内边距,该内边距的取值会和对边内边距的取值一样,如果只设置了一边的内边距,所有的内边距都会应用
  2. 改变内边距的大小会改变盒子的大小

三、外边距属性

标签与标签之间的距离就是外边距

1、连写

margin: top right bottom left一次性设置四边的外边距

2、非连写

margin-top/right/bottom/left:分别设置每边的外边距

注意:

margin合并现象:在垂直方向上有多个margin会发生合并,谁的值大听谁的

四、盒子模型

CSS盒子模型只是一个比喻,所有的标签都可以设置盒子模型


3.23 边框_第1张图片
  1. 内容的宽度和高度就是通过标签属性设置的width和height
  2. 元素的宽度:border-left+padding-left+width+padding-right+border-right
    高度同理
  3. 元素空间的宽度:margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
    高度同理
  4. 当两个盒子嵌套时,由于会发生margin的塌陷(给大盒子设置border属性可避免),优先使用padding属性,margin属性本质是用来控制兄弟关系的,padding才是处理父子关系的
  5. 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:
注意:在企业开发中,如果一个盒子中存储的是文字,那么一般情况下我们会以盒子左边的内边距为基准.右编剧的误差为剩余的空间量放不下一个文字时,文字会自动换行.

你可能感兴趣的:(3.23 边框)