css div要点汇总

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1.子元素选择两种
h1 strong{color:red}意思是所有后代只要是strong就变成红色

h1>strong{color:red}效果同上但只对第一代后代元素有效

相邻兄弟元素

h1 +strong{color:red}

2.

3.使用background_position属性来提取子png图片

4.越来越觉得css和div的精髓在于层叠。

5.把元素<a>中放置一个图片，于是就做成了一个图片按钮。

6.div居中 margin-left:50%; margin-top:50%;position:relative;left:-200px;top:-200px;

7.设置cursor 为 pointer使一个div看起来像是按钮

8.不要忘记属性选择器 如：[title][type]

9.伪元素，伪类p:before/after{content:url(sss.gif)} li:hover{background-color:red;}

10.div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

<div>
some text
<p>Some more text.</p>
</div>

在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。

11.inline inline-block

inline：使用此属性后，元素会被显示为内联元素，对元素的宽高设置会失效，margin and padding仍然有效，完全表现的像是普通文本一样，元素则不会换行。
block：使用此属性后，元素会被现实为块级元素，元素会进行换行。
inline-block：是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。12.使用指定区域的背景除了用background-position属性外，还可以用background-clip来对背景图像进行剪裁。

13.关于半透明，我们设置一个div半透明，其中的所有div内容都表现出半透明，并不是因为opacity属性被继承了，而是半透明的作用即是对要整个框的子元素都应用半透明效果。

14.为了让div可以响应onblur事件，可以为div添加tabindex属性，类似于tabindex="10"

15.webkit类的浏览器会给input元素自动添加线框，可以设置outline:none来去掉这种线框。

16.padding不会影响width和height属性。

17.font里面设置行高的简便方法 font:12px/1.5

18.图像居中，一个是背景图像居中，使用background-position:center属性（background-position:top/百分比等都可以有相应的使用），再就是display:table-cell vertical-align:middle text-align:center;只不过IE不怎么兼容。

19.图片居中的代码

html：

css：

20.不要忘记 clip:rect(2,0,50,100)属性

21.margin部分不会响应元素绑定的事件。

22.div居中代码

23.元素浮动时可以包围其中的浮动元素，如果容器div不设置浮动，那它的宽度就为0（在不主动设置的情况下），这是需要添加额外的空元素使用clear:both来使容器div来自动包围全部区域内的元素。

24.需要声明<!DOCTYPE>来应对margin:auto在IE下不起作用的情况。

25.margin的百分比形式，是参考了父元素的宽度，无论是top还是left。而相对定位中的top是参考父元素的高度，left是参考父元素的宽度。

26.未知大小的div居中代码

27.不要忽视css的潜规则。

28.The text in a table is aligned with the text-align and vertical-align properties.http://www.w3schools.com/css/tryit.asp?filename=trycss_table_vertical-align

29.字体由大到小h1 h2 h3 h4 h5 h6

30.transition property transition duration 一种鼠标移入时的css3效果。

31.emmet快速编码神器

32.css注释 貌似只支持/*comment*/

33.注意到两个属性一个是div:active就是鼠标按下尚未弹起时可以设置元素的样式，还有input[type="button"]:disabled设置元素不可用时的样式。还应注意的是这些伪类的使用是和在样式表中的先后顺序有关的，否则很可能无效。

34.文字加黑可以用<h>系列，也可以用<b>

35.<i><i>斜体字 不要忘记rgba样式，textshadow样式 google 和 adobe联合开发的noto sans s chinese 字体  cssText设置属性

36.placeholder属性只在有的浏览器不支持的

37.box-shadow实现阴影效果

box-shadow:none|h-value,v-value,blur-distance,shadow-size,inset

38.border-radius:5px;//设置四个圆角的尺寸

border-bottom-right-radius:5px;//单独设置一个角的尺寸

39.渐变背景

http://www.w3schools.com/css/css3_gradients.asp

background:linear-gradient(bottom,red,blue,green);

40.子元素沉底方式

父元素设置为position:relative

子元素设置为position:absolute;bottom:0px;

41.注意啊，list-style-type只对ul 和 ol有效，对li是没有效果的

42.一个元素具有多个类时，应用空格隔开，e.g. <div class="style1 style2"></div>

43.<label><input type="ratio" name="sdds">sdssasdsasasdssda</label>整个label都会变成一个相应的区域

44.<blockquote>添加斜体样式的文本块

45.html自定义属性

<div id="newTest" myAttr="getAttr"></div>

1. $("#newTest").attr("myAttr");
2. $("#newTest").attr("newAttr","new");
3. 使用jquery可以不考虑兼容性问题

46.http://www.yiiframework.com/wiki/88/css-naming-conventions/   CSS命名规则

47.border-collapse用于合并边框 table 和td的边框可以同时存在

48.tr中除了td之外并不能放置其他的元素，要想这么做 请把相应的元素放在td中.

49.jquery为元素设置事件的时候要注意，如果在设置事件之后，DOM树中又增加了新的节点，那么之前设置的任何事件都对这些新节点不起作用，因此需要重新对需要响应事件的元素进行事件绑定。

50.对于inline-block的元素只需要vertical-align:middle即可让他们都垂直居中对齐。

51.浏览器在处理元素尺寸的时候可能存在这样一种逻辑，子元素撑开父元素，也就是说父元素的大小是由子元素推导出来的，在进一步根据父元素的大小调整子元素的大小或位置是不可行的会造成死循环。这么做有一定的合理性，但是如果是位置上的调整，我觉得可以这么来用

52.$('#element').toggleClass('classname')可以切换元素的类

53.css3好用的东西box-sizing:border-box可以让padding和border放到设定的width和height之内.

54.medea query即可实现响应式布局

55.前端设计的步骤，先准备好一个工具箱，控件化,一整套的js函数，标准化

56.css3的三个垂直居中属性align-content,align-items,align-self

57:root选择器在html中总是表示html节点

58.abbr标签表示缩写的意思,类似于span可以嵌入到文本中

59.hidden还是一个属性，:hidden [hidden]都可以作为选择器用

60.media设置的属性要想生效需放在其他的样式设置后面，并且如果元素设置了style属性，则这些属性总会覆盖掉其他方式设置的样式。

61.background-clip(content-box,border-box,padding-box)

62.^text文本显示为上标_text文本显示为下标

63.p:target target伪类，当超链接到某个元素时，设置这个元素的样式

64.float时left，top这些属性并不起作用，只有设置了relative属性时才起作用，同时如果设置了absolute属性，那么float属性失效

65.box-sizing设置为border-box会造成div的宽度等于其width-padding-border  子元素的百分比属性也是相对于这个值来做计算的，如果不是border-box,那么其width就是其width属性指定的值

66.<td class="line-number" value="106"></td>

.line-number:before{content:attr(value);}这样就不用在元素中嵌入 html文本，更利于js控制。

67.left可以用百分比配合自身宽度的百分比来实现居中,e.g. width:80%;left:10%;

68.元素可以添加多个阴影中间用逗号隔开，before after也可以增加可见元素的数量

69.div:hover span{display:block}可以用来设置鼠标移入的弹出效果

需要注意的是这种写法，如果效果是针对的其他元素的那么可能需要加！important来提高相应的优先级

70.::before ::after伪元素必须要加content属性才能有效果

71 ::selection{background:red}设置选中文本区域的背景颜色

72.dd元素如果没有内容那么margin就不会生效，比较适用于用户名密码登录的时候

73.把在写js的时候尝试着把某一类的功能封装成一个json对象

74.纯css实现菜单展开折叠

75.还有一种css实现div切换的方法 input type="radio"配合 锚点 #

76.通过:target伪类来设置href "#target"所关联的一些样式

77.建议用translate3d代替translate这样会触发移动端的硬件加速功能，提高性能

78.backface属性？

79.box-reflect配合渐变实现倒影效果

80.backface-visibility:hidden 对于旋转元素来说背面是否可见，或者说在三维空间内，元素旋转到一定程度背面出现在屏幕上，是否显示

81.善用fieldset 和legend

82.持续关注webcomponent的发展，polymer

83.一个好看的颜色 rgb(236,236,236)

84.注意学会用css display:flex进行布局

85.position:fixed bottom:0px 是相对于浏览器底部0px 也就是说即使有滚动条，窗口垂直缩小后，改div仍然贴在底部，不会被盖住

86.在table 的td中,只要td没有设置固定的高度，元素设置height:100%是没有什么效果的,我考虑不只是在td中是这样的效果，在div中也应该是这样的效果

87.html的em元素用来表示强调，通常用斜体显示

88.input和button存在上边界不对齐的情况，这时需要调整vertical-align，如果是中间留有空隙，那可能是因为input和button存在换行，去掉换行即可

89.text-overflow对多行文本是无效的，而且他的生效需要配合其他white-space:nowrap 以及over-flow:hidden才可以

90.css中的自适应很少是指高度的自适应，其实只要一个宽度自适应就足够了

91.bootstrap中的container和col-xx-xx其实是一样的只要是定义了margin-left:-15px;margin-right:-15px;这样的就是row， 定义了padding-left:15px;padding-right:15px;这样的就是col因此当一个row里嵌套一个col的时候实际上col的边界正好就到达了row的边界

92. bootstrap的addon和feedback 如果指定了form class="form-horizontal" 则 div class="form-group"的行为会有所不同，这里面暗含了一层意思，就是说如果你要用form-horizontal ,那么你在form-group中的元素需要包裹在col-xx-xx里面,这样就允许你在form-group里面做更精细的dom元素控制，这时的form-group就像.row一样有margin-left(righ):-15px,而且 form-control-feedback也会right:15px意味着因为有col-xx-xx的padding:15px的存在，feedback的位置必须向左移动15px

需要指出的一点是input-group-sm 必须和input-group 配合使用，不能单独使用,这点有点类似于 btn btn-default类似，你拿单纯一个btn-default是没有预期的效果的。

93.bootstrap中要实现菜单折叠的效果需要对navbar中的nav元素进行包裹，并且设置一个button按钮，来控制展开和折叠  <button class="navbar-toggle" data-target="#target-id" data-toggle="collapse" ></button>

<div class="navbar-collapse collapse" id="target-id" style="height:1px;" ></div>

94.bootstrap的三个堆叠的临界点，以及container在超过临界点之后的变化临界点768,992,1200 container 750, 970, 1170，此外嵌套的div column产生堆叠的时机仍然以device width为准，而不是其父元素的宽度，这和我之前的预期不太一样。

div如果没有浮动绝对定位什么的，会自动在水平方向延展，也就是说即使添加了margin和pading也不会使宽度超过容器宽度。

95.bootstrap中用

<div class="clearfix visible-xs-block"></div>来清除浮动 visible-xs-block代表在小设备下可见。

96.可以用text-align:right来让按钮居右

97.iframe如果不涉及到跨域的话，可以考虑用js实现自适应高度，但是如果是跨域则不能，这时可以采取折中的方案，容器页面的高度设置成100%, frameborder="no" iframe的高度设置成99.8%, 之所以不设置成100% 是因为如果设置成100%会造成主窗口出现垂直方向的滚动条，如果iframe有垂直方向的滚动，则会并列两条滚动条。

98. clear:both的作用The clear property specifies on which sides of an element floating elements are not allowed to float，这个属性只对应用clear属性的元素的前面已经浮动的元素产生影响，对其之后的浮动元素不起作用，这就是为什么clear:right元素如果后面跟一个float:left元素，那么并不会导致float:left元素换行。

99. inline-block和inline区别不大，行框包含行内框，重点是如何组织行内框， 根据一系列的试验表明， 行内框根据vertical-align被串成一串，用一个行框将这一串行内框打包，这样行框的高度，就等于行内框串垂直方向上相对位置最高的元素的上边缘和相对位置最低的元素的下边缘的距离。

100. aligns the vertical midpoint of the box with a point that’s half the parent’s x-height above the baseline of the parent box x-height指的是字母x的高度

101. absolute重要特点， 具有跟随特性但不实际占据空间

102. css3 有calc属性

103. absolute left:0 right:0 width:50% margin:auto可以实现居中效果, 通过这个居中效果的分析，得知absolute元素并不直接浮动，它应该有一个父容器，它的这个父容器才是浮动的，而left， right， top， bottom这些属性是规定了这个父容器的边界，在这个父容器中，absolute元素并没有浮动特性，给他一个width是指他在父容器中的width，既然在父容器中被当成一个普通元素，margin:auto生效也就理所当然了,但是它的纵向拉伸的特性也是，普通div所不具备的特性

104.利用absolute的跟随特性和text-align:center/right可以实现一些居中居右的效果

105.:after, :before这些元素只是被看成是其主元素的子节点，二者不是同级的。

106.viewport的理解，viewport是一个虚拟的窗口，移动浏览器并不直接在设备浏览器窗口上绘制页面，而是先在这个虚拟窗口上绘制页面，绘制的时候这个虚拟的窗口有一个默认的宽度，就是980px,当然随设备屏幕大小不同会有所不同，在虚拟窗口上绘制好后会按一定比例映射到实际的设备浏览器窗口上，这个映射的比例就是initial-scale, 可以根据这样一个公式来计算， = 1_viewport_pixel  = initial-scale * 1_logic_pixel

107. 什么时候用自适应，什么时候用固定尺寸，应该有一个好的安排，一些地方是必须用固定尺寸的，老想着自适应往往不能实现想要的效果。

108. 如果两个block元素的margin相接，那么会产生合并这是标准规定的，但是如果带有margin的block元素尺寸为0，那么他的下边距表现的好像不存在一样, 浮动元素的margin不会合并，即使他的size为0

109. 如果对tabel-cell元素应用float:left那么他自身的vertical-align:middle将会失效，而且相邻的tabel-cell元素的自动等高性质也会被破坏，而表现出一般的行框对齐性质，这时对相邻的tabel-cell元素应用vertical-align:middle那么它又会表现为自动等高. input之类的元素不会自动等高

110.float元素和table-cell元素合在一起排放的时候，他们container的高度是由table-cell元素的高度决定的

111.比较重要的一点就是所有这些关联性质都需要table-cell处于同一个table中

112.含有浮动元素的元素，仍然会被其中的inline-block元素撑开，可以适当利用这个特性,实现类似于table-cell自动两栏宽度的效果.

113.如果没有指定父元素为display:table, 相邻的 table-cell元素会被认为是同属一个table, 除非是一些table-cell元素是input之类的，他们会被认为是单独属于一个table, 造成换行。

114.高度自动撑开，footer始终居底

<style>

.container{min-height:100%;position:relative;}

.footer{visibility:hidden;}

.footer-dummy{position:absolute;bottom:0;width:100%;}

</style>

<div class="container">

<div class="header"></div>

<div class="main"></div>

<div class="footer"></div>

<div class="footer-dummy"></div>

</div>

//table-cell方案

<html><head>
<title></title>
<style type="text/css">
html,body {
margin:0;
height:100%;
}
</style>
</head>
<body>
<div style="display:table;height:100%;width:100%;">
<div style="display:table-row;height:1%">
<div style="display:table-cell">asfasdfasd</div>
</div>
<div style="display:table-row">
<div style="display:table-cell">asdfad</div>
</div>
<div style="display:table-row;height:1%">
<div style="display:table-cell">
<div style="
height: 200px;
background: red;
"></div>
</div>
</div>
</div>

</body></html>

有些属性的生效需要设置<!DOCTYPE html>

115.z-index 和stack context有关系，所有元素都处在stack context之中，所有元素默认的z-index值都是auto，stack context可以嵌套，只有定位元素才会导致创建新的stack context

在同一stack context中，元素的层叠水平遵循一定的规则 1. stack context 的background 和 border < 2.z-index为负值的元素 <3.block元素<4.float 元素 <5.inline-block/inline元素<6.z-index auto 元素7.z-index为正的元素

其中 2,6,7条都是需要元素为定位元素的，也就是说一个position:relative;的元素会比普通元素层叠顺序要高，即使这元素并没有创建层叠上下文，或者说同一stack context中的元素同样是z-index:auto,定位元素的叠放次序要高，最重要的一点所有元素的叠放次序都与层叠上下文以及层叠上下文的嵌套关系有关，而与元素的父子关系无关

116.注意使用position:sticky和overflow-scrolling:touch

117.css开发中哪些元素是需要固定尺寸的，哪些是不需要固定尺寸的，需要有一个很好的规划，这其实不是单独的某一个元素，而是水平方向上会有一些固定尺寸的限制，或者垂直方向上有时也是需要的

118.margin负值不会影响其他元素的布局，实际上margin负值的元素还是会占据原来的空间，但是负值的部分好像不存在一样，不会影响其他元素布局，而margin正值除了保证元素不带margin时的空间外，还占据一些额外的margin空间

119.position:absolute;top:0;bottom:0垂直居中原理, 这里需要指定高度比如height:100px; height的作用是会覆盖top:0;bottom:0的作用，这是因为，相当于在absolulte元素外面又套了一层容器，或者说top:0;bottom:0;不是控制元素本身的，而是确定新开辟的用来放置absolute元素的区域的尺寸

120.float元素和inline-block元素的作用表现会因为float元素和inline-block元素的先后位置关系而不同，如果float在前则float元素的位置不受显式的或隐式的<BR>元素的影响，优先浮动到右边，其他inline-block元素如果右侧有足够空白放置float元素则其位置不会受影响，形成文字环绕效果，如果没有足够空间则会下移，直到自身和float元素都互相不重叠为止；如果float元素出现在其他inline-block元素后面，则float元素的位置受显示或隐式的<BR>元素的影响，如果存在显式或隐式的<BR>元素，则float元素会排到这些元素下面，如果没有这种<BR>，那么会优先排列float元素，其他inline-block 如果和float元素有重叠则下移，否则显示在正常位置

white-space:normal会造成一些隐式的<br>现象，或者说是自动换行

121.小技巧 可以按住shift来切换chrome调试器中的颜色显示模式。

122.可以使用border transparent增大热区

123.margin可以自动合并，表现为子元素的margin会和父元素的margin合并,解决办法是在父元素上架 overflow:hidden

124.font-family:'Segoe UI', 'Microsoft Yahei';这样有一个好处，就是对于英文可以使用Segoe UI字体，对中文使用Microsoft Yahei字体，是比较好的一种字体方案，一开始我是有误解的，以为就是按顺序找到哪种字体就是用哪种，并不区分中英文

125.虽然用transform scale缩小后留有空白，但仍然可以对缩小后的div进行裁剪，办法就是在transform 的元素外面再加一个包裹元素。

126.注意css选择器的优先级，作用范围越精确的选择器优先生效 .button 和 a相比，a优先生效

127.好用的text-shadow效果

1. text-shadow: 0 1px 2px rgba(255,255,255,.5);
2. text-shadow: 0 1px 0 rgba(255, 255,255,.5);