display | 易学教程

小程序-搜索商品-历史记录有并清除-根据销量-价格筛选过滤

阅读更多关于小程序-搜索商品-历史记录有并清除-根据销量-价格筛选过滤

搜索商品 <view class="container"> <view wx:if="{{$search$show==1}}" class="content"> <view class="search"> <view class="serch_content"> <i class="iconfont icon-search" /> <input type="text" name="search_input" bindinput="$search$searchInput" class="search_input" focus="true" value="{{$search$search_input_value}}" confirm-type="search" placeholder="搜索商品" /> <i wx:if="{{$search$search_input_value!=''}}" bindtap="$search$delText" class="iconfont icon-del" /> </view> <button class="btn btn_cancel" bindtap="$search$goBack" wx:if="{{$search$search_input_value==''}}" data-wpygoback-a="">取消</button>

使用display:flex实现多个子标签等分间距排列

阅读更多关于使用display:flex实现多个子标签等分间距排列

今天做项目遇到一个问题：ul标签下有若干个li标签（个数不固定），想要实现平均等分的排列；如效果图：因为li标签的个数是不固定的，所以不想使用给固定的margin来实现，这样的话太生硬了；于是想到了使用display:flex;justify-content: space-between;align-items: center;（有浏览器兼容问题）但出现了如下问题： li标签之间的间距并没有真正意义上的等分；先是复习了一遍space-between属性的意思： justify-content: space-between; 运用在父级元素上第一个子元素和最后一个子元素分别靠在最左和最右除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素，这些子元素距离左右两边的间距都是相等重点是：“除第一个子元素和最后一个子元素外”；所以最终的解决方法是：在li标签的开头和末尾分别加上一个伪类 ul:before { content: ""; display: block; } ul:after { content: ""; display: block; } 已经加过伪类清浮动的可只往开头添加一个伪类即可；即：ul:before { content: ""; display: block; } 问题到此解决；希望能帮到各位来源： CSDN 作者：

百度前端面试题

阅读更多关于百度前端面试题

/*--> */ /*--> */ ## 前端面试题 1、简述以下常见标签的语义以及默认的display值：p, li, ul, form, b，img，这几个dispaly值的区别是什么？ p 段落 display: block; li 列表 display: block; ul 列表 display: block; form 表单 display: block; b 粗体 display: inline; img 图片 display: inline-block; 区别： block元素 1、如果没有设置宽度会自动填满父容器 2、可以应用margin/padding 3、如果没有设置高度会拓展高度，包含常规流子元素 4、处于常规流前后元素独占水平空间 5、忽略vertical-align inline元素 1、水平方向从左到右依次布局 2、margin/padding 在垂直方向无效，在水平方向有效 3、不会再元素前后换行 4、浮动或绝对定位自动转换成 block 5、vertical-align属性无效 6、元素宽度由元素内容决定 inline-block 元素 1、可以设置宽高 2、其他基本同 inline元素属性 2、写一个布局：要求：整体尺寸等于浏览器窗口的尺寸，设置最小高度和最小宽度，顶栏高度固定50px, 侧栏宽度固定200px, 内容部分占据剩余的空间，如图

转发- css（display，float，position）

阅读更多关于转发- css（display，float，position）

此文章仅为转发，非原创，原文 http://www.cnblogs.com/zhuanggege/p/5778309.html 请支持原创 display 用来设置元素的显示方式 display : block | none | inline | inline-block inline：指定对象为内联元素 block：指定对象为块元素 inline-block：指定对象为内联块元素 none：隐藏对象 float 控制元素是否浮动显示 float : none | left | right none：设置对象不浮动 left：设置对象浮在左边 right：设置对象浮在右边浮动的目的：就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性任何申明为 float 的元素自动被设置为一个“块级元素” 在标准浏览器中浮动元素脱离了文档流，所以浮动元素后的元素会占据浮动元素本来应该所处的位置如果水平方向上没有足够的空间容纳浮动元素，则转向下一行文字内容会围绕在浮动元素周围浮动元素只能浮动至左侧或者右侧 clear 清除浮动 clear : none | left | right | both none：默认值。允许两边都可以有浮动对象 left：不允许左边有浮动对象 right：不允许右边有浮动对象 both：不允许有浮动对象

CSS 2. 盒模型|浮动

阅读更多关于 CSS 2. 盒模型|浮动

1、盒模型盒模型：在网页中基本上都会显示一些方方正正的盒子，这种盒子就被我们称为盒模型。重要的属性： width,height,padding,border, margin 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充，内边距，壳子-边框），content（内容区域） width: 指的是内容的宽度，而不是整个盒子真实的宽度；height: 指的是内容的高度，而不是整个盒子真实的高度。做一个宽度402*402的盒子，你应该如何设计？盒模型的计算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型的计算</title> <style type="text/css"> /*div{ width: 400px; height: 400px; border: 1px solid red; }*/ div{ width: 50px; height: 50px; border: 1px solid red; padding: 175px; } /*div{ width: 0; height: 0; border: 1px solid red; padding: 200px; }*/ </style> <!-- 如果想保证盒子的真实宽度

纯CSS实现垂直居中的几种方法

阅读更多关于纯CSS实现垂直居中的几种方法

垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。方法1：table-cell html结构：　　　　<div class = "box box1" > <span>垂直居中</span> 　　　　</div> css：　　　　.box1{ 　　　　 display: table-cell; 　　　　 vertical-align: middle; 　　　　 text-align: center; 　　　　} 方法2：display:flex 　　　　 .box2{ 　　 display: flex; 　　 justify-content:center; 　　 align-items:Center; 　　　　} 方法3：绝对定位和负边距　　　　.box3{position:relative;} 　　　　.box3 span{ 　　　　　　position: absolute; 　　　　　　width:100px; 　　　　　　height: 50px; 　　　　　　top:50%; 　　　　　　left:50%; 　　　　　　margin-left:-50px; 　　　　　　margin-top:-25px; 　　　　　　text-align

CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

阅读更多关于 CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

新 css 属性为我们提供了更加便捷的网页布局方式。来自微软的thomas lewis将带你认识去Grid Alignment，Flexibox Box以及Multi- column Layout这三大领域。这篇文章最早出现在 the April 2012 issue (226) 这期的.net杂志上-这杂志是面向网页设计者以及开发者，全球销量最高的杂志。按照以往来说，用CSS来布局看起来总是一样非常繁杂的工作。然而，随着一个个新标准的推出，网页设计者已经能够实现非常轻松地进行布局工作了。主流的浏览器，在W3C的推动下，已经开始实现多种新型的布局方式，而且我们现在已经可以开始使用了。举个例子，W3C开始把 CSS3 Multicolumn Layout Module 考虑进来。这就意味着W3C非常愿意看到浏览器在将来能够对上面的模块实现出来。前缀(Vendor prefixes) 虽然一些浏览器对属性普遍的认知，但这并不代表着你就不能采用这些属性。在现在，我们可以通过添加前缀来获得一些主流浏览器对属性的支持，直到这些属性得到了稳定的支持，我们才有可能不用添加这些前缀。Jonathan Snook说，添加供应商前缀就相当于做了两件事情：让开发者在调试新功能的时候，不用担心转换浏览器有不兼容的情况。可以告诫网页开发者这些东西是不稳定的。

Flex 布局相关用法

阅读更多关于 Flex 布局相关用法

前言：布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局，2012年得到进一步完善。 2009年版本的语法已经过时（display: box），使用的时候为了兼容需要加上一些前缀 /* 形如： */ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ 所以还是建议使用新版形式 2012年将是往后标准的语法（display: flex）

inline-block元素出现位置错位的解决方法

阅读更多关于 inline-block元素出现位置错位的解决方法

如下代码所示： <div class="container"> 　　<div style="display: inline-block; height: 100px; width: 100px;"><img src="/myImg.jpg"></div> 　　<div style="display: inline-block; height: 100px; width: 100px;">Good Morning! Sir!</div>　　<div style="display: inline-block; height: 100px; width: 100px;"></div> </div> 容器container的子元素均为inline-block显示，而当子元素中存在图片或文字的时候，子元素的显示会显然不在水平线上，即有的元素会下沉，这一现象与行内元素的对齐有关，要解决该问题，可用vertical-align属性，如下： <div class="container"> 　　<div style="display: inline-block; height: 100px; width: 100px; vertical-align: middle;"><img src="/myImg.jpg"></div> 　　<div style="display: inline-block;

行内元素对齐：display:inline-block;

阅读更多关于行内元素对齐：display:inline-block;

行内元素对齐：display:inline-block; 今天见到一个一行元素水平排列，但是对不齐啊，如图：代码： div{ border: 1px solid red; } .wrap > div{ display: inline-block; width: 200px; height: 200px; background: green; } <div class="wrap"> <div class="one1">这是内容1</div> <div class="one2"></div> <div class="one3">这是内容2</div> <div class="one4">合适内容3</div> </div> 　　问题原因：因为行内元素的排列都是按照一条水平基线进行排版的，所以可以使用vertical-align解决：这样就能解决很多问题了，排版也很好。但是一想这个跟文本有无内容有关系：如果不加vertical-align，父级div高一点就会这样：这样会不会跟overflow有关呢？毕竟文本内容都会跟这个有点关系，我加入：对齐了，而且和vartical-align:bottom效果一样。原因：来源： https://www.cnblogs.com/siwy/p/5302475.html

订阅 display