padding | 易学教程

标准 DOM 盒模型与 IE 盒模型

阅读更多关于标准 DOM 盒模型与 IE 盒模型

包括四个部分：margin>border>padding>content 在标准DOM盒模型中，dom 的 width 和 height 仅作用于content （IE6 及早期版本的IE7 下 width 和 height 包括了 border 和 padding）因此，一个html元素占据的空间不是width和height，而是这四个部分的加总，另外，由于margin没有内容无法看到(相邻元素都有margin时，你无法凭肉眼确定 dom 占据范围的边界)，如果你设置了border，那么肉眼所见的 DOM 形状就是border>padding>content三项的加总，但是，所占据的空间仍是四项的加总。使用标准盒模型的文档渲染模式有: document.compatMode = "CSS1Compat" 非标准模式(quirke) 下： document.compatMode = "BackCompat" 为了使用 IE 浏览器使用标准模式，可以使用下面的做法： 1、添加文档声明 <!DOCTYPE html> 2、 < meta http-equiv="X-UA-Compatible" content=" IE =edge, chrome=1"> outline 属性：盒模型的outline属性是包围在border外面的边线，设置方法跟border一样

为RecyclerView打造通用Adapter

阅读更多关于为RecyclerView打造通用Adapter

##RecycleView简单介绍 RecyclerView控件和ListView的原理有非常多相似的地方,都是维护少量的View来进行显示大量的数据。只是RecyclerView控件比ListView更加高级而且更加灵活。当我们的数据由于用户事件或者网络事件发生改变的时候也能非常好的进行显示。和ListView不同的是，RecyclerView不用在负责Item显示相关的功能。全部有关布局、绘制、数据绑定等都被分拆成不同的类进行管理。同一时候RecyclerView控件提供了下面两种方法来进行简化和处理大数量集合: 1.基本使用 RecycleView的基本使用 RecycleView导包(可有可无) dependencies中加入 compile'com.android.support:recyclerview-v7:23.1.1' 在布局文件里定义 <android.support.v7.widget.RecyclerView android:id="@+id/rcv_history" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v7.widget.RecyclerView> 3.对其进行初始化 rcv_history =

前端-css-长期维护

阅读更多关于前端-css-长期维护

############### CSS简介 ################ # CSS # HTML是骨架 # CSS是样式 # JS是动作 # css和html是分成两个文件编写的，这也是体现了文档内容和样式的解耦， # CSS：层叠样式表(英文全称：Cascading Style Sheets) ############### CSS的内容列表 ################ css的内容列表 1，css的引入，三种方式 2，css的选择器，基本选择器，有四种，p # . * 组合选择器，属性选择器分组和嵌套伪类选择器伪元素选择器选择器的优先级 3，css的各种属性，宽和高，width，height，字体属性，font-size，font-weight，color，文字属性，text-align，text-decoration，text-indent，背景属性，background-color，background-repeat，background-image，background-position， display 盒子模型，margin外边距，border边框，padding内填充，content内容 float，三种取值，left，right，none， clear，清除浮动， overflow，溢出属性，定位position， 4

CSS常见兼容问题以及解决办法

阅读更多关于 CSS常见兼容问题以及解决办法

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。这里谈到的浏览器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。但更多的兼容还是考虑IE6/IE7/FF之间的斗争先来谈谈CSS Hack 　　我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. 　　CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。　　（1）IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。     　　 (2)CSS属性前缀法，即是给css的属性添加前缀。比如 * 可以被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10都可以识别 "\9"，IE6不能识别!important

网页布局基础

阅读更多关于网页布局基础

网页布局基础简介什么是网页布局？网页布局是网页制作的基础，使用DIV+CSS布局网页是基础中的基础。三种基本布局方式：流式布局，浮动布局，绝对定位布局。网页设计的特点：1：网页宽度可变 2头+内容主体（根据需要分栏）+页脚（不重要的内容）对长度设置百分比可实现网页自适应 W3C标准包括结构化标准语言，表现标准语言，行为标准语言，倡导结构，样式，行为分离。 CSS中，存在三种定位机制：标准文档流，浮动，绝对定位。标准文档流：从上到下，从左到右输出文档内容，由块级元素和行级元素组成。浮动：float属性left(左浮动) right(右浮动) none(不浮动) 元素会左移或右移，直至碰到容器为止。关于浮动的详细介绍参考我转载的《CSS浮动-float/clear》绝对定位： position属性拥有三种定位方式 1.静态定位(static) 2.相对定位(relative) 3.绝对定位(absolute fixed(固定定位)) 参考我前面的《CSS基础》有详细解释。相对定位的特点： 1.相对自身原有位置进行偏移 2. 仍处于标准文档流中，会占据原来的空间位置 3.拥有偏移属性和z-index属性，即空间层叠现象。绝对定位特点： 1.建立以包含块为基准的定位 2. 完全脱离了标准文档流 3.随即拥有偏移属性和z-index属性未设置偏移量时

第 2 章前端基础之CSS

阅读更多关于第 2 章前端基础之CSS

一、CSS语法 CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。 1 ''' 2 selector { 3 property: value; 4 property: value; 5 ... property: value 6 } 7 ''' 例如： 1 h1 {color:red; font-size:14px;} 二、CSS的四种引入方式 1、行内式行内式是在标记的style属性中设定CSS样式，这种方式没有体现CSS的优势，不推荐使用。 1 < p style ="background-color: rebeccapurple" > hello yuan </ p > 2、嵌入式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3、链接式将一个.css文件引入到HTML文件中。 < link href ="mystyle.css" rel ="stylesheet" type ="text/css" /> 4、导入式将一个独立的.css文件引入HTML文件中

css三列布局之双飞翼pk圣杯

阅读更多关于 css三列布局之双飞翼pk圣杯

三列布局：两边定宽，中间自适应！看到这个问题，我第一眼想的就是两边定宽float左右，中间加一个margin宽度自适应或者直接设一个overflow：hidden触发bfc机制，这样也可以，看上去也没什么问题，但是html中div的顺序却是 <div class = "left"></div> <div class = "right"></div> <div class = "main"></div> （就用class名字来代表它的位置）通常我们的主体内容是放在main里面的，但是在html的顺序中确是最后加载，因为如果最先加载main，main占据整行下面的left，right就不会自己浮动上去，所以这样肯定是不完美的！所以接下来我们介绍的两种方式就是完美的实现这种布局，让main最先加载，而且完美的解决兼容性问题。第一种叫做圣杯布局：思路是main left right全部float：left，这样，main就会不再具有块级元素的特性main的宽度设置100%同时，此时给left设置一个margin-left：-100%，给right设置一个margin-right：-它自身的宽度，这样我们就硬性的把它们放到了一行上，但是实际上此时left和right是覆盖在了main的两边，这样肯定是不行的！因为会遮盖一些我门想要展示的东西！所以我们还需要做一些事情

CSS核心概念之盒子模型

阅读更多关于 CSS核心概念之盒子模型

盒子模型(Box Model) 关于更多CSS核心概念的文章请关注GitHub—— CSS核心概念。当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子。所有 HTML 元素可以看作盒子，在 CSS 中， Box Model 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，每个盒子由四个部分（或称区域）组成：内容（Content），内边距（Padding），边框（Border），外边框（Margin）。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型（Box Model）： CSS 盒模型不同组成部分的说明： Content（内容） - 由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。 Padding（内边距） - 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。当其取值为百分比时，该百分比都是相对于包含该元素的块的宽度（相对于该块的百分比）。 Border（边框） - 由边框边界限制，扩展自内边距区域，是容纳边框的区域。即围绕在内边距和内容外的边框。 Margin（外边距） -

移动端两端对齐 + 图片宽度自适应

阅读更多关于移动端两端对齐 + 图片宽度自适应

自适应四宫格有这样一张设计稿，左右两边白色间距为4px，中间间距为10px，每一行的两张图是等宽的（即平分去掉间距后的宽度）有一种方法是和设计师商量，把所有的具体尺寸改为百分比尺寸。。这个布局不太好写的主要原因是，在宽度上，百分比（50%）与实际尺寸（4px 10px）混杂，所以做到宽度自适应的话会有困难。下面是正经的一种写法：图片单元float，宽度设置为50%，奇数单元设置margin-right为10px, 偶数单元设置margin-right为-10px。父元素设置左padding为4px，右padding为14px，父元素的padding值正好是所有间距的总和，所以它实际宽度的50%是正好符合需求的图片单元宽度。偶数单元的负margin（-10px）和父元素右padding（14px）会中和成4px的右边距（实际上是因为元素负margin会使其右边的元素向左移动并被其覆盖）运营的同学在实际操作中，做的图可能不会很标准，所以我们需要做一些简单地容错，即是图片垂直居中在图片单元内，图片单元设置padding-top为一个百分比，这个百分比为设计稿中图片的宽高比。这样即使图片有些误差也不会影响总体的排版布局，垂直居中的原理是 top 百分比的基数是父元素 translate百分比的基数是元素本身。实际代码如下 <dl class="four-item-list">

属性选择符、字体样式和元素样式

阅读更多关于属性选择符、字体样式和元素样式

属性选择符： body内的代码如下： <a href="##" class="columnNews">我的背景想变成红色</a> <a href="##" class="columnVideo">我的背景想变成红色</a> <a href="##" class="columnAboutUs">我的背景想变成红色</a><br/> <a href="1.doc">我的背景想变成绿色</a> <a href="2.doc">我的背景想变成绿色</a><br/> <a href="##" title="this is a box">我的背景想变成蓝色</a> <a href="##" title="box1">我的背景想变成蓝色</a> <a href="##" title="there is two boxs">我的背景想变成蓝色</a> <style type="text/css"></style>中代码如下： E[att]　　　　　　　　选择具有att属性的E元素。 <style type="text/css">a[class]{ background-color: red; /*含class属性的背景颜色变红*/ } </style> E[att="val"] 　　　　选择具有att属性且属性值等于val的E元素。　 a[class="columnAboutUs"]{

订阅 padding