前端-07 盒子模型

盒子大小:

使用width来设置盒子内容区的宽度
使用height来设置盒子内容区的高度
width和height只是设置的盒子内容区的大小,而不是盒子的整个大小,盒子可见框的大小由内容区,内边距和边框共同决定

为元素设置边框:

要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
使用border-width可以分别指定四个边框的宽度
除了border-width,CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度

设置边框的颜色:

和宽度一样,color也提供四个方向的样式,可以分别指定颜色
border-xxx-color

设置边框的样式:

可选值:
none,默认值,没有边框
solid 实线
dotted 点状边框
dashed 虚线
double 双线
style也可以分别指定四个边的边框样式,规则和width一致,同时它也提供border-xxx-style四个样式,来分别设置四个边

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,335评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,803评论 0 2
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,342评论 2 66
  • 什么是盒子? CSS处理网页时,它认为每个元素都包含在一 个不可见的盒子里。 我们只需要将相应的盒子摆放到网页中相...
    咻咻咻滴赵大妞阅读 938评论 0 0
  • 周六。今天过得简直太奢侈,奢侈到像之前在大三在广州的时候那样,没课的日子睡到自然醒,醒来吃个饭,吃饱困了继续睡,睡...
    拉文克劳后进生阅读 299评论 0 0