css边框 | 易学教程

基础2

阅读更多关于基础2

表单 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盒模型

阅读更多关于 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 (左 + 右边框) + 50px (左 + 右边距) =

盒模型

阅读更多关于盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。为了正确设置元素在所有浏览器中的宽度和高度，需要知道的盒模型是如何工作的。当指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。. 最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距来源： https://www.cnblogs.com/James23/p/8911678.html

第 2 章前端基础之CSS

阅读更多关于第 2 章前端基础之CSS

一、CSS语法 CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。 1 ''' 2 selector { 3 property: value; 4 property: value; 5 ... property: value 6 } 7 ''' 例如： 1 h1 {color:red; font-size:14px;} 二、CSS的四种引入方式 1、行内式行内式是在标记的style属性中设定CSS样式，这种方式没有体现CSS的优势，不推荐使用。 1 < p style ="background-color: rebeccapurple" > hello yuan </ p > 2、嵌入式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3、链接式将一个.css文件引入到HTML文件中。 < link href ="mystyle.css" rel ="stylesheet" type ="text/css" /> 4、导入式将一个独立的.css文件引入HTML文件中

CSS核心概念之盒子模型

阅读更多关于 CSS核心概念之盒子模型

盒子模型(Box Model) 关于更多CSS核心概念的文章请关注GitHub—— CSS核心概念。当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子。所有 HTML 元素可以看作盒子，在 CSS 中， Box Model 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，每个盒子由四个部分（或称区域）组成：内容（Content），内边距（Padding），边框（Border），外边框（Margin）。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型（Box Model）： CSS 盒模型不同组成部分的说明： Content（内容） - 由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。 Padding（内边距） - 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。当其取值为百分比时，该百分比都是相对于包含该元素的块的宽度（相对于该块的百分比）。 Border（边框） - 由边框边界限制，扩展自内边距区域，是容纳边框的区域。即围绕在内边距和内容外的边框。 Margin（外边距） -

CSS属性

阅读更多关于 CSS属性

CSS 属性 CSS 属性组：动画背景边框和轮廓盒（框）颜色内容分页媒体定位可伸缩框字体生成内容网格超链接行框列表外边距 Marquee 多列内边距分页媒体定位打印 Ruby 语音表格文本 2D/3D 转换过渡用户界面 CSS3 动画属性（Animation）属性描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。 3 animation-timing-function 规定动画的速度曲线。 3 animation-delay 规定动画何时开始。 3 animation-iteration-count 规定动画被播放的次数。 3 animation-direction 规定动画是否在下一周期逆向地播放。 3 animation-play-state 规定动画是否正在运行或暂停。 3 animation-fill-mode 规定对象动画时间之外的状态。 3 CSS 背景属性（Background）属性描述 CSS background 在一个声明中设置所有的背景属性。 1

css技巧(一)

阅读更多关于 css技巧(一)

某厂面试归来，发现自己落伍了！>>> 1.box-sizing: border-box box-sizing主要有两个值content-box和border-box，先看下官方的解释：通俗一点来说，默认情况下，padding和border是会额外占据空间的，假如元素宽是10px，如果设置了1px border边框，实际的宽就是12px，padding同理。那么这样会导致，布局的宽高不好控制，计算也特别麻烦。所以我们会给全局的元素用上border-box，只要设置了宽高，那么border和padding无论怎么变化，元素的宽高都不会变，这样方便布局和计算。 2.左边固定右边自适应在布局的时候，比如一些列表页，常常左边是一个固定大小的缩略图，右边剩余部分展示标题，如图那我们就叫左边固定右边自适应的布局吧，我的方法 100%宽的div用padding-left把左边图片的位置留出来，div元素内容的部分就是标题，图片绝对定位到padding-left区域，这样就实现了左固定右自适应，（前提是box-sizing必须是border-box，否则padding加上100%宽会超出屏幕宽度），大致代码如下： 3.元素的上下间距布局的时候从上往下开始写页面，一般都是写下一个的元素margin-top来决定和上一个元素的间距，那么就尽量不要又是写margin-top又是写margin

CSS background-color 属性 transparent 值（透明，背景色，无背景色）

阅读更多关于 CSS background-color 属性 transparent 值（透明，背景色，无背景色）

解决的问题： input 标签，要求背景透明，谷歌可以用rgba，但是需要兼容IE8，IE8上不支持rgba 。当你想着 rgba 透明怎么兼容IE8的时候，不如换个角度想想，是不是可以直接去掉默认的背景颜色。定义和用法 background-color 属性设置元素的背景颜色。元素背景的范围 background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。 transparent 值尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。不常用的，两个值，需要做个笔记，记录一下。希望可以帮到你。 by不言谢来源： https://www.cnblogs.com/byx1024/p/12467228.html

CSS笔记

阅读更多关于 CSS笔记

极客CSS笔记基础语法: selector选择器{ property属性:value值 } 例： h1{ color:red; font-size:18px } 　　高级语法：选择器分组： h1, h2, h3, h4, h5, h6 { color : red; } 继承：在最外层的元素添加样式，若里层元素没有样式，则套用该样式 body{ color:green; } CSS选择器：派生选择器: 通过依据元素在其位置的上下文关系来定义样式。例：li strong{}，中间用空格隔开 id选择器：以#号来定义，常用方式是id选择器常常用于建立派生选择器。例：#pid a{} 类选择器：以 . 点号来表示，也可以用作派生选择器属性选择器：对带有指定属性的HTML元素设置样式，属性和值选择器。例：[title]{} 或 [title=t]{} 子元素选择器： element > element。例 <div> > <p> ，选择父元素为div的所有p元素兄弟选择器： element + element。例 <div> + <p> ，选择紧接着div元素之后的所有p元素 CSS样式： CSS背景属性描述 background－attachment 背景图像是否固定或者随着页面的其余部分滚动 background－color 设置元素的背景颜色

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

阅读更多关于边框详讲---CSS必备的盒子模型知识！

盒子模型盒子模型的四个部分：内容区、边框，内边距，外边距；前三者共同决定盒子可见框的大小。边框为元素设置边框 .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边框