web前端基础之css

 

 

display显示类型

【w3c】

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。

区别：

• display:none;（不占空间隐藏）
• visibility:hidden;（占据原空间）

嵌套规范

• 本身就要嵌套的：ul、li；dl、dt、dd；table、tr、td

 

• 块能够嵌套内联 

      <div>
          <span></span>
          <a href="#"></a>
      </div>

• 块嵌套块
  

   

      <div>
          <div></div>
      </div>
  
      特殊，p不能再嵌套
      <p>
          <div></div>
      </p>

   

• 内联是不能嵌套块

      错误的写法：
      <span>
          <div></div>
      </span>
  
      特殊：a标签可以再嵌套
      正确的写法：
      <a href="#">
          <div></div>
      </a>

溢出和隐藏overflow

【w3c】

overflow 属性规定当内容溢出元素框时发生的事情

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。overflow：hidden;
scroll	内容会被修剪，会显示滚动条以便查看其余的内容。无论是否溢出底部和侧边都有滚动条
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。
x、y轴	可以单独针对一个轴设置；overflow-x：auto；

透明度和手势opacity&

opacity属性设置元素的不透明级别

【w3c】

value	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。0.1/0.2/0.3/0.4......
inherit	应该从父元素继承 opacity 属性的值。

• 透明度为0还是占空间
• 所有的子内容也会透明

rgba：文字透明度

• A：Alpha透明度,取值0~1之间，同上
• 如果文字不变色，可设rgba：

cursor：鼠标手势

【w3c】

url	需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

自定义手势

• 图片：.cur/ico格式
• cursor：url（图片地址）,auto; auto是以防万一

最大最小宽高

小于等于，或大于等于

最小，

值	描述
length	定义元素的最小宽度值。默认值：取决于浏览器。
%	定义基于包含它的块级对象的百分比最小宽度。
inherit	规定应该从父元素继承 min-width 属性的值。

 

最大宽

none	默认。定义对元素的最大宽度没有限制。
length	定义元素的最大宽度值。
%	定义基于包含它的块级对象的百分比最大宽度。
inherit	规定应该从父元素继承 max-width 属性的值。

%换算，基于父元素宽高，如果父元素没有宽高，没有意义；

案例：一个容器怎么适应屏幕的高: 容器加height:100%; body:100%; html:100%;

html,body{ height:100%;}
.contrainer{ height:100%;}

 

 

 

 

 

456