css笔记

向右看齐 2022-07-21 11:18 158阅读 0赞

后代选择器（.div1 .li2 p） 交集选择器（h3.special） 并集选择器（h3,li）   
通配符 子选择器（div>p） 序号选择器（ul li:first-child） 下一个兄弟选择器（h3+p）  
  
  
交集选择器（无空格）： I6不兼容  
序号选择器（:first-child）：I8才开始兼容  
\*选择器：效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。  
儿子选择器>  ：IE7开始兼容，IE6不兼容。  
下一个兄弟选择器：IE7开始兼容，IE6不兼容。  
  
  
  
  
哪些属性能继承？  
color、 text-开头的、line-开头的、font-开头的。  
这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。  
  
  
层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！   
  
  
!important提升的是一个属性，而不是一个选择器  
!important无法提升继承的权重，该是0还是0  
!important不影响就近原则  
  
  
css 优先级理解：1.先比谁近谁近就是谁。2.如果一样近比权重谁的权重大就是谁。3如果权重也一样大就是比谁在下面就是谁  
  
  
!important：在一样近的条件下才能有效提高优先级。  
  
  
层叠的理解：多个样式作用于同一标签属性，谓之层叠。  
  
  
  
  
css中的width和height的含义和android中View的width和height的含义不同：  
css中标签的实际宽与高是其对应paddind+对应width/height+对应border.而android中width和height就是控件的实际宽度和高度。  
css中的四个padding只以内容的左上边为起点计算。而android的四个padding对应内容的四边来计算。  
  
  
border dotted 熟悉360浏览器显示为方形 火狐浏览器部分颜色显示比较浅  
  
  
css的盒子模型：所有的标签都可以看做盒子：由内层的width,height 外层的padding ，再外层的 border，margin组成。  
  
  
  
  
img 元素之间的空格的“默认空白”  
  
  
块级元素：可以设置宽高，默认占一行，默认父标签宽度。容器标签都是块级元素  
行级元素： 不能设置宽高。文本标签（除去P外都是行级标签）  
  
  
块级标签和行内标签的转换:  
转行内：display: inline; （又不能设置宽高）  
转块级：display: block; （变成块级又不能并排）  
  
  
标签脱离标准标签的样式限制：  
1.浮动 float: left;使元素脱离标准限制成为非标准流元素：不分块级和行级。能并排，能设置宽高  
根据是否非标准流元素：有不同体系的元素定位参照  
  
  
  div 浮动 文字<P>不浮动 文字围绕效果 文字不会被浮动的div 遮挡  
  
  
  浮动之间是相互影响的，如果浮动父标签的高度0，则不能约束其它浮动。  
  
  
  浮动的子标签是非标准流标签，不能给父容器撑出高度，但是如果浮动父容器中又存在非浮动标签，则会重新给父容器撑出所有孩子总高度。（具体原因不明，但是所有浏览器都支持这一效果）  
  
  
  清除其它浮动对自己的影响：clear: both  清除其它浮动对自己的影响 但是margin会失效（参照的浮动父高度为0）  
  1.隔墙法：两个浮动父容器之间建一个中间标签 clear: both  中间标签有高度  
   
  2.“内墙法” ：中间标签位于一个浮动父容器的内部（能重新撑出父容器高度，实用）  
    
  overflow:hidden 溢出隐藏:1.隐藏超出边框的部分 2.给只有浮动孩子的父容器重新撑出高度（实用）。  
  
  
浏览器兼容问题：  
微型盒子Bug：IE6不支持小于12px的盒子（小于12会自动等于12）:加\_font-size属性 解决  
加上下划线的属性只有IE6能看到(后门),如：\_background-color,\_font-size, \_zoom:1  
双倍marginBug：IE6 当连续浮动的元素有和浮动方向相同的margin时候。其相反方向的最边会出现双倍margin:故为了兼容性margin与浮              动方向相反 不应该最边\_margin使用hack 方式解决  
IE6 3像素Bug：浮动的子元素 同方向margin 多margin出三个像素（只有一个子元素，上面是连续的子元素）  
  
  
overflow:hidden清除浮动bug: IE6不支持其第二特性：撑出只有浮动孩子的父高度。 解决：追加\_zoom:1;  
  
  
伴生属性：追加如\_zoom:1属性解决bug的\_zoom:1  
  
  
margin的塌陷：标准文档流中竖直方向的margin是不叠加的,以较大的为准。  
如果不在标准流中，盒子都浮动，则没有塌陷现象，会叠加。水平不会有塌陷现象  
  
  
margin-left: auto;  
margin-right: auto;  
==  
marin:0 auto  居中自己效果（左右居中必须有明确的width，只有标准流的盒子 ）  
text-align:center  父容器中使用，水平居中容器内部文本（图片也是文本）  
  
  
text-indent:2em  缩进2个字符  
line-height: 一行文本的高度 文本自动居中  
  
  
子标签margin父标签是以父标签的border为参照 ：如果父标签border为0，则以在父标签外面找能找的参照。  
margin本质描述是同级标签的距离 而不是父子标签的关系。父子距离应该用padding  因为margin的兼容问题 应该善用  
  
  
font-family： 一般使用微软雅黑 宋体 黑体。如果要使用其他字体 为了兼容 需要切图。  
font:14px/24px "宋体";  大小 行高 字体  
英语：times new roman ,arial  
英语字体必须放在中文字体之前  
font: 字号/行高 字体,字体...  
a:link  a:visited a:hover a:active  顺序不能变。。。  
list-style:none 去除ul li 的小圆点  
background-image: url("2.jpg");     
background-repeat: no-repeat/repeat-x/repeat-y; //大背景图片+background-position 共同使用 防止滚动出现  
background-position: center center;  
1background-attachment:fixed;背景就会被固定住，不会被滚动条滚走。  
  
  
background:red url(1.jpg) no-repeat 100px 100px fixed;  
等价于：  
1background-color:red;  
2background-image:url(1.jpg);  
3background-repeat:no-repeat;  
4background-position:100px 100px;  
5background-attachment:fixed;  
  
  
  
  
多行文本居中：标签的高度减去总行高/2 获取toppadding值  增加toppadding 再高度减 toppadding   
2.定位：相对定位 绝对定位，固定定位  
  
  
相对定位：position: relative ; 相对自己的原来的位置，移动后 ，最初的位置的标签对周围的标签的作用不变。只是看起来移动了。留坑 微调元素位置 做绝对定位的参考  
  
  
绝对定位：position: absolute;top 相对于有定位的父辈元素border的左上内边界/页面左上角 bottom 相对页面左下角  
块级元素绝对定位后就就不是块级元素，原本默认的全屏宽度会变为0 ：margin 0 auto 会失效  
绝对定位的盒子水平居中： 先left50% 在左移动盒子长度的一半    绝对定位的子元素无视参考元素的padding  
  
  
子绝父相：就近原则。（实用）  
子绝父绝：就近原则。（一般不用）  
  
  
  
  
固定定位：脱标：并列的标准流元素会当其不存在。相对于浏览器窗口 左上角定位 IE6 不兼容  
  
  
  
  
  
  
z-index：只对定位的元素有效 （一般加相对定位-不脱标）  
从父现象：父元素的z-index的值不能盖住其他元素 儿子的值大也无用  
  
  
标准文档流的性质？  
非标准文档流的性质？