边框背景

11.21 CSS学习-下午

倾然丶 夕夏残阳落幕 提交于 2019-11-29 15:48:42
CSS框模型,看似一个盒子,封装周围的HTML元素,包括:边距、边框、填充和实际内容 Margin:清除边框区域,没有背景色,完全透明 Border:边框周围的填充和内容,边框是受到盒子的背景色影响 Padding:清除内容周围的区域,会受到框中填充的背景颜色影响 Content:盒子的内容,显示文本和图像 指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度,要知道,完全大小的元素,你还必须添加填充,边框和边距。 div.ex{ width: 220px; padding: 10px; border: 5px solid gray; margin: 5px; } 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 边框属性:允许指定一个元素边框的样式和颜色 border-style边框样式:指定显示什么样的边界 dotted:点线边框 dashed:虚线框 solid:实线框 double:定义两个边界框 groove:3D沟槽边界 ride:3D脊边界 inset:3D嵌入边框 outset:3D突出边框 border-width边框宽度 指定宽度的两种方法:1)指定值,如1px、1em;2)使用3个关键字之一,thin,medium,thick border

css007 margin padding border

守給你的承諾、 提交于 2019-11-29 15:48:16
css007 margin padding border 1、理解盒模型 (盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周围环绕着装饰盒子的不同属性 Pad ding:内容和其框线之间的距离 Margin:一个标签和另一个标签之间的距离 Border:盒子周边的直线 Background-color:填充边框内部空间的间隔 2、用margin和padding控制空间 (margin控制盒子外部和其他元素之间的空间; padding控制盒子里面内容到盒子的距离,在一般浏览器都会有默认的行距或者各种缩进距离。一般要用margin和padding清零。Margin和padding后面可以跟1到4个值,如果是两个值的话,分别代表上下 和 左右。一般的顺序是:上右下左(顺序一定不能搞乱了)。可以指定方向,比如margin-top) 1、margin和padding都是在内容的周围添加空间。 2、边距冲突:当margin-bottom 遇到(冲突)下面一个元素的margin-top时,浏览器是应用他们之间比较大的那个(只应用一个,不是两个相加) 3、可以用margin的负值消除不必要的空隙(margin是比较少数可以用负值的一个css属性。Padding一定要用正值) 4、行内盒子,块级盒子及其其他显示设置

CSS border系列

与世无争的帅哥 提交于 2019-11-29 15:35:14
本文更新版链接 一、border 关于border的3个属性,分别为border-width、border-style、border-color。 其中,border-color默认为元素内容的前景色;border-width默认为关键字medium,但是border-style默认值为none;所以, 不指定border-style,边框将不存在 。 关于 border-color transparent,据说特定情况下有奇效,需要知道有这样一个可选值。 white,白色的dotted边框,有时候会有奇效。 比如: 更确切地说,应该是颜色与父元素的背景颜色一样的dotted/dashed边框。 8种 border-style : (只有记住了,才能在需要的时候合理使用。) 关于 mixed border 利用CSS的层叠,我们甚至可以为四个方向上的边框分别设置不同的宽度、样式和颜色,取决于具体情况。 小tips:边框模拟,等高布局 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>边框模拟等高布局</title> 6 <style> 7 div.container { 8 margin-left: 200px; 9 overflow: hidden; 10 } 11 12 div.box {

使用CSS设置边框和背景

隐身守侯 提交于 2019-11-29 15:33:28
一、设置边框   1、边框样式   属性 说明 border-width 设置边框的宽度 boder-style 设置边框的样式 border-color 设置边框的颜色   a、border-width属性      自定义边框的宽度时,不能定义为百分比。   b、border-style属性       以上属性可以设置一个、二个、三个、四个属性值,当设置一个值得时候四条边框都应用该属性值,当设置两个的时候时候上下使用第一个属性值,左右使用第二个属性值,当设置三个值的时候,第一个值应用在上边框,第二个应用到左右边框,第三个属性值应用到下边框当设置了四个属性值,按着顺时针的方向一次应用。大部分情况下groove、ridge、inset、outset可以会使用双色边框,但是当border-color属性这设置成black是,两种颜色都会显示成黑色。    2、为一条边应用边框样式    boder-top/bottom/right/left-width/style/color 用来设置一条边框的样式,可以和通用属性结合使用。还可以使用border-bottom/top/left/right一次设置一条边框。   1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title

【CSS】使用边框和背景

给你一囗甜甜゛ 提交于 2019-11-29 15:32:53
1. 应用边框样式 先从控制边框样式的属性开始。简单边框有三个关键属性:border-width、border-style 和 border-color 。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border-width:5px; border-style:solid; border-color: black;; } </style> </head> <body> <p> 你的特别不是因为你在创业,不是因为你进了牛企,不是因为你的牛offer,而是因为你就是你,坚信自己的特别,坚信自己的内心,勇敢做自己。 IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE. </p> </body> </html> 在代码中,使用了p元素定义了一个段落,使用 style 元素为这个段落应用边框样式,边框样式是通过设置 border-width、border-style 和 border-color 属性来定义的。 1.1 设置边框的宽度 border-width 属性的取值可能是常规CSS长度值,可能是边框绘制区域宽度的百分数

【CSS】使用边框和背景

妖精的绣舞 提交于 2019-11-29 15:32:38
1. 应用边框样式 先从控制边框样式的属性开始。简单边框有三个关键属性:border-width、border-style 和 border-color 。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border-width:5px; border-style:solid; border-color: black;; } </style> </head> <body> <p> 你的特别不是因为你在创业,不是因为你进了牛企,不是因为你的牛offer,而是因为你就是你,坚信自己的特别,坚信自己的内心,勇敢做自己。 IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE. </p> </body> </html> 在代码中,使用了p元素定义了一个段落,使用 style 元素为这个段落应用边框样式,边框样式是通过设置 border-width、border-style 和 border-color 属性来定义的。 1.1 设置边框的宽度 border-width 属性的取值可能是常规CSS长度值,可能是边框绘制区域宽度的百分数

边框《CSS权威指南》读书笔记

£可爱£侵袭症+ 提交于 2019-11-29 15:28:13
元素的外边距内就是元素的边框。即围绕元素内容和内边距的一条或多条线。由于元素的背景不会在元素外边距以内,所以背景在元素外边框边界处停止。 边框有三个方面:宽度或粗细,样式或外观,颜色。 宽度默认值为medium,通常为2px,默认none,所以不一定能看到边框。 颜色默认是元素的前景色,如果没有前景色则是元素文本颜色,如果也没有,那么将继承父元素的文本颜色。 边框和背景 大多数浏览器遵循CSS2.1的定义,元素的背景是内容、内边距和边框处的背景。 有样式的边框 样式控制着边框的显示,没有样式,就没有边框。 border-style定义了10个不同的非inherit样式,包括默认值none。 double定义为两条线的宽度再加上这两条线之间的空间等于border-width值。两条线的粗细以及线之间的空间的宽度由用户代理决定。 多种样式 可以为给定边框定义多个样式,例如: p.aside { border-style : solid dashed dotted solid ;} 结果是段落由一个实线上边框、虚线右边框、点线下边框和一个实线左边框。 单边样式 border-top/right/bottom/left-style 如果三边有边框,一边无边框,有两种写法,第一种在样式里一一声明,这里不多说,说说第二种, h1 { border-style : solid ; border

CSS 边框

假装没事ソ 提交于 2019-11-29 15:27:17
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。 CSS border 属性允许你规定元素边框的样式、宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于 任何元素。 元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。 每个边框有 3 个方面:宽度、样式,以及颜色。在下面的篇幅,我们会为您详细讲解这三个方面。 边框与背景 CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当 出现在边框的可见部分之间。 CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。 大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。 边框的样式 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。 CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式,包括 none。 例如,您可以为把一幅图片的边框定义为 outset,使之看上去像是“凸起按钮”: a:link

CSS(12)边框

社会主义新天地 提交于 2019-11-29 15:27:03
  在传统的HTML文档 中,我们使用表格(table)来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。元素的边框(border)就是围绕元素内容和内边据的一条或多条线,元素外边距(margin)内就是元素的的边框 (border)。每个边框有 3 个方面:宽度(border-width)、样式(border-style),以及颜色(border-color)。下图中标注的蓝色部分为元素的边框: 一、边框与背景    CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正: 元素的背景是内容、内边距和边框区的背景。 大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。 二、border-style    border-style属性用来设置边框的样式,样式是边框最重要的一个方面,这是因为如果没有样式,将根本没有边框。CSS 的 border-style 属性没有默认值,它定义了包括none在内的dashed、 dotted 和 double等10个非 inherit 样式值。例如,把一幅图片的边框定义为 outset

CSS border 边框

房东的猫 提交于 2019-11-29 15:26:46
讲解一、 元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。 CSS border 属性允许你规定元素边框的样式、宽度和颜色。 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。 元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。 每个边框有 3 个方面:宽度、样式,以及颜色。在下面的篇幅,我们会为您详细讲解这三个方面。 边框与背景 CSS 规范指出, 边框绘制在“元素的背景之上”。 这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。 CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。 边框的样式 样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。 CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式 ,包括 none。 例如,您可以为把一幅图片的边框定义为 outset,使之看上去像是“凸起按钮”: a