border | 易学教程

盒模型的属性

阅读更多关于盒模型的属性

一.属性　　 width：内容的宽度　　height: 内容的高度　　padding：内边距，边框到内容的距离　　border: 边框，就是指的盒子的宽度　　margin：外边距，盒子边框到附近最近盒子的距离 1.padding(内边距) 　　 padding：就是内边距的意思，它是边框到内容之间的距离　　另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域　　padding有四个方向，分别描述4个方向的padding。描述的方法有两种　　1、写小属性,分别设置不同方向的padding padding-top: 30px; 离上边30 padding-right: 30px; 离右边30 padding-bottom: 30px; 离下边30 padding-left: 30px; 离左边30 　　 2、写综合属性，用空格隔开 /*上右下左*/ padding: 20px 30px 40px 50px ; /*上左右下*/ padding: 20px 30px 40px; /* 上下左右*/ padding: 20px 30px; /*上下左右*/ padding: 20px; 一些标签默认有padding 　　比如ul标签，有默认的padding

The different addressing modes of CUDA textures

阅读更多关于 The different addressing modes of CUDA textures

问题 I am using a CUDA texture in border addressing mode ( cudaAddressModeBorder ). I am reading texture coordinates using tex2D<float>() . When the texture coordinates fall outside the texture, tex2D<float>() returns 0 . How can I change this returned border value from 0 to something else? I could check the texture coordinate manually and set the border value myself. I was wondering if there was CUDA API where I can set such a border value. 回答1: As mentioned by sgarizvi, CUDA supports only four,

清除浮动bug使用 .clearfix{*zoom:1;} 和 .clearfix:after

阅读更多关于清除浮动bug使用 .clearfix{*zoom:1;} 和 .clearfix:after

.clearfix{*zoom:1;} /*这是针对于IE6/7的，因为IE6/7不支持:after伪类，这个神奇的zoom:1让IE6/7的元素可以清除浮动来包裹内部元素。具体意思的话，不用深究，听说微软的工程师自己都无法解释清楚。height:1%效果也是一样*/ .clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";} 作用：可以在子节点float的时候撑开父节点.整段代码就相当于在浮动元素后面跟了个宽高为0的空div然后设定它clear:both来达到清除浮动的效果。之所以用它是因为你不必在html文件中写入大量无意义的空标签又能清除浮动。使用方法，只要写一个.clearfix就行了然后在需要清浮动的元素中添加clearfix类名就好了。如 <div class="head clearfix"></div> 我们以前清除浮动的时候，都是在div的结尾，加多一个无用的 <div class="clear"></div> 例如：在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear

盒子模型（div标签）以及其属性

阅读更多关于盒子模型（div标签）以及其属性

盒子模型（div标签）作用：用于网页布局[画盒子] 组成：内容区域边框内边距：内容区域与边框之间的距离外边距：盒子与盒子之间的距离盒子模型相关属性边框属性（border）设置边框的样式(没有|实线|点线|虚线|双实线) border - style : none ( 默认 ) | solid | dotted | dashed | double ; 设置边框宽度 border - width : ~ ~ px ; 设置边框颜色 border - color : red ; 边框属性的联写： border : 样式宽度颜色；顺序和个数任意，省略的部分取默认值也可以单独设置某一条边框的样式或者单独指定每一个边框的样式去掉边框的方法： border - style : none ; 或者 border : none ; 或者 border - top : none ; 去掉边框input轮廓线 outline - style : none ; 点击文字也能设置控件光标圆角边框 border - radius： 50 % ； border - radius : 水平半径参数 / 垂直半径参数 ( 满足上右下左的顺序 ) （水平和垂直半径参数均包含四个参数，分别对应矩形的四个圆角的水平和垂直半径参数） border - radius : 20 px 30 px

翻书折纸特效

阅读更多关于翻书折纸特效

这个特效大家可以自己去改变其中的值去看看有什么变化，原理起始我也不是很懂，只知道用效果展示： hover前： <style> .page{ background: pink; width: 120px; height: 120px; } .content { width: 120px; height: 120px; margin: 40px auto 0; position: relative; cursor: pointer; } .content:before { content: ''; position: absolute; top: 0; right: 0; border: 0px solid; border-color: rgba(0, 0, 0, 0.2) #fff ; transition: border .5s ease; } .content:hover:before { border-right-width: 50px; border-bottom-width: 50px; } </style> </head> <body> <div class="content" id="content"> <div class="page"></div> </div> </body> </html> 来源： CSDN 作者：前端小峰链接： https://blog

小demo原生js同步翻译，可以玩玩儿

阅读更多关于小demo原生js同步翻译，可以玩玩儿

1. 背景：平时不知道用js写什么练手，这里就写了一个类似百度翻译的小demo。大家可以平时没事儿了看看书，写写像这种类型的小demo,调用以下公开的api即可。对于学生党，能进入学校实验室做项目更好。进不去的，平时写写小demo练练也不差。(我为什么没在实验室) 2. demo前准备工作：页面布局了解百度翻译API，所需配置参数准备 MD5.js 加密算法函数（百度自己搜）写js代码 3. 步骤： 1. 页面布局：布局就不说了，直接贴图上代码：可进行语言切换 html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="main"> <div class="left"> <div class="title"> 要翻译为： <span class="lang">英文</span> <ul class="ul1"> <li data-lang="en">英语</li> <li data-lang="zh">中文</li> <li data-lang="jp">日语</li> <li data-lang="kor

HTML & CSS 之小白再续前缘

阅读更多关于 HTML & CSS 之小白再续前缘

CSS 盒子模型（点击查看官方解释）实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成 content 内容区域 padding 内边距 border 边框 margin 外边距并且 margin , border , padding 分别有上下左右4个值如上图所示，可以很容易的得出盒子的大小，也就是对应标签真正大小。所谓的宽高不是 width 和 height ,而是盒子的宽度和高度。高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距 margin , border , padding 三个属性在设值的时候均可以对上下左右进行单独设置： margin-top: 100px; margin-bottom: 100px; margin-left: 50px; margin-right: 50px; 也可以一次性使用简写的方法设置： /* 上右下左*/ margin: 100px 100px 50px 50px; /* 上下左右*/ margin: 100px 50px; /* 上左右下*/ margin: 100px 20px 50px; 这里需要注意的是，多次设置时要先写大后写小： /* 错误写法 */ margin-left:

css3 box-sizing属性

阅读更多关于 css3 box-sizing属性

定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。默认值： content-box 继承性： no 版本： CSS3 JavaScript 语法： object .style.boxSizing="border-box" box-sizing：content-box | border-box 默认值：content-box content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin ) 此属性表现为标准模式下的盒模型。 border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。例子： <style type="text

Is there a way to create a button (or div) with a border that has a gradient and has rounded corners?

阅读更多关于 Is there a way to create a button (or div) with a border that has a gradient and has rounded corners?

问题 This is what it should look like: Attempts so far: Using a gradient background plus an inner element to cover it and leave just an outer "border". The background is obviously not transparent . body { background: #242424; height: 100%; width: 100%; margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; color: #FFFFFF; } div { display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; width: 100%; height: 100vh; } h1 { margin:

Javascript 模拟鼠标框选操作

阅读更多关于 Javascript 模拟鼠标框选操作

按住鼠标键不动，拖动鼠标，会看到效果 <html> <head></head> <style> body{padding:100px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #ccc;margin-right:10px;margin-bottom:10px;} .seled{border:1px solid red;background-color:#D6DFF7;} </style> <script type="text/javascript"> (function() { document.onmousedown = function() { var selList = []; var fileNodes = document.getElementsByTagName("div"); for ( var i = 0; i < fileNodes.length; i++) { if (fileNodes[i].className.indexOf("fileDiv") != -1) { fileNodes[i].className = "fileDiv"; selList.push

订阅 border