美文网首页
盒子模型

盒子模型

作者: 卑微小利 | 来源:发表于2018-12-24 18:45 被阅读0次

盒子大小:

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

相关文章

  • 面试题(DAT)

    1.什么是盒子模型?盒子模型有两种,标准盒子模型和IE盒子模型。标准盒子模型:width = content + ...

  • 【IMWeb秋招训练营】【Day1】面试题总结

    1.什么是盒子模型? 盒子模型有两种,标准盒子模型和IE盒子模型。 标准盒子模型:width = content ...

  • CSS盒子模型

    标准盒子模型 IE盒子模型 区别 在我看来标准盒子模型也就是: IE盒子模型:

  • 前端面试之HTML+CSS(八股文)

    1. 盒子模型,普通盒子模型和怪异盒子模型有什么区别? 答:普通盒子模型又称标准W3C盒子模型,标准盒子模型的Wi...

  • css基础问题

    介绍css的盒子模型 css的盒子模型有两种:IE盒子模型,W3C盒子模型盒子模型:内容(content),内边距...

  • CSS盒模型概述

    盒子模型: 盒子模型,又称框模型 (Box Model) 盒子模型主要的属性:width、height、paddi...

  • CSS 盒子模型

    CSS盒子模型 盒子模型边框 CSS盒子模型的宽度和高度 CSS模型的填充 CSS盒子模型的边界 填充和边界的区别

  • CSS

    1. 盒子模型 1.1 标准盒子模型 标准盒子模型包括margin、border、padding、content,...

  • js笔记五十一之js盒子模型

    js盒子模型 CSS盒子模型 ,margin - border - padding - content JS盒子...

  • 笔记:两种盒子模型——ie 盒子模型和标准 w3c 盒子模型。

    其实盒子模型有两种,分别是ie 盒子模型和标准 w3c 盒子模型。 W3C 盒子模型: W3C 盒子模型的范围包括...

网友评论

      本文标题:盒子模型

      本文链接:https://www.haomeiwen.com/subject/bcttlqtx.html