css边框 | 易学教程

前端之css（二）

阅读更多关于前端之css（二）

目录 CSS属性相关宽和高字体属性文本颜色文本字体字体大小字体粗细文字属性文字对齐文字装饰首行缩进背景属性补充边框 border-radius display属性 CSS盒子模型 margin外边距 padding内边距 float浮动浮动造成的影响： clear overflow溢出定位相对定位 relative 绝对定位 absolute 固定定位 fixed 脱离文档流 x-index 透明度 CSS属性相关宽和高 width属性可以为元素设置宽度 height属性可以为元素设置高度只有块级标签才可以设置长度，行内标签设置了也没有任何作用，只取决于文本内容大小字体属性文本颜色直接写颜色英文 color: red #FF0000 直接利用pycharm提供的取色器 rgb(125,125,125) 获取三基色 rgba(128,128,128,0.3) 最后一个数字只是用来调节颜色的透明度文本字体用font-family 控制字体种类 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 字体大小用font-size p { font-size: 36px; } 字体粗细值描述 normal 默认值，标准粗细 bold 粗体 bolder

Day10

阅读更多关于 Day10

设置标签样式给标签设置长宽只有块级标签才可以设置长宽，行内标签设置了也没有任何作用 div { width:10px; height:10px; } 字体属性 font-size 可以设置字体大小字体粗细 normal：默认标准粗细 bold：粗体 bolder：更粗 lighter：更细 100~900：设置具体粗细，400等同于normal，700等同于bold inherit：继承父元素字体的粗细值字体颜色 COLOR 后面可以跟多种颜色数据颜色的英文：red #4e4e4e 十六进制 rgb(1,1,1)模式，三基色数字 rgba（1,1,1,0.2）和rbg一样，最后一个数字用来调节颜色的透明度字体属性文字对齐 text-align属性规定元素中的文本的水平对齐方式 left：左边对齐，默认 right：右对齐 center：居中对齐 justify：两端对齐文字修饰 text-decoration 属性用来给文字添加特殊效果 none：默认，定义标准的文本 underline：定义文本下的一条线，相当于下划线 overline：定义文本上的一条线 line-through：定义穿过文本下的一条线，相当于删除线 inherit：继承父元素的text-decoration属性的值注意：a标签默认自带下划线，如果要去掉就如以下代码 a{ text

css标签样式边框盒子模型定位溢出 z-index 透明度

阅读更多关于 css标签样式边框盒子模型定位溢出 z-index 透明度

目录一、CSS设置标签样式 1. 给标签设置长和宽 2.字体的颜色（3种表示方法） 3.文本样式 4. 语义 5. 背景样式 6. 边框 6.1 边框变圆 7.display 标签转换二、盒子模型三、浮动（ ************ ）三、溢出四、定位五、z-index 控制z轴六、位置的变化是否脱离文档流 1.不脱离文档流 2.脱离文档流七、透明度一、CSS设置标签样式 1. 给标签设置长和宽只有块级标签才可以设置长宽行内标签设置了没有任何作用（行内仅仅只取决于内部的文本大小） 2.字体的颜色（3种表示方法）颜色的英文 6aode 直接使用pycharm提供的取色器即可 rgb(1，2，3) 可利用截图软件获取三基色数字 rgba(0,128,128,0.5) 最后一个数字，只能用来调节颜色的透明度 <style> p { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif; font-size: 24px; font-weight: lighter; /*color: 'red';*/ /*color: #06a0de;*/ /*color: rgb(0,128,128); !* 数字范围只能是0~255*!*/ color: rgba(0,128,128,0.9); } </style

1114课堂小结

阅读更多关于 1114课堂小结

目录设置标签样式给标签设置长宽字体属性字体粗细字体颜色文字对齐文字修饰首行缩进背景属性设置背景颜色设置背景图片设置背景位置边框边框属性边框样式 display属性盒子模型浮动 float的三种取值 clear 清除浮动 overflow溢出属性定位（position） static relative（相对定位） absolute（绝对定位） fixed（固定）是否脱离文档流脱离的不脱离的 z-index opacity 设置标签样式给标签设置长宽只有块级标签才可以设置长宽，行内标签设置了也没有任何作用 div { width:10px; height:10px; } 字体属性 font-size 可以设置字体大小字体粗细 normal：默认标准粗细 bold：粗体 bolder：更粗 lighter：更细 100~900：设置具体粗细，400等同于normal，700等同于bold inherit：继承父元素字体的粗细值字体颜色 COLOR 后面可以跟多种颜色数据颜色的英文：red #4e4e4e 十六进制 rgb(1,1,1)模式，三基色数字 rgba（1,1,1,0.2）和rbg一样，最后一个数字用来调节颜色的透明度文字对齐 text-align属性规定元素中的文本的水平对齐方式 left：左边对齐，默认 right

浅谈CSS盒模型

阅读更多关于浅谈CSS盒模型

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

CSS(5)---通俗讲解盒子模型

阅读更多关于 CSS(5)---通俗讲解盒子模型

CSS(5）---盒子模型盒子模型四个关键字：内容(content) 、填充(padding) 、边框(border) 、边界(margin) ， CSS盒子模式都具备这些属性。一、概念 1、概念盒子的概念就好比你现在网上买了一个苹果手机，那么新手机肯定是放在一个盒子里给你寄来。那么这苹果手机本身就指的是内容（content） , 为了让手机安全寄到会在盒子里放点泡沫这就是填充（padding） , 那么这个盒子本身肯定是有它的宽度的这叫边框（border) , 每个盒子与每个盒子之间的距离叫边界（margin) 。如图 2、元素的宽度和高度重要当您指定一个CSS元素的宽度和高度属性时，实际只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。宽高公式总宽度 = 内容宽度 + padding宽度(左右) + border宽度(左右) + margin宽度(左右) 总高度 = 内容高度 + padding高度(上下) + border高度(上下) + margin高度(上下) 举例求下面的总宽度是多少？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>宽和高</title> <style> div { background-color:

如何取消改变样式后的输入框自带的边框色

阅读更多关于如何取消改变样式后的输入框自带的边框色

我们在用html用input标签写输入框的时候，在页面呈现的是一个有线条的四边形边框。因为在很多页面中，为了增加输入框的美感性，常常我们会使用css对边框的样式进行更改，比如将四边形边框改变为圆角边框。我们常常会采用border-radius来给边框定义弧度值来改变边框样式。 border-radius：值1；表示四条边取同样的弧度值。 border-radius：值1 值2；第1个值是左上和右下、第2个值是左下和右上。 border-radius：值1 值2 值3；第1个值是左上、第2个值是左下和右上、第3个值是右下。 border-radius：值1 值2 值3 值4；第1个值是左上、第2个值是右上、第3个值是右下、第4个值是左下。在设置完成输入框后，我们在页面点击输入框时，会发现除了有圆角边框外，原有的四边形边框也会显示出来。该情况其实是显示的边框的自带颜色。这种情况的出现会大大降低用户体验。因此，查询资料发现只需要一句代码就能够实现取消。我们在css中添加样式的时候，对input添加outline:none即可。该条代码能够取消输入框自带的颜色，在我们重新点击后，不会再次出现上述情况。如果有需要取消边框的，可以添加outline:0px；。同时我们也可以给input设定宽高来改变边框的大小。来源： https://www.cnblogs.com/wangyao

CSS 边框

阅读更多关于 CSS 边框

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，而另一个用户则分别设置为

CSS 盒子模型

阅读更多关于 CSS 盒子模型

CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明： Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。元素的宽度和高度重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。. 下面的例子中的元素的总宽度为300px：实例 div { width: 300 px ; border: 25 px solid green ; padding: 25 px ; margin: 25 px ; } 尝试一下 » 让我们自己算算： 300px (宽) + 50px (左 + 右填充) + 50px (左 + 右边框) +

我的三天前端世界

阅读更多关于我的三天前端世界

我的三天前端世界最近爱上了二次元，感觉动漫里的小姐姐实在都太漂亮了，以前怎么就没觉得哎。于是向同学要来了日语入门学习和单词书，想来拜访一下日本文化，当然了在某次不经意间浏览了一位大佬的二次元博客，感觉十分心动（可以看一下呀<a herf=" https://zouwang.vip/ ”>）。便想复习并深入一下前端的知识，不断打造自己的博客并运用到最近的Android和小程序学习中。 DAY1——HTML 1、编译器选择看过蛮多网上推荐的，最终还是推荐出两款（1) VS CODE 推荐原因：插件真的很不错，不仅仅适用于前端开发，学习C、Python等皆可以，主题可以任意下载，代码支持高亮，还有很多别的功能，听说最近将会发布web端 vs code。 (2) Sublime 推荐原因：很轻便，也就几M，主题效果可以下载，我是选择最初的，不如VS CODE炫酷。 2、学习文档距离上一次学习前端已经是N 记不清楚啥时候了。其实也没啥，还好有点英语底子，对着文档现学现用这里我直接下载了W3c的教程文件有不懂的就搜索就好 3、掌握要点 vs code html基本格式快速导入创建好.html文件后输入一个！-回车便可以了。我们需要编辑的只有head和body之间的内容首先说head---其信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息.

订阅 css边框