CSS常用代码片段整理

首先推荐使用ReactJS框架实现HTML的组件化

1、图片自动缩放代码

img

{

display: block;

width: 100%;

}

2、背景图片自动缩放

background-image: url(../Images/Content1.jpg);

background-size: 100% 100%;*/

}

3、margin、position、float设置位置定位

三种布局：1. 行布局（默认布局方式）；2. 列布局（使用float或Flexbox）；3. 定位布局（使用position）

当使用absolute绝对定位时，必须指定参照物，然后进行定位；

而成为参照物的条件是：1. 是目标元素的父元素或祖先元素；2. position属性的值不能为static（默认值）。

成为参照物的元素，其position属性值可以是 absolute、relative、fixed。因为absolute 是父容器内的绝对定位，会使元素脱离文档流，必须需要参照物。

而relative 是相对文档流默认位置的相对定位，也就是相对于元素本来应该出现的位置的定义，所以不需要明确指定参照物。

absolute的参照物，其中relative是最常见的，因为将元素的position属性设置为relative，不会使该元素从标准的文档流脱离出来（也就是没什么影响）。

所以，postion属性是需要有参照物的，absolute是绝对定位，它自身会脱离文档流，不占用宽度和高度。因此，一般absolute绝对定位是需要指定元素的宽高的，不然内容不会显示。

而相对定位是需要占用宽高的，因为没有脱离文档流。

代码示例：

<style type="text/css">

.relObj { position: relative; }

.absObj { position: absolute; }

.container {width: 300px; height: 200px; border: solid 1px gray; }

.closeBtn {color: red; font-weight: bold; cursor: pointer;

top: 1px; right: 1px; }

</style>

<div class="container relObj">

<div class="closeBtn absObj">X</div>

</div>

“float” 主要用来进行列布局的；脱离文档流进行排版使用。
行内元素（内联元素，

除了“img、button、input”）是不能设置width、padding-left、padding-right等属性的。

如果你需要设置这些属性时，同时又不想它独占一行空间，就需要设置这个内联“display: inline-block”，不会脱离文档流。

“inline-block”用得不是很多，大多数情况下“block”是可以替代“inline-block”的。

5、CSS空格和>的差别

.ui-btn-icon-notext . ui-corner-all{} 中间是空格表示： “.ui-btn-icon-notext” 下所有的“. ui-corner-all‘子和孙元素等。

" 〉"仅仅表示子元素节点，不包括孙元素。

6、Jquery初始化事件的写法

$(function(){})是jquery ready() 方法的简写。完整是$(document).ready(function(){});，当然$(document).on('ready',function(){});这样写也可以。
ready是当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

在页面加载完成（即 window.load 事件发生）时执行，所以所有 jq 的预处理代码都应放在他里面。如果放在外面，则可能因为 jq 未加载完毕而失败

4、data-role="none”清楚JQM设置样式，JQM会默认设置一些样式给button、link这些元素。<a href="#" data-role="none">回报</a>。

5、表单元素在手机中点击时会出现边框

* {

padding: 0;

margin: 0;

-webkit-tap-highlight-color: rgba(0,0,0,0);

}

“-webkit-tap-highlight-color: rgba(0,0,0,0);”：表单元素在手机中点击时会出现边框，这里写样式可以取消边框。

6、Body属性

body {

font: 16px/2 'Helvetica Neue', Helvetica, STHeiti, 'Hiragino Sans GB', sans-serif;

color: #ccc;

-webkit-text-size-adjust: 100%;

text-size-adjust: 100%;

text-transform: none;

speak: none;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

background: #f2f2f2;

}

font字体大小，行边距等是可以使用除法进行设置的。

Helvetica是苹果电脑的默认字体

STHeiti苹果黑体字体

Hiragino Sans GB冬青黑体

sans-serif就是无衬线字体，是一种通用字体族。常见的无衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。font-family最后加上sans-serif，也是为了保证能够调用这个字体族里面的字体，因为大多数计算机里都有这种字体。

“-webkit-text-size-adjust”: 100%:通常 iPhone（iOS4）横屏时，「-webkit-text-size- adjust」 的值约为140%。所以如果想取消 iOS 设备横屏切换时候字号变大，正确的用法应该是：

「-webkit-text-size-adjust:100%;」

“text-size-adjust: 100%;”：iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能。

text-transform: none;默认值也为none

“speak: none;"取消发音

“-webkit-font-smoothing: antialiased;”：CSS3反锯齿,在MacOS上才有效果。

“-moz-osx-font-smoothing: grayscale;”火狐浏览器抗锯齿效果。

7、H5的Header标签本来就固定在头部，不用Position:fixed。

header {

background: #f60;

color: #fff;

line-height: 40px;

height: 40px;

transition: all 0.1s;

}

“transition”:css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。可用于滚动时改变Header的大小。

transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：<time>为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。默认大小是"0"，也就是变换立即执行，没有延迟。一般搭配“transform”一起使用。

8、Flex属性定义

.flexbox {

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

}

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。
伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。

设置一个简单的伸缩容器很容易，代码如下：.container { display: flex;}

9、a元素背景按钮

header .btn a.icon-uc {

background: url(../images/icon-uc.png) center center no-repeat;

background-size: 16px auto;

}

现在不流行使用input标签做按钮，因为它有一些默认的交互样式，而且不好做成自动适配内部内容的按钮。

10、文字前用图标

h2 {

line-height: 32px;

font-size: 15px;

font-weight: normal;

margin: 0 12px;

padding: 0 12px;

position: relative;

color: #666666;

}

h2:before {

content: '';

position: absolute;

left: 0;

top: 8px;

width: 2px;

height: 15px;

background: #f60;

border-radius: 1px;

}

使用before和after伪元素可以减少HTML元素的嵌套的需要。

写起来方便简单，它不会改变文档结构。如果是div的话需要各种布局；
h2:before跟h2是同级的。

11、对图片使用半透明效果

.tit {

position: absolute;

left: 0;

bottom: 0;

height: 27px;

background: rgba(255,255,255,0.8) url(../images/bg-item-tit2.png) right bottom no-repeat;

background-size: auto 16px;

width: 100%;

overflow: hidden;

}

12、Li多列并排显示

li:first-child {

width: 27%;

/* text-align: left; */

}

li {

float: left;

box-sizing: border-box;

padding: 10px 12px;

line-height: 1.2;

width: 46%;

text-align: left;

position: relative;

}

li:before {

content: '';

height: 24px;

position: absolute;

left: -1px;

top: 50%;

margin: -12px 0 0;

width: 1px;

background: #eee;

}

“:first-child”设置第一个元素的宽度。before在li的前面加一个分割线，“left: -1px”可以使第一个分割线隐藏掉。

box-sizing: content-box|border-box|inherit;

content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit

规定应从父元素继承 box-sizing 属性的值。

13、多个Icon在同一个图片(雪碧图)上，修改背景“background-position”位置切换图标

icon-col {

background-position: -8px -29px;

}

14、清除浮动

.clearfix:after {

content: '';

display: block;

clear: both;

}

避免子元素使用浮动是，受本元素浮动的影响。所以在使用浮动后再把本元素的浮动清除掉。

15、li:nth-child(4n+1)

根据间隔数定义子元素

16、重新定义HTML常用行内字体元素

b, i, cite {

font-style: normal;

font-weight: normal;

}

17、使用伪元素使图片元素居中显示

a:after {

content: '';

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: url(../images/bg-video.png) center center no-repeat;

background-size: 70px;

}

18、侧边框的定义

{

width: 44px;

position: fixed;

right: 0;

bottom: 0;

background: rgba(102, 102, 102, 0.9);

padding: 5px 0;

}

19、使用a元素代替button、input，因为a元素没有button、input的默认效果。

20、白色圆边框图片

img {

width: 64px;

height: 64px;

border: #fff 2px solid;

border-radius: 50%;

}

21、img {

border: none;

vertical-align: top;

max-width: 100%;

}

22、文本左边，末尾有箭头

span {

display: block;

border-bottom: #F2F2F2 1px solid;

background: url(../images/icon-back.png) right center no-repeat;

background-size: 12px auto;

}

这里用span作为容器，然后箭头图片作为背景。控制好背景图片的位置即可，不用span里面再套一个元素去表现箭头。减少HTML元素的嵌套。

23、定义个圆形按钮

a {

display: inline-block;

vertical-align: top;

background: #CCCCCC;

color: #fff;

padding: 0 50px;

border-radius: 20px;

line-height: 32px;

box-shadow: 0px 1px 3px #999;

}

24、文字后面跟个按钮，通过Backgroud实现

b {

display: inline-block;

vertical-align: top;

background: url(../images/icon-fill.png) right center no-repeat;

padding: 0 24px 0 0;

background-size: 20px auto;

}

25、文本输入框

input {

display: block;

box-sizing: border-box;

width: 100%;

border: #EAEAEA;

height: 40px;

border: #EAEAEA 1px solid;

border-radius: 20px;

box-shadow: inset 0 0 2px #F1F1F1;

padding: 0 20px;

}

input, textarea, select, button {

font: inherit;

outline: none;

-webkit-appearance: none;

border-radius: 0;

}

26、flexbox的设置

flexcol {

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

-ms-flex-direction: column;

-webkit-flex-direction: column;

flex-direction: column;

}

flexbox {

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

}

27、

.cap {

width: 86px;

text-indent: 15px;

color: #666;

}

28、Table的设置

table {

background: #fff;

font-size: 12px;

line-height: 1.5;

text-align: center;

width: 100%;

color: #666;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

<table>

</colgroup>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody></table>

这里的<colgroup>

</colgroup>

是什么东西？ 看到这里了

29、设置间隔行的样式

tr:nth-child(2n) td {

background: #F7F7F7;

}

30、Tab页实现两个页面切换的设置

</ul>

.uc-modify .tab {

height: 32px;

margin: 0 56px;

box-shadow: 0px 1px 3px #999;

border-radius: 16px;

overflow: hidden;

}

.uc-modify .tab li.now {

background: #f60;

color: #fff;

}

31、How to set the shortcut for the browser(e.g.Chrome) of mac about SideBarEnhancements in sublime 3???

How to set the shortcut for the browser(e.g.Chrome) of mac about SideBarEnhancements in sublime 3???

In the windows ， do the following set on "SideBarEnhancements" can make the web page quickly open in the browser.

[

{ "keys": ["ctrl+shift+c"], "command": "copy_path" },

//firefox

{ "keys": ["f1"], "command": "side_bar_files_open_with",

"args": {

"paths": [],

"application": "C:\\software\\Browser\\Mozilla Firefox\\firefox.exe",

"extensions":".*"

}

//chrome

{ "keys": ["f2"], "command": "side_bar_files_open_with",

"args": {

"paths": [],

"application": "C:\\Users\\Mr.DenGo\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",

"extensions":".*"

}

//ie

{ "keys": ["f3"], "command": "side_bar_files_open_with",

"args": {

"paths": [],

"application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",

"extensions":".*"

}

//safari

{ "keys": ["f4"], "command": "side_bar_files_open_with",

"args": {

"paths": [],

"application": "C:\\software\\Browser\\Safari\\safari.exe",

"extensions":".*"

}

//opera

{ "keys": ["f5"], "command": "side_bar_files_open_with",

"args": {

"paths": [],

"application": "C:\\software\\Browser\\opera\\opera.exe",

"extensions":".*"

}

]

But in the Mac ，how to set SideBarEnhancements in sublime3？？？

e.g.

F1 open chrome .

F2 open sifiri.

I'm not very good at using MAC system (10.10.3).

Best to give a configuration file, thank you very much.

32、<base target="_self">

这句的作用是什么？

33、垂直居中的弹窗

</ul>

</div>

</div>

.share {

position: fixed;

top: 0;

bottom: 0;

width: 100%;

background: rgba(0,0,0,0.5);

}

.flexcol {

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

-ms-flex-direction: column;

-webkit-flex-direction: column;

flex-direction: column;

}

.flexbox {

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

}

.flex {

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

-webkit-flex: 1;

flex: 1;

}

.share-box {

width: 262px;

margin: 0 auto;

background: rgba(255,255,255,0.95);

border-radius: 2px;

}

.wrap { width: 100%; height: 100%; overflow: hidden; }

$('.icon-share').click(function(){

window.scrollTo(0,0);

$('html, body').addClass('wrap');

$('.share').show();

$('.side').hide();

});

$('.share').click(function(){

$('html, body').removeClass('wrap');

$('.share').hide();

$('.side').show();

});

为什么“<div class="flex"></div>”可以起到撑屏幕的作用？？？

“wrap”是干什么用的？

34、滚动页面加载JS脚本

if(document.getElementsByTagName('header').length){

window.onscroll = function(){

//滚动窗体，控制Head大小

if(this.scrollY){

document.getElementsByTagName('header')[0].classList.add('head-fixed');

}else{

document.getElementsByTagName('header')[0].classList.remove('head-fixed');

};

//这里是判断的什么？？？

if(typeof(lazyload) != 'undefined'){

if(scrollY == $('body').height() - $(window).height() && lazyload.ctrl){

getLazyload()

};

//异步加载数据方法

function getLazyload(){

$.ajax({

url: lazyload.url,

async: true,

cache: false,

dataType: 'text',

success: function(data){

$(lazyload.target).find('.load-error').remove()

$(lazyload.target).append(data);

if(++lazyload.pn > lazyload.count){

$(lazyload.target).append('<div class="load-finish">已经到达底部</div>');

lazyload.ctrl = 0;

};

error: function(){

$(lazyload.target).append('<div class="load-error">加载出错，请拖动重新加载</div>');

}

});

};

35、触摸元素，元素变为半透明

var $hover = 'a, button, input[type=button], input[type=submin], .btn';

$('body').on('touchstart', $hover, function(){

$(this).addClass('hover');

}).on('touchmove', $hover, function(e){

$(this).removeClass('hover');

}).on('touchend', $hover, function(){

$(this).removeClass('hover');

});

“$hover”设置为元素组，可以绑定事件到一组元素。

问题：“input[type=submin]”，“type=submin”是什么？？？

36、Tab标签切换

$('.detail-tab li').click(function(){

$(this).addClass('now').siblings().removeClass('now');

$('.detail-item').hide().eq($(this).index()).show();

if($('.detail-item').eq($(this).index()).find('.investor') && typeof(lazyload) != 'undefined'){

lazyload.ctrl = 1;

};

});

37、切换“opera”样式

$('.side .icon-col, .side .icon-fol').click(function(){

$(this).toggleClass('opera');

});

38、屏幕滚动到顶部

$('.icon-top').click(function(){

window.scrollTo(0,0);

});

39、重设浏览器样式

* { padding: 0; margin: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }

body { font: 16px/2 'Helvetica Neue', Helvetica, STHeiti, 'Hiragino Sans GB', sans-serif; color: #ccc; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; text-transform: none; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #f2f2f2; }

img { border: none; vertical-align: top; max-width: 100%; }

a { color: #000; text-decoration: none; transition: all 0.1s; }

li { list-style: none; }

b, i, cite { font-style: normal; font-weight: normal; }

table { border-collapse: collapse; border-spacing: 0; }

input, textarea, select, button { font: inherit; outline: none; -webkit-appearance: none; border-radius: 0; }

40、伪元素可以实现小图标的定位，position可以实现元素的定位，float＋margin可以实现元素的定位。

41、JS获取不到拼接的html中元素的 id等其它属性？？？

$('.icon-share').click(function(){

window.scrollTo(0,0);

$('html, body').addClass('wrap');

$('.msg-box').html('<h4>分享到</h4><a class="icon-close" id="lastname" href="#"></a> <ul class="clearfix"> <li><a href="#"><img src="images/share-wx01.png" ></a> <span>微信</span> </li> <li><a href="#"><img src="images/share-hyq01.png" ></a> <span>朋友圈</span></li> <li><a href="#"><img src="images/share-wb01.png" ></a><span>微博</span></li> </ul>');

$('.msg').show();

$('.side').hide();

});

$('#lastname').click(function(){

$('html, body').removeClass('wrap');

$('.msg').hide();

$('.side').show();

});

点击 a 元素单击事件不会被触发

42、捕获不到单击事件

$('＃bt-cancel').click(function(){

$('html, body').removeClass('wrap');

$('#ordersbox').hide();

});

43、主要作用是在元素的后面清除浮动？

.clearfix:after {

content: '';

display: block;

clear: both;

}

44、Swiper插件的使用

</div>

</div>

</section>

var swiper = new Swiper('.nav-swipper', {

pagination: '.swiper-pagination',

slidesPerView: 4,

paginationClickable: true,

spaceBetween: 0,

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

});

.nav-swipper{background: #F2F2F2;height: 78px;box-sizing: border-box;}

/*.nav-swipper .swiper-wrapper{margin: 0px 24px;}*/

.nav-swipper .swiper-slide {margin: 0px;text-align: center; font-size: 13px;color: #999; background: #F2F2F2; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }

section.swipper {border-top: 1px solid #979797;padding: 0px 24px;position: relative;}

section.swipper .swiper-button-prev{top:50%;background-image:url(../images/swiper-pre.png);background-size: 12px auto;left: 10px;right: auto;width: 12px;height: 19px;}

section.swipper .swiper-button-next{top:50%;background-image:url(../images/swiper-next.png);background-size: 12px auto;left: auto;right: 10px;width: 12px;height: 19px;}

.nav-swipper span { display: inline-block; vertical-align: top;height: 64px; }

.nav-swipper b { height: 42px; display: table-cell; vertical-align: middle; width: 42px; text-align: center; background: #F7F7F7; border-radius: 50%; border: #fff 1px solid; color: #ccc; box-shadow: 0px 1px 3px #999; }

.nav-swipper span.now b{border-color: #FF6602;}

“swiper-button-next”和“swiper-button-prev”两个button是可以脱离在“swiper-container”外面的。因为“swiper-container”的Margin-left起作用，但是Margin-right不起作用（设置了over-flow:hidden），所以可以在“swiper-container”外面加一个容器，然后设置它的padding，再把“向左、向右的按钮”放在padding里面。

43、记住如果元素在页面初始化的时候不存在，而是之后通过动态生成在页面中的，要对这些元素进行操作，例如 click, blur, keyup, change....，都要使用 on

44、Flex用法

内部元素自动伸缩撑满整个父元素。内部元素也要设置Flex属性，设置内部元素所占的百分比。

http://www.w3cplus.com/css3/flexbox-basics.html

http://ued.ctrip.com/blog/wp-content/webkitcss/prop/flex-wrap.html

内部元素Flex定义：.flex { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; }

父元素Flex定义：.flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }

父元素方向定义：.flexcol { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }

45、用a做按钮要注意设置href="#"（跳转到本页面顶部）或者href="javascript:;"，或者直接去除href，防止页面刷新。

46、Flex垂直居中（必须设置了高度才可以,或者设置“position: fixed; top: 0; bottom: 0; width: 100%;text-align: center;”）

.flexbox-container {

display: -ms-flex;

display: -webkit-flex;

display: flex;

-ms-flex-align: center;

-webkit-align-items: center;

-webkit-box-align: center;

align-items: center;

height: 100%;

}

垂直居中：

</div>

两个Flex之间夹着内容

47、margin: 0 auto; 可以是元素横向居中

48、地址栏光标偏移，光标大小

49、使用rem的元素是不是都有从小变大的效果

50、<base target="_self">

<base> 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

self 就是当前页面

target就是点击链接后跳转到的目标页。
通俗点说，就是你当前页面上的链接<a>，也包括<img>、<link>、<form>，除非你指定了target，如<a heft="" target="_blank">链接一</a>，否则都会按照<base target="_self">的规定在_self（本页面）打开。这个base target=""还可以是top、_blank、parent或者其他frame名称。

为了提交数据或者什么的，防止链接到新的页面，于是就在本页面操作，其实就是为了生存新的页面

51、font: 0.16rem/2 直接写0.08rem不就行了，为什么要写0.16rem/2 ？？？

52、px和rem是怎样的渲染关系？？？为什么padding有时候用px没问题，用rem有问题。

53、CSS3 Filer效果

54、“textarea”的"padding-right"不起作用 kky_001

55、“checkbox”制作

56、vertical-align（设置在inline-block的子元素上）

vertical-align只对“inline-block”元素起作用，所谓inline-block水平的元素，就是既可以“吸”又可以“咬”的元素，既可以与inline水平元素混排，又能设置高宽属性的元素。哪些元素呢，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

虽然vertical-align属性只会在inline-block水平的元素上期作用，但是其影响到的元素涉及到inline属性的元素，这里千万记住，inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用，而是受制于整个line box的变化而不得不变化的。

57、opacity:规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

58、使用CSS3的appearance属性改变元素的外观。-webkit-appearance: none; */，使用了这个属性，checkbox默认可以勾选的行为就不见了，why??? 设置了这个属性checkbox怎么做比较好？

59、div居中：margin:0 auto

60、JS设置伪元素的样式

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

.techbrood.change:before{
width: 100%;
}

$('#td_pseudo').addClass("change");

61、“text-align:center;”：对行内元素有作用

62、sublime下运行“CSSComb”没有任何反应？？？

.m-1

{

font-size: 4px;

line-height: 5em;

position: relative;

top: 2em;

bottom: 1em;

left: 2em;

right: -0.2em;

display: inline;

display: none;

display: flex;

visibility: hidden;

float: left;

clear: both;

width: 15em;

min-width: 960px;

max-width: 1024px;

height: 5em;

height: 100%;

min-height: 100%;

margin-top: 3em;

margin-right: auto;

margin-left: auto;

margin-bottom: -4em;

padding-top: 4em;

padding-bottom: 2em;

list-style: none;

text-align: center;

color: red;

border: solid 1px #000;

background: blue;

justify-content: center;

}

63、水平居中

width要设置为100%，内联元素要设置为inline或inline-block

posted on 2016-01-07 22:55 [CC] 阅读(429) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

CC

CSS常用代码片段整理

导航