码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础

时间:2017-09-10 15:50:39      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:css选择器   over   浮动   块元素   外边距   text   ted   blog   first   

盒模型术语翻译
element
padding
border
margin

  • margin 0 auto
  • padding 20px 0 0 20px;
  • margin-top:20px;

margin溶解
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

css定位

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

position:static absolote relative fixed,

包含块(块元素)
包含块是视窗本身。
可设置top和left 移动到别的位置,原本所占的空间是否保留


position:absolote;
top:50%;
left:50%;

css隐藏/显示

通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。
还可以通过把 display 设置为 none,让生成的元素根本没有框。

  • display:none;
  • display:block;
  • display:inline-block;



CSS浮动/清除浮动

.clearfix{
}
.clearfix:after{
content: ‘.‘;
display: block;
clear: both;
height: 0;
}

 




伪元素

  • p:first-line{color:red;}
  • p:first-leter{color:red;}
  • h1:before{color:#fff;}
  • h1:after{color:#fff;}





链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

  • a:hover{};
  • a:link{};
  • a:visited{};
  • a:active{};


css伪类

  • li:first-child {text-transform:uppercase;}
  • q:lang(no){quotes: "~" "~"}


css选择器
css选择器优先级

  • id选择器
  • 类选择器
  • 标签选择器
  • 属性选择器
  • 组合选择器
  • 包含
  • 子选择器
  • 相邻兄弟选择器
  • h1 + p {margin-top:50px;}









CSS基础

标签:css选择器   over   浮动   块元素   外边距   text   ted   blog   first   

原文地址:http://www.cnblogs.com/alan-alan/p/7501077.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!