前端开发学习笔记(八)- Css 盒模型

一.盒模型边框-border

盒子模型的边框就是围绕着内容及补白的线,这条线可以设置它的粗细,样式和颜色

语法举例:div{border:2px solid red;}=div{border-width:2px;border-style:solid;border-color:red;}

边框属性

1.border-style(边框样式):dashed(虚线) dotted(点线) solid(实线)

2.border-color(边框颜色)中的颜色可设置为十六进制颜色.

3.border-width(边框宽度)中的宽度也可以设置为thin|medium|thick,常用像素单位px

4.border-bottom(top|right|left)可以为标签设置单边框 div{border-bottom:1px solid red;}

二.宽度和高度-width height

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,CSS内定义的宽和高,指的是填充以里的内容范围.因此一个元素的实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界,元素的高度也是同理

三.填充-padding

元素内容与边框之间是可以设置距离的,称之为“填充”.填充也可分为,上,右,下,左(顺时针).

语法举例:div{padding:20px 10px 15px 30px};

相当于div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px}

如果上,右,下,左都为10px,可以这么写div{padding:10px};

如果上下填充一样为10px,左右一样为20px 可以这么写div{padding:10px 20px};

四.边界-margin

元素与其他元素之间 距离可以使用边界(margin)来设置。边界也是可分为上,右,下,左。

语法举例:div{margin:20px 10px 15px 30px};内容结构和padding一致

padding和margin的区别:padding在边框里面,margin在边框外面

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

推荐阅读更多精彩内容

  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 974评论 0 1
  • Html 标签 斜体 粗体 单独的样式 引用文本 长文本引用 换行 空格 分割线 地址信息 单行代码 多行代码 无...
    SunnySky_阅读 574评论 0 5
  • 1,元素分类 1-1,块级元素(block) html中的常用块级元素有: ........
    随意人生_1b90阅读 340评论 0 0
  • 因为办事,路过不常去的路段,见到路边有一家规模较大的烘焙房,特地进去踅了一踅,品种还算丰富,有许多样子精致的小甜点...
    柳上听黄鹂阅读 400评论 0 2
  • Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , AP...
    AnRFDev阅读 976评论 0 3