display | 易学教程

未知高度的图片垂直居中

阅读更多关于未知高度的图片垂直居中

图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。但是实际在浏览器中实现起来的效果并不是很完美，由于各浏览器的解析都各不相同，所以在各浏览器都会有1px-3px的偏差。方法一：该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。 HTML结构部分： <div id="box"><span><img src="images/demo.jpg" alt="" /></span></div> CSS样式部分： <style type="text/css">#box{ width:500px;height:400px; display:table; text-align:center; border:1px solid #d3d3d3;background:#fff;}#box span{ display

HTML标签分类

阅读更多关于 HTML标签分类

标签分类 HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。常用的块状元素： <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> 常用的行内元素： <a> <span> <br> <i> <em> <strong> <label> 常用的行内块状元素： <img> <input> 块级元素特点：display:block; 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。行内元素特点：display:inline; 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。行内块状元素的特点：display:inline-block; 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置备注：通过display属性对块级元素、行内元素、行内块元素进行转换来源： https://www.cnblogs.com/zero1230/p/9954544.html

readbooks网页

阅读更多关于 readbooks网页

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css" media="screen"> 7 body,p,h1,h2,h3,dl,dd{ 8 margin: 0; 9 font-size: 100%; 10 font-weight: normal; 11 color: #3a4752; 12 13 } 14 body{ 15 background-color: #f2f5f7; 16 } 17 ul{ 18 margin: 0; 19 padding: 0; 20 } 21 li{ 22 list-style:none; 23 } 24 a{ 25 26 text-decoration: none; 27 color: #3a4752; 28 } 29 i{ 30 font-style: normal; 31 } 32 header{ 33 width: 100%; 34 background: #fff; 35 } 36 #header{ 37 display: -webkit-flex; 38 display: flex; 39 width: 1350px; 40 height: 78px;

理解display中的box-flex属性

阅读更多关于理解display中的box-flex属性

今天有个同学在面试的时候碰到了使用css2和css3实现一种页面布局，要求页面效果如下：在实现这种页面布局时，他使用了display：box-flex，下面是相应的代码： css2 方式 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> html{height: 100%;} body{margin: 0;padding: 0;height: 100%;padding-left: 200px;padding-top: 40px;} .header{height: 40px;width:100%;background: #f40;position: absolute;top:0;left:0;} .left{width: 200px;position: absolute;top:40px;left: 0;background: green;height: 100%;} .right{height: 100%;background: red; } </style> </head> <body> <div class="header"></div> <div class="left"></div> <div class="right"></div> </body>

BAPI 列表

阅读更多关于 BAPI 列表

BAPI List Name of function module Short text for function module BAPIs f. BOR obj. BUS4003 (AddrContPart) BAPI_CHARACT_GETLIST BAPI for Characteristics - Find Name 0002 Company Code Business Object BAPI_CCODE_GET_FIRSTDAY_PERIOD For Company Code: First Day of Period BAPI_CCODE_GET_LASTDAY_FYEAR For Company Code: Last Day of Fiscal Year BAPI_COMPANYCODE_EXISTENCECHK Check if Company Code Exists BAPI_COMPANYCODE_GETDETAIL Company Code Details BAPI_COMPANYCODE_GETLIST List of Company Codes BAPI_COMPANYCODE_GET_PERIOD For Company Code: Posting Date -> Period, Fiscal Year 0003 Business Area

标签分类

阅读更多关于标签分类

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。常用的块状元素： <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> 常用的行内元素 <a> <span> <br> <i> <em> <strong> <label> 常用的行内块状元素： <img> <input> 块级元素特点：display:block; 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。行内元素特点：display:inline; 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。行内块状元素的特点：display:inline-block; 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置注意我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。来源： https://www.cnblogs.com/fmgao-technology/p/9246015.html

基础前端面试题

阅读更多关于基础前端面试题

CSS篇 1.CSS 盒子模型，绝对定位和相对定位 css盒模型有两种，一种是标准盒模型一种是怪异盒子模型 1.box-sizing: content-box; // width = content + padding + border 2.box-sizing: border-box; // width = 定义时的宽度(包含padding + border) 2.绝对定位和相对定位绝对定位： position: absolute; // 使元素脱离文档流，绝对定位的参照物是最近的已经定位的的元素相对定位： position: relative; 3. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法 (1) 给父级定义具体的height(2) 在标签尾部增加空的 div标签 (style="clear: both;")(3) 在父级元素增加 :after伪类 <div class="parent"></div> .parent:after { display: block; clear: both; content: ''; visibilty: hidden; height: 0; } .parent { zoom: 1; //兼容IE5一下的版本 } (4) 给父级标签定义overflow: hidden || auto; 4.如何保持浮层水平垂直居中　 (1)

CSS 公共样式分享

阅读更多关于 CSS 公共样式分享

global.css | reset.css（格式化样式） common.css（公共组件样式） layout.css（当前页面样式）清除全站所有页面的浏览器默认样式，保证在初始样式在所有浏览器下一致。 common.css（公共组件样式）一般一个网站所有页面头部、底部样式都是一致的，而且很长时间不会有大的改变，改变的大概就是产品、运营的经常需要添加、去掉某些入口的需求，要保证全站所有页面头部一次替换生效，只要把头文件，已经对应的样式一发，马上生效，很快就有响应。比如翻页、表单（输入框、按钮）等样式也是全站统一的，把这些样式都放到common.css里面，如果哪天所有的按钮样式要变更，一次替换就成功了。 layout.css（当前页面样式）公共组件以外的所有样式都写到这个样式文件里面，并且保证一个页面一个独立样式，页面html和css写法要模块化，保证迅速响应项目频繁的迭代。为什么要保证一个页面一个独立样式，而且要模块化，肯定有朋友和我有过一样的经历，修改一行样式代码，整个页面甚至N个页面都会受影响，搞了半天还不知道哪里出了问题，返回到修改前的版本，就没问题了。终于找到原因了，却不能改以前的样式，更不能删除，只能增加，时间一长，css样式文件越来越大，最后是不堪重负，整个页面代码只能重写。其实global.css和common.css也可以合并到一个文件

微信小程序—Flex布局

阅读更多关于微信小程序—Flex布局

参考教程： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 　　　　 https://xluos.github.io/demo/flexbox/ 语法：一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器 (苹果系统），必须加上 -webkit 前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称" 容器 "。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称" 项目 "。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main

blog主题——樱花

阅读更多关于 blog主题——樱花

贮存一下，blog代码 QAQ 页脚html  <script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>   <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css"> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script> <script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script> <script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script> <!-

订阅 display