box | 易学教程

CSS学习笔记：利用border绘制三角形

阅读更多关于 CSS学习笔记：利用border绘制三角形

在前端的笔试、面试过程中，经常会出现一些不规则图形的CSS设置，基本上多是矩形外加一个三角形。利用CSS属性可以实现三角形的生成，主要利用上下左右的边距的折叠。　　 1、第一种图形： 1 .box { 2 width: 200px; 3 height: 200px; 4 -webkit-box-sizing:border-box; 5 box-sizing:border-box; 6 border-top: 50px solid #f00; 7 border-left: 50px solid #ff0; 8 border-bottom: 50px solid #0f0; 9 border-right: 50px solid #00f; 10 } 2、第二种图形： 1 .box1 { 2 width: 0px; 3 height: 0px; 4 -webkit-box-sizing:border-box; 5 box-sizing:border-box; 6 border-top: 50px solid #f00; 7 border-left: 50px solid #ff0; 8 border-bottom: 50px solid #0f0; 9 border-right: 50px solid #00f; 10 } 3、右上、右下、左上、左下三角形： 1 /*右上三角*/ 2

css盒模型 Box Model

阅读更多关于 css盒模型 Box Model

属性：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。　　　CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子的分类：不同的元素产生的盒子类型可能不同，一个元素，产生什么样的盒子，取决于它CSS的display属性 display:none：不生成盒子 display:inline：行盒 display:block：块盒盒子组成： Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。例： div { width: 300 px ; border: 25 px solid green ; padding: 25 px ; margin: 25 px ; } 来源： https://www.cnblogs.com/muxi95/p/11516745.html

纯css实现移动端横向滑动列表

阅读更多关于纯css实现移动端横向滑动列表

<!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type="text/css"> .slide-box{ margin-top: 200px; display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling:touch; } .slide-item{ width: 200px; height: 200px; border:1px solid #ccc; margin-right: 30px; } </style> </head> <body> <div class="slide-box"> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> </div> </body> </html> 来源： https://www.cnblogs.com/yuan9580/p/11512981.html

AKKA Inbox收件箱

阅读更多关于 AKKA Inbox收件箱

起因得到ActorRef就可以给actor发送消息，但无法接收多回复，也不知道actor是否停止 Inbox收件箱出现就是解决这两个问题示例 package akka.demo.actor import akka.actor.* import java.time.Duration /** ** created by tankx ** 2019/9/12 与actor 通信模式ask或tell 无法支持接收多回复和观察其它actor的生命周期，所以inbox应用而生 **/ fun main() { val system = ActorSystem.create("box-sys") val helloActor = system.actorOf(HelloActor.props("tom")) helloActor.tell("hi", ActorRef.noSender()) val box = Inbox.create(system) box.send(helloActor, "how are you!") box.watch(helloActor)//监控actor 的生命周期，当actor stop， receive会接收到Terminated消息 helloActor.tell(PoisonPill.getInstance(), ActorRef.noSender()

项目属性集合 BFC IFC

阅读更多关于项目属性集合 BFC IFC

【前言】2019.9.10 【内容】项目属性 BFC IFC FFC GFC 文档流脱离文档流… [主体]order、flex-grow、flex-shrink、flex-basis、flex、align-self… 项目属性：设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。项目元素属性集合： order、flex-grow、flex-shrink、flex-basis、flex、align-self 项目属性： ①沿主轴方向上的排列顺序order: 0（默认值） | <integer整数> ②项目的收缩因子flex-shrink: 1（默认值） | ③项目的扩张因子flex-grow: 0（默认值） | ④项目width属性替代品flex-basis: auto（默认值） | px ⑤flex-grow、flex-shrink、flex-basis的简写方式：flex 属性 ⑥项目在行中交叉轴方向上的对齐方式align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch order属性作用：设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数。 flex-shrink属性作用：时当项目在主轴方向上溢出，通过设置项目收缩因子来压缩项目适应容器

关于padding在width中的计算——box-sizing

阅读更多关于关于padding在width中的计算——box-sizing

目录盒子模型与box-sizing有什么关系我们为什么要开历史的“倒车” bootstrap怎么解决的控件的box-sizing 注意甄别前一阵子遇到一个小问题，在同样的样式（主要是宽高边距之类的）条件下，DIV在移动端和PC端的宽度不一样，排除了绝大多数样式的问题，但是有个比较陌生，就是box-sinzing，其实经常看到，只不过没怎么注意过，连具体的值都不知道有哪些，在开发者工具里面试了一下，果然和这个样式有关，因此查了一些资料并记录一下。盒子模型首先，盒子模型大家都知道，W3C标准的Box Model由四部分组成——content、padding、border、margin Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge. 如果我们给一个应用了标准盒模型的div设置一个宽度，那么，实际上我们设置的是上文提到的content的宽度，也就是下图这个样子 Element空间高度 = content height + padding + border + margin 还有个不那么“标准”的盒模型，就是IE6以下

移动端页面开发资源总结

阅读更多关于移动端页面开发资源总结

移动端页面开发资源总结及技巧工作了有一段时间，基本上都在搞移动端的前端开发，工作的过程中遇到过很多问题，bug的解决方案，记录下来，以便后用！！！内容并不是很全，以后每遇到一个问题都会总结在这里，分享给大家！一、meta标签相关知识 1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 2、移动端页面设置视口宽度等于定宽（如640px），并禁止缩放，常用于微信浏览器页面。 <meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 3、禁止将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 4、忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 5、当网站添加到主屏幕快速启动方式

div+css画一个小猪佩奇

阅读更多关于 div+css画一个小猪佩奇

用DIV+CSS画一个小猪佩奇，挺可爱的，嘻嘻。 HTML部分（全是DIV）  <div class="pig_container">  <div class="tail_left"></div> <div class="tail_right"></div> <div class="tail_blank"></div> <div class="tail_middle"></div> <div class="tail_circle"></div>  <div class="left_foot"></div> <div class="left_foot right_foot"></div>  <div class="left_shoes"></div> <div class="left_shoes right_shoes"></div>  <div> <div class="hand_left_top"></div> <div class="hand_left_bottom"></div> <div class="hand_left_middle"></div> </div>  <div class="pig_body_bottom"><

VueMusic-14搜索实现

阅读更多关于 VueMusic-14搜索实现

1.创建search组件 <template> <div> <div class="search-title"> <input type="text" name="" placeholder="输入搜索内容" v-model="searchContent"> <button type="button" @click="searchHandler" name="button">搜索</button> </div> <ul class="list searchlist"> <router-link :key="index" tag="li" :to="{name:'MusicPlay',params:{songid:item.songid}}" class="song" v-for="(item,index) in songlist"> <div class="left"> <div class="info single-line "> <div> <span>{{ item.songname }}</span> </div> <span class="txt">{{ item.artistname }}</span> </div> </div> </router-link> </ul></div> </template> <script> export default{ name:

如何写出更好的Java代码

阅读更多关于如何写出更好的Java代码

编码风格传统的Java编码方式是非常啰嗦的企业级JavaBean的风格。新的风格更简洁准确，对眼睛也更好。结构体我们这些码农干的最简单的事情就是传递数据了。传统的方式就是定义一个JavaBean: <code style="margin: 0px; padding: 0px; max-width: 100%; font-family: Fixedsys; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248); box-sizing: border-box !important; overflow-wrap: break-word !important;">public class DataHolder {<br data-filtered="filtered" style="line-height: normal; margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;"> nbsp nbsppublic final String data;<br data-filtered="filtered" style="line-height

订阅 box