border

css权威指南（下）

由 删除回忆录丶 提交于 2020-01-03 05:49:29
第七章　　基本视觉格式化 正常流（没有浮动和定位元素）、非替换元素（包含在文档中）、替换元素（用作其它内容的占位符，如img）、块级元素（会和其它元素形成换行，如div）、行内元素（span之类的元素）和根元素（位于文档树顶端的元素，在HTML文档中就是元素html） 水平格式化 <p style="width:200px;">wideness?</p>　　/*200px指的是内容区的宽度*/ 水平格式化七大属性：margin-left、border-left、padding-left、width、padding-right、border-right和margin-right，其中有3个属性可以设置为auto：元素内容的宽度width及左右外边距 如果设置width、margin-left或margin-right的某个值为auto，而余下两个属性指定为特定值，那么设置为auto的属性会自动确定所需长度，从而使元素框等于父元素的width 如果这3个属性都设置为特定值（值不合理，且过分受限），此时会把margin-right强制取为auto 某个外边距和width设置为auto，设置为auto的外边距会减为0 3个值都设置为auto，两个外边距都自动为0，width完全填充其包含块 外边距可以设置为负数（按反方向偏移） 如果width、内边距和外边距设置为百分数值

CSS--border边框颜色渐变

由 左心房为你撑大大i 提交于 2020-01-03 05:46:38
本人前端小白一枚，写这些心得主要是为了记录自己的前端路上的成长及感悟。 废话不多说，平时我们在做边框border时，总能看到界面上一些边框颜色渐变的效果，比较常见的就是qq主菜单界面，我们发现他的边框并不是一条纯色的实线，如果对其进行放大，就可以看到下图所示的内容： 可以看到，其实它的边框是由7条宽度为1像素的实线堆叠起来的，最终达到颜色渐变的效果。 在css中，如果一条边框线有n像素的宽度，那么就可以对其设置n种不同的颜色。 在代码中，我们可以定义一条宽为7px的实线：border: 7px solid #C8C8C8;（不要在意此处设置的颜色，在firefox中后面的代码中会被新设置的颜色覆盖掉） 如果对border中四边的边框同时设置渐变的颜色，如下述代码所示： <html> <head> <style> div{ height: 100px; width: 100px; border: 7px solid red; border-color: red green yellow black; } </style> </head> <body> <div></div> </body> </html> 运行html文件后，我们得到的效果如下： 代码会将我们设置的颜色自动分配给 top、right、bottom、left，以顺时针的形式分配。如果我们只设置3个颜色，那么结果显而易见

css框模型

由 大兔子大兔子 提交于 2020-01-03 05:44:26
元素的背景是内容、内边距和边框区的背景。 css中：width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 bootstrap中：width 和 height 指的是包含border、padding、element的框的总尺寸,不包含margin。 margin、padding、border四值顺序：top right bottom left。值复制遵循对等原则。 length：规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。%：定义基于父元素宽度的百分比。此值不会如预期地那样工作于所有的浏览器中。 padding-top 该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，不允许负值。padding-bottom同理。 padding-left该属性设置元素左内边距的宽度。行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现.padding-right同理。 外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。a. 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。b.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开

前端代码相关规范

由 萝らか妹 提交于 2020-01-03 01:33:32
总结一下目前在用的前端代码规范，可作为开发参考 一、基础规范 开发规范 项目目录和文件的命名使用小写字母，避免使用大写或驼峰，多个单词以下划线 _ 分隔 如：my_project/cast_detail.js 目录有复数意义的时候，使用复数命名 如 scripts images 某些第三方插件可直接使用中划线 - 作为文件名单词的间隔 如 bootstrap-datepicker 某些特殊文件可以使用点号 . 作为文件名单词的间隔 如 webpack.config.dev.js jquery.cookie.min.js 使用有意义的英文单词式命名，避免使用拼音式（如 tupian.png ）命名 编辑器设置文件保存格式为 utf-8，以四个空格作为缩进（包括HTML，CSS，JS等），文件末尾空一行，行尾去掉空格 单个函数行数，以不超过一个屏幕为宜（50行左右），超出一个屏幕的，就要考虑拆分成更少的函数 每行代码量不要太长，要适当进行分行（自己也可以在编辑器设置超长自动换行） 在 sublime 中的配置 { "default_encoding": "UTF-8", "ensure_newline_at_eof_on_save": true, "trim_trailing_white_space_on_save": true, "tab_size": 4, "translate

在界面中生成头像

由 爱⌒轻易说出口 提交于 2020-01-02 20:59:26
在界面中如何生成头像？ 示例 HTML CSS 示例 HTML < div class = " container " > < div class = " avatar avatar--green " > < div class = " avatar-body body--green " > < div class = " avatar-eye eye--left " > < div class = " avatar-eye-pupil pupil--purple " > < span class = " avatar-eye-pupil-blackThing " > < span class = " avatar-eye-pupil-lightReflection " > </ span > </ span > </ div > </ div > < div class = " avatar-eye eye--right " > < div class = " avatar-eye-pupil pupil--purple " > < span class = " avatar-eye-pupil-blackThing " > < span class = " avatar-eye-pupil-lightReflection " > </ span > </ span > </

java printing - setting size of the border

由 本小妞迷上赌 提交于 2020-01-02 05:30:29
问题 I try to set the size to zero or remove the border of a printed document in java. It always has a standard white border. Here is my function printing a JPanel and some components: public void printComponent(){ PrinterJob pj = PrinterJob.getPrinterJob(); pj.setJobName(" Print Component "); pj.setPrintable (new Printable() { @Override public int print(Graphics pg, PageFormat pf, int pageNum) throws PrinterException { if (pageNum > 0){ return Printable.NO_SUCH_PAGE; } Graphics2D g2 = (Graphics2D

How to add black border to matplotlib 2.0 `ax` object In Python 3?

由 北城以北 提交于 2020-01-02 04:34:21
问题 I've been using style sheets in matplotlib lately. I really like how clean the seaborn-white looks and I want to be able to add the border to other styles like ggplot or seaborn-whitegrid . How can I add a black border around my ax object from fig, ax = plt.subplots() ? import pandas as pd import numpy as np from collections import * Se_data = pd.Series(Counter(np.random.randint(0,10,100))) with plt.style.context("seaborn-whitegrid"): fig, ax = plt.subplots() Se_data.plot(kind="barh", ax=ax,

window.print打印方法实现

由 时光毁灭记忆、已成空白 提交于 2020-01-02 04:12:28
vue中使用window.print打印效果 项目要求 打印每页有10行表格，如果接口数据没有十个显示10行 效果图 第一页 第二页 子组件 <template> <div> <div class="print" :key="i" v-for="i in Len"> <p class="print-title">打印页面</p> <div class="print-header"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione officiis quaerat dolorem nesciunt error et fugit fuga molestias quas labore autem, eligendi eum rem alias quod possimus quae voluptatum? Id? </div> <div class="print-layout"> 我是来占位置的 </div> <ul class="print-table"> <li class="first-li"> <span>序号</span> <span>姓名</span> <span>性别</span> <span>年龄</span> <span>电话</span> <span>住址</span> </li> <li

Can't get a border around a html div element

由 你说的曾经没有我的故事 提交于 2020-01-02 00:58:06
问题 I can't figure out why I can't get a border around my div here. My jsfiddle is: http://jsfiddle.net/4HnKs/1/ I must just be crazy from staring at my computer screen but if you look at the class verticalmembersmenu in the CSS, I can't for the life of me figure out why I can't get the border around the div. 回答1: You are using HTML style comments in your CSS, that seems to be breaking the rendering, take a look at http://jsfiddle.net/4HnKs/3/ Some info on comments over at http://www.w3.org/TR

CSS Border on three sides

由 左心房为你撑大大i 提交于 2020-01-02 00:55:12
问题 If i want to have border on the three sides, do I need to declare border for each side eg. border-left:1px solid green; border-bottom:1px solid green; border-right:1px solid green; or is there any shortcut way? 回答1: border: 1px solid green; border-top: 0; 回答2: Well, there is a slightly shorter way - but it's not what you'd call a shortcut... border: 1px solid green; border-top: 0; Or you could declare partial elements which would allow for clarity: border-color: green; border-style: solid;
订阅 border