border虚线

Border 边框 css属性 边框颜色 border-color：red / #ffffff / rgb() 默认为黑色 边框样式 border-style：solid（实线）dashed（虚线）默认为none 边框粗细 border-width：1px；默认为3px； Border 的简写 border：border-width border-style border-style border-color Div 块 盒子 1、就是标签名 没有特殊的标签属性 2、主要用来排版布局 3、宽度是100%，chrome浏览器默认有8px的内边距，清除这8px用 4、这种天使占用宽度为100%的标签我们把他们叫块级元素 比如 div p h1-h6等等 特点：独占一行 可以设置宽高 5、大小宽高不是100%，是按照内容的倒是决定大小的，这种标签叫内敛元素（行级元素） 比如 a span 特点：不独占一行 不可以设置宽高 块级元素 div分析 1、外边距 margin 2、内边距 padding 3、边框 border Div 的真是宽度= width+margin-left+margin-right+border*2+padding-left+padding-right 文档流 元素从上到下（主要说块级元素），从左到右（主要说行级元素）的一种排列方式，我们把他叫标准文档流

border 边框 css属性 边框颜色* border-color：red/#888/rgb（） ——默认为黑色 边框样式* border-style ：solid（实线） dashed（虚线） ——默认为none 边框粗细* border-width：1px； border的简写——border：border-width-border-style border-color div 块/盒子 1.就是标签名*没有特殊的标签属性 2.主要用来排版布局 3.宽度是100% 谷歌浏览器默认有8px的外边距，清除这8px用——margin：0； 4.这种天生占用宽度为100%的标签我们把它叫块级元素 比如 div p h1-h6 特点：独占一行，可以设置宽高 5.大小宽高不是100%,是按照内容的多少来绝对大小的，这种标签叫内敛元素/行级元素 比如a span 特点：不独占一行，不可以设置宽高 块级元素div分析： 1.四个外边距（margin） 2.内边距（padding） 3.边框（border） div真实宽度==width+margin-left+margin-right+border*2+padding-left+padding-right 文档流 元素从左向右（主要说行级元素）从上到下（主要说块级元素）的一种排列方法。它叫标准文档流。它是浏览器天生具有的一种功能。 来源：

目录 CSS入门 标签设置长宽 1.字体样式 1.1 字体类型 font-family 1.2 字体大小 font-size 1.3 字体颜色 color 1.4 字体粗细 font-weight 1.5 文本斜体 font-style 2.文本样式 2.1 文本对齐 text-align 2.2 文字装饰 text-decoration 2.3 首行缩进 text-indent 4.背景样式 4.1 背景颜色 background-color 4.2 背景图片 background-image 4.3 背景重复 background-repeat 4.4 背景位置 background-position 4.5 背景固定样式 background-attachment 5.边框属性 5.1 边框样式 border 5.2 边框局部样式 border局部 5.3 圆,圆角边框 border-radius 6.display 显示方式 定义 使用 同行显示 display: inline 异行显示 display: block; 兼并 display: inline-block; 标签特性 7.盒子模型 7.1 margin: 外边距 7.2 border: 边框 7.3 padding: 内边距 7.4 content: 内容区域 8. 浮动布局 float 8.1 三种取值 8

一、什么是css盒模型 CSS 框模型 (Box Model) 规定了元素框处理 元素内容 、 内边距 、 边框 和 外边距 的方式 上边这句话摘自W3C，翻译成人话：css盒模型又叫css框模型，由4部分组成：框内容、内边距、边框、外边距。通过css来设置这些属性决定这个盒子长什么样！ 废话少说，直接上图 从技术角度看盒模型 （图片摘自W3School）： 解释解释，哪部分是外边距、边框、内边距、盒元素内容。 外边距（margin）：如图中所示最外层的虚线到最外层的实线之间的内容都属于外边距部分， 作用：设置两个相邻同级盒子之间的距离 边框(border)：最外层的实线就是边框，边框也有自己的宽度，可以通过border-width设置 （边框外边是外边距，边框里边是内边距） 内边距(padding)：最外层实线部分到最内层虚线部分就是内边距， 作用：设置单一盒子的边框到内容之间的距离 元素内容(content)：最里边虚线部分包含的部分就是盒子的内容部分， 作用：设置一个盒子内容的大小 是不是听完这些，感觉还是不够直观。那在来一张图。 从生活角度看盒模型： 通常我们买的新手机都有包装盒，看我们包装盒的结构，包装盒一般都有个外纸壳，还有避免手机被碰撞在外纸壳和手机之间加了一层软和东西（我们暂且称为泡沫），泡沫里边放的就是手机。好， 挨个解释： 手机外纸壳：橙色边框部分

CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 在四边都有边框 红色底部边框 圆角边框 左侧边框带宽度，颜色为蓝色 边框样式 边框样式属性指定要显示什么样的边界。 border-style 属性用来定义边框的样式 border-style 值: none: 默认无边框 dotted: 定义一个点线边框 dashed: 定义一个虚线边框 solid: 定义实线边框 double: 定义两个边框。 两个边框的宽度和 border-width 的值相同 groove: 定义3D沟槽边框。效果取决于边框的颜色值 ridge: 定义3D脊边框。效果取决于边框的颜色值 inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 outset: 定义一个3D突出边框。 效果取决于边框的颜色值 尝试一下: 设置边框样式 边框宽度 您可以通过 border-width 属性为边框指定宽度。 为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。 注意： CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为

希望通过记录博客来加深自己的理解和记忆 1、CSS盒模型 　　刚刚接触前端一个多月，让我的态度转变最大的不是Js，而是CSS，开始觉得CSS好简单，甚至不像是一种语言，然而经历了怎么调也调不好的样式和膜拜了室友推荐的禅意花园后，对CSS真是怕得很。所以一上来就先对CSS的盒模型做一个整理。 　　 ①首先说明什么是盒模型： 　　盒模型可以理解为在页面中，每一个HTML元素都由一个矩形的盒子来表示，这些盒子都有四个框框：外边距（margin）、边框（border）、内边距（padding）、内容（content）。我们可以通过对盒子进行操作从而改变元素的颜色、背景、大小等。 　　②盒子的大小： 　　盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）。对于任何一个元素设置width和height控制内容大小，也可以分别设置各自的边框（border）、间隙（padding）、间隔（margin）。灵活设置这些盒子的这些属性，可以实现各自排版效果。注意一点：我们设置的width和height是内容也就是content的宽度和高度，注意不要弄混。 　　③盒子的构成： 　　 a.margin： 盒子的外边框，完全透明的（不能设置颜色），只可以设置它的边距。 　　margin有top、bottom、left、right四种属性

css盒模型： 外边距 边框 内填充 内容 盒模型分为两种： 标准盒模型： 怪异盒模型（IE盒模型）： 边框：border border: 10px solid blue;表示设置10像素蓝色实线条的边框 是以下三个样式的复合语法 border-width: 10px; 设置边框的宽度 border-color: blue; 设置边框的颜色 border-style: solid; 设置边框的样式 solid：实线 dashed: 虚线 装订线 dotted: 点线 double: 双线 如何单独设置一个边的边框： border-left: border-right: border-top: border-bottom: border-radius 设置圆角边框 取值可以是 px % em 最大设置范围到50% 超出则按照50%计算 参数最少可以设置一个 最多可以设置八个 border-radius: 5px 50% 50% 50% / 5px 50% 50% 50%; 前四个值代表水平方向的取值 左上 右上 右下 左下 后四个值代表垂直方向的取值 利用css边框知识 在页面绘制一个三角形： 需要将一个盒子宽高设置为0 然后设置四个边框，其中三个面的边框颜色设置成透明色，则会显示成一个三角形 width: 0px; height: 0px; border-left: 200px

本文转载自https://blog.csdn.net/xiaogeldx/article/details/85169861 练习： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <style> #div1{ width: 350px; height: 450px; border: 1px solid red; margin: into; background: dimgray; } input{ width: 330px; height: 30px; border-radius: 10px; margin-left: 10px; margin-top: 15px; } .a{ width: 195px; height:30px; } .b{ width: 120px; height: 30px; } </style> </head> <body> <div id="div1"> <span style="margin-left: 5px;border-bottom: 5px solid red">请注册</span><a href="#" style="float: right">立即登陆></a> <input type="text" placeholder=

color 设置文字的颜色，如： color:red; font-size 设置文字的大小，如：font-size:12px; font-family 设置文字的字体，如：font-family:'微软雅黑'; font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜 font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px; font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑'; text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中 text-overflow

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框</title> <!--border-width属性:设置边框的粗细--> <!--border-style属性:设置边框是实线还是虚线--> <!--border-color属性:设置边框的颜色--> <!--可以将这些属性简写：border：粗细 实线/虚线 颜色--> <style> p{border-width:5px; border-style: solid; border-color: red} </style> </head> <body> <p>我加了边框</p> </body> </html> 来源： https://www.cnblogs.com/xichenHome/p/11689375.html