border虚线

基础2

最后都变了- 提交于 2020-03-24 20:39:14
表单 1:表单标签 <form></form> 属性: action="接口地址" <form action="提交地址" method="提交方式" name="表单名字"> method="get/post" name="表单名称" 2:表单控件 <input> 属性: type="控件类型" name:属性标识表单域的名称; value:属性定义表单域的默认值,其他属性根据type的不同而有所改变化。 <input type="类型"> type="text"当行文本输入框 type="password"密码输入框 type="submit"提交按钮 type="reset"重置按钮 type="button"空按钮(如果要做功能,需要结合js) name="名字" value="值" maxlength="允许输入的字符个数" size="设置元素显示的宽度" get和post的区别: get:在地址栏提交,有长度限制,有可能造成数据丢失,一般提交的数据较短,明文可见, 不安全,就算加密也比较容易破解,速度较快,如果只考虑速度那就用get post:不在地址栏提交,安全,没有长度限制(理论上是有长度限制)一般提交的数据较大,速度较慢 样式的基本规则: 1:属性与值之间用英文冒号连接,分号结束 2:属性与属性之间可以空格,可以换行 3:一个属性中有多个属性值时

边框详讲---CSS必备的盒子模型知识!

橙三吉。 提交于 2020-03-07 03:36:49
盒子模型 盒子模型的四个部分:内容区、边框,内边距,外边距;前三者共同决定盒子可见框的大小。 边框 为元素设置边框 .box1{ width:100px; height:100px; background-color red; /*设置盒子内容区宽高及颜色。*/ border-width:10px; border-color:yellow; border-style:solid; /*设置边框,三个样式缺一不可,缺了就直接不显示边框。*/ } border-width 使用border-width可以分别指定四个边框的宽度。 指定四个值:按顺时针设置; 指定三个值:分别设置给上 左右 下; 指定两个值:分别设置给上下 左右; 指定一个值:四边全为这个值。 border-width:10px 20px 30px 40px; /*则上边框为10px,右边框为20px,以此类推*。/ //方便起见,此规则自定义为“4321”。      //题外话:如果你也知道3421...hhh border-color 原理同4321有: border-color:red blue green; /*则上边框为红色,左右边框为蓝色,下边框为绿色。*/ border-style 使用border-style来设置边框样式。 可选值: none 默认值,没有边框; ​ solid 实线; ​

css排版常用样式、三种不同html类型、css布局盒模型介绍

寵の児 提交于 2020-03-06 01:29:51
把CSS样式与网页编排通过网页排版中主要格式化要素实现网页实用性与欣赏性相结合,实现出设计效果。 字体:div{font-family: "Microsoft Yahei";}为网页中的文字设置字体为微软雅黑,这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)现在一般网页喜欢设置“微软雅黑”,如下代码:body{font-family:"Microsoft Yahei";}或body{font-family:"微软雅黑";}注意:第一种方法比第二种方法兼容性更好一些。当然了如果你想用特殊字体怎么办了?通过css3的自定义字体实现@font-face{ font-family:dhnblog;src:url('images/fzm.ttf');}/*自定义字体类型*/ 字号、颜色:div.box{font-size: 14px;color: #f90;} 设置网页中文字的字号为14像素,并把字体颜色设置为#f90;此外颜色分为3种表现形式:a.rgb(255,255,255)b.英文单词c.16进制,如#f90,具体参考 css基本概念与css核心语法介绍 中有关颜色介绍 粗体:如果想为文字设置粗体除了使用h1-h6或strong标签

前端复习Day4 盒子模型及边框

此生再无相见时 提交于 2020-03-03 08:36:39
盒模型 一、 盒模型的概念和组成 盒子模型是CSS的基石,指定标签如何显示以及元素间相互关系; 页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容( content )、内边距(补白,填充, padding )、边框( border )和外边界( margin )组成; 1)padding内填充 padding区域在border与content之间; 背景色和背景图像会覆盖padding和content组成的区域 ; padding的使用方法 padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。也称补白(内填充)。 用法: 1)用来调整内容在容器中的位置关系 2)用来调整子元素在父元素中的位置关系。 注:padding属性可以添加在父元素上。 3)padding值是额外加在元素原有大小之上的,如想保证元素大小不变,需从元素宽或高上减掉后添加的padding属性值。 属性值的4种方式: 四个值:上 右 下 左 {padding:10px 20px 30px 40px;} 三个值:上 左右 下 {padding:10px 20px 30px ;} 二个值:上下 左右 {padding:10px 20px ;} 一个值:四个方向 padding:2px; / 定义元素四周填充为2px / 说明:可单独设置一方向填充, 如:上方向 padding

CSS盒模型概念及企业应用规则

主宰稳场 提交于 2020-03-01 08:36:03
css盒模型概念及企业应用规则 1.什么是盒模型 盒模型**( Box Moldel )****,**是W3C规定一个浏览器如何渲染、显示一个元素,根据元素的种类分为块级元素盒模型和行内元素盒模型 2.标准盒模型的概念分析 2.1width/height(content box内容区) 块级元素的width和height值 在标准盒模型下 ,定义了一个块级元素能够 存放内容的区域大小 ,元素的内容从width和height的 左上角原点开始 排列内容 2.2border(border box边框区) 块级元素的border的作用是在元素的内容区外加上一个边框线 边框样式的格式为**: broder : 宽度 种类 颜色 ;/** 复合写法 / border-width :边框宽度 border-style :种类; 默认是none 就是没有边框 /*dotted圆点边框, double双边框, dashed虚线边框,solid实线边框 */ border-color :颜色; 默认与color样式一致 /* 颜色值: 十六进制, rgb, 关键字, transparent(使用父元素的颜色)*/ 2.3border(border box边框区)详解 元素的边框可以单独给某一方向设置 比如: 设置 顶部 边框:border-top:宽度 种类 颜色; 设置 底部 边框:border

CSS3属性

≡放荡痞女 提交于 2020-03-01 02:03:26
字体属性 font font:字体风格[字体加粗]<字体大小>[/行高]<字体族科> font-family 字体族科 宋体|微软雅黑 font-family:"Arial","Helvetica",sans-serif; font-size 字体大小 font-style 字体风格 normal | italic | oblique (斜体) font-weight 字体加粗 normal | bold | lighter font-variant 字体变形 normal | small-caps 文字颜色 color 设置文字颜色 常用 color : # 两位 16 进制表示 文本属性 letter-spacing 字母间隔 值为长度,可以是负值 word-spacing 词的间距(通过空格识别) text-decoration 文字修饰 underline overline line-through none(默认) text-align 横向排列 left | right | center vertical-align 垂直对其方式 baseline: 将支持valign特性的对象的内容与基线对齐 sub: 垂直对齐文本的下标 super: 垂直对齐文本的上标 top: 将支持valign特性的对象的内容与对象顶端对齐 text-top:

outline使用方法,outline与border的区别

走远了吗. 提交于 2020-02-28 22:25:56
在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。 outline 能告诉用户那一个可以激发事件的html元素获取了焦点,对钟爱键盘操作的用户尤其有意义。一个清晰悦目的outline设计能提高使用表单的用户体验。 另一方面,outline 也有些讨厌的地方,比如使用CSS设计的Tab(标签页)时,选择一个Tab之后,Tab上的轮廓虚线会一直显示,有些影响美观。 CSS 的 outline 属性允许我们改变这个默认的轮廓虚线框效果。其配套的相关属性包括: outline outline-width outline-style outline-color outline-offset 其中第一个 outline 是速写(shorthand)形式,格式为: outline: outline-color || outline-style || outline-width 如果想让链接获取到焦点时更醒目,可以设置轮廓线条为红色,outline 属性的设计可能如下: a { outline-color: red; } 而如果想去掉影响美观的Tab上的轮廓线条,outline属性可如下设置: .active-tab { outline: none; ...... /* other

关于盒模型

半城伤御伤魂 提交于 2020-02-23 17:21:23
­­ 逆战班提升——关于盒模型 一、什么是盒模型? 我们可以将页面中所有的元素都视为盒子,这些盒子中可以盛放我们想要盛放的内容,每个盒子在页面中都占有一定的空间,这些盒子的参数和属性我们可以根据需求来调整,例如它的位置、大小等。 二、盒模型的组成? 盒模型从内到外由content内容区、padding填充区(补白)、border边框、margin外边距组成。 二、盒模型的分类? 盒模型可以分为标准盒模型与怪异盒模型。标准盒模型与怪异盒模型的区别在于:标准盒模型的宽高为盒模型的内容区content,填充区padding、边框border、外边距margin都是不计算在宽高以内的;怪异盒模型的宽高包含了内容区content、填充区padding、边框border,只有外边距margin独立于宽高之外。 三、标准盒模型与怪异盒模型之间是否可以相互转换? 标准盒模型与怪异盒模型可以通过属性box-sizing相互转换,它的属性值有border-box(怪异盒模型)与content-box(标准盒模型)。 四、与盒模型的组成相关的属性常用的有哪些? 1.内容区content: width:宽度值; height:高度值; 2.填充区padding: (1)padding:直接使用padding为复合用法,其属性值为数值型。如果给其设置一个属性值,则该值表示上下左右四个内边距统一的数值

css盒子模型讲解

流过昼夜 提交于 2020-02-22 23:34:27
盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。 HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。如图: 代码演示: 如图这个盒子宽widht:500px,高height:200px,外边距padding:100px,边框border:5px, 外间距margin:100px;所以这个盒子的大小为710px*410px 因为盒子本身的大小是这样计算的: width: width + padding-left + padding-right + border-left + border-right height: height + padding-top + padding-bottom + border-top + border-bottom 通过盒模型我们更容易理解 标准盒模型: 何为padding内边距? 1,、padding内边距是在盒子里面,在盒子与内容之间,控制子元素在父元素里面的位置关系。 2、padding会把盒子撑大,如果想让盒子保持原有的大小:在宽高基础上减掉。( 如果一个元素是被内容撑开的,没有设置固定的宽高,padding直接撑开。不用减掉) 注意

盒子模型

血红的双手。 提交于 2020-02-15 22:44:16
CSS盒模型及其应用 盒子模型(重点) 认识盒子模型组成 盒子边框(border) 边框综合写法 合并细线表格 圆角边框(CSS3) 盒子内边距(padding) 外边距以及盒子居中对齐 外边距实现盒子居中 清除内外边距 外边距合并 **相邻元素垂直外边距的合并** content宽度和高度 案例: 盒子模型的布局稳定性 CSS3盒模型 盒子阴影 盒子模型(重点) 认识盒子模型组成 通过一张图体会盒子模型 所有的文档元素(标签)都会生成一个矩形框,我们成为元素框(element box),它描述了一个文档元素再网页布局汇总所占的位置大小。因此每个盒子除了有自己大小和位置外,还影响着其他盒子的大小和位置。 盒子边框(border) 边框通俗来说指的就是橘子皮,柚子皮。 语法: border : border-weight || border-style || border-color 边框属性—设置边框样式(border-style) 边框样式用于定义页面中边框的风格,常用属性值如下: none:没有边框即忽略所有边框的宽度(默认值) solid:边框为单实线(最为常用的) dashed:边框为虚线 dotted:边框为点线 double:边框为双实线 边框综合写法 设置内容 样式属性 常用属性值 上边框 border-top-style:样式; border-top-width