盒子模型

盒子大小:

使用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四个样式,来分别设置四个边

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

推荐阅读更多精彩内容

  • 什么是盒子? CSS处理网页时,它认为每个元素都包含在一 个不可见的盒子里。 我们只需要将相应的盒子摆放到网页中相...
    咻咻咻滴赵大妞阅读 944评论 0 0
  • <!doctype html> 盒子模型 .box1{/*使用width来设置盒子内容区的宽度使用heig...
    我的好昵称阅读 3,494评论 0 0
  • CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 CSS 框模...
    LorenSLJ阅读 534评论 0 1
  • 1. 盒子模型1. 内容区(content)2. 内边距(padding)3. 边框(border)1. 四边都设...
    zmm0404阅读 423评论 0 2
  • 我看到儿子一直在玩手机游戏,担心他的眼睛弄坏了!带着自己的恐惧,我对儿子说:你再玩手机,明天我就把你送到山里去了!...
    竺子阅读 213评论 0 0