css边框

元素的背景是内容、内边距和边框区的背景。 css中：width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 bootstrap中：width 和 height 指的是包含border、padding、element的框的总尺寸,不包含margin。 margin、padding、border四值顺序：top right bottom left。值复制遵循对等原则。 length：规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。%：定义基于父元素宽度的百分比。此值不会如预期地那样工作于所有的浏览器中。 padding-top 该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，不允许负值。padding-bottom同理。 padding-left该属性设置元素左内边距的宽度。行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现.padding-right同理。 外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。a. 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。b.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开

在网页中“一切皆是盒子” 盒子 CSS处理网页时，它认为每个元素都包含在一 个不可见的盒子里。 为什么要想象成盒子呢？因为如果把所有的元 素都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。 我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。 盒子模型 一个盒子我们会分成几个部分： – 内容区(content) – 内边距(padding) – 边框(border) – 外边距(margin) 看一下面的图来感受一下盒模型 所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。 因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。 内容区 内容区指的是盒子中放置内容的区域，也就是元素 中的文本内容，子元素都是存在于内容区中的。 如果没有为元素设置内边距和边框，则内容区大小 默认和盒子大小是一致的。 通过width和height两个属性可以设置内容区的大 小。 width和height属性只适用于块元素 内边距 顾名思义，内边距指的就是元素内容区与边框以内 的空间。 默认情况下width和height不包含padding的大小。 使用padding属性来设置元素的内边距。 例如： – padding:10px 20px 30px 40px – 这样会设置元素的上、右

CSS属性 属性1 宽和高 width 属性可以为元素设置宽度 height 属性可以为元素设置高度 PS：只有块级标签才可以设置宽度，内联标签的宽度由内容决定。 属性2 字体属性 文字字体： font-family 可以存放多种字体，如果浏览器不支持第一种字体会自动尝试下一种，浏览器会使用它能识别的第一种字体。如果到最后都没有浏览器支持的字体，那么就会使用浏览器的默认字体显示。 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial" } 字体大小： font-size ，可以设置为数字px形式和 inherit ，设置为 inherit 表示继承父元素的字体大小值。 字重： font-weight 用来设置字体的字重（粗细）。 值 描述 normal 默认值，标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值 字体颜色： color 用于设置字体的颜色，颜色可以通过三种形式指定： 十六进制：如：#FF000 (前两位表示Red，中间两位表示Green，最后两位表示Blue) 一个RGB值： 如： RGB(255,0,0) (第一个数字表示Red，第二个数字表示Green，第三个数字表示Blue

前端各种宽高，收集于多处 offsetLeft : 　　只读属性，返回当前元素左上角相对于（ HTMLElement.offsetParent ）节点的左边界偏移的像素值（不包括元素的边框和父容器的边框）。 offsetTop : 　　只读属性，返回当前元素相对于其（ HTMLElement.offsetParent ）元素的顶部的距离（不包括元素的边框和父容器的边框）。 offsetWidth : 　　只读属性，返回一个元素的布局宽度，包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。 offsetHeight : 　　只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距、边框和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。 　　HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table , table cell 或根元素（标准模式下为 html ；quirks 模式下为 body ）。当元素的 style.display 设置为 "none" 时，

盒子模型 页面布局的三大核心，盒子模型，浮动和定位 网页布局过程 先准备好相关网页元素，网页元素基本都是盒子Box 利用CSS设置好盒子样式，然后放到相应位置 往盒子里面装内容 盒子模型的组成 所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是 一个盛装内容的容器，CSS盒子包括：边框、外边距、内边距、和实际内容 border：边框 组成：边框宽度、边框样式 、边框颜色 border：border-width|border-style|border-color 属性 作用 border-with 定义边框粗细，单位是px border-style 边框样式：solid：实线边框、dashed：虚线边框、dotted：点线边框 border-color 边框颜色 边框简写 border：1px solid red； #没有顺序 表格边框的粗细 border-collapse：collapse； collapse：合并 border-collapse：collapse；表示相邻边框并在一起 【注意】 边框会额外增加盒子的实际 大小。两种解决方案 测量盒子大小的时候不量边框 如果测量的时候包含了边框，则需要width\height减去边框宽度 content：内容 padding：内边距 用于设置内边距，即边框与内容之间的距离 属性 作用 padding-left

1 theme = { 2 // 全图默认背景 3 // backgroundColor: 'rgba(0,0,0,0)', 4 5 // 默认色板 6 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', 7 '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', 8 '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700', 9 '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'], 10 11 // 图表标题 12 title: { 13 x: 'left', // 水平安放位置，默认为左对齐，可选为： 14 // 'center' ¦ 'left' ¦ 'right' 15 // ¦ {number}（x坐标，单位px） 16 y: 'top', // 垂直安放位置，默认为全图顶端，可选为： 17 // 'top' ¦ 'bottom' ¦ 'center' 18 // ¦ {number}（y坐标，单位px） 19 //textAlign: null // 水平对齐方式，默认根据x设置自动调整 20 backgroundColor: 'rgba(0,0,0,0)', 21

1.css基本样式讲解 1.1 css背景 background-attachment：背景图像是否固定或者随着页面的其余部分滚动 background-color：设置元素的背景颜色 background-image：把图片设置为背景 background-position：设置背景图片的起始位置 background-repeat：设置背景图片是否及如何重复 background-size：规定背景图片的尺寸 background-orgin：规定图片的定位区域 background-clip：规定背景的绘制区域 1.2 css文本 color ：文本颜色 direction :文本方向 line-height :行高 letter-spacing: 字符间距 text-align :对齐元素 text-decoration :向文本添加修饰 text-indent :缩进元素中文本首行 text-transform :元素中的字母 unicode-bidi :设置文本方向 white-space :元素中空白的处理方式 word-spacing :字间距 text-wrap：自动换行 text-shadow：向文本添加阴影 1.3 css字体 font-family :设置字体系列 font-size :设置字体尺寸 font-style :设置字体风格 fongt

文章目录 文章参考 圆形 三角形 文章参考 纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等） 圆形 原理描述： 设置div的高度和宽度是一致的，画出正方形 然后再利用border-radius转为圆形 由于块状元素是占一行，因此将元素改为 inline-block < span class = " point " style =" background : #77DC7E ; margin-right : 12px ; " > </ span > .point { width : 12px ; height : 12px ; border-radius : 12px ; display : inline-block ; background : red ; } 由于要设置高度和宽度，因此就需要将 元素改为 inline-block 三角形 原理描述： 一个div的边框实际上是有上、下、左、右四个边框构成，每个边框代表一个小的等边直角三角形 将等边直角三角形拼成我们感兴趣图片 将其余的边框改为透明即可 四个边框如果只设置其中一个边框或者两个边框，浏览器会显示不同的形状，因此要根据浏览器的实际显示为准，如果不确定就按照上面四个边框来拼凑，其他的改为透明即可 < div class = " reception-flag " > </ div > .reception

在css中，每个元素都可以当作一个矩形的盒子。之所以这样是为了更方便布局。把这些元素作为盒子后，我们的布局就相当于在页面中摆放盒子了。 Content内容区 内容区相当于盒子存放东西的空间，位于盒子的最里层。元素的所有子元素都是放在父元素的内容区。 值得注意的是， 当我们指定一个元素的width和height时，其实只是设置了内容区的宽和高。 padding内边距 盒子在内容区周围可能有一层内边距，会影响盒子的大小。内边距是透明的，没有颜色也没有装饰。 盒子一共有四个方向的内边距，分别为padding-top、padding-right、padding-bottom、padding-left。 可以利用上述属性设置单侧内边距，也可以同时设置四个方向的内边距。例如：padding：10px 20px 30px 40px; 表示的是设置上 右 下 左的内边距分别为10px，20px, 30px, 40px。 也可以 padding: 10px 20px 30px; 表示的是上 左右 下 的内边距 也可以 padding:10px 20px; 表示的是上下 左右 的内边距 还可以 padding：10px; 表示的是 上下左右 内边距都为10px. Border边框 边框位于盒子的边缘， 设置边框需要同时设置border-width、border-color、border

边框风格属性(border-style) 这个属性用来设定上下左右边框的风格，它的值如下： none (没有边框，无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边框) solid (直线式边框) double (双线式边框) groove (槽线式边框) ridge(脊线式边框) inset (内嵌效果的边框) outset (突起效果的边框) 演示示例：分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS边框风格属性示例 边框宽度属性(border-width) 这个属性用来设定上下左右边框的宽度，它的值如下： medium (是缺省值) thin (比medium细) thick (比medium粗) 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。 演示示例：分别用medium, thin, thick和长度单位定制的CSS边框宽度属性示例 边框颜色属性(border-color) 这个属性用来设定上下左右边框的颜色。例句如下： .d5 {border-color:gray;border-style:solid;} 演示示例 边框属性(border)